Iconography Systems & Optical Grids
Icons are universal visual shorthand that guide navigation, communicate system states, and reinforce brand character. A disciplined iconography system ensures uniform stroke weights, optical bounding boxes, and accessible screen reader labeling.
Obare
1. What the Guideline Is
Iconography guidelines define the visual style, optical grids, stroke weights, corner geometry, and functional usage of vector symbols across your product ecosystem.
Whether utilizing outline symbols or filled glyphs, icons must share consistent visual metaphors, geometric curves, and optical weights so no single symbol draws disproportionate visual attention.
Crucially, icons in user interfaces are functional wayfinding tools. The guideline establishes when icons should stand alone, when they require accompanying text labels, and how to ensure screen reader accessibility.
"Icons should communicate at a glance. If an icon requires explanation, it has failed its primary purpose."
- Graphic Design Maxim
2. Key Concepts
A professional icon system is governed by four core optical principles:
- The 24x24 Optical Grid
Icons are drawn on a standardized 24x24 pixel grid with a 2px interior padding boundary, allowing optical weight balance across circular, square, and rectangular glyphs.
- Consistent Stroke Weight
A uniform stroke weight (typically 1.5px or 2px) must be maintained across all outline icons, scaling proportionally with font size using currentColor.
- Corner Radius Harmony
Terminal stroke caps and interior corner angles must mirror the corner radius rules of the broader design system (e.g., rounded caps for friendly interfaces).
- Functional Accessibility
Icons that trigger actions without accompanying text must provide an explicit aria-label. Icons alongside text are marked decorative with aria-hidden='true'.
3. How to Use It
Implement icons systematically across UI surfaces:
First, maintain an authorized vector icon library (e.g., using Tabler Icons or Boxicons) to prevent conflicting visual styles or mismatched stroke weights.
Second, pair icons with concise text labels wherever space permits. Standalone icon buttons must be reserved exclusively for globally recognized universal metaphors (search, close, settings, trash).
Third, use icons purposefully to reinforce hierarchy. Never scatter icons gratuitously across every list item or menu entry, which dilutes their wayfinding value.
Strategic Takeaways
UX Impact
Accelerates interface scanning and recognition speeds by up to 40% compared to text-only menus when paired with clear descriptive labels.
Brand Perception
Infuses product surfaces with refined aesthetic charm and meticulous attention to detail.
Recommendation
Export icons as single optimized SVG components with stripped stroke/fill attributes to allow dynamic sizing and CSS styling.