Accordion with Category Icons for Svelte

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.

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.

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.

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.

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.

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.