Sprite sheet maker — pack icons or frames into one PNG with CSS

How to use the sprite sheet maker

1. Choose two or more images, such as icons or animation frames. Put them in the order you want.
2. Set Columns (1 to 64). Use 1 row of many columns for an animation strip.
3. Set Gap (0 to 32 px), the empty space between cells.
4. Type a CSS class prefix (default sprite).
5. Press Build sprite sheet. Download sprite.png and copy or download sprite.css.

What it does and when to use it

A sprite sheet puts many small images into one file. A web page can then show any of them with one download, by moving the background into place. Game engines and CSS animations read frame strips the same way.

Use it for a set of UI icons, flag or emoji sets, button states (normal, hover, pressed) or the frames of a walking character. For a single big picture cut into tiles, the opposite job, use the image splitter. To make icons the same size before packing, run them through the image resizer. If you only need to inline one small image, Image to Base64 may be simpler.

How it works

All images are decoded in a background worker on your device. The layout uses a fixed grid:

• cell width = widest image, cell height = tallest image
• sheet width = columns × cell width + (columns − 1) × gap
• sheet height = rows × cell height + (rows − 1) × gap

If you ask for more columns than you have images, the column count drops to the number of images. Each image is drawn at the top-left of its cell. The sheet is saved as PNG, so transparency is kept, and it goes through a lossless optimiser to make the file smaller. The CSS sets background-image: url("sprite.png") on the prefix class, and one rule per image with its size and a negative background-position.

Worked examples

These sizes come from the layout rule above.

• Eight 64 × 64 icons, 4 columns, gap 2 px. Two rows of four. The sheet is 4 × 64 + 3 × 2 = 262 px wide and 2 × 64 + 2 = 130 px tall. The second icon sits at background-position: -66px -0px and the fifth at -0px -66px.
• Twelve 128 × 128 animation frames, 12 columns, gap 0. One strip of 1536 × 128 px, ready for a CSS steps(12) animation or a game engine.
• Mixed sizes. Icons of 32 × 32, 48 × 24 and 16 × 16 with 4 columns become one row of 3 cells, each 48 × 32. With gap 2 the sheet is 148 × 32 px, and the images start at x = 0, 50 and 100.

Limits and tips

• Give your files clear names first. The class names come from them.
• Images of very different sizes waste space, because every cell is as big as the largest one. Make two sheets instead.
• Use your sheet with display: inline-block (already in the CSS) or a block element. An inline span will not show its width and height.