An SVG sprite generator for icon systems
An SVG sprite puts all your icons in one file as <symbol> elements, so a page can show any of them with a two-line <svg><use href="#icon-home"></use></svg>. You get one cached download instead of dozens of requests, icons that scale perfectly, and — with currentColor — icons that change colour with your CSS.
This SVG sprite generator builds the sprite from the files you drop in. Each symbol’s id comes from its file name, its viewBox is kept (or created from width and height), ids inside each icon are prefixed so two icons with a gradient called g no longer clash, and scripts, comments and editor metadata are removed. You can preview every icon, rename ids, copy usage snippets, download the sprite and a demo page, or switch to a CSS sprite that embeds each icon as a data URI background.
How to use the SVG Sprite Generator
- Drop your SVG icons on the box (or click to choose several files). Four sample icons are loaded so you can try it first.
- Set an Id prefix such as
icon-and check the ids under each preview; edit any of them. - Tick Replace colours with currentColor for single-colour icons you want to recolour with CSS. Keep <title> on for accessible names.
- Choose <symbol> sprite or CSS data URIs, then Download the file and the Demo HTML.
- Copy the snippet from How to use it, or click any preview tile to copy the snippet for that icon.
SVG Sprite Generator features
Ids from file names
“Arrow Left.svg” becomes icon-arrow-left; duplicates get -2, -3 so every id is unique.
viewBox preserved
The original viewBox is copied to the symbol; icons with only width and height get 0 0 width height.
Collision-free internals
Gradient, clip-path, mask and filter ids inside each icon are prefixed and every url(#…) and href="#…" reference is updated.
currentColor in one click
Fill and stroke colours (not none or gradients) become currentColor, including root-level and inline-style colours.
CSS sprite mode
Each icon becomes a class with a URL-encoded SVG data URI — no external file, works in background-image and mask-image.
Symbol sprite or CSS sprite?
| Feature | <symbol> sprite | CSS data URIs |
|---|---|---|
| Change colour with CSS | Yes, with currentColor | No — colour is baked in (pick it here) |
| Markup needed | <svg><use href> | A class on any element |
| Caching | One file, cached | Inside your CSS file |
| Accessible names | <title> or aria-label | aria-label on the element |
| Best for | UI icon systems | Decorative icons, pseudo-elements |
Using the sprite correctly
An external sprite (href="/sprite.svg#icon-home") must be served from the same origin as the page — browsers block cross-origin <use> references. If your icons live on a CDN on another domain, inline the sprite once at the top of the <body> and reference #icon-home instead.
Give decorative icons aria-hidden="true", and meaningful icons role="img" with an aria-label (or keep the symbol title). Size icons with width/height or CSS; the viewBox keeps proportions. To clean icons before building the sprite, use the SVG Editor or the SVG Compressor.
Troubleshooting
- Icon shows black instead of your colour: it had no fill attribute — tick currentColor so the default fill follows CSS too.
- Gradient icon turns flat with currentColor: gradients are left alone on purpose; only plain colours are replaced.
- Icon is cut off: its viewBox does not match the drawing. Fix the viewBox in the SVG Editor and re-add it.
- Need PNG versions as well? Convert individual icons with SVG to PNG.
SVG Sprite Generator FAQ
What is an SVG sprite?
A single SVG file containing many icons as <symbol> elements, each with an id and viewBox. Pages display an icon with <use href="#id">, so all icons load in one request.
How do I change the colour of sprite icons?
Build the sprite with “Replace colours with currentColor”, then set color on the <svg> or a parent element in CSS.
Why does my external sprite not show in Chrome?
The page and sprite must share an origin, and opening the HTML from your file system (file://) blocks external references. Serve the files from a local server or inline the sprite.
Does the SVG sprite generator upload my icons?
No. The files are read and processed in your browser only.
Can I use the sprite in React or Vue?
Yes. Inline the sprite once in your root layout (for example in index.html) and render <svg><use href="#icon-home" /></svg> in components. Many teams wrap that in a small Icon component that takes the name as a prop.
How many icons can a sprite hold?
There is no fixed limit; hundreds of icons are common. Keep the file under a few hundred kilobytes so it loads fast, and split rarely used icons into a second sprite.