Foundations · Iconography
Icons are wayfinding, not identity.
One Phosphor vocabulary, applied in context, sized on the lattice, and accountable to the people who rely on it.
List
Header · open navigation
24px · regular · aria-label on control
MagnifyingGlass
Header · search
16px · regular · visible label
ArrowRight
Button · continue
16px · bold · label carries meaning
ArrowUpRight
Footer · external link
16px · regular · destination is explicit
Phosphor set
One committed vocabulary.
A Tetrifox interface icon is a Phosphor glyph used to identify an action, state, or direction. It inherits its context; it does not decorate it.
The source brand never named an icon library. This commitment follows the dependency and contexts already present in the running book, while keeping unshipped roles visibly reserved.
In use
09Verified in the running book and chrome
- ListOpen navigationHeader.tsx · 24px · regular
- MagnifyingGlassSearchHeader.tsx · 16px · regular
- ArrowRightContinueButton.tsx · 16px · bold
- ArrowUpRightOpen externallyFooter.tsx · 16px · regular
- XDismiss navigationRail.tsx · 20px · regular
- LockMark unavailable groupsRail.tsx · 16px · regular
- CheckConfirm the disciplined exampleVoice.tsx · 16px · bold
- ArrowClockwiseAdvance a motion specimenMotionSpecimens.tsx
- ArrowCounterClockwiseReset an emphasis specimenEmphasisBench.tsx
Reserved
09Approved vocabulary without a shipped context
- PlayStart playbackReserved · labelled media controls only
- PausePause playbackReserved · labelled media controls only
- CaretRightDisclose a deeper levelReserved · no shipped context
- WarningFlag a cautionReserved · no shipped context
- InfoMark a definitionReserved · no shipped context
- GridFourReference the closed gridReserved · no shipped context
- CubeReference a moduleReserved · no shipped context
- CopyCopy a token or snippetReserved · no shipped context
- DownloadDownload an assetReserved · no shipped context
Weight & size
Calibrated to context.
Regular is the navigation default. Bold carries functional emphasis. Fill is reserved for labelled playback controls; duotone remains out. Every size sits on the 4px base.
Regular·Default for navigation and controls
The ladder
- thinDisplay only — never a control
- lightLarge, quiet specimens only
- regularDefault for navigation and controls
- boldFunctional emphasis — links and status
- fillReserved for labelled Play / Pause controls
- duotoneRuled out — two-tone ornament, off-brand
Sizes
- 16pxsize-4Inline controls · search, links, mediaverified in use
- 20pxsize-5Dense dismiss control · mobile Railverified in use
- 24pxsize-6Navigation target · Header menuverified in use
- 32pxsize-8Feature and empty statesreserved
Usage
Legible, and accountable.
Choose the role, expose the right name, inherit colour from context, and verify every meaningful glyph against the 3:1 non-text contrast bar.
context
role
accessible name
icon ink
surface
Assistive transcript
Control announced as "Search".
Choose
MagnifyingGlass · search
Size
20px · regular
Name
aria-label="Search"
Verify
--foreground on --background · 18.13:1
Choose the role. Size for context. Name the action. Verify the contrast. Then let the icon settle into the component around it.
Continue to components