PNG to SVG for Figma

Figma works with vectors, so a flat PNG logo is awkward to edit there. Trace it here, drag the SVG onto your canvas, and you get shapes you can recolor, resize and export.

Drop an image herePNG, JPG, WebP, GIF or BMP. You can also paste an image from your clipboard.Choose a file

How to use it

Drop in the PNG or JPG you want to use in Figma.
Choose Logo or icon for brand artwork, or Black and white for line icons and signatures.
Check the result against the original, then set the colors and smoothing.
Download the SVG, then drag it onto your Figma canvas or paste it in.

What you get in Figma

An SVG dropped onto the canvas arrives as vector layers instead of a picture. Select a color in the trace and every shape of that color is selected together, because each color is a single path. That makes recoloring a logo for dark mode a matter of a few clicks.

Keep the number of colors as low as the artwork allows. A logo that needs three colors should be three paths, not thirty. Lower counts also keep files light, which matters when the same icon is used across many frames.

Tidying the import

If you want one shape instead of several, select the layers and use Flatten. Use Outline stroke on any line you plan to resize without changing its thickness. Group the result and rename the layer, so the file stays easy to read.

Figma has also begun adding image-to-vector conversion of its own, according to reports in early 2026. If your plan includes it, try both on a tricky image. This page is useful when you want to set the colors and smoothing yourself and compare against the original before importing.

What the settings do

Style: Sets sensible starting values for the kind of image you have. You can still change every setting afterward.
Colors: How many flat colors the tracer keeps. Each color becomes one path in the SVG, so lower numbers give simpler files.
Smoothing: Higher values merge small bumps into smooth curves and shrink the file. Lower values follow the pixels more closely.
Remove small specks: Drops tiny shapes, such as dust or compression noise, below the size you choose.
Make white background transparent: Removes the white area connected to the edge of the image, so the SVG has no white box behind it.

What people use it for

Turning a client's PNG logo into editable vector layers
Making a single-color icon you can recolor with variables or styles
Rebuilding a favicon or app icon from a low-resolution file
Importing a signature or stamp as clean shapes

Questions

How do I import the SVG into Figma?

Drag the downloaded file onto the canvas, or use File, then Place image, or paste the SVG. It comes in as vector layers you can select and edit.

Why do I get so many layers?

Each color becomes one path, so fewer colors means fewer layers. Lower the Colors setting or raise Remove small specks, then trace again. In Figma, Flatten merges selected shapes into one.

Can I trace a photo for Figma?

You can, using the Photo style, but the result is posterized and heavy. Use a photo as an image fill in Figma, and use tracing for logos, icons and line art.

Will gradients survive?

No. Tracing produces flat color areas, so a gradient becomes bands of color. Redraw gradients in Figma with its gradient fill after importing the shape.

Is my file uploaded anywhere?

No. Tracing and file creation happen in your browser, using code that is part of this page. Your image is not sent to a server. You can check this in your browser's network tab while you use the tool.