SVG Sprite Generator
Combine multiple SVG files into one <symbol>-based sprite sheet with ready <use> snippets.
Loading tools...
How SVG sprite sheets work
An SVG sprite combines many icons into a single file using <symbol> elements, each with its own id and viewBox. The sprite itself is hidden (display:none) and individual icons are rendered anywhere on the page with a lightweight <svg><use href="#icon-id" /></svg> reference — no extra network request per icon, and each instance can be styled independently with CSS (e.g. fill: currentColor).
This keeps markup small and cacheable: the browser downloads the sprite once, then every <use>reuses it. It's the same technique used by icon libraries like Feather and Bootstrap Icons for their sprite distributions.
Drop in as many .svg files as you like — each becomes a symbol named after its filename (editable inline). Files without a valid <svg> root are flagged and excluded from the generated sprite. For cleaning up messy SVG markup before combining it, try the SVG Optimizer.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Combining many icons into one file so a page makes a single request.
- Producing symbol definitions you can reference by id from anywhere in a page.
- Consolidating an icon set that is currently inlined many times over.
- Getting ready-to-paste reference snippets for each symbol.
- Reducing duplicated inline SVG in a template.
Frequently Asked Questions
- What is an SVG sprite?
- One file holding many icons as `<symbol>` elements, each with an id, referenced from the page with `<use href="sprite.svg#icon-name">`. One request serves the whole set and the browser caches it once.
- How is it better than inlining each icon?
- It stops duplicating markup. Inlining puts the full path data into every component that uses it, which bloats the HTML and defeats caching. A sprite pays for each icon once regardless of how many times it appears.
- Why must each symbol keep its own viewBox?
- Because that is what lets icons of different native sizes render consistently at a shared display size. A symbol without one inherits the referencing element's coordinate system, and the icon appears cropped or minuscule.
- Can sprite icons be styled with CSS?
- Partly. `fill: currentColor` inside the symbol works and is the standard way to make icons follow text colour, but styling individual internal elements from outside is limited because `<use>` creates a shadow tree. Multi-colour icons need CSS variables declared inside the symbol.
- Does an external sprite work cross-origin?
- No — `<use>` with an external file is subject to CORS and is blocked cross-origin, and it also does not work from a `file://` page. Serving the sprite from the same origin avoids a class of confusing failures where the icons silently do not appear.
Common errors and gotchas
- Colliding ids between source files, where gradients and clip paths silently reference the wrong one.
- Losing per-icon viewBox values, which the symbol element needs to scale correctly.
- Hard-coding fills in the symbols, which prevents styling them from CSS.
- Referencing a sprite from another origin, where `use` is blocked by the browser.
- Building a sprite so large that every page loads every icon it does not need.