Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Accordion examples · Standard

Accordion with Category Icons for React

An accordion of workspace sections, each trigger led by an icon for its category, with the chevron on the right.

Framework
UI library

When sections hold different kinds of content (documents, projects, settings, people), a plain text label makes people read every row. This React accordion puts a Lucide icon before each title so the category registers at a glance. The icons come from the data, the answers line up under the titles, and the chevron that AccordionTrigger draws stays on the right. It suits dashboards, admin panels and documentation with distinct content types.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What types of icons work best for accordion sections?

Icons that name the content: FileTextIcon for documents, FolderIcon for collections, SettingsIcon for configuration, UsersIcon for people. Avoid arrows and chevrons, which read as the expand indicator.

How do I change icon colors to match section categories?

The icons use text-muted-foreground so they don't compete with the titles. To color-code categories, add a color to each item in the data and apply it to its icon, using theme tokens such as text-primary or text-destructive so the colors follow light and dark mode.

Can I use different icon sizes for emphasis?

You can, but keep one size per accordion. Every icon here is size-4, which matches the trigger's text. A bigger icon on one row makes that row taller and pushes its title out of line with the others.

Why is content indented with ps-7?

ps-7 is 28px: the 16px icon plus the 12px gap-3 between icon and title. It lines each answer up under its title rather than under the icon, so the content reads as belonging to that heading.

Can I use custom SVG icons instead of Lucide?

Yes. Each item stores its icon component in the data, so any icon component works in its place. Keep size-4, shrink-0 and aria-hidden on it so it sizes, aligns and stays silent like the Lucide ones.

How do I show a loading state for a section?

Swap that item's icon for LoaderIcon with animate-spin while its content loads, and put the loading message in AccordionContent too, since the icon is hidden from screen readers.

All 21 accordion examples