InfyTool
Free icons

SVG sprite generator

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

  1. Click “Choose Files” or drop your SVG icons into the box above. Whole folders work too.
  2. Adjust the Advanced settings if you need to, then click “Download ZIP”.
  3. 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.

SVG OptimizerShrink SVGs 40–70 % with no visual change SVG to ReactReact, Vue, Svelte components SVG to CSSData URIs for background & mask

Your files never leave your device

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.

More free tools

Need icons or SVGs to start from?

InfyTool is built by the same team as these free libraries.

InfyIconFree SVG and PNG icons you can open directly in these tools. InfySVGFree SVG designs and illustrations, ready to optimise or convert. InfyPNGFree transparent PNG graphics for mockups and social posts.