The short version
- Logo variations are different arrangements and colourings of the same logo, made so it fits every space it appears in.
- A typical set includes a primary logo, a horizontal version, a stacked version, an icon or submark, and one colour versions in black and white.
- Every variation should share the same letterforms, symbol and colours, so they read as one logo rather than several.
- The icon or submark is the version used for profile pictures, favicons and other small square spaces.
- Write down which variation goes where, so nobody has to guess or stretch the primary logo to fit.
On this page
Logo variations are the different versions of one logo, arranged and coloured to suit different spaces. Most brands need five: a primary logo, a horizontal lockup for wide spaces, a stacked version for square ones, an icon or submark for tiny spaces, and one colour versions in black and white. Built from the same parts, they let the logo look right in a banner, a profile picture and a one ink stamp without ever being stretched or squashed.
Why one logo isn't enough
A logo designed for a shop sign is usually too wide for a profile picture and too detailed for a favicon. When there's only one file, people improvise: they shrink it until it's unreadable, squash it to fit, or put it on a background where it disappears. Variations solve this in advance. You decide once how the logo adapts, and everyone follows the same answer.
The five logo variations most brands need
Use it for
What it is
Use it for
Use it for
What it is
Use it for
What it is
Use it for
Some brands add a wordmark only version, the name without the symbol, for places where the symbol would be too small to read. And a badge or emblem version can be useful for stickers and packaging seals. Neither is essential on day one.
Matching each variation to its space
The shape of the space decides the variation. Wide spaces take the horizontal lockup, square spaces take the stacked version or the icon, and anything smaller than a thumbnail gets the icon alone.
Email header 1200×600: horizontal
1200 × 600
Instagram square 1080×1080: stacked
1080 × 1080
Story 1080×1920: stacked or icon
1080 × 1920
LinkedIn banner 1584×396: horizontal
1584 × 396
In a wide email header, the name runs on one line and the space reads naturally.
In a square, the stacked arrangement fills the frame and stays large enough to read.
Colour variations: full colour, reversed and mono
Each arrangement needs colour versions too. You don't need every combination, but you do need these four, so the logo has an answer for light backgrounds, dark backgrounds and single ink printing.
On gradients and photos, the one colour white or black version is often the right choice, because a two colour logo can clash with what's behind it. Logo on a gradient background shows how to choose between them, and logo background ideas has backgrounds that suit a simple logo.
How to build a set of logo variations
- 1
Start from the primary logo in vector
Every variation is rearranged from the same master parts. Never redraw the symbol or reset the name in a different weight.
- 2
Make the horizontal and stacked lockups
Move the symbol beside or above the name. Fix the gap between them as a measurement, for example the height of the name's capital letters.
- 3
Simplify the icon
Take the symbol or initials alone, remove fine detail and thicken thin lines. It must read at very small sizes, so test it as a favicon.
- 4
Create the colour versions
Full colour, reversed, black and white for each arrangement. Check the reversed version on your darkest brand colour.
- 5
Set clear space and minimum sizes
Define the empty margin around each version and the smallest size at which it may be used, in pixels for screens and millimetres for print.
- 6
Export and name the files clearly
SVG, PDF and transparent PNG for each, named like
fern-stacked-reversed.svgso people pick the right one without opening it.
Rules that keep variations looking like one logo
Avoid
- Stretching or squashing a version to fit a space
- Redrawing the icon differently for each platform
- New colours that appear only in one variation
- Adding taglines to some versions and not others at random
- Using the primary logo where the icon belongs
Do
- Pick the variation whose shape matches the space
- One icon, used everywhere a small square is needed
- The same palette across the whole set
- Treat a tagline lockup as its own documented variation
- Respect clear space and minimum sizes
Document the set on a single page of your brand style guide: each variation, its colour versions, clear space, minimum size and where it is used. Then put the files where people actually design. In Gradiently the brand kit holds several logos side by side, so the stacked version, the icon and the reversed file are all one click away in the Studio, and the Designer can apply the kit when it lays out a design. Brand kit covers the rest of what belongs alongside them.
Questions people ask
What are logo variations?
They are alternative versions of one logo, such as horizontal, stacked, icon and one colour, made so the logo fits every space without being distorted.
How many logo variations do I need?
Most brands need about five: primary, horizontal, stacked, an icon or submark, and black and white versions. Add more only when a real use calls for it.
What is a submark logo?
A submark is a simplified, usually compact version of the logo, often initials or the symbol alone, used in small spaces like profile pictures, favicons and stickers.
What is a responsive logo?
A responsive logo is a set of variations that simplify as the space shrinks, from the full lockup on large screens to just the icon at the smallest sizes.
Which logo variation should I use for a profile picture?
Use the icon or submark, or the stacked version if it is short, on a square background. Wide horizontal logos become unreadable in a small circle.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile