How to Insert a Logo into Figma — SVG, Components and Common Mistakes
You're building a mockup — the client's logo in the header, bank icons in the payment methods, a partner mark in the footer. A trivial operation, seemingly — yet this is exactly where blurry raster crops with white backgrounds sneak into files. Here's how to insert logos into Figma properly: vector, recolorable and light.
The right way is SVG: drag the file into Figma, or copy SVG code and hit Ctrl+V — the logo lands as an editable vector. PNG is for when no vector exists. Repeated logos should become components.
Method 1. Drag an SVG file
Downloaded an SVG? Drag it from the folder onto the canvas. It unfolds into a true vector object: a group of shapes, each with its own fills.
What you get:
- Lossless scaling — 16 pixels or full‑screen, equally crisp.
- Recoloring — select shapes and change the fill: a white version for a dark footer takes two seconds.
- A light file — vectors don't bloat the document the way stacks of PNGs do.
Method 2. Paste SVG code from the clipboard
Even faster: if a source offers SVG code (a "copy SVG" button in catalogs, code from DevTools), paste it straight onto the canvas with Ctrl+V/Cmd+V. Figma recognizes SVG markup in the clipboard and expands it into a vector. No file on disk needed.
This pairs perfectly with logo catalogs: every brand in ours has a copy‑SVG button — click there, Ctrl+V in Figma, done.
Method 3. PNG — when there's no choice
A PNG drags in the same way but lands as an image: no recoloring, no clean enlargement. Justified when:
- the logo exists only in raster (a legacy brand, a photo of signage);
- you specifically need the raster look (an app screenshot in a mockup).
Hygiene: take the PNG at 2× its mockup size minimum, and always with a transparent background — see the transparency article for why.
Logos as components
If a logo appears more than twice (header on every screen, a bank list), componentize it:
- Insert the SVG, tidy it up (a group with a sane name like
logo/sber). - Ctrl+Alt+K / Cmd+Option+K — create component.
- Place instances across the file: update the master, all copies follow.
Advanced: variants — the color and monochrome versions as switchable variants of one component. That's how partner and payment logos usually live in design systems.
A logo row (banks, partners, "trusted by") should never be width‑aligned — a wide wordmark becomes giant, a square mark microscopic. Give them equal height, center‑align, and manually shrink visually heavy marks by 10–15%. Optical alignment beats mathematical.
Common mistakes
- Screenshot a logo off a website. You get a blurry raster with a background. An SVG exists for almost any brand — find it.
- Flatten someone's SVG needlessly. The layers and groups in the original are structure you'll want for recoloring.
- Stretch disproportionately. Easy to grab one side by accident. Hold Shift or lock proportions in the panel.
- Recolor to "almost brand" colors. Brands have exact HEX codes — take them from the SVG or guidelines, not by eye; here's how in a separate guide.
Exporting back
Figma exports the logo any way you need: select → Export → SVG for web, PNG at a multiplier for raster, PDF for print. For developers, hand over SVG, not PNG — embedding SVG gives crispness and flexibility; the embedding guide covers the details.
Logos in a design system: storing them right
If the project is bigger than one mockup, logos belong in a library, not scattered across pages:
- A dedicated "Logos" page in the design‑system file: full logo, mark, monochrome, inverse — each a component named
logo/<brand>/<variant>. - Variants via properties: one
logo/sbercomponent with color (full/mono/white) and layout (full/mark) properties beats four separate components — switching happens in one click inside the mockup. - Fixed‑size slots: wrap the logo in a fixed‑height auto‑layout frame (say, 32 px) — headers and lists align without manual fiddling.
- Don't detach instances to recolor: wanting a different color means the component lacks a variant. Add it to the master and the change propagates everywhere.
The structure pays off at the first client rebrand: swapping the master updates a hundred screens in a minute.
Fine points of handling third‑party SVGs in Figma
- The SVG landed as one flat layer. The author flattened before export. Individual recoloring won't work — find a layered source (our catalog's SVGs keep their layers).
- Colors won't change via Selection colors. The SVG may define colors through style constructs Figma doesn't map; re‑copying as SVG and pasting back usually normalizes the structure.
- The logo arrived giant or tiny. The SVG had no width/height, so Figma used the viewBox. Just set the size with Shift held — proportions stay.
- Thin strokes drift when scaled down. Check strokes are Inside the shapes; outside strokes misbehave under scaling. For small sizes, a version with slightly thicker strokes works better — which is exactly why brands keep separate small‑size variants.
FAQ
How do I place a logo on all mockups at once? You don't — and that's correct: make a component and place instances. Mass‑pasting without a component is tech debt that fires at the first edit.
Can Figma animate a logo? Prototyping animates transitions between variants (Smart Animate) — enough for simple reveals. Real motion means After Effects and Lottie export, covered in the animated logo article.
Why is the PNG export blurry? Check the export multiplier: 1x from a small frame yields a small file. Use 2x–4x or set an exact width in the Export field.
In short
Drag or paste the SVG → componentize if repeated → align by height → export back as SVG. Raster only when a vector doesn't exist in nature.
The quick vector source is our logo catalog: hundreds of brands in SVG with one‑click code copy — then Ctrl+V into Figma. For emoji in mockups there's a separate catalog with high‑res Apple and Google PNGs.