Combining three icons
home.svg, search.svg, settings.svg
One sprite.svg containing <symbol id="home">, <symbol id="search"> and <symbol id="settings">, each with its original viewBox preserved.
SVG Sprite Generator
Combine multiple SVG icons into one symbol-based sprite sheet, with a ready-to-use usage example.
Was this tool useful?
About this tool
A page using a dozen SVG icons as separate files means a dozen requests; a sprite sheet means one. Combining them into `<symbol>` elements referenced by `<use>` is the standard pattern — this builds one from whatever icon files you have, without needing a build tool.
How to use it
- Upload multiple SVG icon files.
- The combined sprite and a usage example are generated automatically.
- Copy or download the sprite file, and copy the usage snippet for the first icon (swap its id for any other icon in the sprite).
Examples
Common problems
- Two icons end up with the same id in the sprite.
- Icon ids are derived from the filename — if two files share a name (from different folders, say), the second one is automatically suffixed ("icon-2") rather than silently overwriting the first.