Align optically

Center by eye: trim icon-side padding, nudge triangles and chevrons.

From design-motion-principles, cookbook §4 Optical alignment.

The play triangle

Turn on guides, then drag the nudge until it looks centered.

Box centeredBad
translateX(0)−2.4px
Nudged by eyeGood
translateX(2px)−0.4px
.play-icon { transform: translateX(2px); }

Icon + text buttons

Switch the icon side and adjust the trim.

Equal paddingBad
padding-inline: 16px 16px
Icon side trimmedGood
padding-inline: 12px 16px
.btn { padding-inline: 16px; }
/* The icon's box has built-in empty space and lighter ink than text,
   so trim the icon side until the content looks centered. */
.btn:has(> svg:first-child) { padding-inline-start: 12px; }
.btn:has(> svg:last-child)  { padding-inline-end: 12px; }

Chevrons in round buttons

Page through both, then zoom in.

Box centeredBad
translateX(0)±0.8px
Nudged toward the tipGood
translateX(±1px)±0.2px

.icon-button .chevron-right { transform: translateX(1px); }
.icon-button .chevron-left  { transform: translateX(-1px); }

Why it matters, pros and cons

Why it matters

The eye centers on visual mass. Triangles, chevrons and icons weigh off-center.

Pros

  • Controls read as balanced at a glance
  • One or two pixels, set once
  • Removes the unreported "something is off"

Cons

  • Offsets need re-tuning per glyph and size
  • Many icon packs already balance play glyphs
  • RTL and state swaps need their own offsets