Optical Alignment

Flexbox centers bounding boxes, not shapes. A play triangle sits inside a square box, but its visual weight leans left — so a geometrically centered play button always looks like it's drifting toward the edge.

The fix is embarrassingly manual: nudge it until it looks right.

optical shiftguides

Geometrically the triangle is centered, but its visual mass sits left of its bounding box. Nudging it ~3px right makes it look centered.

The pattern

Any asymmetric glyph needs this treatment:

• Play icons — shift right ~8% of their size.
• Chevrons and arrows — shift toward their point.
• Text next to icons — cap height and icon center rarely agree; align by eye, then encode the nudge.

.play-icon {
  transform: translateX(3px); /* optically centered */
}

Trust your eyes

Every serious icon set draws glyphs inside their boxes with these compensations baked in — circles overshoot the grid slightly, triangles sit off-center. When the tool says "aligned" and your eye says "off," the eye is the one your users share.