Design Atlas
한국어
⬡ Icons & illustration

Icon Grid & Safe Area

아이콘 그리드 (세이프 영역)

The rule that separates an icon’s canvas from the smaller "safe area" inside it where the artwork is actually allowed to sit.

Also known as: Safe areaLive area
···
html
<div class="wrap">
  <div class="btn">
    <svg id="icon" viewBox="0 0 24 24" width="100%" height="100%">
      <rect id="pad" x="2" y="2" width="20" height="20" rx="4" fill="none" stroke="var(--accent)" stroke-width="0.6" stroke-dasharray="2 2" opacity="0"/>
      <path d="M12 3l2.4 5.1 5.6.6-4.2 3.8 1.2 5.5L12 15.8 6.9 18l1.2-5.5L4 8.7l5.6-.6Z" fill="var(--fg)"/>
    </svg>
  </div>
  <div class="label" id="lbl">no padding — touches the tap-target edge</div>
</div>
css
.wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
.btn{width:clamp(64px,26vmin,100px);aspect-ratio:1;border-radius:18%;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
#icon{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}
#pad{transition:opacity .3s}
js
const icon = document.getElementById('icon');
const pad = document.getElementById('pad');
const lbl = document.getElementById('lbl');
let safe = false;
function paint() {
  icon.style.transform = safe ? 'scale(0.82)' : 'scale(1.12)';
  pad.style.opacity = safe ? '1' : '0';
  lbl.textContent = safe ? '2px safe padding \u2014 breathes inside the tap target' : 'no padding \u2014 touches the tap-target edge';
}
paint();
setInterval(() => { safe = !safe; paint(); }, 1700);

An icon grid separates the canvas an icon is drawn on (typically 24×24px) from the "safe area" inside it where the actual artwork is allowed to sit. Fill the canvas edge-to-edge, and the icon looks cramped the moment it's placed inside a button or tap target, with inconsistent spacing against whatever surrounds it.

The usual rule is 2px of margin on every side of a 24px canvas, leaving the actual drawing to fit inside a 20×20px area. That margin isn't decoration — it guarantees a minimum breathing room between the icon and the background of whatever button, chip or badge it sits inside. Every icon in a set has to respect the same safe area, or icons of different visual weight will look misaligned when lined up in a row.

Skip the safe area and the first thing that shows is icons feeling like different sizes even when their canvas is identical — an icon drawn with generous margin sitting next to one drawn edge-to-edge will make the second one look noticeably bulkier and tighter.

When to use

Fix the safe area before drawing the first icon, and check every new icon against that boundary as you go — this matters most for icons that sit inside buttons, chips, or badges.