CSS Sprite Generator

Combine icons into one sprite sheet PNG and get the CSS background-position classes for each.

What is a CSS sprite?

A CSS sprite is one image file that contains many small icons. Each icon is shown with background-position, so the browser downloads one file instead of dozens. Choose your icons and the generator packs them and writes a CSS class for each.

Usage

Save the PNG next to your CSS, then add both classes to an element: <span class="icon icon-home"></span>. Class names come from the file names.

Today, inline SVG icons or an SVG symbol sprite are often a better choice for crisp icons; PNG sprites remain useful for game assets and legacy sites.

Frequently asked questions

Do sprites still improve speed?

With HTTP/2 the gain is smaller, but fewer files still reduce overhead for many tiny images.

What about retina screens?

Use icons at 2× size and set background-size to half the sprite width.

Are the images uploaded?

No.