Logo Sizing and Proportional Scaling for Responsive Layouts

Getting logo size right in a responsive layout comes down to one rule: let one dimension adapt to the layout and keep the aspect ratio locked. With genuine vector artwork, a logo can be displayed at almost any size without losing sharpness. The real work is preparing the file so it scales predictably, and deciding when a small screen needs a different version of the logo rather than a smaller copy of the same one.

The short answer

A logo in a responsive layout shouldn't have one fixed size. Set either the width or the height relative to the layout, cap it with a maximum, and let the other dimension follow automatically. For on-screen use, an SVG built from vector paths with a correctly set viewBox is usually the most flexible option. Brand guidelines usually define a minimum size and clear space. If the full logo would shrink below that minimum, switch to a compact variant such as a stacked lockup or a symbol.

What "logo size" actually refers to

Three different things are often called a logo's size: the artboard or canvas in the source file, the pixel dimensions of an exported image, and the size at which the logo appears on the page. Only the last one changes from screen to screen in a responsive layout. Vector artwork has no fixed pixel dimensions. Its shapes are described mathematically and redrawn at whatever size the layout requests. Raster images are a fixed grid of pixels. Enlarging one beyond its native resolution softens the edges, and shrinking it throws away detail.

Vector paths, embedded images and raster previews

Proportional scaling is only lossless when the logo is actually built from vector paths, and the file extension doesn't guarantee that. SVG, PDF, EPS and AI files can all contain embedded raster images. Some files sold or shared as vector logos are essentially a bitmap inside a vector container. Some formats also carry a raster preview that is shown by applications that can't read the vector data. Such a file can look fine as a thumbnail while hiding what it really contains.

The reliable check is to open the file in a vector editor and inspect it. Select the artwork, switch to outline or wireframe view, and see whether the shapes are editable paths or a single placed image. Zooming in heavily is a quick secondary test: vector edges stay crisp, while embedded raster content turns blurry or blocky.

Format | Typical content | Scaling behavior

SVG | Usually vector paths; can embed raster images | Scales cleanly when built from paths; well suited to web layouts

PDF, EPS, AI | Often vector; may embed raster images or include a raster preview | Common for source and print delivery; check contents in an editor

PNG | Raster with transparency support | Fixed pixel grid; export at the sizes you need

JPEG | Raster without transparency | Fixed pixel grid; compression can blur crisp logo edges, so rarely the best choice for logos

Locking the aspect ratio

Proportional scaling means width and height change by the same factor. Distorted logos almost always come from setting both dimensions independently, such as a fixed header height combined with a percentage width. Instead, constrain one dimension and leave the other on auto. Add a maximum so the logo doesn't become oversized on wide screens. CSS functions such as clamp() can let the size grow smoothly between a lower and an upper limit that you choose for your layout.

.site-logo {
  display: block;
  width: 100%;
  max-width: var(--logo-max-width); /* set for your layout */
  height: auto;
}

If the header has a fixed height, reverse the approach: set the height and leave the width on auto. Give image elements width and height attributes that match the logo's proportions, or use the CSS aspect-ratio property. This lets the browser reserve the right amount of space before the file loads, which reduces layout shift.

Preparing an SVG so it scales predictably

In an SVG, the viewBox defines the artwork's internal coordinate system. The width and height attributes only set a default display size. For responsive use, keep the viewBox and let CSS control the rendered size. Trim the viewBox to the artwork's bounds, or to the bounds plus clear space if that padding is a deliberate part of the delivery. Stray empty space inside the file makes a logo look smaller than intended and harder to align with other elements. The default preserveAspectRatio behavior keeps proportions intact. Setting preserveAspectRatio to none allows the artwork to stretch and isn't appropriate for logos.

<svg viewBox="0 0 W H" role="img" aria-labelledby="logo-title">
  <title id="logo-title">Company name</title>
  <!-- logo paths; W and H are the artwork's own dimensions -->
</svg>

By default, SVG strokes scale together with the shapes, which keeps the design proportional. The vector-effect setting non-scaling-stroke keeps line weight constant at every size, so a logo's proportions shift as it resizes. That makes it a poor fit for logo artwork. Converting strokes and live text to outlined shapes before delivery is common practice. It makes the file render the same way across applications and removes any dependency on installed fonts.

When to switch versions instead of shrinking

The limits on scaling are visual, not technical. Fine lines, small taglines, tight letter spacing and intricate marks can become illegible or visually clog at small sizes, even though the vector still renders sharply. For this reason, many identity systems include responsive variants: a full horizontal lockup, a stacked version, a wordmark on its own, and a symbol or monogram for the tightest spaces, such as compact mobile headers, favicons and app icons.

In a layout, the switch usually happens at breakpoints. The picture element can serve a different file depending on a media query. Alternatively, both versions can be included in the markup and toggled with CSS. Where the breakpoints sit depends on the layout and on the logo's own minimum size. There are no universal values.

<picture>
  <source media="(min-width: BREAKPOINT)" srcset="logo-horizontal.svg">
  <img src="logo-mark.svg" alt="Company name" width="W" height="H">
</picture>

Minimum size and clear space

Brand guidelines commonly set a minimum size, often in pixels for screens and physical units for print, plus a clear-space zone around the logo. Clear space is often expressed relative to part of the logo itself, so it scales along with the mark. These values belong to each individual identity. There is no universal minimum logo size, and none should be assumed. If no guidelines exist, test the logo at the smallest size your layout will actually produce, on real devices, and set a minimum from what remains legible. Treat that as a design decision rather than a standard.

Raster fallbacks

Some placements still require raster files, such as certain email clients, content management systems, social profiles and app store listings. Export these from the vector master at the exact sizes needed rather than resizing an existing PNG. For high-density screens, provide larger versions through srcset so the browser can pick the appropriate file. Each platform's required dimensions should come from its current documentation; they aren't covered here.

<img src="logo.png"
     srcset="logo.png 1x, logo@2x.png 2x"
     alt="Company name" width="W" height="H">

Resizing a logo you don't own

Being able to download a logo doesn't settle how you may use or change it. Brand guidelines often allow proportional resizing. Stretching, recoloring, redrawing or pulling elements out of the artwork may go against those guidelines or the owner's trademark rights. Typefaces in a logo stay subject to their own licenses, even when the lettering has been converted to outlines. Check the owner's brand guidelines or license terms before modifying or publishing third-party artwork.

Quick checklist

• Confirm the logo is built from vector paths by inspecting it in an editor, not by its extension
• Keep the SVG viewBox and trim it to the artwork or its intended clear space
• Size one dimension and leave the other on auto; add a maximum
• Never set preserveAspectRatio to none on a logo
• Outline strokes and text in the delivered artwork
• Reserve space with width and height attributes or aspect-ratio
• Swap to a compact variant before the full logo falls below its minimum size
• Export raster fallbacks from the vector master, including high-density versions
• Follow the owner's guidelines for minimum size, clear space and permitted changes

What this overview doesn't establish

This article covers general, verifiable principles of vector scaling and responsive layout. It doesn't give specific minimum sizes, breakpoint values or platform image dimensions, because no confirmed figures were available and these vary by brand and by platform. For a particular logo, the deciding sources are its brand guidelines and the documentation of wherever it will be displayed.