Question 1

What is an SVG sprite?

Accepted Answer

An SVG sprite is a single SVG file containing multiple icons defined as elements or groups. Instead of loading many individual icon files, a sprite loads one file and each icon is referenced by its ID. This technique improves performance but can make it difficult to extract individual icons.

Question 2

What sprite formats does this tool support?

Accepted Answer

The extractor supports: (1) elements — the standard sprite pattern used by Heroicons, Feather Icons, and most modern icon libraries. (2) groups — an older but common pattern. Single SVG files with no sprite structure are also handled as a single icon.

Question 3

How do I extract icons from a framework's icon library?

Accepted Answer

Find the sprite SVG file in the library's npm package (usually in the dist/ folder), open it with a text editor, copy all the code, and paste it into the extractor. The tool will identify each <symbol> element and show it as a separate icon.

Question 4

Can I extract icons from Heroicons or Feather Icons?

Accepted Answer

Yes. Both Heroicons and Feather Icons provide SVG sprites with <symbol> elements. Paste the sprite code into the extractor and each icon will appear as a separate downloadable SVG.

SVG Icon Extractor

How SVG sprites work

Supported sprite patterns

Related SVG tools