React Accordion - Icon with Plus Trigger
An accordion combining category icons with plus/minus toggle indicators for maximum visual clarity and affordance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Why choose between category icons and bold toggles when you can have both? This React accordion puts Lucide React icons for content type on the left and plus/minus indicators on the right. Built with shadcn/ui and Radix UI, it's the most expressive accordion pattern—users instantly know what's inside and how to interact with it. Perfect for complex interfaces with diverse content types.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-6.jsonnpx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-6.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-6.jsonbunx shadcn@latest add https://www.shadcn.io/registry/accordion-standard-6.jsonRelated patterns you will also like
Icon Accordion
Same icon pattern with chevron indicators
Standard with Plus Trigger
Plus/minus accordion without icons
Full Featured Accordion
Icons, plus/minus, and subtitles combined
Multi-level with Icons
Nested accordion with icon indicators
Accordion Form with Icons
Form sections with icon and plus/minus
Accordion with Subtitle
Accordion with additional context per item
Questions you might have
React Accordion - Icon
An accordion with icon indicators next to each section title, adding visual category identification to collapsible content
React Accordion - Full Featured
A comprehensive accordion combining icons, subtitles, and plus/minus indicators for maximum information density and visual hierarchy