Brand Elements
Iconography and Pattern
Building a consistent icon system that extends brand identity into UI and communications
Key Insight
A brand's icon system is an extension of its visual identity — every icon carries the brand's personality through its stroke weight, corner radius, level of detail, and stylistic approach. Inconsistent iconography (mixing filled and outline, thin and thick stroke, flat and illustrated styles) fragments the visual language. A coherent icon system behaves like a typeface: every glyph shares the same underlying rules.
Key Points
- •Icon style must align with brand personality: playful brands use rounded, filled icons; precise brands use thin, geometric outlines
- •Consistency requires a style guide: fixed stroke weight, corner radius, optical size adjustments, grid
- •Icons must work at the minimum size they'll actually be used — typically 16px or 20px in UI contexts
- •Custom icon systems create stronger brand recognition than generic libraries (Material, Heroicons)
- •Pattern elements (textures, geometric motifs) can extend brand beyond logo and type into environments and packaging
Guidelines
- ✓Define 5 iconography rules before drawing: stroke weight, corner radius, fill vs. outline, level of detail, optical sizing
- ✓Draw all icons on a consistent grid (typically 24×24 or 20×20) with fixed padding
- ✓Test icons at 16px — if unreadable, simplify further
- ✗Avoid mixing icon libraries — inconsistent styles break visual coherence
- ✓Provide icons in both SVG (scalable) and optimized PNG for contexts where SVG isn't supported
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall — strengthens long-term retention