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 #4

Optical Centering vs. Geometric Bounding Boxes

Placing an icon inside a circular button container exposes the difference between mathematical and optical alignment:

  • Geometric Center: The exact mathematical midpoint of the icon's bounding box.
  • Optical Center: Where the icon's visual mass actually sits to the human eye.

The Play Triangle Classic Usability Defect

A right-facing play triangle has vastly more visual mass on its flat left side than its pointed right vertex. Centering it mathematically inside a circle makes it appear shifted awkwardly to the left. Designers must manually nudge the triangle rightward by 1–2px to achieve optical equilibrium.

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