SVG sprite generator
Combine many SVG icons into one sprite file. Load it once and show any icon with a short use tag.
Drop SVG files or a folder hereFiles stay on your device
No files yet
Converted files appear here. Drop SVG files above, or try it with sample icons.
How to make an SVG sprite
- Drop your SVG iconsAdd files, a folder, or paste SVG code.
- Set the id prefixEach icon becomes a symbol named after its file, such as icon-rocket.
- Download sprite.svgPut it on your site and show icons with the use code.
More free tools
All tools- SVG to PNGSharp PNGs at any size, one file or hundreds.
- PNG to SVGTrace a PNG or JPG into a clean vector.
- PNG to ICOFavicon .ico files with 16 to 256 px inside.
- Favicon & app iconsWebsite, Chrome, iOS and Android sets.
- SVG to ReactTyped JSX components, ready to paste.
- SVG optimizerSmaller SVG files with nothing visible lost.
- SVG spriteMany icons in one sprite.svg file.
- Sticker makerWhatsApp and Telegram sticker files.
Questions
Why use an SVG sprite?
The browser loads one file for all your icons and caches it. Each icon on the page is a line of markup instead of a full SVG.
How do I show an icon from the sprite?
Add an svg element with a use element whose href points to the sprite and the icon’s id, such as /sprite.svg#icon-rocket.
Can I change icon colors with CSS?
Yes. One-color icons use currentColor, so they take the color of the text around them.
Do gradients still work?
Yes. Ids inside each icon are prefixed with its symbol id, so gradients and clip paths never clash.