Turn a folder of icons into one sprite file, with unique ids, live previews and the exact markup to use each symbol.
SVG icons or a whole folder · or paste SVG code · add more any time
No size limit · files are processed on your device and never uploaded · how it works
Advanced settings (optional)
Sprite options
ID prefix
Keeps sprite ids from clashing with ids elsewhere on your page.
Colours
Output
Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the SVG Sprite Generator
Click “Choose Files” or drop your SVG icons into the box above. Whole folders work too.
Adjust the Advanced settings if you need to, then click “Download ZIP”.
When the row shows Done, click “Download” — or “Download all” for a ZIP.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
What a symbol sprite is
A sprite is one SVG document containing many <symbol> elements, each with its own viewBox.
Instead of inlining a full SVG every time an icon appears, the page references a symbol with
<use href="#icon-name">: one download, many uses, and each instance can still be sized and coloured
with CSS. It is the technique behind most icon systems and it needs no JavaScript.
How the generator works
Drop your icons (or a folder). Each file's root attributes are read for a viewBox — derived from width and
height when missing — and its contents become a symbol whose id is the file name slugified and prefixed
(arrow-right.svg → icon-arrow-right). Ids inside each icon are namespaced so gradients, masks and
clip paths never collide when merged. The preview grid renders every symbol from the actual sprite, so what you see is
what <use> will draw. Everything runs in your browser.
Options
ID prefix — keeps sprite ids from clashing with ids elsewhere in your page. icon is conventional.
Strip colours — removes fills and strokes so icons inherit fill: currentColor and can be coloured with plain CSS. Recommended for UI icons; disable for multi-colour artwork.
Pretty print — readable output for committing to a repository; leave off for the smallest file.
External file snippets — switches the generated markup to /sprite.svg#id for a cached, shared file.
Tips
Run icons through the SVG Optimizer first — editor metadata inside a sprite is multiplied by
every icon. If you use the external-file approach, serve sprite.svg from the same origin with a long cache
lifetime and change the file name when the set changes. For frameworks that prefer components over sprites, see
SVG to React.
Frequently asked questions
Inline sprite or external sprite.svg — which should I use?
Inline (paste the sprite once at the top of <body>) is simplest and works everywhere, including in emails-style environments and with strict CSP; the cost is that the sprite is downloaded with every page. An external file (<use href="/sprite.svg#icon-x">) is cached once across pages, which is better for sites with many icons — but it must be served from the same origin and older Safari versions had bugs with it. Tick "External file snippets" to switch the generated markup.
Why does the generator rename ids inside my icons?
Two icons exported from the same tool often both contain id="a" or id="clip0". Merged into one document, those collide and gradients or clip paths point at the wrong element. Every id is prefixed with its symbol id (icon-arrow-clip0) and every reference (url(#…), href="#…") is updated to match, so each symbol stays self-contained.
What does "Strip colours" do?
It removes fill and stroke attributes (except none) so the symbol inherits fill: currentColor from the CSS snippet. That lets you colour icons with plain CSS — color: red on the parent — and reuse one sprite in light and dark themes. Turn it off for multi-colour illustrations that should keep their own palette.
How do I size and colour icons from the sprite?
Give the <svg class="icon"> a width and height (the provided CSS uses 1em so icons scale with text) and set color on it or an ancestor. The vertical-align in the snippet lines the icon up with adjacent text. Because <use> references a viewBox-bearing symbol, icons scale without distortion.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.