Icons
Phosphor, with a consistent weight for each use.
Bold is the functional default: buttons, menus and indicators. All six weights remain available.
Current state
Decisions that already exist and can be observed in the product.
14px in extra-small controls, 16px in buttons, 20px in navigation and 24px in content.
Regular/light/thin for detail; fill for selection; duotone for illustrations. Change weight, not stroke-width.
Icon hides decorative symbols. Icon-only action buttons need aria-label. Use /ssr on the server.
14px16px20px24px14px compact · 16px button · 20px navigation · 24px content. Phosphor Bold by default.
Current tokens
Values present today; documenting them does not make every value final.
| Token | Value | Current use |
|---|---|---|
| weight | bold | Functional default |
| size | 14 / 16 / 20 / 24px | Icon scale |
What is missing
Gaps that prevent this foundation from being a stable rule.
There are no open gaps in the current scope of this foundation.
Next decisions
Recommended order for turning findings into a stable foundation.
- 01
Try all six weights in Components → Icon.