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.

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.

Icon button for actionable icon-only controls.
Icon toggle for on/off toolbars.
SVG asset catalog references in engineering docs.

Grid / Accessibility

Icon / API and Development

On this page

Icon

Usage

Overview

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.

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.

Icon button for actionable icon-only controls.
Icon toggle for on/off toolbars.
SVG asset catalog references in engineering docs.

Grid / Accessibility

Icon / API and Development

On this page