Skip to content
ToolQivo

CSS Sprite Generator

Pack icons into one sprite sheet with the CSS classes.

Image Tools Reviews Free · no sign-up

Drop your icons here, or click to choose them

Filenames become the class names, so name them sensibly first

Quick Tool Overview

The CSS Sprite Generator packs icons into one sheet and writes the CSS to use it: a shared base class plus one class per icon with the correct background position. Class names come from the filenames, and every generated class is rendered in the preview so a wrong offset is immediately visible.

What it does
Packs icons into a sprite and writes the CSS
You give it
A set of icon files
You get back
One sheet plus the CSS classes
Best for
Large raster icon sets
Image Tools Free, unlimited use No sign-up Runs in your browser

About the CSS Sprite Generator

A sprite combines many small images into one file so the browser makes one request instead of thirty. HTTP/2 reduced how much that matters, but it is still faster for large icon sets and it remains the simplest way to ship icons that need to be raster rather than SVG.

Drop the icons in and they are packed into a sheet with the CSS written to match: a base class with the shared background, and one class per icon with its background-position. Class names come from the filenames, and a retina variant with background-size halved is generated alongside when you supply icons at 2x. The preview shows every class rendered, so a wrong offset is obvious immediately.

Key features of the CSS Sprite Generator

CSS generated to match

Base class and per-icon positions written from the actual packing, so they cannot be out of step.

Class names from filenames

Sensible names come straight out of the files rather than being numbered.

Rendered preview

Every class shown drawing its icon, which catches an off-by-one offset instantly.

Retina variant

Supply 2x icons and the halved background-size rule is generated alongside.

Honest about when to use it

The page says inline SVG is usually better for new work, and where sprites still win.

How to use the CSS Sprite Generator

  1. 1

    Add your icons

    Filenames become the class names, so name them sensibly first.

  2. 2

    Choose the layout

    A grid, a single row, or a single column.

  3. 3

    Check the rendered preview

    Every generated class is shown drawing its icon.

  4. 4

    Take the sheet and the CSS

    One PNG plus the classes to paste into your stylesheet.

Frequently asked questions

Less than under HTTP/1.1, but yes for large icon sets — one cached file with one set of headers still beats forty. For a handful of icons, inline SVG is usually better.

Reviews of the CSS Sprite Generator

What people who use the CSS Sprite Generator think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the CSS Sprite Generator. It takes half a minute and no account.

Write the first review

More image tools