Build an icon sprite sheet

With Sprite sheet, photographers and visual creators can bundle icons and their CSS before integration. Pack your icons into one sheet and generate the matching CSS file.

Pack your icons into one sheet and generate the matching CSS file. Use it free in your browser with no account required.

How to use

Choose several PNG, JPEG, or WebP images; each one must be 20 MB or less, and you need between 2 and 100 files.
Set the maximum width you want for the final sheet, in pixels.
Add a margin around each sprite so the icons do not touch one another.
Build the sheet and download both the image and its CSS stylesheet.

Example

A front-end developer is assembling a set of small icons for a navigation bar. They load the files, pick a sensible sheet width and a small margin, then add the generated sheet and CSS to the project. The page can request one image instead of many separate files.

Limits and formats

The output is a bitmap sheet, not a vector icon system, so heavy enlargement may soften the icons.
Input files must be PNG, JPEG, or WebP, with a 20 MB ceiling per image and a total between 2 and 100 files.
Check the generated CSS against your project structure, because class names or file paths may need adjustment.
A poorly chosen width or too many images can create a sheet that is awkward to maintain later.

Where processing happens

The sheet building and CSS generation run inside your browser. Your image files are not uploaded, no account is required, and the finished assets become available for download on your device.

Frequently asked questions

How should I choose the maximum sheet width?

Think about how many icons you have and where the sheet will be used. A moderate width keeps the sheet from becoming extremely tall, while a wider sheet can reduce its height. Try one value, inspect the result, and adjust if the layout feels unbalanced.

Do I have to use the generated CSS file?

You can use it as provided, adapt it to your naming conventions, or simply read it as a positioning guide. The CSS describes where each sprite sits in the sheet. The sheet image itself remains the same whether or not you keep the stylesheet.

Can I mix different image formats in one sheet?

Yes, PNG, JPEG, and WebP files can be selected together. For icons, PNG files with transparency often work best because they blend cleanly with different page backgrounds. Always review the final sheet, since edges and background areas can vary by source format.