How to Export SVG Files from Figma

Export an icon, logo or illustration from Figma as SVG to keep its vector shapes sharp at different sizes. You'll need access to the design file and permission to export. This guide covers the selection, text settings and finished-file checks that matter when the asset leaves the canvas.

How to export SVG files from Figma without losing editable text

Figma outlines text by default during SVG export. The letters become vector shapes, so the appearance travels but the wording stops being editable as ordinary text. Clear Outline text when you need live text, then check the font in the app or browser that will display the file.

Figma also simplifies inside and outside strokes because SVG supports centered strokes. The SVG can look like the design while containing different geometry. Keep the editable Figma source when you expect to revise lettering or stroke behavior later.

My preference for a fixed logo is outlined lettering, with the original text kept in the source file. For a diagram whose labels need translation, preserving text may matter more than carrying the exact font appearance to every machine.

1. Select the asset you want to export

Open the Design file and select the layer, frame, group or component that contains the finished asset. A frame is a convenient way to define its edges. Name the object so the exported filename makes sense to the person receiving it.

Check whether the selection includes a background fill. If you want transparency from a frame, clear Show in exports in the Fill section. Don't assume an ivory canvas means the exported icon will have an ivory rectangle behind it; the frame's fill and export settings decide that.

For a fixed region of the canvas, choose Slice from Region tools, then draw the export area. You need edit access to use the Slice tool. Keep enough room for the intended asset edges, without including unrelated nearby objects.

An icon and a full page mockup call for different selections. If the deliverable is one toolbar symbol, select its object or enclosing frame. Exporting the whole interface produces a much larger asset and makes later styling harder to understand.

2. Add an SVG export configuration

Find Export near the bottom of the right sidebar with edit access. With view access, it appears under Properties. Click the plus in Export to add a configuration, then select SVG as the format.

Click Preview for a single selection to see the export appearance. The preview control isn't shown when multiple objects are selected. Look at the object's edges and background before downloading, especially for a logo that will appear against a different page color.

You can add more than one export configuration to the same object. For example, keep an SVG configuration for the website and a PNG configuration for a destination that only accepts raster images. The source remains one design, while the delivery formats serve different places.

3. Choose the text and stroke settings

Open the additional export settings and set Outline text for the intended use. Leave it selected for lettering whose shape must travel independently of font availability. Clear it when the destination needs editable or selectable text.

The developer documentation calls the outlined behavior svgOutlineText, with a default of true. Live SVG text relies on the rendering environment, so appearance can differ across browsers or operating systems. This explains why preserving a text element and preserving its exact appearance are separate goals.

Keep Simplify stroke enabled unless you have a specific reason to change the exported geometry. Figma documents extra masks and SVG code when it is disabled for an inside or outside stroke. For a small web icon, unnecessary geometry can make the asset harder to inspect.

Use Include “id” attribute when layer names need to become IDs in the output. Choose clear names if someone plans to select those elements in CSS or JavaScript. An automatically numbered layer may work, but a meaningful name is easier to recognize during a later edit.

4. Export and inspect the saved file

Click Export to save the SVG. The browser uses its download location; the desktop app asks where to save. Open the file in its intended destination and compare the lettering, line edges and transparency with the source.

For a website asset, inspect it at the size visitors will see. A tiny symbol can have sharp vectors and still be unreadable because its internal gaps are too narrow. Enlarging it during review can hide that problem, so check the actual display size as well.

If the SVG includes live text, confirm that a representative label appears correctly on another device or browser. Save the source separately with the editable wording. The exported file is an asset for a particular destination, not your only copy of the design.

Known problems and fixes

A June 2025 Reddit report describes SVG text changing fonts after a laptop replacement with Outline text disabled. No fix is posted in the returned discussion. For fixed artwork, outlining avoids the font dependency; for translatable labels, supply the intended font through the destination's supported setup.

If Export is absent, Figma's official help says to refresh the page and check whether the owner restricted copying or export. A viewer can export permitted assets, but can't use every editing tool. Ask the owner to change the relevant permission if the asset should be downloadable.

For effects that render differently, the static-export manual identifies background blur as a special case: blur the layer directly instead. Don't turn a complex effect into a logo without inspecting its result outside the design app.

Variations: one asset, several assets or SVG code

For a single icon, use its object-level configuration. For a batch, open Main menu, then File > Export to review all configured selections on the page. Clear the checkboxes for assets you don't want, then export the selected set.

For a code handoff, right-click the object, open Copy/Paste as, then choose Copy as SVG. This is convenient when a developer needs the markup, though the same font and geometry choices still need review in the destination.

MDN's SVG and CSS guide explains how SVG elements can be styled. Tell the person integrating the asset whether its colors are fixed artwork or are expected to follow page styling. A monochrome toolbar icon and a multicolor brand mark usually need different treatment.

Completion checklist and next steps

• The selected object contains the intended asset and no unrelated content.
• Background transparency matches its destination.
• Lettering remains editable only when that is intended.
• Small details are readable at the final display size.
• The filename identifies the asset.
• The original Design file is retained for revisions.

For layered image work, compare Photopea and GIMP. Framer fits publishing visual web pages, while Miro fits planning diagrams. The creative-design directory includes more tools for the next part of the project.

Sources

Figma export instructions; static export settings; Figma ExportSettings developer reference; MDN SVG and CSS; linked font report. Controls checked October 9, 2026.