Why one logo file is no longer enough
A modern brand appears in a 16-pixel browser tab, a phone home screen, a LinkedIn avatar, an email footer and a shop sign, and no single file works well at all five sizes. A logo system solves this by giving the brand a small, planned set of versions, each with a clear job.
This guide breaks the system into its three working parts: the primary mark, the lockups built around it, and the responsive variants that let it shrink without falling apart. It ends with a platform-by-platform size guide, file naming advice and a checklist you can use to audit your own kit.
What a logo system is
A logo system is a defined family of logo versions plus the rules for choosing between them. It has three layers, and each one answers a different question.
The rules matter as much as the files. A system tells a designer which version to use, how much empty space to leave around it and which colours it may appear in, so that two people working in different cities produce the same brand.
| Layer | Question it answers | Example |
|---|---|---|
| Primary mark | What is the brand’s single most recognisable identity? | The full symbol and wordmark together |
| Lockups | How do the parts combine for different shapes of space? | Horizontal, stacked, wordmark only |
| Responsive variants | What survives when the space gets very small? | Compact logo, icon, single-colour micro mark |
The primary mark
The primary mark is the master version of the logo, and every other version is derived from it. It should be the one you show first in brand guidelines and the one used where the brand is introduced, such as a website header, a pitch deck cover or a contract.
A strong primary mark does four things:
- It is recognisable in a single colour, so it survives fax-style black-and-white printing and embossing.
- It is distinct in silhouette, meaning you can tell it apart from competitors at a glance.
- It has a defined clear space, usually measured in a unit taken from the logo itself, such as the height of a capital letter, so nothing crowds it.
- It has a stated minimum size below which the detail fails.
Treat any numbers for clear space and minimum size as starting points to test with your own artwork. A common digital minimum for a full logo is about 120 pixels wide, and a common print minimum is about 25 millimetres wide, but a fine-lined mark may need more.
Lockups: fitting the mark to the space
A lockup is a fixed arrangement of logo parts, such as symbol, wordmark and tagline. Lockups exist because spaces come in different shapes, and stretching or re-spacing the primary mark by hand is how brands drift off-model.
| Lockup | Best for | Watch out for |
|---|---|---|
| Horizontal | Website headers, email signatures, letterheads | Wordmark becoming too small beside a tall symbol |
| Stacked (vertical) | Square spaces, posters, packaging, social posts | Wasted width in wide banners |
| Wordmark only | Footers, partner strips, tight navigation bars | Losing the symbol’s recognition |
| Symbol only | Avatars, app icons, stamps, favicons | Use only once the symbol is known on its own |
| With tagline | Campaigns, signage, brochures | Tagline becomes unreadable when scaled down, so drop it below a set size |
Lock each arrangement as a single artwork file. Designers should choose a lockup, never rebuild one.
Responsive logo variants: simplifying as space shrinks
A responsive logo works like responsive web design: as the available space gets smaller, the logo drops detail in planned steps instead of just scaling down. Each step is a separate, hand-tuned file.
| Variant | Typical width | What changes |
|---|---|---|
| Full | Above about 200 px | Symbol, wordmark and optional tagline |
| Compact | About 120 to 200 px | Tagline removed, spacing tightened |
| Icon | About 32 to 120 px | Symbol or monogram only, thicker strokes |
| Micro | Below 32 px | Simplified shape in one colour, no fine detail |
The widths above are a starting scale. Set your own breakpoints by reducing the artwork until the first detail disappears, then make the next variant at that point.
Two habits keep the steps consistent. First, keep the same core shape and colour across variants so people still recognise one brand. Second, adjust optical details, such as heavier lines and wider letter spacing, at small sizes because plain scaling makes thin strokes vanish.
Which version goes where: a multi-platform guide
Use this table to assign a variant to each place the brand appears. The sizes are common starting points, so check each platform’s current specifications before you export.
| Placement | Variant | Typical export size | Format |
|---|---|---|---|
| Browser tab (favicon) | Micro | 32 x 32 px, plus 16 x 16 px | SVG or ICO |
| iPhone home screen | Icon | 180 x 180 px | PNG |
| Android and web app icon | Icon | 192 x 192 and 512 x 512 px | PNG |
| Social avatar (cropped to a circle) | Icon | At least 400 x 400 px, mark centred | PNG |
| Website header | Horizontal full or compact | Scales with layout | SVG |
| Email signature | Horizontal compact | About 200 px wide, exported at 2x | PNG |
| Link preview image | Stacked full on a plain background | 1200 x 630 px | PNG or JPG |
| Letterhead and print | Horizontal full | Vector, no fixed size | PDF or EPS |
| Signage and vehicles | Stacked or horizontal full | Vector, no fixed size | PDF or EPS |
For avatars, leave about 15 percent padding inside the artwork so the circular crop does not cut into the mark.
Colour, file formats and naming
Provide every lockup in four colour treatments so a designer never has to recolour artwork:
- Full colour, for white and light backgrounds.
- Single dark colour, for light backgrounds when colour printing is limited.
- Single white (reversed), for dark backgrounds and photos.
- Greyscale, for documents printed in black and white.
Supply vector files (SVG, PDF or EPS) as the masters and transparent PNGs for places that need a raster image. Avoid JPG for logos because it cannot hold transparency and leaves a white box on coloured backgrounds.
Name files so the contents are clear without opening them. A pattern that works is brand_lockup_variant_colour.ext, for example acme_horizontal_full_white.svg or acme_symbol_icon_colour.png. Put the whole kit in one shared folder and retire old versions instead of keeping them beside the new ones.
Common mistakes and a logo system checklist
Most logo problems come from a few repeated habits: stretching or squeezing the mark to fit a space, recolouring it ad hoc, adding shadows or effects, placing it on a busy photo with no contrast, ignoring clear space, and shrinking a tagline until it cannot be read.
Use this checklist to audit a kit before you hand it over:
- A primary mark exists with documented clear space and minimum size.
- Horizontal and stacked lockups are saved as finished files.
- A symbol-only version works at avatar and app-icon size.
- A micro version holds up at 16 to 32 pixels.
- Full colour, dark, white and greyscale versions are all supplied.
- Vector masters and transparent PNGs are included.
- Files follow one naming pattern and sit in one shared folder.
- Each platform in the guide above has a named variant assigned.
Frequently asked questions
What is the difference between a logo and a logo system? A logo is one piece of artwork. A logo system is the full set of versions, such as lockups and responsive variants, with the rules for using each.
What is a logo lockup? A lockup is a fixed arrangement of logo elements, such as a symbol beside a wordmark or a wordmark with a tagline, saved as one file so it is never rebuilt by hand.
How many logo variations does a brand need? Most brands need at least a horizontal lockup, a stacked lockup, a symbol-only icon and a micro version, each in full colour, one colour and reversed.
What is a responsive logo? A responsive logo is a set of versions that drop detail in planned steps as the available space shrinks, so the brand stays readable from a billboard to a favicon.
Conclusion
A modern logo is a small, well-organised family: one primary mark, lockups for different shapes of space, and responsive variants for the smallest places it appears. Build the kit once, document the rules, and every platform gets a version designed for it.