Iconography & symbols
Line icons on currentColor, sized by token; one status glyph language; the mark.
Line style, drawn on currentColor, one stroke weight (--icon-stroke: 2), sized by the icon
tokens. Icons inherit text color, so they adapt to Day/Night and to the status -text variants
for free.
Sizes — by token
| Token | Value | Use | In code |
|---|---|---|---|
--icon-sm | 16px | Inline with body/sm text (buttons use this: [&_svg]:size-4) | size-(--icon-sm) or size-4 |
--icon-md | 20px | The default free-standing UI icon | size-(--icon-md) or size-5 |
--icon-lg | 24px | Headers, empty states, feature spots | size-(--icon-lg) or size-6 |
Two libraries
| Library | Scope | Notes |
|---|---|---|
| healthicons | Domain concepts (anatomy, conditions, care) | 1749 SVGs, vendored |
| lucide | Generic UI (search, chevrons, actions) | The everyday set; what the kit ships |
One status glyph language
Status glyphs come from one shared map — statusIcons in the package — consumed by Badge,
Banner, Field's error line, and ErrorState, so state reads as a single icon language everywhere
(never ad-hoc unicode, never a second set). The glyph is one leg of the triple encoding
(color + glyph + wording) that keeps status legible in grayscale and to color-blind eyes; it is
always aria-hidden — the words carry the meaning.
| Tone | Glyph | Rides on |
|---|---|---|
success | Check | --success / --success-text |
warning | TriangleAlert | --warning / --warning-text |
danger | OctagonAlert | --destructive / --destructive-text |
info | Info | --info / --info-text |
neutral | — (none) | plain tags carry no glyph |
import { statusIcons } from 'lumen/react';
const Icon = statusIcons[tone];
{Icon ? <Icon aria-hidden className="size-4" /> : null}The mark
The five-dot Vitruvian halo is a symbol, not an icon — it ships as
HaloMark (rest · breathe · dance) and is reserved for identity and
presence: states, brand moments, the Agent. It is never a bullet, never a spinner (loading has its
own language — the Loader). Entity-kind motifs (the "shapes of time":
point · pin · capsule · band · path) belong to the Blocks layer, not the icon set.
Rules
Never bake a color into an icon — let it inherit. Pair a status glyph with its wording. One
stroke weight per view, so icons read as one family. Decorative icons are aria-hidden; an icon
that IS the label gets aria-label instead.