Design systemIconography
Phosphor icons, in the regular weight, sized to the text beside them.
Petavue uses Phosphor. Every icon is a React component.
import { ChartBar, Funnel, Megaphone } from "@phosphor-icons/react";
<Megaphone size={16} />Some older screens import from lucide-react. New code uses Phosphor only, so one screen never mixes two icon styles.
Size
Match the icon to the text next to it.
| Text | Icon size |
|---|---|
| 12px (buttons, labels, pills) | 14px |
| 14px (body, menu items, inputs) | 16px |
| 16px and up (titles, empty states) | 18 to 24px |
Weight
regulareverywhere by default.fillfor the active item in navigation, and for a selected toggle.boldonly for tiny glyphs that disappear at regular weight, such as a 12px check.
Colour
Icons inherit the text colour unless they mean something on their own.
| State | Colour |
|---|---|
| Resting | --color-icon-default |
| Hover or active row | --color-icon-active |
| Disabled | --color-icon-disabled |
| Selected, or part of a primary action | --color-primary-500 |
| Status | The status colour, such as --color-green |
Rules
- An icon on its own needs an accessible name:
aria-labelon the button, or a Tooltip withdescribeChild. - An icon next to a label is decoration. Leave it out of the accessible name.
- One icon per idea across the product. If Library uses
Shapes, nothing else usesShapesfor something different.