🖼️SVG Icon Export Guide

Guide SVG icon export optimization settings by file size and use case

SVG Optimization Checklist

ItemAction
Remove metadataDelete title, desc, and metadata tags
Unnecessary groupsMerge or remove empty <g> elements
Decimal precisionRound to 2 decimal places (precision: 2)
Simplify colorsConvert color values to shorthand HEX
Optimize pathsSimplify path data with SVGO
Tool: SVGO / SVGOMGAlways run optimization after export

Core Principles of SVG Icon Optimization

SVG files exported from Figma or Illustrator typically contain editor metadata, unnecessary group wrappers, and excessive decimal precision — making them far larger than needed. Running them through SVGO (or the SVGOMG web interface) can reduce file size by 50–80% with no visible quality loss.

For inline SVGs in web UIs, using fill="currentColor" lets you control icon color with CSS's color property. This makes dark mode support and hover states trivial — a single CSS rule changes all icons in a component.

Icon Size and viewBox

Most UI icons use viewBox="0 0 24 24" as the standard — the same grid used by Material Design icons. For inline SVG, remove the width and height attributes and set width: 1em in CSS so icons scale with the parent font size automatically.

Frequently Asked Questions

Should SVG icons include width and height attributes?

For inline SVG or sprites, remove them and use CSS. For standalone files or img tags, keeping a default size is safer.

What to watch for when exporting SVG from Figma?

Default export includes metadata and unnecessary groups. Run through SVGO after export. Set fill to currentColor for CSS color control.

SVG sprite vs inline SVG?

Sprites reduce HTTP requests with many icons. Inline SVG is easier to style with CSS and animate per-icon.