Iconography

Iconography is the system of icons a product uses — visual style, stroke weight, grid, optical sizing and semantics — designed as a coordinated set rather than picked individually. In a design system it sits within foundations, typically expressed as an SVG icon library plus token-driven sizing and colour.

Done well, iconography acts as a second visual language: users learn the meanings, scan faster, and the brand reads consistently across thousands of screens. Done badly — mixed weights, inconsistent corner radii, off-grid alignment — icons become visual noise. Open libraries like Material Symbols, Phosphor and Lucide are good starting points; bespoke sets pay back when the brand needs distinctive personality (often the case for brand-led products).

Related: Foundations · Design tokens · Colour system