Design System
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.
  • label decides accessibility, not decoration. Passing label makes the glyph an accessible image (role="img", that label read aloud); omitting it marks the icon aria-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), not lucide-react directly — that's what keeps icon usage auditable to one intentional set rather than an unbounded library.
  • Don't pass label to an icon that already sits beside its own visible text (e.g. inside a Button) — that doubles up the announcement for screen reader users.

On this page