Icons

Use Heroicons as the default set. Pair viewBox to size class one-to-one — never scale.

Sizing

  • Micro · size-4 · viewBox 16

    Default for app UI — dashboards, forms, inline with text-sm.

  • Mini · size-5 · viewBox 20

    Navigation lists and marketing pages. Avoid in dense app UI.

  • Outline · size-6 · viewBox 24

    Hero illustrations and feature rows only — never inline with body copy.

Rules

  • Never scale icons. viewBox="0 0 16 16" uses size-4; 20 uses size-5; 24 uses size-6. Wrong size? Use a different icon set.
  • Never wrap icons in decorative containers (colored squares, circle backgrounds). Use the icon directly.
  • Use fill-* for filled icons and stroke-* for stroked — don't use text-* with currentColor.
  • Always add shrink-0 to icons inside flex containers; add h-lh to align with adjacent text.
  • For icon-only buttons, add a hidden 48×48 touch target via an absolute child to meet mobile tap requirements.