How to Import an SVG into Figma

The short answer

To bring an SVG into Figma, drag the file from your computer onto the Figma canvas. You can also open the SVG in a text editor, copy its markup and paste it directly onto the canvas. In both cases Figma rebuilds the file as editable layers, usually inside a frame or group, instead of placing it as a flat picture. A successful import is only the first step, though. Before you rely on the result as logo artwork, check that the shapes are real vector paths, that the text behaved as expected and that no raster images are hidden inside.

Terms you need first

• SVG (Scalable Vector Graphics): a text-based file format that describes artwork as shapes, paths, colors and coordinates instead of pixels, so it can be scaled without losing sharpness.
• Vector path: a shape defined by anchor points and the curves between them. In Figma these become vector layers that you can edit point by point.
• viewBox: an attribute in the SVG code that defines the artwork's coordinate area. Together with any width and height values, it influences the size the artwork has when it lands in Figma.
• Raster image: pixel-based content such as a PNG or JPEG. An SVG file can contain embedded raster images, so the .svg extension alone does not guarantee that the content is purely vector.

Check the file before you import it

A quick look at the SVG markup can tell you in advance what Figma will receive. Open the file in any plain-text editor and search for these elements:

• <path>, <circle>, <rect>, <polygon>: true vector geometry, which is what you want in a logo file.
• <image>: embedded or linked raster content. It will come into Figma as a picture, not as editable shapes.
• <text>: live text that depends on a font. If that font is not available to Figma, the text may not display as intended.
• <style> blocks, filters, masks or clip paths: these can be interpreted differently by different applications, so check the affected areas closely after import.

A file that passes this check still does not give you permission to reuse the logo. Confirm usage rights separately with whoever owns the mark.

Step by step: importing by drag and drop

• 1. Open the Figma file where the logo should go.
• 2. Locate the SVG on your computer.
• 3. Drag the file onto the canvas and release it.
• 4. Select the new layer and expand it in the Layers panel to see how Figma structured the contents.
• 5. Move the artwork into place, or put it inside your own frame if you need a defined artboard around the logo.

Alternative: pasting SVG code

If you have the SVG as markup rather than as a file, for example from a code repository or a developer handoff, copy the full code from the opening <svg> tag through the closing </svg> tag and paste it onto the Figma canvas. Figma interprets the markup and creates vector layers from it. A minimal example of markup that pastes cleanly looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1A1A1A"/>
  <path d="M30 50 L50 70 L72 32" fill="none" stroke="#FFFFFF" stroke-width="8"/>
</svg>

If pasting produces a block of text or nothing at all, the markup is probably incomplete or contains invalid syntax. Save it as an .svg file and use the drag-and-drop method instead, or correct the code first.

Verify the result

Use this checklist to confirm the import produced usable logo artwork rather than something that only looks right at first glance:

• Layer types: expand the imported group and confirm that the shapes appear as vector layers. Any layer with an image fill is raster content.
• Zoom test: zoom in far on curves and edges. Vector paths stay crisp, while embedded raster content becomes blurry or pixelated.
• Editability: double-click a shape to enter vector edit mode and confirm that its anchor points can be selected.
• Text: check whether lettering came in as editable text or as outlined shapes. If Figma reports a missing font, the displayed text may not match the original design.
• Strokes and fills: compare stroke weights, colors and gradients against a trusted reference such as the original source file or an approved PDF.
• Size and proportions: check the dimensions in the properties panel and compare them with the intended aspect ratio.
• Stray elements: look for invisible rectangles, empty groups or leftover background shapes that would interfere when the logo is placed on different backgrounds.

Fixing common problems

Problem | Likely cause | What to do

Lettering looks wrong or shows a missing-font warning | The SVG uses live text in a font Figma cannot access | Install or enable the correct licensed font, or request a version of the file with the text converted to outlines

Part of the logo is blurry when you zoom in | An embedded raster image inside the SVG | Request a true vector source, or redraw that element as vector paths

Effects, masks or styled areas look different from the original | Filters, masks or CSS styling that Figma interprets differently | Compare against a reference and rebuild the affected parts with native Figma shapes and fills

Artwork imports at an unexpected size | Width, height and viewBox values in the code | Resize it proportionally in Figma, or correct the values in the SVG

Layer structure is deeply nested and hard to edit | The exporting application wrapped elements in many groups | Ungroup carefully and rename layers, checking that nothing shifts or changes appearance

What this guide could not confirm

No version-specific documentation was available for this article. Exact menu labels, keyboard shortcuts and the full list of SVG features Figma supports could not be confirmed here. Figma's interface changes over time, so check the current help documentation if a menu option looks different from what is described. The two import methods above and the verification checklist are general practices that do not depend on a particular interface layout.