How to import SVG into Figma as editable vectors

SVG and Figma are made for each other — both are vector at heart, paths and points all the way down. The trick is getting an SVG in as editable curves you can recolour and reshape, rather than a flattened picture you can only look at. And the trickier part is reaching the ones buried inside a live web page, where the file you want was never a file.

Three ways to get SVG into Figma

There are three routes, and which one you reach for depends on where the SVG currently lives — a saved file, a block of code, or somewhere inside a page that's already running in a browser.

1. Drag, or paste, an .svg file onto the canvas. Drop the file straight into a Figma frame and it converts to vector layers on the spot — each shape its own editable node. This is built into Figma; no plugin required.
2. Copy the SVG markup and paste it. Select raw <svg> code, copy it, and paste into Figma. It reads the markup and rebuilds the paths as vectors. Also native — Figma understands SVG source directly.
3. Import the page the SVG is inside. When the icon is an inline <svg> sitting in a live page's markup, there's no file to drag and no tidy snippet to copy. Importing the page brings those <svg> elements across as vectors along with everything else around them. This is where an importer such as Vellum does the work Figma's paste can't.

So the first two are Figma's own features, and they're genuinely good — reach for them whenever you already hold the file or the code. The third is the awkward middle that those two don't cover, and it's the one most people actually hit.

Why "editable vectors" matters

An SVG brought in the right way is real vector geometry: nodes you can recolour, resize to any scale without a hint of blur, and edit point by point. Change the fill, drag a handle, swap a stroke for a thinner one — it behaves like anything you'd draw in Figma yourself, because that's now what it is.

Brought in the wrong way — rasterised into a flat image — it's just a picture. You can move it and scale it (and watch it soften as you do), but you can't touch a single curve inside. The colour is baked. The shape is fixed.

A vector you can reshape; a raster you can only resize. The format on the canvas decides which one you're holding.

It's the same lesson that runs through the rest of this site, just applied to icons: you want layers, not screenshots. An SVG is the purest case of it, because the whole point of the format is that it stayed editable — losing that on the way into Figma throws away the one thing it was good for.

Getting icons out of a live site

Plenty of sites inline their entire icon set as <svg> right in the page markup — it's faster to render and easy to style with CSS. Which is convenient for the site and inconvenient for you, because there's no neat icon file to grab. The asset folder might be minified, bundled, or behind a build step; the artwork you can see on screen was assembled from code at load time.

Rather than hunting the repository, digging through a sprite sheet, or trying to right-click something that won't save cleanly, you can import the page and let those inline icons come across as vectors at the exact size the page rendered them. The button glyphs, the logo, the little status marks — they arrive as editable paths, measured from the real render, not guessed at.

For the full set of routes onto the canvas, see how to import a website into Figma; for what travels across from raw markup and what doesn't, HTML to Figma, explained goes deeper on the mechanics.

Common SVG gotchas

Most SVGs come through cleanly, but a few features ask more of any importer than others. None of these are reasons to avoid the format — just things worth recognising when a result looks a little simpler than the original:

• Heavy filter effects. Elaborate SVG filter chains — turbulence, displacement, layered blurs — don't always have a one-to-one Figma equivalent, so the effect may flatten or drop while the shape underneath stays intact.
• Embedded raster images. An SVG can carry a bitmap inside it. That part stays a raster after import — vector wrapper, pixel core — because there was never any geometry there to edit.
• References that get resolved. Constructs like <use> and <symbol>, or text set in a font, may be flattened into plain paths as they come in. You keep the shape; you lose the shorthand that built it.
• Gradients and clip paths. The everyday stuff — linear and radial gradients, clipping masks — usually translates fine and lands as native Figma fills and masks.

The pattern is straightforward: pure vector geometry converts well; anything that leans on a raster or a programmatic reference is where the edges show.

From icon to system

Once the vectors are on the canvas, the useful move is to stop treating them as loose artwork. Collect the imported icons into components, give them sensible names, and gather them into a Figma library so the rest of a project can pull from one source. A scattered SVG becomes a maintained set.

And icons rarely travel alone — they sit in a system with its own colours, type, and spacing. Lifting those off the same page at the same time keeps everything consistent; pulling a site's colours, fonts and spacing into Figma covers reading the palette straight off the render, so your icon set and your tokens come from one place.

The bottom line

Getting SVG into Figma is easy when you hold the file or the code — Figma does it natively, and does it well. The case worth planning for is the icon that only exists inline inside a live page: import the page, and it comes across as an editable vector at its real size, ready to recolour, reshape, and fold into a system. Vector in, vector out. That's the whole job.