Logo Lockup Terms: Horizontal vs. Stacked vs. Mono vs. Knockout
Quick Answer
A logo lockup is a fixed arrangement of your logo's pieces (icon, wordmark, sometimes a tagline) treated as one unit. The four variants a working brand kit ships are: horizontal (icon left, wordmark right, used in site headers and email signatures), stacked (icon above wordmark, used in profile photos and app icons), monochrome (single solid color, for one-color print or engraving), and knockout (white or light version on a dark fill, for inverted contexts like footers, dark-mode UIs, and merch on black fabric). Missing any one of the four creates layout problems somewhere your customers will see.
Open any small-business brand guidelines doc and you will hit the word "lockup" within two pages. Designers use it constantly. Most founders never learn what it means, and end up with a logo that breaks in half the places they need it.
What a lockup is
A logo lockup is a fixed arrangement of the elements your logo is made of (icon, wordmark, sometimes a tagline) treated as one unit. You do not reposition the pieces. You do not resize them individually. You use the lockup as it was drawn.
The word matters because most logos are not one shape. They are a small system: an icon, a wordmark, and the combinations of the two. Each combination is a lockup, and you need different ones for different spaces.
The four variants you actually need
A working brand kit ships these four.
| Variant | What it looks like | Where it goes |
|---|---|---|
| Horizontal lockup | Icon on the left, wordmark on the right, baseline-aligned | Website headers, email signatures, business card fronts, document letterheads |
| Stacked lockup | Icon above the wordmark, both centered | Profile photos, social media avatars, app icons, square ad units |
| Monochrome lockup | Horizontal or stacked version in one solid color (usually black) | One-color print (invoices, low-budget signage), engraving, embossing |
| Knockout lockup | Horizontal or stacked version in white or light cream on a dark fill | Dark website footers, photo overlays, dark-mode UIs, branded merch on black fabric |
Most brand kit tools deliver all four. Some only deliver the horizontal version and call it the logo. You can derive the others manually, but if you are buying a kit, check the count.
When to use which
The horizontal lockup is your default. It fits anywhere the space is wider than it is tall: website headers, email signatures, document headers, banner ads. If you only ever use one version of your logo, this is the one.
The stacked lockup is for square space. Profile photos on every social platform are square or circular. App store listings show a square icon. Sponsorship slides often have square logo placements. Forcing a horizontal lockup into a square crops it badly, so a stacked version is the fix.
The monochrome lockup matters for two cases: print jobs that charge per color, and engraved or embossed materials that have no color at all. If you have ever ordered branded pens or stationery, you have run into a monochrome request.
The knockout lockup is what you use when the background is dark. A footer on a black website needs a white logo. A T-shirt printed on a navy fabric needs a knockout version. The common shortcut is to drop the primary navy logo onto a black footer at 40% opacity and call it done. It comes out looking like the section is broken or still loading. The fix is shipping a real knockout file in the kit. For the rendering details on monochrome and knockout specifically, see how to design a logo that works in black and white.
Clear space, in one rule
Every lockup needs clear space around it: an exclusion zone where no other element should sit. The standard rule is to use the height of the icon (or the cap-height of the wordmark, if there is no icon) as the minimum padding on all four sides.
So if your icon renders at 48px tall in the site header, leave 48px of empty space on every side of the lockup. No nav item, no tagline, nothing inside that box.
You do not need to memorize this. Most logos look fine with comfortable padding regardless. But when designers complain that a logo is "crowded" in a layout, this is the rule they are applying.
Wordmarks and signatures
The four lockup variants above are for a combination logo (icon + wordmark). Two other terms come up in brand-kit conversations.
A wordmark is the company name typeset in your brand font, with no icon. Many brands (Google, FedEx, Coca-Cola) ship a wordmark as the primary logo and have no separate icon. If your logo is pure wordmark, you still need horizontal, monochrome, and knockout variants. There is no "stacked" version of a pure wordmark.
A signature is the icon-only variant pulled out from the lockup, used in small spaces (favicons, mobile app icons, social favicons). Most brand kits ship a signature file alongside the lockups so the icon can be used at small sizes without a wordmark cramming into the same space. For the deeper breakdown of logo types, see wordmark vs lettermark vs pictorial logo. For the favicon-specific small-size case, see favicon design.
Where this breaks in real life
The most common failure is the LinkedIn company-page avatar. Square crop, horizontal lockup, the wordmark gets sliced in half because no stacked version was ever exported. Go look at yours now.
The second most common is a knockout-free kit on a dark website footer, where the primary logo gets force-recolored to white inside the CSS and comes out with the wrong stroke weights and missing counter-shapes.
If your logo project shipped without all four lockups, the project is not done. The brand guidelines generator builds the missing variants from your existing logo. If you're packaging the four files alongside the rest of the kit for someone else, the brand kit handoff post covers the ZIP layout.
Ready to create your logo?
Generate a professional SVG + PNG logo in under 30 seconds.
