Home
Bookmarks
Leagues
LEARN
Courses
Career Paths
Assessments
Tutorials
Arcade
Glossary
GROW
Certifications
Log in
Glossary
Log inSign up
Courses/UX Design Foundations/Icon Terminology/
Exercise #5

Stroke Weight, Grid Systems, and Icon Scalability

To feel part of a unified family, icons in a design system must share strict structural constraints:

  • Base Grid: Typically constructed on a 24x24px or 20x20px canvas with a 2px interior padding boundary.
  • Uniform Stroke Weight: Icons must share a consistent line weight (e.g., 2px strokes with rounded terminals).
  • Style Cohesion: Never mix outlined (linear) icons with filled (solid) icons within the same navigation level, unless filled is used intentionally to denote the active/selected state.

Topics

The Semiotic Triad: Icon, Index, and Symbol
Universal vs. Ambiguous Metaphors in Interface Icons
The Icon-With-Label Usability Rule
Optical Centering vs. Geometric Bounding Boxes
Stroke Weight, Grid Systems, and Icon Scalability
Accessible Icon Implementation and ARIA Attributes
design
UX Design

From lesson

10

Icon Terminology

Level 3 · Elements of Design II

Top contributors

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

Share