Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/Introduction to Design Systems/Iconography Standards & System Grids/
Exercise #9

Challenge: Auditing an Inconsistent Icon Set

Review this real-world icon set audit from a fintech application:

  • Icon 1 (Search): 24 $\times$ 24px bounding box, 2px stroke, round caps.
  • Icon 2 (Bell): 18 $\times$ 22px rectangular box, 1px stroke, square caps.
  • Icon 3 (Settings): 32 $\times$ 32px box, solid black fill.
  • Icon 4 (User): Hardcoded #333333 fill with no currentColor support.

Systemic Normalization Plan:

  1. Place all icons into identical 24 $\times$ 24px square viewports.
  2. Standardize all resting strokes to 2px rounded stroke.
  3. Remove hardcoded fills and apply stroke="currentColor" fill="none".
  4. Apply optical weight compensation keylines so the Bell and Search icons have equal visual presence.

Topics

The Functional Role of Icons in Digital UI
The Icon Grid & Bounding Box Standard
Optical Weight Balance Across Geometric Shapes
Stroke vs Fill Consistency & Terminal Radii
Icon Accessibility: Decorative vs Informative
Delivery Architecture: Inline SVGs vs Icon Fonts
Color Inheritance with CSS `currentColor`
Established Metaphors: Never Reinvent the Wheel
Challenge: Auditing an Inconsistent Icon Set
design

From lesson

2

Iconography Standards & System Grids

Level 4 · Component Architecture & Visual Language

Top contributors

Community contribution details will appear here once real learner activity is available.

Share