Stroke Consistency

스트로크 일관성

Locking the line weight to one value across an entire icon set — mixed weights side by side read as sloppy even when each icon looks fine alone.

Also known as: Line weight consistency
···
html
<div class="wrap">
  <div class="row">
    <svg viewBox="0 0 24 24" class="ic"><circle id="a" cx="12" cy="12" r="8" fill="none" stroke="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" class="ic"><rect id="b" x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="var(--fg)"/></svg>
    <svg viewBox="0 0 24 24" class="ic"><path id="c" d="M6 12l4 4 8-9" fill="none" stroke="var(--fg)" stroke-linecap="round" stroke-linejoin="round"/></svg>
  </div>
  <div class="label" id="lbl">mixed widths — 1 / 3 / 1.6px</div>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.row{display:flex;gap:clamp(14px,5vmin,30px)}
.ic{width:clamp(30px,10vmin,46px)}
#a,#b,#c{transition:stroke-width .5s}
.label{font-size:11px;color:var(--muted)}
js
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const lbl = document.getElementById('lbl');
let uniform = false;
function paint() {
  if (uniform) {
    a.style.strokeWidth = '2'; b.style.strokeWidth = '2'; c.style.strokeWidth = '2';
    lbl.textContent = 'consistent \u2014 2px everywhere';
  } else {
    a.style.strokeWidth = '1'; b.style.strokeWidth = '3'; c.style.strokeWidth = '1.6';
    lbl.textContent = 'mixed widths \u2014 1 / 3 / 1.6px';
  }
}
paint();
setInterval(() => { uniform = !uniform; paint(); }, 1600);

Stroke consistency means locking the line weight to one value across an entire icon set. Looked at alone, a 1px stroke and a 3px stroke both look perfectly fine — but the moment icons of different weights sit side by side, the whole set reads as sloppy, because the brain uses weight mismatch as its first signal for "does this belong to the same system."

The usual move is to pick one baseline — 1.5px or 2px at a 24px grid — for the whole team and inherit it on every new icon added. When an icon is resized (say, scaling a 24px icon down to 16px), the stroke usually doesn't shrink proportionally — it holds a minimum legible thickness (often 1px or more), because a strictly proportional shrink makes the line disappear at small sizes.

The place this breaks most often is mixing in icons from outside the set — an open-source icon pack, or an icon another designer drew separately. Odds are good that source uses a different stroke baseline, so before mixing it in, it needs to be redrawn to match the set's weight.

When to use

Fix a shared baseline stroke weight (usually 1.5px or 2px) for the whole team, and redraw any icon brought in from outside to match it before mixing it into the set. When scaling down, prioritize a minimum legible thickness over strict proportional shrinking.