SVG Sprite Sheet Generator

An icon system with dozens of separate SVG files means dozens of requests or dozens of copies of the same markup. A sprite sheet gathers them in one file, where each icon is a reusable symbol, and a page draws any of them with a one-line use element. This page builds the sheet from the files you drop in, previews every symbol and writes the markup to use them.

Symbols and use

A <symbol> is a definition that is never drawn by itself; it only appears where a <use href="#id"> points at it. The symbol carries its own viewBox, so the icon scales to whatever size the referencing svg has. The sprite wrapper has display: none, so the definitions take no space on the page. When you place <svg width="24" height="24" aria-hidden="true"><use href="#icon-home"/></svg> anywhere, the browser renders the home icon at 24 pixels.

A worked example

Press Sample for three Lucide-style icons named home.svg, search.svg and star.svg, and type icon- into the prefix. The page reports three symbols with the ids icon-home, icon-search and icon-star. The sprite begins <svg xmlns="http://www.w3.org/2000/svg" style="display: none">, then <symbol id="icon-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> containing the path. The width and height are gone, but the drawing attributes remain on the symbol. The usage block lists one snippet per icon, such as <svg width="24" height="24" aria-hidden="true"><use href="#icon-star"/></svg>.

Inline or external

You can paste the sprite once near the top of the body, or save it as sprite.svg and reference sprite.svg#icon-home. The inline route is the most reliable: it works everywhere, can be styled and needs no extra request. The external route is limited by the same-origin rule, so the sprite must come from your own domain, and a file served from a CDN will not load into a use. A build step can inline the sheet into every page if you prefer an external source file.

Colour and size

Icons that draw with currentColor, as the sample does, take the text colour of wherever the use sits, so one CSS rule such as .button svg { color: #6366f1 } recolours them, and hover states work normally. Icons with hard-coded hex colours keep those colours. Sizes come from the width and height you give the referencing svg; the symbol’s viewBox scales the content to fit. Because the shadow content is inherited, CSS selectors on the outer page cannot reach into individual paths of a symbol.

Names and ids

The file name without .svg is turned into a lower-case, hyphenated id, so MyCoolIcon.svg becomes my-cool-icon, and the prefix is added in front. Two files that produce the same id get -2, -3 and so on. Use a prefix to avoid clashes with other ids on the page. If two icons contain internal ids, such as a gradient called a in each, the page shows a warning, because all ids in one document must be unique and the second gradient would be ignored. Rename the ids in the source or optimise the files first.

Edge cases

Accessibility is up to you: the generated snippets are marked aria-hidden for decorative icons. For an icon that carries meaning, remove that attribute and add a title or an aria-label to the outer svg or its button. A file with no viewBox falls back to its width and height, and if it has neither the page warns that the symbol will not scale. Only the fill, stroke and related drawing attributes of the root svg are carried over to the symbol, so other root attributes are lost. Very large sprite sheets slow the first paint if inlined in every page; split by feature.

Limits

The tool combines files; it does not optimise paths, merge duplicate definitions or rename internal ids. It handles single-root SVG files with a viewBox. Nothing is uploaded: the files are read locally.

Related tools

• SVG Optimizer cleans each icon before it goes into the sheet.
• SVG to JSX Converter produces one component per icon instead.
• SVG to CSS Converter embeds an icon as a data URI.
• App Icon Generator makes the icon sizes for apps and sites.