logoredraws.com

How to Import SVG into Figma

Import an SVG logo into Figma by dragging, placing, or pasting the code, then check that paths, text, and colors came through as editable vectors.

Published

Contents
  1. The short answer
  2. Before you import: check what the file actually contains
  3. Method 1: Drag and drop
  4. Method 2: Place image
  5. Method 3: Paste the SVG code
  6. Verify the result
  7. Using the imported logo for a favicon
  8. Limits of this guide

The short answer

There are three ways to import an SVG file into Figma. You can drag the file from your computer onto the canvas. You can use the Place image command. Or you can copy the SVG markup and paste it straight onto the canvas. In each case Figma converts the file's shapes into native vector layers, usually grouped inside a frame. You can then select, recolor, and reshape them like anything drawn in Figma itself.

SVG (Scalable Vector Graphics) is a text-based file format. It describes artwork as mathematical paths rather than a grid of pixels. A path is a line or outline defined by anchor points and the curves between them, so it stays sharp at any size. That is why SVG suits logos and favicons, which must hold up at very different scales.

Before you import: check what the file actually contains

An .svg extension does not prove that a file is clean, fully editable vector artwork. An SVG can wrap an embedded raster image, such as a PNG or JPEG stored inside the file. In that case Figma will give you a picture, not editable paths. The extension also says nothing about whether you may modify or reuse the logo. Confirm usage rights with the brand owner or the license before you adapt someone else's mark.

Method 1: Drag and drop

  • Open the Figma design file where the logo should go.
  • Locate the SVG file in your computer's file browser.
  • Drag the file onto the Figma canvas and release it.
  • Figma places the artwork as a new layer, typically a frame named after the file, with its vector layers inside.

Method 2: Place image

  • Open the main menu or the toolbar's image option and choose Place image (the shortcut is Shift+Cmd+K on Mac or Shift+Ctrl+K on Windows).
  • Select the SVG file in the dialog that opens.
  • Click on the canvas to drop it in place.
  • Use this method when you prefer a file picker to dragging, or when you are working in the desktop app with several windows open.

Method 3: Paste the SVG code

Because SVG is plain text, you can open the file in a code editor, copy everything from the opening svg tag to the closing tag, and paste it onto the Figma canvas. Figma interprets the markup and creates vector layers, just as it does with an imported file. This is handy when the logo comes from a website's source, a developer, or an icon library that offers copy-as-code. A minimal example of the structure Figma expects:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <path d="M4 4 H28 V28 H4 Z" fill="#1A1A1A"/>
</svg>

If pasting produces nothing, or produces text instead of shapes, check what you copied. The text must begin with the svg element and must not include extra wrapper code from the source page.

Verify the result

A successful import is not just a logo that looks right on screen. Check that it is genuinely usable artwork:

  • Open the Layers panel and expand the imported frame. You should see vector, group, or boolean layers. A single rectangle with an image fill means the SVG contained a raster image rather than paths.
  • Double-click a shape, or select it and press Enter, to enter vector edit mode. Visible anchor points confirm the shape is an editable path.
  • Zoom in closely. True vector edges stay crisp; blurry or pixelated edges again point to embedded raster content.
  • Select text in the logo. It may arrive as live text, which depends on the font being available, or as outlined shapes. If a font is missing, Figma substitutes another one and the wordmark can change appearance.
  • Compare colors, strokes, and gradients against the original. SVG features such as filters, certain masks, or CSS-based styling may not translate exactly and can need manual rebuilding.
  • Check the frame size against the original viewBox, the coordinate area the SVG declares, so that proportions and padding are preserved.

Using the imported logo for a favicon

If the end goal is a favicon, the small site icon shown in browser tabs and bookmarks, the import is only the first step. Place the mark in a square frame, since favicons are displayed in a square area. Simplify details that disappear at small sizes, such as thin strokes, small text, and fine gaps. Turn any live text into outlines (Outline stroke for strokes, Flatten or outlined text for type) so the exported file does not depend on installed fonts. Then export the frame from Figma as SVG and review the exported file the same way: confirm it contains paths, not embedded images.

Limits of this guide

This guide covers Figma's general import behavior. It does not include measured test results, specific favicon size requirements, or a complete list of unsupported SVG features. Figma's menu names and shortcuts can change between versions. If something looks different in your copy, check Figma's current help documentation, and confirm favicon requirements against the platforms you are targeting.