SVG in Figma: How to Import, Edit, and Export Vector Graphics
Master SVG workflow in Figma — from importing and editing paths to building reusable icon components and exporting optimized SVGs.
Importing SVG into Figma
Figma natively supports SVG files. You can import SVGs in three ways.
- Drag and drop — drag your SVG file directly onto the Figma canvas
- File > Place Image — use the menu to import and place an SVG
- Copy-paste SVG code — copy the SVG XML, paste into Figma (Edit > Paste) to import as editable vectors
- Tip: Pasting SVG code is the most reliable method for preserving path editability
Editing SVG Paths in Figma
Once imported, SVGs become editable vector frames in Figma. You can edit individual paths using the vector editing tools.
- Double-click the SVG to enter the group, then double-click a shape to enter vector edit mode
- Use the Edit Object tool (Enter key) to select and move individual anchor points
- Right-click a path and choose 'Flatten Selection' to merge multiple paths
- Use 'Union', 'Subtract', 'Intersect', and 'Exclude' boolean operations on selected paths
- Change fill colors by selecting a path and editing the Fill in the right panel
Converting SVG to a Figma Component
For SVG icons used across a design system, converting to a Component ensures consistency and makes updates propagate automatically.
- Import your SVG and ungroup if needed (Ctrl+Shift+G)
- Select all paths and use 'Flatten' to create a single clean path
- Right-click the shape and choose 'Create Component' (Ctrl+Alt+K)
- Name the component using a naming convention like 'icons/arrow-right'
- Publish to your Team Library so the component is available across projects
Exporting SVG from Figma
Figma's SVG export produces clean, web-optimized SVG code. Here's how to export properly.
- Select the frame or component you want to export
- In the right panel, scroll to 'Export' and click the '+' button
- Choose 'SVG' as the format
- Check 'Include id attribute' if you need element IDs for CSS or JavaScript targeting
- Click 'Export [Name]' to download
- For icon sets, use Figma Tokens or a plugin like SVG Export to batch-export multiple icons
Converting PNG/JPG to SVG for Figma Import
If you have a PNG logo or raster icon that needs to be editable in Figma, first convert it to SVG using our free converter. Upload your PNG, download the SVG, then import into Figma. You'll get editable vector paths instead of a static image.
Frequently Asked Questions
Can Figma edit SVG paths?
Yes. Figma's vector editor lets you move anchor points, adjust bezier handles, and modify paths directly after importing an SVG.
Does Figma support all SVG features?
Figma supports most SVG features including paths, shapes, gradients, and text. It does not support SVG animations (SMIL) or all filter effects.
How do I make an SVG icon resize in Figma without distortion?
Select the icon frame and check 'Constrain Proportions' in the right panel, or hold Shift while resizing to maintain the aspect ratio.
Why does my SVG look different in Figma than in the browser?
Figma may handle some SVG features differently than browsers. Check for unsupported gradients, filters, or fonts. Simplify the SVG if needed.
Can I animate SVG in Figma?
Figma doesn't support SVG animation natively. Use Figma's prototype transitions, or export the design and animate using CSS or GreenSock in code.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free