Create CSS sprite sheet
Packs icons into one PNG and generates the CSS classes and a JSON map with the coordinates.
Runs in your browser – your file is never uploaded
Frequently asked questions
Is my file uploaded?
No. The conversion runs entirely in your browser. The file never leaves your device – there is no server that could see it. Once the page has loaded, the tool even works offline.
What is in the ZIP?
sprite.png with all images on a grid of equal cells (the largest width × the largest height), sprite.css with a base class and one class per image setting width, height and background-position, and sprite.json with the x/y/width/height of every sprite for build tools or games.
Are the icons scaled?
No, every icon keeps its exact pixels – sprites must be pixel-accurate. Icons of different sizes sit top-left in their cell; the CSS uses each icon's own width and height, so nothing else shows through.
In which order are the images placed?
In the order of the file list – the order you added them in. Remove and re-add a file to move it to the end. All files go into one result; drop a new set of files to start over.
Related tools
Combine images side by side or stacked
Joins several images into one row or column, with alignment, gap and background colour.
● In your browser
Make a photo collage
Arranges photos on a grid of equal cells – columns, cell size, gap and background are up to you.
● In your browser
Add border to image
Puts a solid frame of any width and colour around images – the canvas grows, nothing is covered.
● In your browser