CSS Sprite Generator

Combine multiple icons or images into a single file to reduce HTTP requests, and instantly generate the CSS to use them.

Drag & drop multiple images here

or click to choose files from device

Sprite Sheet

CSS Code:

How to Generate Sprites

01

Add Multiple Icons

Upload all the individual icons or images you want to combine. They don't need to be the same size.

02

Generate Layout

We automatically pack them into a single PNG image file directly in your browser using HTML5 Canvas.

03

Copy the CSS

Download the new combined image, and paste the generated CSS classes to display each icon seamlessly.