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.
- Inline with
CoreText 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.
- 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.
SVGAsset selection and IconColor should map to semantic roles (accent for live states, error for failures). Avoid rainbow decoration without meaning.
Vector glyph sized via fontSize or sizing props per component API; pairs with adjacent text baselines.
- 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.
- Non-interactive icons do not receive focus; wrap with
Interactable or IconButton when clicking is required.
- 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.
- 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.
