Design Atlas
한국어
✎ Graphic, brand & print

Logo lockup

로고 락업

A fixed pairing of symbol and wordmark with set spacing and proportions — used as one unit even when the arrangement changes from horizontal to stacked.

Also known as: LockupCombination mark
···
html
<div class="lockup" id="lockup">
  <div class="mark">◆</div>
  <div class="word">Halcyon</div>
</div>
css
.lockup{display:flex;align-items:center;gap:12px;transition:opacity .25s,transform .25s}
.lockup.stacked{flex-direction:column;gap:6px}
.lockup.fade{opacity:0;transform:scale(.94)}
.mark{color:var(--accent);font-size:clamp(24px,8vmin,36px);line-height:1}
.word{font-size:clamp(18px,6vmin,28px);font-weight:800;letter-spacing:-.01em;color:var(--fg)}
js
const el = document.getElementById('lockup');
let stacked = false;
setInterval(() => {
  el.classList.add('fade');
  setTimeout(() => {
    stacked = !stacked;
    el.classList.toggle('stacked', stacked);
    el.classList.remove('fade');
  }, 260);
}, 2000);

A logo lockup is a fixed pairing of symbol and wordmark, with the spacing between them and their relative size locked in place. Gluing the two together doesn't mean they can be rearranged freely — only the pre-defined variants, typically horizontal (symbol beside the wordmark) and stacked (symbol above the wordmark), count as official versions.

The horizontal lockup suits wide banners; the stacked one fits square-ish spaces like an Instagram profile photo or an app splash screen. Both variants have the gap between symbol and wordmark, and their height ratio, fixed as exact values, so any designer placing it gets the identical result.

What's off-limits is inventing a third arrangement on the fly, or pulling the symbol and wordmark apart to recombine them with something else. Standard practice is to lay out every approved lockup variant and its minimum size in a table inside the brand guidelines document.

When to use

Use it when symbol and wordmark travel together and the space dictates which pre-approved variant — horizontal or stacked — fits. Never improvise a new arrangement on the spot.