Consistency Rules
Grid and Size
- Design on a consistent grid (24x24 is standard for UI)
- Maintain consistent stroke width across all icons (1.5px or 2px)
- Same corner radius across the set
- Same optical weight (a circle and a square at the same pixel size look different)
Style
Pick one and stick to it:
- Outlined — Clean, modern, works at small sizes
- Filled — Bold, high contrast, good for active states
- Duotone — Two-tone fills, distinctive, higher complexity
- Outlined + filled pair — Outlined for default, filled for active/selected
Never mix styles in the same context.
Optical Sizing
- Circle icons appear larger than square icons at the same dimensions
- Compensate: make circles slightly smaller or squares slightly larger
- Horizontal icons (arrow) appear smaller than square icons (home)