Sprite sheet generator
Pack icons into one image, with the CSS to use each of them.
DeveloperRuns on your device. Nothing is uploaded.
How it works
Add icons
Drop PNG, WebP or SVG files. Names come from the file names.
Choose a layout
Set the padding, and force a size if yours differ.
Make the sprite
Press the button, then check the result.
Download
Unzip and open preview.html to see every class.
Questions
Link sprite.css, then write <i class="icon icon-home"></i>. Each class sets the icon's size and position.
For SVG icons, the symbol sprite is the modern choice. Raster sprites still help when you've got many small PNGs.
They get a number, like icon-home-2. Names are made safe for CSS, too.
No. Packing happens in your browser, so nothing is sent to a server.