Free placeholder logos

A regular challenge faced when creating logo clouds or adding customer logos to a website design is resizing the logos so they look proportionally balanced or optically aligned relative to each other.

Company logos come in all different sizes and dimensions, so simply resizing them to the same height or width doesn’t work. Here’s an example of a set of common placeholder logos set to the same height:

In this example, all of the logos are “technically” the same size at 48px, but they look unbalanced. The Asana logo, in particular, looks too big. A good way to approach this problem is to place a frame around each logo and resize the logos within each frame so they’re optically balanced:

Here’s the same set of logos, with their frames highlighted to better illustrate:

In the bottom row, the extra space in the frames allows you more freedom to shrink logos where necessary to make them more optically aligned.

That way, when these logos are exported to SVGs, the frames around each logo will be included in the SVG and these logos will continue to be optically aligned when they’re added to websites.

There’s no correct (or easy) way to do this because there are so many different logo sizes. It just comes down to whatever “looks” right, which can take practice.

How to resize logos proportionally in Figma

When adding customer logos to a website design, there are some simple steps you can take to ensure they look proportionally balanced relative to each other. As we've shown above, simply resizing them to the same height doesn’t work.

Try these steps in Figma:

1. Arrange the logos you’re resizing horizontally and add a frame around them (command ⌘ + option ⌥ + G).
2. Resize each frame to be the same height (we suggest 48px).
3. Show Figma’s rulers (shift ⇧ + R).
4. Drag rulers to the top and bottom of each frame, and also to the baseline and median line of the text in each logo (known as the logotype). This height between the baseline and the top of lowercase letters is called the x-height.
5. Resize the logos within each frame so the x-heights match as closely as possible.
6. From here, tweak the height of each logo 1px at a time until it looks “right” and optically aligned with the other logos.

It’s important to note that the text baseline doesn’t need to line up exactly. The Stripe logo in the example above has a larger x-height because it looked too small before. However, it’s a good place to start and will fix 90% of problems.

Will this technique work every time? Will Adam Sandler ever announce a sequel to the criminally underrated 1996 sports comedy film, Happy Gilmore? The answer to both questions is unfortunately “no”. There will always be weirdly proportioned logos that just don’t seem to resize easily. Amazon’s logo is a good example.

Starting with these steps should get you pretty close. Then it’s just a matter of fine-tuning the sizing until they look right.

Get the free placeholder logos Figma library

We've put together a free Figma library of fictional company logos to use as placeholders in your designs.

Every logo has been painstakingly optically sized proportionally to each other so they line up nicely in your website designs.

These placeholder logos are 100% free to use in personal and commercial projects. Publish as a library and use across all your projects:

1. Duplicate to your Figma account
2. Publish your copy as a library
3. Enable your library in your files for instant access to placeholder logos!