build a sprite
☞ runs entirely in your browser — nothing is uploadedDrop your SVG icons here
or click to browse — up to 40 SVG files
Preview
Paste this where you want the icons
OneImageTool
Free Image Tools
build a sprite
Drop your icons in and get one sprite file of symbol elements, plus the use line for each icon, ready to paste.
or click to browse — up to 40 SVG files
Preview
one file, one reference per icon
Every icon loaded as its own file is its own request, its own cache entry and its own chance to arrive a frame late. A sprite folds them into one document: each icon becomes a symbol with its own viewBox, nothing draws by itself, and you pull one out wherever you need it with use href="#icon-name". Because the reference is by id rather than by URL, the icon inherits currentColor and whatever CSS sits on the svg around it — which is exactly what a stack of img tags cannot do.
The hard part is not the wrapping, it is the names. Forty icons exported from a design tool will happily contain forty gradients called "a" and forty classes called "cls-1", and once they share a document the second one silently takes the first one's paint. So every id and class inside an icon is renamed with that icon's own symbol id as a prefix, and all four places a reference can hide — url() in an attribute, an href pointing at a fragment, the style attribute, and the CSS inside a style element — are rewritten to match. Nothing bleeds between icons.
three steps
Up to 40 SVG files at once, parsed in your browser. Reorder a row with the arrows; that order is the order of the symbols in the file.
Each symbol is named after its file with the prefix in front, and the list shows you the result. Two files with the same name get a number so no two symbols can claim one id.
The sprite goes into your page or gets served as sprite.svg; the snippet gives you one ready-to-paste line per icon.
quick answers
Two ways. Paste the whole sprite near the top of your HTML and reference an icon with use href="#icon-name"; or serve the file and reference it as use href="/sprite.svg#icon-name". The first avoids a request, the second lets the browser cache one sprite across every page.
The file name, lowercased, with anything that is not a letter or a digit turned into a hyphen, and the prefix in front. So arrow_left.svg with the default prefix becomes icon-arrow-left.
An XML id cannot start with a digit, and file names like 2-arrow.svg are common. The prefix also keeps icon ids from colliding with ids already on your page. You can change it or clear it; if clearing it would leave an invalid id, a fallback prefix is put back.
The second one gets a number appended. Without that, both symbols would carry the same id and every reference to it would render the first icon — a silently wrong picture rather than an error.
Yes. Every id and class inside an icon is renamed with that icon's symbol id as a prefix, and the references are rewritten with it: url() in attributes, fragment hrefs, the style attribute, and the CSS inside a style element.
If an icon uses fill="currentColor", yes — set color on the svg that holds the reference and the icon follows. Icons with hard-coded fills keep those fills; the sprite does not rewrite your paint.
Up to 40 at a time. A sprite has no real limit of its own, but a sheet much larger than that is usually better split by section of the site, so a page only carries the icons it actually uses.
No. The SVGs are parsed and assembled inside your browser, and the preview is a blob URL from your own machine. There is no server in this tool to receive a file.
Yes — free, with no watermark and no sign-up.