Design Atlas
한국어
⬡ Icons & illustration

Optical Correction

옵티컬 보정

A deliberate size boost for circles and pointed shapes — because at identical height they read smaller than a square, and only overshooting the edge makes them look equal.

Also known as: OvershootOptical sizing
···
html
<div class="wrap">
  <div class="row">
    <svg viewBox="0 0 24 24" width="30%"><rect x="3" y="3" width="18" height="18" rx="2" fill="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" width="30%"><circle id="ci" cx="12" cy="12" r="9" fill="var(--fg)"/></svg>
  </div>
  <div class="label" id="lbl">same math size — circle looks smaller</div>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.row{display:flex;gap:clamp(16px,6vmin,40px);align-items:center}
#ci{transform-box:fill-box;transform-origin:center;transition:transform .5s ease}
.label{font-size:11px;color:var(--muted);text-align:center;max-width:85%;line-height:1.5}
js
const ci = document.getElementById('ci');
const lbl = document.getElementById('lbl');
let corrected = false;
function paint() {
  ci.style.transform = corrected ? 'scale(1.09)' : 'scale(1)';
  lbl.textContent = corrected ? 'optically corrected \u2014 circle overshoots ~9%' : 'same math size \u2014 circle looks smaller';
}
paint();
setInterval(() => { corrected = !corrected; paint(); }, 1600);

Draw a square and a circle at the exact same height, put them side by side, and the circle will look smaller even though the numbers match. The eye reads a rounded outline as less "filled" than a square's four solid corners. Pointed shapes — triangles, diamonds — suffer even more from this illusion and need to run noticeably larger than a square to read as equal weight.

So curved and pointed shapes — circles, triangles, diamonds — get drawn to slightly overshoot the square keyline. A common value is 4–10% past the square's edge in every direction: measured with a ruler it's bigger, but to the eye it reads as the same size as the rest of the set. Both Apple's and Google's icon guidelines spell out this correction explicitly.

Skip the overshoot and trust the raw numbers, and round icons — play buttons, notification dots, status indicators — end up looking undersized next to the rest of the set. Overcorrect, and now the circle looks too big and throws off the balance the other way — which is why this ultimately gets settled by eye, side by side, rather than by a fixed formula alone.

When to use

Check this whenever round or pointed shapes sit in the same set as square-based icons. Line the whole set up and match sizes by eye — that judgment overrides the raw numbers.