CSS Sprite Sheet Generator – Combine Icons Into One Image
Combine multiple images into a single sprite sheet, with the matching CSS generated for you.
Everything happens in your browser. Your images are never uploaded anywhere.
CSS Sprite Sheet Generator
Combine several icons or images into one sprite sheet, plus the matching CSS — generated entirely in your browser.
🔒 Everything happens in your browser. Your images are never uploaded anywhere.
Choose Images or Drag & Drop
or drop files here
Compact packs left-to-right and wraps at the max row width; Vertical stacks everything in one column; Horizontal lays it all out in a single row. Switching the metadata format updates the output below instantly — no need to regenerate.
About This Tool
Every separate icon file on your site is a separate request a
browser has to make — a sprite sheet combines them all into one
image, so a whole icon set loads as a single file instead of
dozens of small ones. This tool arranges the images you add into
one sprite sheet automatically, and generates the exact CSS you
need to reference each one by class name — no manual pixel math,
and nothing ever leaves your browser to do it.
Key Features
Instant Generation
No upload step and no button to click — your sprite sheet
rebuilds automatically every time you add or remove an image.
Private & Secure
Your files never leave your device — nothing is ever uploaded to a server.
Any Number of Images
Combine a handful of icons or a full icon set at once — there’s no limit.
Ready-to-Use CSS
Get a real stylesheet with a class per image and the correct background-position already calculated.
Works Everywhere
Compatible with desktop, tablet, and mobile browsers — no app to install.
Completely Free
No subscriptions, registrations, sign-ups, or hidden limits.
How It Works
Add Your Images
Drag and drop in every icon or image you want combined — order doesn’t matter.
The Sprite Sheet Builds Automatically
No button to press — the combined image and its CSS update the moment you add or remove a file.
Check the Live Preview
See the full sprite sheet and the generated CSS class names before you download anything.
Download
Get the sprite sheet image and its CSS file together in one ZIP.
Why Use a Sprite Sheet?
- ✔ Fewer image requests — one file instead of many small ones
- ✔ CSS is generated for you — no manual background-position math
- ✔ Great for icon sets, UI states, and small repeated graphics
- ✔ Combine as many images as you need in one pass
- ✔ Live preview of both the sheet and the CSS before downloading
- ✔ 100% browser-based and private
Frequently Asked Questions
Is this tool free to use?
Yes, completely free, with no sign-up required.
Are my images uploaded to a server?
No. The sprite sheet is built locally in your own browser and your images never leave your device.
What do I actually get when I download?
A single combined image (the sprite sheet) plus a CSS file
with one class per image, each already set with the correct
background-position, width, and height.
Do the images need to be the same size?
No — the tool arranges images of different sizes automatically.
Keeping related icons a consistent size still tends to make the
resulting CSS easier to work with, but it isn’t required.
Do sprite sheets still matter with HTTP/2 and HTTP/3?
Less than they used to for raw request count, but they’re
still genuinely useful for icon sets, UI sprites, and cases
where you want one cacheable file instead of many, or need
broad compatibility with older tooling that expects a
classic sprite-and-CSS setup.
Can I rename the generated CSS classes?
Class names are based on each image’s original filename — rename your files before uploading if you want specific class names.