How to Import SVG into Figma

Three ways: drag and drop the .svg file onto your canvas, use File → Place image, or copy the SVG code and paste it directly into Figma. Only have a PNG or JPG? Trace it into an SVG first with our free converter.

Open free converter Use AI conversion

Free local tracing needs no account. AI tools use credits and upload files for processing.

Explore features and examples

From your image to editable paths

Choose the workflow that suits your file.

01
Open your file
PNG, JPG, WebP, AVIF, GIF, or BMP up to 10 MB in the free workspace (the AI converter takes PNG, JPG, WebP, or AVIF). Existing SVGs can be edited in the free workspace.
02
Trace and inspect
Preview the shapes and colors. Clear logos and flat artwork usually trace more predictably than photos.
03
Make it yours
Edit the SVG, compare optional optimization, and download your result.

Working with your SVG

SVG Import Workflow

Figma supports SVG import. How paths, groups, fills, masks, and other SVG features appear depends on the file and Figma's current importer.

Trace Approximation

The converter estimates visible shapes and colors from raster pixels. It does not recover original design layers, fonts, effects, or hidden geometry.

Preview Before Import

Review the generated SVG for missing shapes, unwanted background paths, color shifts, and excess complexity before bringing it into Figma.

Editability Varies

Simple paths and fills may be editable after import. Groups, text, clipping, gradients, filters, and effects may require inspection or rebuilding.

Prepare Components in Figma

Review and refine the imported structure before deciding whether to turn the asset into a Figma component or library item.

Test the Team Workflow

Import a copy into the target file and test editing, handoff, and export behavior before sharing the asset across a project or team.

AI conversion features

PNG, JPG, WebP, and AVIF input
AI-assisted raster-to-vector tracing
SVG path output
Preview before download
Figma supports SVG import
Editability and grouping vary by file
Inspect masks, gradients, text, and effects
Refine and test after import
One credit after email verification
Pay-as-you-go packs from $9.99
No subscription required

Questions about your file

Free local tools. Optional AI credits.

Local tracing and SVG editing need no credits. AI conversion includes one credit after email verification; additional packs start at $9.99.

See AI pricing

3 Ways to Import an SVG into Figma

Method 1: Drag and Drop (fastest)

Drag the .svg file from Finder or File Explorer straight onto your Figma canvas. Figma imports it as a frame of editable vector layers — no menus needed.

Method 2: File → Place Image

In the Figma menu choose File → Place image (Ctrl/Cmd+Shift+K), select your SVG, then click anywhere on the canvas to place it. Useful for placing several files in a row.

Method 3: Paste the SVG Code

Open the .svg in any text editor, copy everything from <svg> to</svg>, and paste it directly into Figma. Figma parses the markup into vector layers — handy for icons copied from websites or code.

What to Check After Importing SVG into Figma

SVG Import and Editability

Figma supports SVG import, and simple paths, fills, and strokes may remain editable. The imported hierarchy can differ from the source, especially when the file uses nested groups, clipping paths, masks, gradients, filters, text, or effects.

Prepare Components in Figma

The converter creates SVG paths, not Figma components. After importing, review geometry, hierarchy, sizing, naming, color styles, and states before creating components, variants, or library assets.

Review Before Handoff

A successful visual import does not guarantee a suitable development export. Inspect path count, masks, dimensions, color values, accessibility needs, and the SVG exported from the actual Figma workflow before handing the asset off.

Scalable Geometry, Fixed Trace Fidelity

Generated paths can be resized without raster pixelation, but resizing does not improve the trace. Missing details, color shifts, and incorrect shapes remain until they are corrected.

Popular Figma Use Cases

UI icon libraries
Custom illustrations
Logo imports
Design-system asset preparation
Mobile app design
Web interface elements
Marketing graphics
Product illustrations
Canvas annotations and diagrams
Presentation graphics

Inspect Before Simplifying

Duplicate the imported asset before flattening, outlining, or simplifying it. Those operations can change editability, masks, effects, and appearance. Compare the revised version with both the source image and the first import before using it in a shared file.