Iconography
Phosphor Icons is the official library. Yuno uses only two of the six weights: light for default outline icons, fill for active/selected states.
Weights we use
Only two weights are part of the Yuno vocabulary. Light is the default across the Dashboard; fill communicates active or selected state.
Default weight for all outline icons across the Dashboard, prototypes, and marketing.
Active state: selected nav item, badges with state, filled toggles.
Sizes
Controlled with Tailwind size-* classes, not the icon size prop.
| Class | Pixels | Preview | Use for |
|---|---|---|---|
| size-3 | 12px | Inline in labels and chips. | |
| size-3.5 | 14px | Small buttons, hints. | |
| size-4 | 16px | Default in buttons/inputs/nav items. | |
| size-5 | 20px | Card headers, action tiles. | |
| size-6 | 24px | Empty states, section headers. |
Common icons
The most used at Yuno. The full library is at phosphoricons.com.
Usage
- Import from @phosphor-icons/react/dist/ssr so it works with Server Components.
- Default weight="light". Switch to weight="fill" for active/selected states only.
- Size with Tailwind classes (size-4), not the size prop.
- When copying shadcn examples, always change weight from regular → light.
- Don't use weight='thin', 'regular', 'bold' or 'duotone' — not part of the Yuno vocabulary.
- Don't mix libraries (Hugeicons, Lucide, Heroicons) — only Phosphor.
- Don't use Unicode arrows (→, ←) where an icon belongs.
- Don't apply hardcoded color — inherit from the container's text-*.
Not used at Yuno
Not used — too fragile at the sizes we display icons.
Not used — shadcn/Phosphor default, but too heavy against Yuno's clean type.
Not used — overloads emphasis; use fill or a Badge for state.
Not used — reserved elsewhere for illustrations, not UI.