Components
Icon
The curated Lucide-at-1.5px-stroke convention — import glyphs from here, never lucide-react directly.
The Armstrong Collective brand specifies no icon library, so ui-kit adopts Lucide at a 1.5px stroke as the tasteful, functional default. Icons are meant to be rare and functional — never decorative filler.
Props
Prop
Type
Implementation notes
- Color always comes from
currentColor. There's no per-icon color prop by design — an icon inherits whatever text color surrounds it (text-muted-foreground,text-destructive, etc.), which is what keeps an icon in sync with its label's state (e.g. a destructive-tinted delete icon) without a second prop to keep in sync. labeldecides accessibility, not decoration. Passinglabelmakes the glyph an accessible image (role="img", that label read aloud); omitting it marks the iconaria-hidden— correct when the icon sits beside its own text label and would otherwise be announced twice.
Do / Don't
- Do import glyphs from
@the-armstrong-collective/ui-kit(the curated set re-exported from this module), notlucide-reactdirectly — that's what keeps icon usage auditable to one intentional set rather than an unbounded library. - Don't pass
labelto an icon that already sits beside its own visible text (e.g. inside aButton) — that doubles up the announcement for screen reader users.