Optical alignment for icons

Center an icon perfectly with math and it can still look wrong — a play triangle in the middle of a circle looks shoved to the left. Optical alignment is the practice of nudging things until they look centered, which is what actually matters.

Why math lies

Our eyes judge balance by visual weight, not bounding boxes. A triangle's mass sits toward its base, so a geometrically centered play icon appears left-heavy. Shift it right a hair and it looks perfectly centered.

Common cases

• Play buttons — nudge the triangle right.
• Icons with a heavy side — shift toward the lighter side.
• Icons next to text — align to the cap height / optical center, not the exact middle.
• Plus/close icons — make strokes meet exactly to avoid a lopsided look.

How to check

Squint, or blur the icon slightly — imbalance jumps out when detail disappears. Trust your eye over the ruler.

Frequently asked questions