Optical

Perceptual corrections that make geometric layouts look visually balanced.

Type

Directional icon centering (e.g., play triangle)

Geometric
vs
Optical

Corrections

transform translateX(2.4px)

Shift directional icon right by 5% to center visual mass

transform translateY(-1px)

Shift icon up by 2% to compensate for baseline alignment

CSS Output

/* Optical corrections: icon at 48px */

.icon {
  /* Shift directional icon right by 5% to center visual mass */
  transform: translateX(2.4px);
  /* Shift icon up by 2% to compensate for baseline alignment */
  transform: translateY(-1px);
}