Pictogram

픽토그램

A symbol that carries its meaning entirely through the image, with no text needed — airport and facility signage is the classic case.

Also known as: Wayfinding iconSignage symbol
···
html
<div class="row">
  <div class="tile" style="background:#2e7d46">
    <svg viewBox="0 0 24 24" width="60%"><path d="M5 19l1.2-7.5-2.2-2 1.4-1.4 3.1 2 3.1-2 1.4 1.4-2.2 2L14 19h-2l-1.5-6-1.5 6Z" fill="#fff"/><circle cx="9" cy="5" r="2.1" fill="#fff"/><path d="M14 6h5v13h-5M17 12h4" stroke="#fff" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg>
  </div>
  <div class="tile" style="background:#1e293b">
    <svg viewBox="0 0 24 24" width="55%"><path d="M8.5 20l1.2-7.5-2.2-2 1.4-1.4 3.1 2 3.1-2 1.4 1.4-2.2 2L15.5 20h-2l-1.5-6-1.5 6Z" fill="#fff"/><circle cx="12" cy="5" r="2.2" fill="#fff"/></svg>
  </div>
  <div class="tile" style="background:#334155">
    <svg viewBox="0 0 24 24" width="60%"><path d="M3 20v-3h3v-3h3v-3h3v-3h3v-3h6" fill="none" stroke="#fff" stroke-width="1.8" stroke-linejoin="round"/></svg>
  </div>
</div>
css
.row{display:flex;gap:clamp(8px,3vmin,16px)}
.tile{width:clamp(46px,16vmin,72px);aspect-ratio:1;border-radius:6px;display:grid;place-items:center;animation:glow 3s ease-in-out infinite}
.tile:nth-child(2){animation-delay:1s}
.tile:nth-child(3){animation-delay:2s}
@keyframes glow{0%,66%,100%{box-shadow:0 0 0 0 transparent}83%{box-shadow:0 0 0 4px var(--accent)}}

A pictogram carries its meaning entirely in the image, with no text needed. Airport signs for restrooms, exits, and stairs are the classic case — they're drawn on the assumption that someone who doesn't share the local language, can't read, or is rushing past still needs to get it in half a second. The whole discipline is about stripping detail down to a single silhouette that still reads.

That means a pictogram matters less for personal style and more for matching the shape people already carry in their heads. A running figure has to keep roughly the same pose (limbs thrown wide, a recognizable silhouette) to read as "exit" — get creative with it and it stops being legible. That's why international standards like ISO 7001 fix the exact shapes, and most pictograms just follow them with minimal adjustment.

Unlike ordinary UI icons, pictograms come with real constraints on branding and color — safety and evacuation pictograms have their background colors standardized too (green for escape routes, red for prohibition), and changing those arbitrarily isn't a style choice, it's a safety risk.

When to use

Use it for safety, evacuation, and facility signage that has to be understood instantly regardless of language. Following the already-established standard shape is safer than reinterpreting it creatively.