Icon Metaphor

아이콘 메타포

Borrowing the picture of an unrelated object to stand in for a new function — the floppy disk on a save button is the classic case.

Also known as: Skeuomorphic metaphorIcon convention
···
html
<div class="row">
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><path d="M5 4h11l3 3v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linejoin="round"/><rect x="8" y="4" width="7" height="5" fill="none" stroke="var(--fg)" stroke-width="1.8"/><rect x="7" y="13" width="10" height="7" fill="none" stroke="var(--fg)" stroke-width="1.8"/></svg>
    <div class="cap"><b>Save</b><span>floppy disk</span></div>
  </div>
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><rect x="3" y="6" width="18" height="13" rx="1.5" fill="none" stroke="var(--fg)" stroke-width="1.8"/><path d="M4 7l8 6 8-6" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div class="cap"><b>Mail</b><span>envelope</span></div>
  </div>
  <div class="item">
    <svg viewBox="0 0 24 24" class="ic"><path d="M5 7h14M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13" fill="none" stroke="var(--fg)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
    <div class="cap"><b>Delete</b><span>trash can</span></div>
  </div>
</div>
css
.row{display:flex;gap:clamp(14px,5vmin,32px)}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop 3.6s ease-in-out infinite}
.item:nth-child(2){animation-delay:1.2s}
.item:nth-child(3){animation-delay:2.4s}
.ic{width:clamp(26px,8vmin,40px);height:clamp(26px,8vmin,40px)}
.cap{display:flex;flex-direction:column;align-items:center;gap:1px}
.cap b{font-size:11px;color:var(--fg)}
.cap span{font-size:9px;color:var(--muted)}
@keyframes pop{0%,80%,100%{transform:translateY(0)}90%{transform:translateY(-3px)}}

An icon metaphor borrows the picture of an unrelated physical object and lets the role that object used to play stand in for a new function. The floppy disk on a save button is the textbook case — most users today have never touched a real one, and the "this shape = save" convention has stayed intact for over thirty years regardless.

Metaphors survive this long because an icon isn't really reproducing the object accurately — it's carrying the cultural meaning that object picked up over time. An envelope now means email more than it means an actual letter; a mechanical camera shutter shape means "open the phone's camera app." So the real test when picking a metaphor isn't whether the object is still in use — it's whether its silhouette is still a widely shared convention.

The trouble starts when a genuinely new concept needs a metaphor and there's no physical object to borrow — cloud sync, AI, anything abstract. There, an icon alone is often not enough to guess the meaning from, and pairing it with a short text label is the safer call.

When to use

Trust and reuse visual conventions that are already widely shared — a floppy disk for save, an envelope for mail. For abstract functions with no physical object to borrow from — cloud sync, AI — pair the icon with a text label instead of relying on it alone.