Foundations

Iconography

Comitor uses Lucide Reactexclusively. The library ships consistent stroke-based icons that align with Inter's clean geometry.

Lucide-only policy

All icons across every Comitor product surface must come from lucide-react. No other icon library — no hero-icons, no font-awesome, no custom SVGs in UI copy.

The full Lucide catalogue ships ~1500 icons covering every common UI need. If an icon does not exist in Lucide, raise a design system issue before custom-drawing.

Size grid

14px

Inside buttons (sm), inline text

size-3.5

16px

Default — nav items, labels

size-4

20px

Card icons, callout icons

size-5

24px

Empty states, feature highlights

size-6

32px

Hero icons, large illustrations

size-8

Sample icons — 16px default

Search
Settings
User
Bell
ChevronDown
Plus
ArrowRight
Check
X
LoaderCircle

Stroke recommendations

Do

  • Use default stroke width (1.5) in all product UI.
  • Pair icons with a visible text label when used in navigation.
  • Use 14px icons inside buttons — never larger than 16px.

Don't

  • Do not increase stroke width — it breaks visual consistency.
  • Do not use icons as decorative filler without semantic meaning.
  • Do not mix Lucide with any other icon library on the same surface.