Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Primitives
  3. Icon
  5. Usage

Icon

Usage

Overview
Icon renders glyphs from the shared asset set at a typographic size and color token. It supports inline clarification next to labels, list leads, and status rows—everywhere dispatch surfaces need quick visual scanning without becoming clickable targets by themselves.
When to use
  • Inline with Text where the icon reinforces meaning already present in words (status + label, category + title).
  • List and table cells where density allows a small lead icon with text.
  • Map and timeline adornments where touch targets are handled by a parent hit area.
When not to use
  • Sole control for an action—use Icon button with tooltip/title and focusability.
  • Situations requiring custom SVG spriting outside the approved asset set—work with design to add tokens.
  • Replacing entire sentences—icons supplement text, especially for critical operations.
Variants
Icon selection and IconColor should map to semantic roles (accent for live states, error for failures). Avoid rainbow decoration without meaning.
Outlined and filled pairs
A state that swaps an outline for a fill uses two glyphs, not a style prop: hand-alt-outlined while off and hand-alt-filled while on (ControlIsland's raise hand). Pass each to glyph from its own subpath.
Anatomy
Vector glyph sized via fontSize or sizing props per component API; pairs with adjacent text baselines.
Content guidelines
  • Decorative icons should be marked appropriately in surrounding semantics; meaningful icons need text or title when standalone.
  • Match icon scale to the adjacent text step—dense tables use smaller icons than page headers.
Behavior and states
  • Non-interactive icons do not receive focus; wrap with Interactable or Button when clicking is required.
Best practices
  • Do pair icons with visible text in high-stakes flows (911, QA decisions).
  • Do reuse assets consistently—same concept, same glyph across modules.
  • Don’t rely on color alone—combine icon shape, text, and position.
  • Don’t crowd multiple icons in a single table cell without hierarchy.
Accessibility
  • Provide title or adjacent text when the icon conveys unique information.
  • Ensure color contrast for icons on tinted backgrounds meets WCAG for non-decorative use.
Related Components
  • Icon button for actionable icon-only controls.
  • Icon toggle for on/off toolbars.
  • SVG asset catalog references in engineering docs.
Previous
Grid / Accessibility
Next
Icon / API and Development
On this page
Overview
When to use
When not to use
Variants
Outlined and filled pairs
Anatomy
Content guidelines
Behavior and states
Best practices
Accessibility
Related Components