Icon
Usage
Icons help dispatchers scan dense screens and mechanics recognise actions at arm's length. They support text; they rarely replace it. Fleetline uses one outline set (Lucide-style, ISC licence) at a single stroke weight, delivered as an SVG sprite — never an icon font.
- Decorative — next to text that already says the same thing ("Calendar" icon + "Due 12 Nov"). Hidden from assistive tech.
- Labelled — the icon alone carries meaning (a status glyph in a table cell). Give it a name.
- An icon that triggers an action is an icon button, not an icon: it needs a
<button>and anaria-label. - Status is never icon or color alone: pair "Overdue" text with the alert icon.
Anatomy
- Sprite symbol —
<symbol id="icon-NAME" viewBox="0 0 24 24">, stroke =currentColor - Instance —
<svg class="icon"><use href="#icon-NAME"></use></svg> - Size —
.icon--sm | --md | --lg(16 / 20 / 24px) - Accessible name (labelled only) —
role="img"+aria-label
Examples
Icon
Due 12 Nov
Truck HT-507
Van KX-219
Pickup PU-118
Next vehicle
<!-- Decorative: the text says it all -->
<span class="icon-text">
<svg class="icon icon--sm" aria-hidden="true" focusable="false"><use href="#icon-calendar"></use></svg>Due 12 Nov
</span>
<!-- Labelled: the icon carries meaning on its own -->
<svg class="icon" role="img" aria-label="Service overdue" focusable="false"><use href="#icon-alert-circle"></use></svg>
<!-- Directional -->
<svg class="icon icon--mirror-rtl" aria-hidden="true" focusable="false"><use href="#icon-arrow-right"></use></svg>API
| Hook | Values | Purpose |
|---|---|---|
.icon | block class | Sizes the SVG, inherits currentColor, sets stroke weight |
.icon--sm | --md | --lg | modifier class | 16 / 20 (default) / 24px |
.icon--mirror-rtl | modifier class | Flips directional glyphs in right-to-left pages |
.icon-text | class | Aligns an icon with adjacent text |
aria-hidden="true" focusable="false" | attributes | Decorative icon |
role="img" aria-label="…" | attributes | Labelled icon |
Do and don't
Accessibility
- Decorative:
aria-hidden="true"removes the icon from the accessibility tree;focusable="false"stops legacy browsers from adding an SVG tab stop. - Labelled:
role="img"+aria-label. Write what it means ("Service overdue"), not what it shows ("Red circle"). - Icons inherit text color, so they meet the same contrast as their text; standalone meaningful icons need 3:1 against their background.
- Forced colors: icons render in
CanvasText(or the system color of their control). - No keyboard interaction. Interactive icons are icon buttons.
Tokens
| Custom property | Purpose |
|---|---|
--icon-size-sm | -md | -lg | 16 / 20 / 24px |
--icon-stroke | Stroke width (1.5) for the whole set |
--space-1-5 | Gap between icon and text |