Iconography
Iconography is where you choose the icon set your brand's components are built with, and author the rules for using icons well. Both are served to connected AI tools, so a tool reaches for the right library and uses it the way you want.
Find it under Library in the brand's sidebar.
Icon library
One library, everywhere. Pick the set this brand's components draw from:
- Lucide, 1,500+ icons, clean, consistent 24px stroke.
- Tabler Icons, 5,800+ icons, crisp 2px stroke grid.
- HugeIcons, 4,000+ icons, rounded, friendly stroke.
- Phosphor Icons, 1,200+ icons, flexible, six weights.
- Remix Icon, 2,800+ icons, neutral, fill and line.
Every card shows the same glyphs in the same order, so the sets compare like with like. Picking one saves straight away.
The icon library is one field of the brand's shadcn configuration. If the brand has no configuration yet, picking a library starts one from the default values. The rest of that configuration is edited as the brand's shadcn style, from the Foundation card at the bottom of the Styles page.
In your codebase
Under the picker, UI Rules shows what the chosen library needs installed: the install command and the import line, each with a copy button. shadcn init does this for you, so this section is for a project that is already set up.
Icon rules
Below that is the rules editor for the Iconography area, anchored to the brand like Accessibility and Brand assets. Author rules here for which library to reach for, what size an icon should be, and what an icon says to a screen reader.
Rules live in named groups and carry Guidance (Do, Don't, Caution, or Info) and Importance (Required, Recommended, or Optional). See Writing rules for how to phrase them, and Organizing rules for how to group them.
A brand created before the Iconography area joined the standard set does not have it. The picker and the codebase section still work; the rules editor says so rather than creating an area from the app.
