Sprite sheets vs. SVG sprites vs. icon fonts?

PNG sprites still win when the source is a real raster (game art, photo thumbnails). For UI iconography prefer SVG sprites (` ` + ` `) — they scale and respond to currentColor. Icon fonts are mostly a legacy fallback now.

What happens to transparency?

If you keep the background transparent, the PNG is saved with alpha (the checkerboard you see in the preview is just to make the transparent area visible). If you pick white or black, those are baked into the sheet.

Image Sprite Sheet Generator

Image

Combines many small images (icons, UI states, character frames) into one downloadable PNG and emits a CSS block that places each by `background-position`. Reduces HTTP requests when an icon font, an SVG sprite or an actual sprite-sheet pipeline isn't an option. Layout is horizontal strip, vertical strip, or a fixed-column grid; the sheet is sized to fit the largest item in each row or column. Files are processed entirely client-side via canvas — your icons never leave the browser.

—

How to use

Drop or pick the images. They appear in the order the OS hands them over.
Pick layout: horizontal/vertical strips are simplest, grid is denser. Set padding to avoid bleed.
Download the PNG, copy the CSS, ship them together — match the class name you put in the CSS prefix.

Frequently asked questions

Sprite sheets vs. SVG sprites vs. icon fonts?: PNG sprites still win when the source is a real raster (game art, photo thumbnails). For UI iconography prefer SVG sprites (`<symbol>` + `<use>`) — they scale and respond to currentColor. Icon fonts are mostly a legacy fallback now.
What happens to transparency?: If you keep the background transparent, the PNG is saved with alpha (the checkerboard you see in the preview is just to make the transparent area visible). If you pick white or black, those are baked into the sheet.