By Mehdi HassanWhat logo variations does a brand need?
A brand needs enough logo variations to stay legible from a billboard down to a browser tab. For most startups that means four versions: the primary logo, a secondary logo in a different shape, an icon (the symbol on its own) and a wordmark (the name on its own). Each of those then needs a full-color, one-color and reversed file.
That sounds like a lot, but it's one design expressed in different shapes, not four designs. The variations exist because surfaces have different proportions: a website header is wide and short, a social avatar is a circle, a favicon is a tiny square. If you're not sure which file formats to ask for alongside these versions, start with our guide to logo file formats, which covers SVG, PNG, PDF and the rest.
Variation | What it is | Typical shape |
|---|---|---|
Primary logo | The full mark: symbol plus name, in its preferred arrangement | Horizontal |
Secondary logo | The same parts rearranged for tighter or taller spaces | Stacked or compact |
Icon or symbol | The mark without the name | Square or circle |
Wordmark | The name set in the logo's type, without the symbol | Wide, short |
Lockups | Logo combined with a tagline, product name or partner logo | Varies by use |
Primary logo vs secondary logo: what's the difference?
The primary logo is the version you use whenever there's room for it, and the secondary logo is the fallback for spaces where the primary doesn't fit. Usually the primary is horizontal, with the symbol to the left of the name, because most digital surfaces are wide. The secondary stacks the symbol above the name, or tightens the spacing, for square or tall spaces.
The rule that keeps a brand consistent is simple: always reach for the primary first, and only drop to the secondary when the primary would be too small to read. Treat them as interchangeable and you end up looking like three brands.
A secondary logo is not a second identity. It uses the same symbol, the same type and the same colors. If a designer hands you a secondary version with a different typeface or an extra graphic, that's a different logo, and it will dilute recognition. For the full list of what a finished identity package should contain, see the logo files every designer should hand over.
What is a responsive logo?
A responsive logo is a logo system that removes detail as the available space shrinks, so it stays recognizable at every size. Instead of scaling one file down until it turns to mush, you switch to a simpler version at set breakpoints: primary logo on desktop, compact version on mobile, icon alone in the tightest spots.
Think of it in four steps. At full size you show everything, including any tagline. At medium size the tagline goes. At small size the name goes and the symbol carries the brand. At the smallest size, such as a favicon, even the symbol may lose fine lines, thin strokes or secondary shapes that would blur together.
This matters because a logo is seen far more often at small sizes than large ones. Your favicon and sidebar icon get more views than the big logo on your homepage, so design them with the same care.
Which logo version goes where: header, social, favicon and product UI?
Each surface has a natural logo version, decided by its shape and size. The table below is the default set we use when we map a brand across a startup's website and product. Exceptions happen, but if you follow this, the brand will look deliberate everywhere.
Surface | Version to use | Why |
|---|---|---|
Website header, desktop | Primary, horizontal | Wide, short space with room for the full mark |
Website header, mobile | Primary or compact secondary | Less width, so tighten or drop the tagline |
Footer | Primary or wordmark, often one color | Quiet placement, should not compete with links |
Social avatar | Icon, centered with padding | Platforms crop avatars to circles |
Favicon and app icon | Simplified icon | Tiny pixel sizes erase fine detail |
Product sidebar or nav | Icon collapsed, wordmark expanded | Sidebars switch between narrow and wide states |
Login and email headers | Primary or wordmark | Moment of trust, worth the full name |
Pitch and sales decks | Primary on title slide, icon in corners | Repeating the full logo on every slide is noise |
Two surfaces trip teams up. Social platforms crop avatars to a circle, so leave generous padding around the icon. And product UI often needs both the icon and the wordmark as separate files, because a collapsible sidebar shows the icon when narrow and the wordmark when expanded. If your product has a dark theme, plan the reversed versions now; our guide to a logo on dark backgrounds covers that in detail.
What are logo lockups?
A logo lockup is a fixed arrangement of your logo with something else, such as a tagline, a product name or a partner's logo, with the spacing and sizing locked so nobody improvises it. Lockups are what stop every co-marketing page and conference slide from looking slightly different.
- Tagline lockup: logo plus a short line underneath or beside it, used on title slides and ads.
- Product lockup: parent logo plus a product or sub-brand name, set in a defined type style.
- Partner lockup: your logo and a partner's, separated by a divider or an x, at matched visual weight.
- Event or campaign lockup: a temporary pairing with a campaign name, retired when the campaign ends.
The part designers most often leave out is clear space: the minimum gap around the logo that nothing else can enter. Define it as a proportion of the mark (for example, the height of a letter in the name) rather than in pixels, so it scales. When your logo sits among customer logos on a website, the same thinking applies; see our take on trusted-by logo walls for how to size a row of marks fairly.
For example, suppose a startup's mark is a circle symbol with the name beside it
Hypothetical example: a startup's primary logo is a circular symbol to the left of a six-letter name. The secondary stacks the circle above the name for square placements. The icon is the circle alone, and the favicon version thickens the inner line so it survives at tiny sizes.
The wordmark is the name alone, used in the expanded product sidebar and in the footer. A product lockup adds a product name in the brand's secondary typeface, separated by a thin vertical rule. Each of these exists as full color, black and white, which is twelve to fifteen files from one idea.
How do you create a set of logo versions?
You create logo versions by starting from the primary logo and working down in size, removing detail at each step, then exporting each in every color mode. Do it in one design file with components, so a change to the symbol updates every version at once.
Lock the primary
Finish the primary logo first. Every other version is derived from it, so changing the primary later means redoing the set.
Rearrange for the secondary
Move the symbol above the name, or tighten the spacing, to fit square and tall spaces. Keep the type and colors identical.
Isolate and simplify the icon
Pull the symbol out on its own, then make a small-size version with thicker strokes and fewer details for the favicon and app icon.
Set the wordmark
Export the name alone, with the same letterspacing as in the primary logo.
Make the color versions
For each version, produce full color, one color (black) and reversed (white). Check the reversed files on your actual dark backgrounds.
Write the rules
Document clear space, minimum sizes and which version goes where, in one page of your brand guidelines.
If you build the set in Figma, make each version a component and use auto layout in Figma for lockups, so spacing stays locked as text changes. Export SVG for the web and keep a vector version of your logo as the master; never rebuild variations from a PNG.
What mistakes do teams make with logo variations?
The most common mistake is having too few versions and stretching the primary logo to fit everywhere. The second is having too many, with slightly different variations that nobody can tell apart. A tight, well-documented set beats both.
- No reversed versions, so someone inverts the colors by hand and gets the brand color wrong.
- Variations with different typefaces, which reads as inconsistency, not flexibility.
- No minimum size, so the wordmark ends up too small to read in email footers.
- Only raster files, which blur when a printer or a developer needs a bigger size.
If your current logo set has these gaps, it's usually a cleanup job, not a new logo. That's the kind of work we fold into a brand refresh. For the bigger picture of why the logo is only one part of a brand, see what branding actually is, and if you're starting from scratch, our guide to logo design for startups walks through the whole process.
