EspañolCSS sprite generator (combine icons into one image)
Choose the icons (PNG, SVG, WebP or JPG). Each file name becomes the class name in the CSS.
How to useMany icons in a single file
Available in: 
CSS sprite generator (combine icons into one image): what it is for
A sprite combines several icons into a single image, and the CSS shows the right piece in each place with background-position. The browser makes one request instead of ten and hover icons don't flicker.
Choose the icons, the layout (grid, row or column), the spacing between them and the format. Download the sprite and copy the CSS with one class per icon (the file name becomes the class name), width, height and position. The retina option shows icons made at double size at half size, sharp on high-density screens. Everything runs on your device.
How to use
- Choose the icons.
- Adjust the layout, spacing and format.
- Download the sprite and copy the CSS.
When to use it
- Social media icons with hover.
- Flags and badges.
- Sprites for HTML games.
Frequently asked questions
What is a sprite for?
Instead of the browser downloading ten separate icons, it downloads a single image, and the CSS shows the right piece in each place with background-position. This reduces the number of server requests and avoids icons flickering on hover, because the hover state is already loaded.
Are sprites still worth it with HTTP/2?
With HTTP/2 the cost of many small files dropped a lot, so the gain is smaller than it used to be. Sprites are still useful for hover icon sets, flags, badges and canvas games, and for anyone who can't use inline SVG.
What is the retina option?
If your icons were made at twice the size they're displayed, check the option: the CSS shows each one at half size with background-size, and they stay sharp on high-density screens, like phones and Macs.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.