Exporting Icons from Design Tools

The gap between designing icons and using them in production often comes down to export settings. Incorrect exports can introduce quality issues, bloat file sizes, or create compatibility problems. This guide covers export best practices for major design tools.

Preparing Icons for Export

Before exporting, ensure your icons are export-ready:

Flatten groups - Remove unnecessary nesting
Outline strokes - Convert strokes to fills if your export requires it
Check alignment - Verify icons align to pixel grid
Remove hidden layers - Delete anything not needed in output
Standardize artboards - Consistent canvas size across all icons
Name appropriately - Filenames should follow your naming convention

Time spent preparing icons reduces post-export cleanup significantly.

Exporting from Figma

Figma's export system is straightforward and powerful:

SVG Export

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

Add multiple export sizes (1x, 2x, 3x) simultaneously
Use suffix convention: @2x, @3x
Figma handles anti-aliasing automatically

Batch Export Tips

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

Exporting from Adobe Illustrator

Illustrator offers extensive export control:

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

Styling - Presentation attributes (cleanest 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/height

Asset Export Panel

Window → Asset Export
Drag icons to create export items
Configure multiple formats per item
Export all at once

Exporting from Sketch

Sketch uses slices and exportable layers:

Make 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

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

Using Slices

Create slices for precise export boundaries
Useful when icons need specific padding
Insert → Slice or use the slice tool

Exporting from Affinity Designer

Affinity Designer provides robust export options:

Export Persona

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

Enable for automatic re-export on changes
Useful during iterative design phases

Post-Export Optimization

Design tools don't always produce optimal files. Post-process for best results:

SVG Optimization

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

PNG Optimization

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

Creating ICO Files

ICO files require special handling as most design tools don't export 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 and Scripting

For large icon sets, automate the export process:

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 ensures consistent exports and saves hours on large projects.

Quality Verification

Always verify exports before delivery:

Open SVGs in a browser to check rendering
View PNGs at actual size for sharpness
Test on multiple browsers/platforms
Verify file sizes are reasonable
Check that transparency works correctly
Confirm naming follows conventions