# Sprite Sheet Generator — Make a CSS sprite sheet on Mac

Pack icons into one image with the CSS to show each one, plus an HTML preview. Part of OneMacTools, 151 private tools in one native Mac app (macOS 26 or later); category: Images. Runs on your Mac; nothing is uploaded.

Icons of any size are packed tightly into rows, each gets its own CSS class with the right position and size, and a preview page shows them all. Set the gap between icons, the class prefix, and whether the icons are @2x for sharp retina screens.

Page: https://www.onemactools.com/tools/sprite-sheet-generator · Download: https://www.onemactools.com/download · Pricing: https://www.onemactools.com/pricing

## How to use it
1. **Drop your icons.** Add two or more images. Each file name becomes a CSS class, so name them well first, for example “search.png” and “cart.png”.
2. **Set the gap and prefix.** Choose the space between icons and the CSS class prefix.
3. **Mark retina icons.** If your icons are @2x, turn on the retina option so they display at half size, sharply.
4. **Click Make Sheet.** Icons are packed into rows and saved as sprite.png, with sprite.css and a preview.html page, in a dated folder in Downloads › OneMacTools.
5. **Use it on your site.** Put sprite.png and sprite.css together, link the CSS, and add the classes to elements. Open preview.html to see every class.

## Options
- **Gap between icons:** 0, 2, 4 or 8 px; the default is 2 px. A small gap stops neighbouring icons bleeding in when the page is zoomed.
- **Icons are @2x (show at half size for sharp retina screens):** Off by default. When on, the CSS shows every icon at half its pixel size and scales the sheet to match, so double-resolution icons look sharp on retina screens.
- **CSS class prefix:** The start of every class name; “icon” if left empty. With the prefix icon, “search.png” becomes .icon-search.

## Tips
- Name files in lowercase with hyphens before you start. The class names come from them, and “@2x” is dropped automatically.
- Use icons with transparent backgrounds so the sheet works on any page colour.
- Make retina icons at exactly twice the display size, with even pixel sizes, so the halved sizes are whole pixels.
- Compress sprite.png with Compress PNG afterwards; a palette PNG is often much smaller for icon sheets.
- Use a gap of 2 px or more if the icons will be scaled or shown when the page is zoomed.

## Questions
**What is a CSS sprite sheet?**
One image that contains many icons, with CSS that shows just one icon per element by shifting the background. It loads all your icons in a single request.

**How do I use the sprite on my website?**
Upload sprite.png and sprite.css to the same folder, link the CSS in your page, and add classes such as class="icon icon-search" to an element.

**How are the class names made?**
From each file name, in lowercase with spaces and symbols turned into hyphens, after your prefix. “Shopping Cart.png” with the prefix icon becomes .icon-shopping-cart.

**Can I use icons of different sizes?**
Yes. Each icon keeps its own size, and its CSS class gets the matching width and height.

**How do I make sprites sharp on retina screens?**
Make the icons at twice the size you'll show them and turn on the @2x option. The CSS then shows them at half size, which looks sharp on high-resolution screens.

**Can I use it for game sprites?**
Yes. sprite.css lists every image's position and size on the sheet, which you can read into a game engine or canvas code.