Choose your SVG icons, as many as you like at once, and get one sprite file with a symbol for each. Every symbol is shown, drawn from the sprite itself, with the line of code that puts it on a page.

Free, no account. The file is read by code running in your browser. It is not uploaded, and nothing about it is stored.

How to make an SVG sprite

Press “Choose your own SVG files” and pick all your icons at once, or drop them on the box. Four sample icons show what you get.
Each file becomes one symbol, named after the file: home.svg becomes the symbol home. Look over the pictures; each is drawn through <use> from the sprite, so what you see is what a page will show.
Say where the sprite will live: in the page itself, or in a file of its own. The code under each icon changes to suit.
Download sprite.svg, and copy the line under each icon to wherever that icon should appear. “Remove” takes an icon out; “Add more SVG files” puts more in.

What an SVG sprite is

One SVG that holds many drawings, each inside a <symbol> element with an id. A symbol is not drawn where it stands. It is drawn wherever a <use> element points at its id, as often as you like and at any size. A page with forty icons then needs one file, or none at all when the sprite is pasted into the page, and each icon is written once however many times it appears. The guide to g, defs, symbol and use explains the elements themselves.

What the generator does to each file

The id comes from the file name. Anything that is not a letter, a digit, a hyphen or an underscore becomes a hyphen, so “My Icon (1).svg” is My-Icon-1. A name that starts with a digit gets i- in front, because an id must start with a letter. Two files with the same name become home and home-2.
The viewBox is kept as the file wrote it, so each symbol scales by its own proportions. A file with no viewBox gets one made from its width and height. The width and height themselves are dropped: the size is set where the symbol is used.
Other settings on the outer element are carried over to the symbol. Outline icons often put fill="none" stroke="currentColor" there, and without them every icon would turn into a black blob.
Clashing ids are made unique. Editors reuse the same ids in every file they save: a, SVGID_1_, clip0. In one document the second gradient called a would lose to the first, and an icon would take another icon’s colours. An id that an earlier file has used gets its symbol’s id in front, heart-a in the sample, and everything that points at it follows: url(#…), href, aria-labelledby and the file’s own style sheet.
Style sheets are tied to their symbol. A rule such as .st0 { fill: red } would otherwise colour every icon that uses the class st0. Each selector gets the symbol’s id in front, #check .st0 in the sample.
What a symbol cannot hold is dropped: the <?xml?> line, the DOCTYPE and comments outside the drawing. Entities a DOCTYPE declared are written out in full, and namespace declarations move to the sprite’s outer element.

Putting the sprite on a page

In the page itself: paste the contents of sprite.svg just after the opening <body> tag, then write <svg width="24" height="24"><use href="#home"/></svg> wherever the icon goes. The sprite is written with a width and height of 0 and position:absolute, so it takes up no room. It is not hidden with display:none, because gradients inside an SVG hidden that way stop working in some browsers.

In a file of its own: put sprite.svg beside the page and point at it, <use href="sprite.svg#home"/>. The browser fetches the file once and keeps it. The file must come from the same site as the page; browsers do not load a sprite for <use> from another one.

Either way the icon takes its size from the <svg> you wrap round the <use>, and an icon drawn with currentColor takes the text colour of the place it is put.

What it does not do

Make the icons smaller. Run them through the SVG optimizer first; the sprite keeps each file’s drawing as it was written.
Change any colours. An icon with a fixed colour keeps it; change it to currentColor in the file if the page should set it.
Rename what it cannot see: an id used only from a script, or the name of a CSS animation. Animation names are shared by the whole sprite, and the page says when a file has any.
Read a file that is not valid SVG. That file is left out, named, and the rest of the sprite is still made.

Questions

Why were some ids inside my icons renamed?

Because two files used the same one. Ids must be unique in a document, and in a sprite all your icons share one document. The first file keeps its id; later ones get their symbol’s id in front. The list under each icon shows what was renamed.

Should the sprite go in the page or in its own file?

In the page, the icons show at once with no extra request, and the page’s CSS can reach inside them. In its own file, the sprite is fetched once and shared by every page of the site. For a handful of icons used on one page, put it in the page.

How do I change an icon’s size or colour?

Size: the width and height on the <svg> that holds the <use>, or CSS on it. Colour: if the icon was drawn with currentColor, set color on that element. A colour fixed inside the symbol cannot be changed from outside it.

Does it work in every browser?

Symbols and <use> work in all current browsers. Safari before 12.1 needs the older spelling xlink:href in place of href, and no version of Internet Explorer loads a sprite from a separate file.

Are my files uploaded?

No. The sprite is built by code running in your browser, and the files never leave your device.

SVG sprite generator