SVG in Figma: The Complete Guide
Import, edit, and export SVG files in Figma — from simple icon imports to full design system integration.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Importing SVG into Figma
Drag and drop SVG files onto the Figma canvas, or paste SVG code directly.
- Drag SVG file → drops onto canvas as editable frame
- Copy SVG code → paste into Figma (Ctrl+V) → imports as editable vectors
- File > Place Image → import multiple SVG files at once
- Paste method preserves path editability best
Editing SVG Paths in Figma
Double-click an SVG to enter vector editing mode. Select anchor points and drag to reshape.
- Double-click shape to enter Edit Mode
- Click anchor points (nodes) to select
- Drag handles (circles on curves) to adjust bezier curvature
- Delete key removes selected nodes
- Pen tool (P) to add new points or extend paths
Building Reusable SVG Icon Components
Create an Icon component to enable consistent sizing and easy theme switching across your design system.
- Frame an SVG at 24×24 (standard icon grid)
- Set fill to 'currentColor' equivalent in Figma (use library colors)
- Right-click → Create Component (Ctrl+Alt+K)
- Name with slash notation: icons/arrow-right
- Publish to team library for cross-file reuse
- Swap between icon variants using the component properties panel
Exporting Clean SVG from Figma
Select the frame/component. In the Export section (right panel), add SVG format. Check 'Outline text' to avoid font dependencies. Download.
- Select frame → Export panel → + → SVG
- Check 'Outline text' for text elements
- Check 'Include id attribute' for CSS/JS targeting
- Click 'Export [Name]'
- Run SVGOMG on the output for further optimization
Frequently Asked Questions
Can Figma edit SVG path data directly?
Yes. Double-click an SVG shape to enter vector edit mode. You can move anchor points and adjust bezier handles. For text path animation, you'll need code — Figma doesn't support SVG animations.
Does Figma support all SVG features?
Figma supports most SVG features including gradients, masks, and clip paths. It doesn't support SMIL animations or some advanced filter effects.
How do I import an SVG icon library into Figma?
Use a plugin like 'Icon Libraries' or import the SVG sprite manually. Many icon sets have dedicated Figma plugins (Feather Icons, Heroicons, etc.).
Why does my Figma SVG export have extra groups?
Figma adds groups for each frame and component structure. In Figma's export settings, use 'Flatten' option or manually flatten groups (Ctrl+E) before exporting.
Can I use Figma to prepare SVG for Cricut?
Yes. Export the SVG from Figma with 'Outline text' enabled. Import into Cricut Design Space. Note: Figma SVG may have extra metadata — simplify in Inkscape if Design Space has trouble.
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