Icon Systems

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.