Icons
Phosphor's line set, served through the kit's icons entry. Regular at rest, duotone when active, fill only for emphasis.
Weights
Three of Phosphor's six weights are in use. Regular is the default. Duotone marks what is active or selected: in the sidebar the current page's icon turns duotone and takes the accent. Fill is for emphasis, sparingly.
Sizes
16px in controls, 18px in navigation, 20px in empty states and larger tiles. The kit's components size their icons for you, so pass the icon bare: a button's icon follows the button's size (13, 15, 16 or 18px).
In context
A 16px icon in a button and an icon button; 18px icons in the sidebar, duotone on the current page. Choose a page.
Icon-only controls need a label
An icon on its own says nothing to a screen reader. IconButton requires a label: it becomes the accessible name, and the tooltip when you wrap it in Tooltip.
- When an action is not universally understood, give it a word: a button with an icon and a label.
- Icons take the text colour. Colour them only through a component state (the active nav icon) or a status.
- No padlock or lock icons in merchant-facing UI, including for plan-gated features. Say what the plan adds instead.
- Decorative icons are hidden from assistive tech. The kit's components do this for you; on a standalone icon, add aria-hidden.
Browse the set
The icons Orbit uses, grouped by job. Search by name or by what it is for, switch the weight, and select an icon to copy its import name. Every other Phosphor icon is available from the same entry.
Commerce
Navigation
Actions
Status
In code
Import from the kit, never from Phosphor directly, so the set can be swapped for Orbit's own drawings later without touching product code.
import { PackageIcon, ReceiptIcon } from '@orbitcommerce/constellation/icons'
// Inside one of the kit's components, pass the icon bare: the component sizes it.
<Button icon={<PackageIcon />}>Add product</Button>
// On its own, set the size and weight, and hide it when it is decoration.
<ReceiptIcon size={18} weight="duotone" aria-hidden="true" />Icon props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | '1em' | Width and height. 1em follows the font size around it. |
weight | 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | 'regular' | Orbit uses regular, duotone and fill. |
color | string | 'currentColor' | Leave it: icons take the text colour. |
mirrored | boolean | false | Flips the icon horizontally, for right-to-left layouts. |
alt | string | None | Adds a title to the SVG, for the rare icon that carries meaning on its own. |