# Sprite sheet generator — pack icons + CSS, no upload

> Combine many PNG icons into one sprite sheet with companion CSS classes, in a ZIP. Built in your browser with no upload.

Pack many small PNGs into one sprite sheet and get the companion CSS classes to position each icon, bundled in a ZIP. It's assembled on your device, so nothing is uploaded.

Sprite sheets bundle a set of icons into one image plus CSS that shows the right slice — a well-worn technique for cutting request counts and speeding up icon-heavy pages. This tool does the packing and writes the matching CSS for you.

It's handy for UI icon sets and small game assets alike. For website favicons use the Favicon pack instead, and to shrink an SVG icon before rasterizing use SVG optimize.

## How to

1. **Add icons.** Drop the PNG icons you want to combine.
2. **Pack.** The tool lays them out into a single sprite image.
3. **Download ZIP.** Get the sprite sheet plus generated CSS classes.

## FAQ

### Why use a sprite sheet?

Combining many small images into one file reduces HTTP requests, so icons load faster — a classic web performance win, especially over HTTP/1.1.

### Do I get the CSS positions?

Yes. The tool generates CSS classes with the correct background-position for each packed icon, so you can drop them straight into your styles.

### Are my icons uploaded?

No. Packing happens on a canvas in your browser, so your assets stay local.


## Related tools

- [Favicon pack](https://www.safepaper.app/media/favicon-pack)
- [SVG optimize](https://www.safepaper.app/media/svg-optimize)
- [Resize & convert](https://www.safepaper.app/media/resize-convert)
- [Palette](https://www.safepaper.app/media/palette-extract)

---

Canonical HTML: https://www.safepaper.app/media/sprite-sheet
Markdown: https://www.safepaper.app/media/sprite-sheet.md

There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check.