Skip to content

Sprite sheet generator

Pack icons into one sheet with matching CSS.

Runs in your browser

About Sprite sheet generator

Combine many small images into one sheet to cut HTTP requests, or build a frame sheet for a game. Set padding and layout, and get the sheet with ready-made CSS classes or a JSON map of coordinates.

  • Power-of-two sheet sizes suit game engines.
  • Use PNG to keep transparency.
  • For web icons, SVG sprites are often lighter; this is best for raster assets.

How to use it

  1. 1Drop the images.
  2. 2Choose the layout, padding and the output format for coordinates.
  3. 3Download the sheet and the CSS or JSON.

Questions

Can I use it for game animation frames?
Yes. Choose the grid layout and JSON output for frame coordinates.
Are the CSS classes named after the files?
Yes, from the file names, cleaned to valid class names.
Is anything uploaded?
No. Everything runs in your browser, so your files never leave your device.

More developer tools

Favicon converterTurn any image into favicon ICO and PNG sizes.App icon generatorGenerate the full iOS and Android icon set from one image.OG image generatorDesign a 1200×630 link preview card with templates, presets and the meta tags.OG image checkerPaste a URL and see its link preview, Open Graph tags and what to fix.Color palette extractorPull the dominant colors out of any image.Image color pickerClick any pixel and copy its color.SVG optimizerStrip editor junk and shrink SVG markup.Blurhash generatorCreate a tiny blurred placeholder for lazy loading.