Feature — every source · 3 of 4
Extract one icon from an SVG sprite
A sprite sheet stacks dozens of icons into one file and paints each with <use href="#id">. Save it the obvious way and you get the entire sheet — or a blank. SVG Downloader resolves the reference and hands you the one glyph.
The problem
Why a sprite gives you the whole sheet or nothing
SVG sprites are how large icon sets stay fast. Every icon is defined once — usually as a <symbol> with an id, tucked inside a single hidden <svg> — and each place that shows an icon just writes <use href="#chevron">. The browser stamps a copy of that symbol wherever the reference sits. Efficient to load, and a trap to extract from.
The trap is that a <use> element holds no artwork. It's a pointer. Try to save the icon you see and you're saving an empty reference — a file that renders nothing on its own because the symbol it points to isn't in it. Go the other way and save the sprite source, and you get all forty icons welded into one file, most of them defined at coordinates far outside any single viewBox. Neither is the one icon you wanted.
What SVG Downloader does instead
Open the popup and it follows the pointers. For every <use> that points somewhere in the same document — the usual <use href="#chevron"> into a hidden inline sprite — it looks up the referenced <symbol> or <g> and reconstructs a complete, standalone SVG for that single glyph. Each one gets its own isolated preview, so a sheet of forty icons becomes forty previews you can page through and save one at a time.
- The reference resolved. The
href(or legacyxlink:href) is followed to its symbol, and that symbol is cloned into a fresh<defs>at the top of the saved file. The<use>stays where it was and now resolves against markup the file carries itself — so it renders correctly anywhere, with no sprite alongside it. - One glyph, not the sheet. You save the chevron, not the chevron plus thirty-nine neighbours. Each reference is extracted separately, and you can type the name you want before saving it — or take the lot as a numbered set with Download All as ZIP.
- Or take them all. When you want the full set, Download All as ZIP extracts every referenced symbol at once, de-duplicated, into one archive.
What you get back
- Format
- A standards-clean .svg per glyph — the symbol inlined into a self-contained file, namespace repaired.
- References read
<use>pointing inside the same document, viahrefand legacyxlink:href. External sprite files aren't resolved.- Where it runs
- Entirely in your browser. References are resolved locally — no upload, no server, no account.
- Also handles
- Inline SVG, CSS backgrounds and whole-page ZIP.
Good to know
Questions about SVG sprites
What is an SVG sprite, exactly?
One SVG file that defines many icons as separate <symbol> elements, each with its own id. Pages reference an icon with <use href="#id"> instead of repeating its markup. It's the icon-set equivalent of a CSS sprite sheet — one download, many glyphs.
Why does saving the icon give me an empty file?
Because a <use> element contains no artwork — it points at a symbol defined elsewhere. Copied out on its own, that reference has nothing to render. SVG Downloader resolves the pointer to the actual symbol first, so the file you save draws the icon.
Does it work with an external sprite file, not just an inline one?
No — external sprites aren't supported. If the reference points outside the current document, as in <use href="/sprite.svg#cart">, that <svg> is skipped and counted as a skip rather than handed to you broken. Only same-document references — <use href="#cart"> into a hidden inline sprite, which is how most sites ship one — are resolved. If a site uses an external sprite, opening sprite.svg directly gets you the source sheet.
What about a symbol that references another symbol?
Resolution goes one level deep. A <symbol> whose own contents include a further <use> pointing at a second symbol is left unresolved, so that nested piece won't draw in the saved file. It's uncommon — most sprites define each glyph flat — but worth checking the preview if an icon looks partly empty.
Pull one clean icon out of the sheet
Free, private, and it follows the reference the browser hides.