Sprite sheet generator
Pack icons into one sheet with the CSS to match.
How to use Sprite sheet generator
- Drop your icons onto the upload area. Add as many as you like.
- Set the gap between sprites in pixels.
- Click Generate sprite sheet.
- Copy the generated CSS, or click Download zip to get sprite.png and sprite.css together.
Serving twenty separate icon files means twenty separate HTTP requests. Packing them into one sprite sheet and addressing each icon with a CSS background-position offset instead means one request for all of them — a classic, still-useful trick for icon sets that aren't already inline SVG.
Drop in as many icons as you like, of any size — they're packed efficiently into rows rather than forced into a uniform grid, so a mix of icon sizes doesn't waste space. Each icon gets its own CSS class with the exact offset and dimensions already filled in; just add that class (plus the shared .icon class) to an element.
Download the zip and drop sprite.png and sprite.css straight into your project.
Questions
How do I actually use the generated CSS?
Give an element both the shared .icon class and the specific icon's class, e.g. <span class="icon icon-search"></span> — the shared class points at the sheet image, the specific class positions and sizes it.
Why is there a gap between icons on the sheet?
A small gap (2px by default) stops a neighbouring icon's edge pixels from bleeding into an adjacent one when the browser scales or renders at odd sub-pixel positions. Set it to 0 if you're confident that won't be an issue for your icons.
Should I use a sprite sheet instead of inline SVG icons?
For a modern build with SVG icons, inlining or an SVG symbol sprite is usually the better modern approach. This tool is for raster icons (PNG, etc.) or older projects where a classic image sprite sheet is still the simplest fit.
Are my icons uploaded anywhere?
No. Packing and rendering happen entirely on a canvas in your browser — nothing leaves your device.