What is a logo variation?

A logo variation is an official version of the same identity designed for a specific context. It does not change the brand idea. It changes the arrangement of elements so the logo can fit a wide, square, narrow, dark, light, large or tiny space. Designers often use the word lockup for the fixed arrangement of a symbol, wordmark and sometimes a tagline.

Current brand guidelines increasingly describe logos as systems rather than single images. Responsive.io, for instance, documents a full logo, icon use, light and dark versions, one-colour versions, horizontal and vertical lockups, plus clear space. Akrivi defines a lockup as a fixed arrangement of brand elements and stresses that balance, spacing and scaling protect consistency and readability. The practical lesson is simple: a logo should be designed for real production, not only for a presentation slide.

Many businesses discover the problem late. The logo looks good on a proposal, then becomes too long for a profile picture, too detailed for a favicon, too colourful for embroidery or too low in contrast on a dark background. A variation system prevents those emergency edits. Instead of stretching or cropping the main file, each team member can select the version intended for the situation.

The essential logo versions

1. Horizontal logo

The horizontal version is often the primary version for websites, estimates, email signatures, slide decks and headers. It lives in a wide, shallow area. When the logo combines a symbol and a name, the symbol is usually placed beside the wordmark. This version must stay readable at a small height, because a navigation bar may display it at only a few dozen pixels tall.

2. Vertical or stacked logo

The vertical version places the elements in a more compact arrangement, often close to a square. It is useful for document covers, posters, stickers, packaging, signage panels and centred layouts. It should not be created by randomly breaking the horizontal logo. Spacing, optical alignment and the relationship between icon and type need deliberate adjustment.

3. Icon or symbol alone

The icon is used for favicons, app-like tiles, social avatars, small badges and branded touchpoints where the full name would be illegible. It must remain recognisable without the wordmark. For a new company, the icon should be introduced carefully: use it in small spaces, but keep the complete logo for high-visibility contexts until recognition grows. Our mobile-first logo guide explores this small-screen challenge in detail.

4. Wordmark alone

The wordmark is the typographic expression of the name. It can be useful when the symbol adds too much visual noise, for example in a partner list, a footer, a contract cover or a simple document header. A strong wordmark also helps when the brand name itself carries most of the recognition.

5. One-colour and reversed versions

A serious logo system includes at least a black version, a white version and sometimes a single brand-colour version. This is the stress test for versatility. If a mark only works with gradients, transparency or tiny colour details, it will struggle on stamps, embroidery, laser cutting, photocopies and low-cost print. One-colour versions do not make the identity boring; they make it usable.

Which version should you use on each support?

Start with the shape of the available space. A website header, email signature or banner usually needs the horizontal version. A social profile picture, favicon, label or square card often needs the icon or stacked version. Signage can require both: horizontal for a long storefront, vertical for a narrow panel or event stand.

Then consider reading distance. A mobile logo must be recognised instantly. A business card can allow more detail, but not so much that contrast disappears. Textile, packaging and promotional objects are less tolerant: thin lines, tiny text, transparency and subtle gradients can fail in production. Our article on logo files for print materials explains why production constraints affect file choice and artwork preparation.

Background colour is another decision. A version designed for a white background may vanish on photography. A white version may work beautifully on a dark blue panel but become invisible on pale grey. A useful mini brand guide should therefore show approved usage on light backgrounds, dark backgrounds and, when relevant, images.

Finally, remember automatic cropping. Platforms may crop avatars into circles, rounded squares or safe areas that are smaller than the uploaded image. If the icon touches the edge, part of it may disappear. Good exports include breathing room around the symbol instead of placing it flush against the PNG border.

Rules that keep the identity coherent

More versions should not mean more logos. Coherence comes from stable shapes, type, colour and proportion. The symbol should not be redrawn from one version to another. The typography should keep the same personality. Official colours should remain consistent except in planned monochrome versions. Spacing should follow a visible logic.

Clear space is one of the most useful rules. It defines the minimum area around the logo so text, photos or page edges do not crowd it. Many brand guides use an internal unit such as the height of a letter, the width of the icon or part of the symbol. The exact unit matters less than writing it down and applying it across versions.

Minimum size is equally important. A mark may look elegant on a large mockup and fail at 18 pixels high. Define a minimum digital size and a minimum print size. When the full version becomes unreadable, switch to the icon or simplified version instead of forcing the primary logo into a space it cannot handle.

Also document what is not allowed. Do not stretch the logo. Do not rotate it. Do not add shadows or outlines. Do not invent a new colour. Do not move the text by hand. These restrictions are not bureaucratic; they protect the brand from slow erosion across many small documents.

What deliverables should you request?

Ask for an organised kit, not a folder full of mysterious files. A practical set can include: horizontal logo in SVG, vector PDF and transparent PNG; vertical logo in the same formats; icon alone in SVG and PNG; black and white versions; favicon and social avatar exports; a short PDF guide with usage rules. File names should be explicit, such as brand-logo-horizontal-colour.svg or brand-icon-white.png.

Vector files should be the master source for the important versions. SVG works well for web use. PDF or AI can support print and production workflows. PNG files are useful for daily work, but they do not replace vector artwork. If you need a broader context, our PNG, SVG and AI format guide explains the difference.

When briefing Wilogo, list the places where the logo will appear: website, social networks, invoices, signage, vehicle marking, packaging, textile, marketplace, app or presentation templates. The clearer the usage context, the more useful the variation system will be. You can start here: create a logo brief on Wilogo.

Checklist before approving your logo variations

• The horizontal version stays readable in a website header.
• The vertical version fits a square without feeling cramped.
• The icon alone remains recognisable at small size.
• Black and white versions keep the same brand personality.
• Vector files are provided for each important version.
• Clear space and minimum sizes are documented.
• File names make the right version easy to choose.
• The variation system supports your broader responsive logo strategy.

FAQ

Do you always need both horizontal and vertical logos?

In most cases, yes. One can be primary, but the other prevents awkward stretching or cropping when the layout changes shape.

Can a young brand use the icon alone?

Yes, but carefully. Use it where space is limited, while keeping the complete logo in important contexts until the symbol becomes familiar.

How many files should a logo kit include?

A realistic kit often contains 20 to 40 files because each version exists in several formats and colours. Organisation matters more than the raw count.

Can a variation change the colours?

It can use approved monochrome or reversed colours. Random colours created for each support will quickly weaken recognition.

Which version is best for social media?

For avatars, use the icon or a simple stacked version. For banners and post visuals, the horizontal logo or wordmark may work better.