A few years ago, a SaaS client came to us for a vectorization project. They had a beautiful horizontal logo — wordmark on the right, icon on the left, clean and well-proportioned. On their website header it looked perfect.
Then I looked at their LinkedIn profile. The same horizontal logo, squeezed into a 400×400 circle. The icon was barely visible. The wordmark was three pixels tall and completely unreadable. Their profile looked like a grey smudge.
They'd been operating this way for two years.
This is the horizontal vs. stacked problem. It's not a design quality issue — their logo was genuinely good. It was a usage decision nobody had explained to them. And it was costing them every time a potential client looked them up on LinkedIn and saw a brand that appeared amateurish.
What Horizontal and Stacked Actually Mean
Horizontal (landscape) logo: The icon and wordmark sit side by side. Icon on the left, name on the right. Occasionally reversed. The format has a wide, low footprint.
Stacked (portrait) logo: The icon sits above the wordmark. The format is taller and more compact in width — more square or vertical in overall proportion.
Some logos also have a wordmark-only version (no icon at all) and an icon-only version (mark without the name). A complete logo system uses all of these in the appropriate contexts.
The Core Rule
Use horizontal when you have horizontal space and need to fill it. Website headers, email signatures, document headers, landscape-format print materials, presentation slides.
Use stacked when you have square or limited-width space. Social media profile images, favicons (a simplified version), product packaging, branded merchandise, square print materials, contexts where the horizontal version would shrink the wordmark to an unreadable size.
Use icon-only below a certain size. When the full logo — even the stacked version — would render the wordmark illegible, use the icon only and let brand recognition do the work. This requires that the icon has been designed to function independently.
That's the whole rule. It's not complicated. The problem is that most designers hand over the files without explaining it, most clients never ask, and the wrong version gets used everywhere.
Where Each Version Should Live
Website Header → Horizontal
The website header is almost universally horizontal — it runs the full width of the screen, and the logo sits in the top-left corner. A stacked logo here wastes horizontal space and looks pinched compared to the navigation links beside it.
Keep the horizontal version proportionally sized — about 140–180px wide on most sites. Enough to be clear, not so large it dominates the header.
Social Media Profile Image → Stacked or Icon-Only
This is where I see the most mistakes. Profile images on LinkedIn, Instagram, Facebook, and Twitter/X are all square or circular crops. A horizontal logo crammed into a circle almost always fails. The icon disappears, the name gets cut off, the whole thing reads as a visual accident.
The stacked version works here if the wordmark is large enough to read at 200×200px. If it isn't, use the icon-only. This is a non-negotiable rule — test your profile image at the actual displayed size on the platform before using it. See logo placement guide for specific platform dimensions.
Email Signature → Horizontal (Small)
Email signatures are typically 600px wide. The horizontal logo at 160–200px wide sits naturally in the signature without dominating it. A stacked logo here isn't wrong, but tends to look taller than it should in the narrow signature layout.
Printed Business Cards → Depends on the card orientation
Landscape business cards almost always use the horizontal version. Portrait cards work better with the stacked version. When in doubt: whichever version uses the space better while keeping the wordmark at a legible size.
App Icons and Favicons → Icon-Only
At 512×512 (app store) down to 16×16 (browser favicon), the full logo cannot be used. The icon-only mark is the only option. If the icon hasn't been designed to work independently at these sizes, this is a design gap that needs fixing. See logo for app store for the complete technical requirements.
Merchandise (T-shirts, Mugs, Hats) → Context-Dependent
T-shirt chest placement usually suits the horizontal or stacked version depending on the design. Cap embroidery on the front panel is typically too narrow for a horizontal logo — stacked or icon-only works better. Mug wrap printing accommodates horizontal well.
For embroidery specifically, test at actual embroidery size (typically 8–10cm wide). A wordmark that reads fine in print at 8cm may be illegible when embroidered due to thread thickness. See AI logo embroidery requirements for the technical constraints.
Documents, Proposals, Reports → Horizontal
In formal document headers (quotes, proposals, reports, agreements), the horizontal version typically anchors the top-right or top-left corner cleanly. The proportions suit a header band without stacking awkwardly.
Trade Show Banners and Signage → Depends on format
Pull-up banners (tall and narrow) suit the stacked version — horizontal logos on a tall format create a lot of blank space above and below. Wide-format backdrop banners suit the horizontal version. Check every format individually. There is more on print-specific production in logo for trade show and complete logo file handoff.
What to Do If You Only Have One Version
This is common. Especially with AI-generated logos, Canva logos, and older designs — you often have one version and it doesn't adapt well to square formats.
Short term: Scale back to icon-only for small-square applications. If the icon doesn't work at small sizes, use the first letter of the brand name in your brand typeface as a temporary icon-only version. It's not ideal, but it's better than a squashed horizontal logo.
Long term: Have both versions designed properly. When you get the logo vectorized or redesigned, specify that you need: horizontal lockup, stacked lockup, icon-only, and if the name is long, a wordmark-only version. This is the complete logo system. It's not extra — it's minimum. See responsive logo design for the full framework.
The Version Nobody Uses but Should Have: Reversed
All of the above applies equally to the reversed (white/light) version. A reversed horizontal for dark website headers. A reversed stacked for dark merchandise. A reversed icon-only for dark social media banners.
Most logos are delivered in primary (dark on light) only. The reversed version gets forgotten until the first time someone tries to put the logo on a dark background and it disappears. Build both light and dark versions of every format from the beginning. See logo for dark mode for how this works.
Only have one logo version? We can build the full set.
We deliver complete logo systems — horizontal, stacked, icon-only, and reversed versions in all production formats. Starting from your existing file or designed from scratch.
A horizontal logo has the icon and wordmark side by side in a wide, low-profile layout — ideal for website headers and landscape-format materials. A stacked logo has the icon above the wordmark in a taller, more compact layout — better for square spaces like social media profile images, merchandise, and portrait-format materials. Most professional logo systems include both versions because no single layout works well in every context.
Use the stacked version or the icon-only version for social media profile images. Profile images on LinkedIn, Instagram, Facebook, and Twitter are displayed as small squares or circles — a horizontal logo squeezed into that space will have an illegible wordmark and a tiny icon. Test your chosen version by viewing it at the actual displayed size on the platform. If the wordmark isn't clearly readable at 200×200 pixels, switch to icon-only.
Yes. A logo system that only has one version will fail in a significant number of real-world applications. The horizontal version doesn't work for profile images, small merchandise, and tall signage formats. The stacked version doesn't suit website headers, email signatures, and landscape print. Having both versions — plus icon-only and reversed versions of each — covers every context you'll encounter. It's not extra work; it's the minimum viable logo system.
Almost never. Social media profile pictures are square or circular, and horizontal logos have a wide format that doesn't fit well in that space. The wordmark shrinks to an unreadable size or gets cropped off. Use the stacked version if the wordmark reads clearly at small sizes, or use just the icon mark if it doesn't. The only exception is if your horizontal logo is very compact and the wordmark remains legible at profile image dimensions — which you must test at actual size before using it.
An icon-only version is the symbolic mark from a logo used independently without the wordmark. It's used in contexts where the full logo would be too small to read — favicons (16-32px), app icons, embossed details on products, small embroidered badges, and small social media mentions. An icon-only version only works if the icon has been designed to communicate something meaningful on its own — if your logo is purely a wordmark with no separate icon element, you would need to create one or use a stylised initial as a compact mark.
If you have vector source files (AI, SVG, EPS), a designer can create additional lockup variants from those files. If you only have a PNG or JPEG, the logo needs to be vectorized first, and the variants can be built from the clean vector. Most professional vectorization services include multiple lockups in the delivery. If you're getting your logo redesigned or cleaned up anyway, request the full system — horizontal, stacked, icon-only, and reversed versions for both — as part of the scope.
Quick Answers
Instagram crops profile images to a circle. If your logo is horizontal (wide and low), most of it gets cut off. Switch to the stacked version of your logo (icon above text) or the icon-only version. Test it by uploading to Instagram and previewing it at the actual small display size before saving — if the text isn't readable, use icon-only.
No. Stretching distorts the proportions and makes the logo look broken even to people who can't articulate why. It also signals that the business doesn't have its brand assets properly set up. The correct fix is using the stacked or icon-only variant that was designed for square contexts.
For most sites, 140–180px wide is the right range for a horizontal logo in the header. Large enough to be clearly readable, small enough that it doesn't compete with the navigation. On mobile, some sites use a smaller version — 120–140px wide — to preserve space. Height typically falls between 32px and 50px depending on the logo's proportions.
Often yes. On desktop, the horizontal lockup works in the header because there's plenty of width. On mobile, if the horizontal version shrinks the wordmark to an unreadable size, switch to the stacked version for mobile viewports. Your developer can conditionally render different versions using CSS media queries or responsive Next.js/React logic.
When a brand has strong enough recognition, the icon alone communicates the brand without the name. This is typically a choice made after the brand is well-established. For most small and medium businesses, showing the full logo (horizontal or stacked) in the navigation is the better choice — the name needs to do work. Use icon-only where there's a genuine size constraint, not as an aesthetic preference.
Use the reversed version — usually a white or light-coloured logo. Never place your standard dark logo on a dark background where it disappears. If you don't have a reversed version, that's a file gap worth fixing. The reversed version should exist in every format you have (SVG, PNG, EPS) and in both horizontal and stacked variants.