Sprite sheet generator

Combine many small images into one sprite sheet, with the CSS to use each one.

Files

Gap between images

Also make a 2× version for sharp screens

Add your images, icons or SVG files, in any sizes.
Set the gap between them, and switch on the 2× version if you want one for sharp screens.
Copy the CSS, or download a ZIP with the sprite sheet and its stylesheet.

What is a sprite sheet?: One image that holds many small ones. A page loads it once and shows a part of it wherever an icon is needed, which saves many separate requests.
How do I use the CSS?: Give an element the class icon plus the class of the picture, for example <span class="icon icon-home"></span>. The class names come from the file names.
What does the 2× version do?: It adds sprite@2x.png, the same sheet drawn at twice the size, and a rule that uses it on sharp screens at the same displayed size. For the best result, start from pictures that are already twice as large as you want to show them, or from SVG files.
Why is there a gap?: A little space keeps neighbouring pictures from bleeding into each other when the page scales them. 2 pixels is a safe default.
Can I use SVG files?: Yes. They are drawn at their own size into the PNG sheet. Scripts inside an SVG never run.