DevToolPal
EN

CSS Sprite Generator

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

Runs locally, never uploaded

Options

Source images

Images (0)

Add PNG, SVG, GIF or JPG images. Nothing is uploaded.

Sprite

CSS

What this tool does

The CSS Sprite Generator combines a set of icons or small images into a single sprite sheet and writes the CSS to display each one. Add PNG, SVG, GIF or JPG files, choose how to lay them out, and download the sprite PNG together with a stylesheet that has one class per image.

Class names come from the file names: Home Icon.png becomes .icon-home-icon, and duplicate names get a number. The Packed layout uses bin packing to place images of different sizes on the smallest sheet; Vertical, Horizontal and Grid give predictable positions.

How to use it

  1. Press Add images… and select your icons (or start from the sample set).
  2. Pick a Layout and Padding. A little padding prevents neighbouring icons from bleeding into each other when the browser scales them.
  3. Set the Class prefix and the Sprite file name used in background-image.
  4. Choose @2x if your images are drawn at double size for retina screens.
  5. Press Download PNG and Download CSS (or Copy image to paste the sprite into a design tool or chat), upload both, and use the classes: <span class="icon icon-home"></span>.

Example

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

Tips

  • Keep icons that change together in one sprite; regenerating the sheet changes every position.
  • For single-color icons that need to change color with CSS, an SVG icon font or inline SVG may be a better fit.

FAQ

› What is a CSS sprite?

One image that contains many small images. Each icon is shown by giving an element the sprite as its background and moving it with background-position, so a page needs one request instead of dozens.

› Are sprites still useful with HTTP/2?

Less than before, but they still help for many tiny icons, email templates, games and legacy projects, and they avoid the flash of icons loading one by one.

› What does the @2x option do?

If your source images are drawn at twice the display size, the CSS halves every width, height and position and adds background-size, so icons stay sharp on high-density screens.

› Are my images uploaded?

No. The sprite is drawn in your browser with a canvas and the CSS is generated locally.