Icons

Consistent icon sizing, meaning, and accessible labelling.

Workshop1 product UI uses Tabler icons. Shared primitives may carry their existing Lucide implementation details. Keep one family within a composition and import icons from the library rather than drawing SVG paths.

Use 16px icons in standard controls, 14px in compact controls, and 12px only in very small metadata. Let the component size the icon where its API already does so.

Decorative icons use aria-hidden. An icon-only control needs an accessible name, usually an sr-only label. When an icon reinforces visible text, keep the text as the source of meaning.

<Button variant="ghost" size="icon-sm">
  <IconDots aria-hidden />
  <span className="sr-only">More invoice actions</span>
</Button>