How to Export SVG from Figma
Export clean, optimized SVG files from Figma — for icons, logos, and illustrations ready for web, print, or Cricut.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Basic SVG Export in Figma
Select any frame, group, or component in Figma. In the right panel, scroll to Export. Click +, choose SVG format, then click 'Export [Name]'.
- Select the layer, frame, or component to export
- In Design panel (right side) → scroll to Export section
- Click + → choose SVG from the dropdown
- Click 'Export [filename]' to download
- Figma exports at 1x by default — the scale factor doesn't apply to SVG (it's vector)
Export Settings for Clean SVG
Figma's SVG export has options that significantly affect output quality and file size.
- Include 'id' attribute: check this if you need to target elements by ID in CSS/JS
- Outline text: converts text to paths — required if fonts aren't web-safe
- Flatten: merges all layers into a single group (smaller file, less editable)
- For web icons: uncheck 'Include id attribute' and check 'Outline text'
- For editable logos: keep IDs, don't flatten
Exporting Multiple Icons at Once
For icon sets, name each frame with a /slash prefix in Figma to organize exports. Select all icon frames, then Export in the right panel — Figma exports each as a separate SVG.
- Name frames: icons/arrow-right, icons/arrow-left, etc.
- Select multiple frames with Shift+Click
- Export → Figma exports each as individual files in a zip
Optimizing Figma SVG Output
Figma SVG output can be further optimized. Run through SVGO or SVGOMG to remove Figma-specific data attributes and reduce file size by 20–50%. For production icons, this step is important.
- Open SVGOMG → paste your Figma SVG → enable 'Remove xmlns' and 'Round/rewrite numbers'
- Run through SVGO CLI: svgo figma-export.svg -o icon.svg
- Use the Figma 'SVG Export' plugin for batch SVGO optimization directly from Figma
Frequently Asked Questions
Why does my Figma SVG have extra width/height attributes?
Figma adds width and height matching the frame dimensions. For responsive SVGs, remove these in code and ensure a viewBox is present (Figma always includes viewBox).
How do I export a Figma component as SVG without the component wrapper?
Detach the component (Ctrl+Alt+B) or export a specific inner frame rather than the component. Alternatively, export normally and remove the outer group in code.
My Figma SVG has blurry text — how do I fix it?
Enable 'Outline text' in the export settings. This converts text to vector paths, ensuring it renders identically in all environments without requiring the font to be installed.
Can I export animated prototypes from Figma as SVG?
No. Figma prototype animations are not exportable as SVG animations. For animated SVGs, recreate the animation in CSS or use a dedicated tool like After Effects + Lottie.
Is there a way to auto-export SVGs from Figma on save?
Yes, using the Figma API and webhooks. When a file is updated, trigger a script that fetches the latest SVG exports via the Figma API and saves them to your codebase.
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