Icon Tabs
Tabs that pair a small icon with each label so options read at a glance. Good for navigation menus and toolbars where space is tight and clarity matters.
Tabs that pair a small icon with each label so options read at a glance. Good for navigation menus and toolbars where space is tight and clarity matters.
Search blocks by description or jump to a page.
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.
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
After
The triggers and panels are each self-contained, so substitutions stay local:
Tip: keep labels short, one word where possible, so the icon and text fit comfortably side by side on smaller screens without wrapping.