SVG Sprite Generator

How to use it

1. Paste one or more complete SVG documents into the input box. Each svg element becomes one symbol.
2. Set an id prefix. It is used for icons that have no id attribute of their own.
3. Leave the size option ticked if you want width and height removed so the icons scale with CSS.
4. Press Build sprite and read the markup, then copy the reference snippets for your templates.
5. Download the sprite as an .svg file and inline it at the top of your page body, or save it and reference it by path.

Common use cases

• Bundling an icon set - keep one request for twenty icons instead of twenty requests.
• Converting an icon folder - paste the files you already have instead of installing a build plugin.
• Preparing inline icons - place the sprite markup once and reference symbols anywhere below it.
• Cleaning exported files - strip fixed width and height so icons inherit the size from your CSS.

Why it stays private

Parsing and merging happen in your browser with a regular expression over the text you pasted. There is no upload, no account and no network request.

FAQ

Q: How are ids chosen? A: The tool reads the id attribute of each svg element when it has one. If the id is missing, or already taken by an earlier icon, the tool falls back to the prefix plus a running number.

Q: Why is the sprite hidden with display none? A: The sprite is only a library of symbols, so it should not paint anything itself. Keeping it inline but hidden lets every use element on the page resolve its reference without an extra request.

Q: Can I reference a symbol from an external file? A: Yes. Save the downloaded file in your project and use a full path such as href="/assets/sprite.svg#check". Some older browsers need a polyfill for external references, so inlining the sprite is the more compatible option.