Exporting Icons from Design Tools

Export settings are where icon work either stays tidy or starts leaking problems into production. A file can look fine in the design tool and still land with rough edges, oversized assets, or awkward compatibility issues once it is used for real. This guide covers export practice across the main design tools, with the settings that matter and the ones people waste time fussing over.

Get the artwork export-ready first

Before exporting, clean the file. Flatten groups if the nesting is unnecessary. Outline strokes if the final asset needs fills rather than live strokes. Check alignment against the pixel grid, remove hidden layers, standardise artboards so the canvas size stays consistent, and name everything properly so the filenames follow your convention.

That boring prep work saves time later. Less cleanup, fewer surprises, fewer re-exports because one icon was nudged half a pixel off and nobody noticed until QA.

Figma exports without the usual mess

Figma keeps the process fairly direct, which is one reason it works well for icon sets.

SVG export in Figma

• Select the frame or component
• In the right panel, click the "+" next to Export
• Choose SVG format
• Check "Include 'id' attribute" if you need element IDs
• Enable "Outline Text" to convert fonts to paths

PNG export in Figma

For PNGs, add multiple sizes in one pass. Use 1x, 2x and 3x where needed, and keep the suffixes consistent - @2x and @3x are the obvious ones. Figma handles anti-aliasing automatically, so there is no reason to micromanage that part.

Batch export without naming chaos

• Name frames to control output filenames
• Use the "Export Selected" option for multiple icons
• Consider plugins for complex export workflows

Illustrator gives more control, for better or worse

Illustrator is the more flexible option, which is useful when exports have to fit a stricter production workflow. It also gives you more chances to get the settings wrong, so the extra control is not free.

Export for Screens

• File → Export → Export for Screens
• Select artboards to export
• Configure formats and scales in the right panel
• Set up naming convention with prefix/suffix
• Save presets for repeated use

SVG settings that actually matter

• Styling - Presentation attributes, which is usually the cleanest choice for icons
• Font - Convert to outlines for cross-platform compatibility
• Images - Embed if present, or link for development
• Decimal places - 2-3 is usually sufficient for icons
• Minify - Enable for smaller file size
• Responsive - Enable to remove fixed width and height

Asset Export panel

The Asset Export panel is the quicker route for repeated icon sets. Open Window → Asset Export, drag the icons in, set multiple formats per item, then export everything at once.

Sketch uses slices and exportable layers

Sketch handles icon export through slices and exportable layers.

Making a layer exportable

• Select the layer or group
• In the right panel, click "Make Exportable"
• Add sizes (1x, 2x, 3x) and formats
• Configure prefix/suffix for naming

SVG settings in Sketch

• Check "Use 'id' attribute" for element IDs
• Enable "Flatten" for simple icons
• Consider "Include artboard in export" for background

When slices make more sense

Slices are worth using when the export boundary has to be exact or when the icon needs specific padding. Insert → Slice, or use the slice tool directly.

Affinity Designer and Export Persona

Affinity Designer has solid export controls, especially once you switch into Export Persona.

Export Persona workflow

• Switch to Export Persona for advanced export
• Create slices for each icon
• Configure format and size per slice
• Export all slices at once

Continuous Export during iteration

Continuous Export re-renders assets automatically when changes are made. That is useful during iterative design phases, when the same icon can go through several small adjustments before sign-off.

Clean up the files after export

Design tools do not always produce the leanest files. A quick pass after export usually pays for itself.

SVG optimisation

• Run through SVGO for size reduction
• Remove unnecessary metadata
• Simplify path data where possible
• Validate output renders correctly

PNG optimisation

• Use tools like TinyPNG or ImageOptim
• Consider lossy compression for significant savings
• Verify transparency is preserved

Building ICO files for Windows

ICO files need a slightly different workflow, because most design tools do not export them directly.

• Export PNG at multiple sizes (16, 32, 48, 256)
• Use a converter tool to combine into ICO
• Include all common sizes in single ICO file
• Test on Windows to verify appearance

Automation starts mattering at scale

Large icon sets are a different job. At that point, automation stops being a nice extra and starts saving real time.

• Figma API - Programmatically export assets
• Illustrator scripting - JavaScript/ExtendScript for batch operations
• Command-line tools - SVGO, ImageMagick for processing
• Build pipelines - Integrate export into CI/CD

Automation keeps exports consistent and saves hours on large projects.

During concept exploration, an ai image combiner can help teams prototype composite references before committing to final icon exports.

Check the exports before you ship them

Always check exports before delivery. Open SVGs in a browser to confirm the rendering, view PNGs at actual size for sharpness, test on multiple browsers and platforms, verify file sizes are reasonable, check transparency, and confirm the naming follows your convention.