SVG Sprite / Icon Set Extractor

SVG sprite sheets — one file containing dozens of <symbol> elements — are great for production performance but terrible for previewing or extracting individual icons. Drop a sprite here and you get a visual grid of every symbol, plus a button to download any subset (or all of them) as separate SVG files. Works with Lucide, Heroicons, Feather, Font Awesome SVG export, and any custom symbol-based sprite.

How to use the SVG Sprite / Icon Set Extractor

Paste the full sprite SVG (the outer <svg> tag containing one or more <symbol> elements) or upload an .svg file. Click Extract symbols. The tool finds every <symbol> with an id attribute and renders each at the display size you pick.

Click any icon to download it as a standalone SVG file (the symbol's contents wrapped in a fresh <svg> root with the original viewBox). Or click Download all as ZIP at the bottom.

About SVG Sprite / Icon Set Extractor

SVG sprites use the <symbol> element to bundle many icons into one file. Each symbol gets an id, and pages reference them with <use href="#icon-home">. This is the same idea as image spritesheets in old CSS — fewer HTTP requests, better caching. Popular icon libraries that ship sprite files: Lucide, Heroicons (optional sprite build), Feather, Tabler, Phosphor, Material Symbols.

The downside is that previewing individual icons requires an HTML harness, and extracting one icon for use outside the sprite (e.g. pasting into Figma, Notion, or a different framework) is fiddly. Most icon library websites work around this with a grid UI, but if you have a third-party sprite or one built in-house, you're on your own.

This extractor handles the unwrap: it parses the SVG, walks the DOM, finds every symbol, computes the rendering viewBox, and reconstructs each icon as a standalone document. Works in the browser — no upload, no roundtrip.

Common use cases

  • Designer handoff — extract individual icons from a dev-built sprite to share with the design team.
  • Switching icon delivery — convert a sprite-based setup to per-icon imports for a Vite / Webpack build.
  • Cross-tool reuse — get individual SVGs from a sprite to paste into Figma, Sketch, Notion, Linear, or a different framework.
  • Auditing — see every symbol in a third-party sprite to decide which ones you actually use.
  • Documentation — extract icons for embedding into a README or design system docs.

Frequently asked questions

Will it work with Font Awesome's SVG sprites?
Yes — FA's sprite format is standard <symbol> elements.

What about sprites that use <code>&lt;g&gt;</code> instead of <code>&lt;symbol&gt;</code>?
Not detected — the tool looks for <symbol id="...">. Convert via a sprite-builder first if your source uses <g>.

How does it handle missing viewBox?
Falls back to 0 0 24 24 with a warning — most icon libraries use 24×24.

Are CSS classes / fills preserved?
Yes — the symbol's inner DOM is copied verbatim. If the original used currentColor for fill, the extracted icon will too.