How to Use SVG in Figma — Import, Edit & Export SVG Guide
Figma imports SVG as fully editable vector frames — use as icon components, edit paths, and export clean SVG for web or Cricut.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Importing SVG into Figma
Drag and drop an SVG file onto the Figma canvas, or use File > Import. Figma converts the SVG into a fully editable vector frame with individual paths, groups, and fills accessible via the design panel.
- Drag SVG file onto canvas or use File > Place Image
- Figma converts SVG to editable vector — paths are fully accessible
- Double-click to enter the frame and edit individual paths
Exporting SVG from Figma
Select any layer or frame in Figma, go to the Export panel (bottom right), choose SVG format, and click Export. Figma produces clean SVG with proper viewBox and grouped structure suitable for web and Cricut use.
- Select layer > Export panel > SVG > Export [name].svg
- Check 'Flatten' to merge all paths for Cricut cut files
- Include 'id' attribute option for CSS targeting on export
Frequently Asked Questions
Does Figma preserve SVG groups and layers on import?
Yes — Figma converts SVG groups to frames and layers, preserving the hierarchy. Named SVG groups become named Figma layers for easy organization.
Can I create Cricut-ready SVG cut files in Figma?
Yes — design in Figma, use Boolean Union to merge overlapping paths, then export as SVG. Import the Figma SVG to Cricut Design Space and verify paths cut correctly before production.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG