How do I use the generated CSS?

Put sprite.png and sprite.css in the same folder, include the stylesheet and give an element both the base class and the icon class, for example . Class names come from file names, and the prefix can be changed in the options.

What does the @2x option do?

If your icons were drawn at double size, enable it to get a normal-size sprite.png plus a sharp sprite@2x.png. The CSS switches to the @2x image on Retina and other high-DPI screens while keeping the same display size.

Are my files uploaded to a server?

No. Everything runs locally in your browser via WebAssembly. Files never leave your computer and are discarded when you close the page.

Do I need to sign up or pay?

No. The site is completely free, requires no account, has no usage limits and adds no watermarks.

🧱

🧱CSS Sprite Generator - Pack Images into a Sprite Sheet with CSS, or Slice a Sheet

Combining many small icons into one sprite sheet cuts down HTTP requests. Pick your images (transparent PNGs work best) and a growing bin-packing algorithm arranges them compactly — or choose a grid, a single row or a single column — with optional padding to stop edges bleeding into each other. With the @2x option, the sheet is built from double-resolution images and both sprite.png and [email protected] are produced; the CSS uses background-size and a media query to serve the sharp version on high-DPI screens. sprite.css contains a class named after each file with its width, height and background-position, alongside a sprite.json coordinate map and a preview.html page, all in one zip. In the other direction, Slice a sprite sheet cuts game characters, animation frames and other sheets into individual PNGs by rows × columns or by cell size, with start offset and gap support, skipping empty cells automatically.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use CSS Sprite Generator

1Choose Build a sprite sheet and upload several icons, or Slice a sprite sheet and upload one sheet
2When building, pick the layout, padding, class prefix and @2x option; when slicing, set rows/columns or cell size and check the red-box preview
3Download the PNG + CSS + JSON zip, or the sliced frames

FAQ

How do I use the generated CSS?: Put sprite.png and sprite.css in the same folder, include the stylesheet and give an element both the base class and the icon class, for example <i class="icon icon-home"></i>. Class names come from file names, and the prefix can be changed in the options.
What does the @2x option do?: If your icons were drawn at double size, enable it to get a normal-size sprite.png plus a sharp [email protected]. The CSS switches to the @2x image on Retina and other high-DPI screens while keeping the same display size.
Are my files uploaded to a server?: No. Everything runs locally in your browser via WebAssembly. Files never leave your computer and are discarded when you close the page.
Do I need to sign up or pay?: No. The site is completely free, requires no account, has no usage limits and adds no watermarks.