Sprite Sheet Generator

Pack a folder of icons into one spritesheet with the CSS and the coordinates.

Design & colourSpriteCssIcon
Sprite Sheet Generator screenshot

Pack a set of icons onto one SVG grid and get the sheet as a data URI, with the background-position rule for every sprite and a file you can download. Draw the icons with a shape picker or paste your own SVG.

Sources

Sprite list

Sheet settings

Sprites0
Grid—
Sheet size (px)—
data URI—

Everything runs in this tab. Nothing is uploaded; the sheet is built as a string and handed to a Blob or a data URI when you ask for it.

Packed sheet preview

1×

Sprite table

#Name xy wh background-position

CSS output


  

More tools