Icon System Consistency Across Products
Grid, stroke, and metaphor rules that keep UI recognizable at small sizes.
Nestlancer Editorial
Inconsistent icons make products feel like unrelated apps. A shared icon system defines grid, stroke, metaphor, and corner style.
Grid and stroke
- 24×24 dp base grid with 2px stroke common for Lucide-style
- Optical alignment: play and triangle icons often need visual centering tweaks
Metaphor rules
Document approved metaphors:
| Concept | Icon choice |
|---|---|
| Settings | Gear, not wrench unless maintenance |
| Delete | Trash with confirm elsewhere |
| Export | Upload arrow out of box |
Product line consistency
Marketing site, web app, and mobile share library—custom one-offs need system council approval.
Small size legibility
Test at 16px—over-detailed icons muddy. Simplify or use filled variant.
Icon systems are micro-brand—consistency signals one trustworthy product family.
Comments
Loading comments…
Related posts
Design
Brand Identity for Digital-First Products
Logo systems, voice, and visual language that survive app icons and social crops.
Design
Design Ops for Growing Product Teams
Rituals, tooling, and intake processes that keep design shipping with engineering.
Design
Inclusive Design Beyond Compliance Checklists
Cognitive accessibility, plain language, and trauma-informed patterns.
Design
Data Visualization UX for Dashboards
Chart selection, color semantics, and drill-down patterns for decision makers.