Shadcn.io is not affiliated with official shadcn/ui
Tabs with Icons
Tabs component with Lucide React icons paired with text labels in TabsTrigger for visual category identification and improved scannability
Text-only tabs blend together—icons provide visual anchors. This React tabs component combines shadcn/ui Tabs with Lucide React icons User CreditCard Bell Settings alongside text labels. Built with icons rendering before text in each TabsTrigger and matching icons in TabsContent headers, icon-enhanced tabs create memorable visual associations—perfect for settings sections, account management, dashboard navigation, app configuration, or any interface where distinct visual icons help users quickly locate and remember which tab contains what without reading every label.
Tabs with Icons preview
Installation
Related Components
Basic Tabs
Standard tabs without icons
Vertical Tabs
Sidebar-style vertical layout
Full Width Tabs
Grid layout equal width tabs
Icon Button
Button with icon only
Accordion with Icons
Icons in accordion headers
Sidebar with Icons
Icon-based navigation
FAQ
Was this page helpful?
Sign in to leave feedback.