CSS Sprite Generator — merge icons, get the CSS free
Merge multiple small icons into one sprite.png and get the background-position CSS generated automatically: compact / vertical / horizontal packing, adjustable padding, one-click CSS copy or PNG + CSS as a ZIP. Merged locally in your browser — images never uploaded. Works on desktop, tablet & mobile.
A CSS sprite combines many small icons into one image, then shows each icon with background-position — turning N image requests into one. It still matters for legacy sites and email templates. Upload your icons and this tool merges them locally: compact mode shelf-packs to save space, vertical / horizontal suit uniform icon strips; class names come from filenames (.sprite-xxx) with width, height and coordinates written for you — copy and go. Fair note: modern projects usually prefer SVG icons or icon fonts (HTTP/2 made multiple requests cheap), so reach for sprites mainly when maintaining older codebases or constrained environments. Everything runs locally in your browser — images never upload.
When you need it
Maintaining legacy sites
Add icons to an existing sprite system and re-pack the sheet.
Email templates & constrained targets
Where SVG or webfonts aren’t reliable, sprites still work.
Game / canvas atlases
Pack assets into one sheet to cut loading and swap costs.
The sprite trade-offs
- N requests become 1 — a real win on legacy stacks
- Class names + sizes + coordinates generated automatically
- Adjustable padding prevents bleed between icons
- Changing one icon means re-packing and new coordinates — maintenance is the real cost
- Modern projects usually do better with SVG icons / icon fonts under HTTP/2
- Output is PNG; for Retina, supply 2x assets and halve sizes with background-size in CSS
CSS Sprite FAQ
Drop sprite.png into your project, include the generated CSS (adjust the background-image url to your paths), then add the class to an element — e.g. <span class="sprite-home"></span> shows that icon.
Under browser zoom or high-DPI rendering, background-position sampling can bleed into neighboring icons. The default 2px padding prevents it; increase it if icons will be scaled.
Yes — upload 2x assets, then in your CSS halve the element sizes and set background-size to half the sheet width. The generated coordinates are physical pixels; divide by 2 accordingly.
Usually not: SVG icons scale better, recolor easily and are simpler to maintain, and HTTP/2 made request-count much cheaper. Sprites remain practical for legacy maintenance, email templates and some game/canvas cases.