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.
Object icons
A row that asks someone to act (Waiting for you, an agent's decision) wears the icon of what it acts on, never of its state. One icon per object, the same on every screen, in the row's one colour. Every name here is also in the design system's Icon set.
| The row is about | Icon | Why |
|---|---|---|
| A refund | ArrowUUpLeft | The Refunded badge's arrow: the same mark the payments list shows. |
| A payment held for review | Pause | The paused state's bars: on hold until someone decides. |
| A payment still to capture | Money | Money not yet collected. |
| A payment to retry | ArrowClockwise | Try again. |
| A routing change or a webhook | Gear | Settings, not a payment. |
| A payment to flag | Flag | Marked for attention. |
| A duplicate | Copy | One payment that looks like another. |
- Pick the icon from the object the row acts on: a refund, a held payment, a payment to capture.
- Draw every row's icon in the same colour. The title already names the state.
- When an agent proposes the action, keep the object's icon and name the agent in the line under the title.
- Don't colour the icons by state: three state colours down a list read as a traffic light.
- Don't use Eye for a held payment (it reads as view or show password), an empty Circle (a placeholder), or ArrowCircleLeft for a refund (go back).
- Don't give every agent row the same Robot: it says who proposes, not what.
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.