React Accordion - Icon
An accordion with icon indicators next to each section title, adding visual category identification to collapsible content
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
When you've got different types of content—documents, settings, user info—plain text labels aren't enough. This React accordion adds Lucide React icons next to titles, making content categories instantly recognizable. Built with shadcn/ui and Radix UI, icons help users scan and find sections faster—perfect for dashboards, admin panels, or documentation with distinct content types.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-5.jsonRelated patterns you will also like
Standard Accordion
Basic accordion without icons
Icon with Plus Trigger
Same icon pattern with plus/minus indicators
Multi-level with Icons
Nested accordion with icon indicators
Accordion Form with Icons
Multi-step form with icon indicators per section
Accordion with Subtitle
Accordion with additional text context
Sidebar Navigation with Icons
Icon-enhanced navigation menu
Questions you might have
React Accordion - Standard with Left Plus Trigger
An accordion with left-aligned plus/minus indicators, combining bold visual affordance with action-first layout for navigation contexts
React Accordion - Icon with Plus Trigger
An accordion combining category icons with plus/minus toggle indicators for maximum visual clarity and affordance