Optical
Compare geometric alignment with calculated optical offsets.
Type
Directional icon centering, such as a play triangle
Geometric
Optical
Corrections
transform translateX(2.4px)Shifts the icon horizontally by 5% to center its visual mass
transform translateY(-1px)Shifts the icon vertically by -2% to adjust baseline alignment
CSS output
/* Optical corrections: icon at 48px */
.icon {
transform: translateX(2.4px) translateY(-1px);
}