Iconography

4.4.1Definition

An icon system is a consistent set of small, simplified visual symbols representing actions or concepts, sharing a uniform stroke width, corner radius, and grid size across the entire set.

4.4.2Why It Exists

Icons exist to communicate faster than text and to save space in dense interfaces — but only when their meaning is immediately legible and their style is internally consistent. A mismatched icon set (mixing filled and outlined styles, inconsistent stroke weights) reads as visually sloppy even if each individual icon is well-drawn.

4.4.3Common Mistakes

• Mixing icon sets from different libraries with different stroke weights and grid conventions within the same product.
• Using icons without text labels for anything beyond a small set of near-universally recognized symbols (search, close, menu) — ambiguous icons alone create real usability failures.
• Using emoji as functional icons in place of a proper icon set, which renders inconsistently across platforms and carries unpredictable connotations.

4.4.4Best Practices

• Standardize on one icon library/style for an entire product; never mix sets.
• Pair unfamiliar icons with a visible text label rather than relying on the icon alone.
• Keep a consistent icon grid size (e.g., 24×24px) so all icons align visually at a shared scale.