Pictorial mark

픽토리얼 마크

A symbol that represents the brand with a single recognizable, literal image — no lettering needed to guess what it stands for.

Also known as: Icon logoPicture mark
···
html
<div class="pm">
  <svg viewBox="0 0 24 24" width="42%" style="aspect-ratio:1">
    <path id="fillp" d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="var(--accent)"/>
    <path id="plane" d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="none" stroke="var(--fg)"
      stroke-width="1.3" stroke-linejoin="round" stroke-linecap="round"/>
  </svg>
  <p class="cap">Fleetwing</p>
</div>
css
.pm{display:flex;flex-direction:column;align-items:center;gap:8px}
.cap{margin:0;font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}
#plane{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 3.2s ease-in-out infinite}
#fillp{opacity:0;animation:fillIn 3.2s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:70}40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:70}}
@keyframes fillIn{0%,38%{opacity:0}55%,88%{opacity:1}100%{opacity:0}}

A pictorial mark draws exactly what the brand does or deals in — a bird, a leaf, an arrow — as a recognizable, literal shape, in contrast to an abstract mark that owes nothing to any real object.

Its biggest advantage is that it needs no explanation: someone seeing the brand for the first time can guess roughly what it's about just from the icon. The tradeoff is a narrower well of material to draw from — competitors in the same category tend to reach for the same objects (a coffee cup for a café, a plane for a travel agency), which makes differentiation harder.

To survive at small sizes, the silhouette has to be simplified and the stroke weight kept uniform throughout. Rather than a detailed, realistic illustration, it usually reads closer to icon-style shorthand — a few lines and shapes standing in for the whole object.

When to use

Use it to communicate what the brand does without any explanation needed. Check first that the object you've chosen isn't already the go-to icon for everyone else in your category.