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

<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>

.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}

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);