CSS Sprite Generator
Combine several icons into a single PNG sprite sheet and get the ready-to-paste background-position CSS code to display each icon individually on your site.
How it works
A CSS sprite groups several icons into a single image file to reduce the number of network requests on a website. Each imported icon is placed in a fixed-size cell on a grid, and the tool automatically generates one CSS class per icon with the background-position property pointing to its exact location in the grid.
How do I use the generated CSS code?
Download the PNG, place it next to your stylesheet under the name sprite.png (or adjust the URL in the CSS), copy the generated CSS code into your file, then apply the corresponding class (for example class="icon icon-my-icon") to an HTML element such as a span.
Where do the CSS class names come from?
Each class name is automatically derived from the icon's filename (lowercased, spaces and special characters replaced with hyphens). In case of duplicates, a number is added to keep names unique.
Sprite and CSS generation happen entirely in your browser: your icons are never sent to a server.