About this block

Icon Tabs renders a full-width tab bar divided into three equal columns, each trigger pairing a small icon with a text label. Below the bar, the active panel appears inside a bordered, padded container that shows a heading and a short description for the selected section. The three default tabs cover Account, Password, and Settings, each with its own recognisable icon so the purpose of every option is clear before a user clicks.

The tab count, labels, icons, and panel copy are all independent. You can replace the three sections with any grouping that suits your product, swap in different icons from the same icon set, and rewrite or expand each panel without affecting the trigger layout. The grid evenly distributes however many triggers you add.

When to use

Reach for this block when you need a compact switcher that reduces reading load at a glance. On an online education platform it fits lesson detail pages where learners jump between an Overview, Resources, and Progress section without hunting for the right tab. Compared to Minimal Tabs, the icon reinforcement makes each section immediately recognisable in a visually busy interface, and compared to Vertical Tabs it keeps everything in one horizontal row so the panel area stays maximised.

A natural flow around it on a Components page:

Before

• Cards to introduce the course or module context before the learner digs into detail sections
• A short hero or title block to set the page heading

After

• Pagination if each tab panel lists items that need to be paged through
• Accordions to expand individual items inside a panel without navigating away

What you can customize

The triggers and panels are each self-contained, so substitutions stay local:

• Icons per trigger. Swap in any icon that matches the section topic so learners recognise the destination before reading the label.
• Panel content depth. Replace the short heading and description with a full form, a list, or a data table depending on what the section needs to show.
• Number of tabs. Add a fourth trigger such as Discussions or Certificates and the grid adjusts the column widths automatically.

Tip: keep labels short, one word where possible, so the icon and text fit comfortably side by side on smaller screens without wrapping.