Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Foundations
  2. Icons

Icons

Glyph catalog and usage notes for the design-system Icon primitive.

Icons ship as generated Glyph constants, one module per name under @prepared911/ui/icons/<kebab-name>. Render them with Icon from @prepared911/ui/icon so size uses IconSize tokens, color uses Text's Foreground enum (or inherits the surrounding text color), and accessibility follows the decorative versus labelled contract. Publishing the Figma icon library, or using Export Icons on the docs Figma integration page, writes a public Blob manifest and dispatches update-icons in prepared911/axon911-frontend. That workflow runs icons:export, refreshes the committed snapshot and glyph modules, and opens a [BUMP] pull request with a @prepared911/ui patch changeset. Never hand-edit generated glyph files.
Search
Usage principles
  • Match foreground to the semantic role, or wrap the icon in Text with the right foreground so Foreground.Inherit (the default) picks up the run's color.
  • Size is IconSize only (ExtraSmall 12px, Small 16px, Medium 20px default, Large 24px); there is no free-form fontSize.
  • Omit label when visible text or the parent control already conveys meaning; pass label only when the icon alone carries information (see the primitive accessibility page and Storybook LabelledVsDecorative).
Previous
Typography
Next
Spacing
On this page
Search
Usage principles