🧮Sprite Sheet Generator

Combine icons into one image and one stylesheet

A storefront with thirty little icons (payment logos, feature badges, flags, star ratings) makes thirty separate image requests. Each one costs a round trip, and on a slow mobile connection the icons pop in one at a time. The classic fix is a CSS sprite: pack every icon into a single PNG and show the right piece with background-position. The Sprite Sheet Generator does the packing, writes the CSS classes and a JSON map, and gives you a ZIP.

How it works

1. Drop the icons (PNG, SVG, JPG, WebP). Filenames become class names, so shield-check.png becomes .icon-shield-check.
2. Choose a layout: horizontal strip, vertical strip, or a grid with a fixed number of columns. Set the padding between icons, usually 2 to 4 px, to stop neighbouring pixels bleeding at fractional zoom levels.
3. Set the class prefix so the generated names fit your codebase.
4. Click Generate. The preview shows the packed sheet with each icon outlined and labelled.
5. Download the ZIP: sprite.png, sprite.css and sprite.json (name, x, y, width and height for each icon).

Icons of different sizes are supported; the CSS sets width and height per class so each one displays at its natural size.

Why it matters

• Thirty 2 KB icons are around 60 KB in total but cost 30 requests; one sprite is the same 60 KB in a single request the browser caches once. On HTTP/1.1 connections limited to six parallel requests, that is the difference between icons appearing in one paint or in five waves.
• HTTP/2 reduces the per-request penalty, but a sprite still avoids thirty separate cache entries and thirty separate image decodes, and it keeps an icon set versioned as one file.
• Theme editors on Shopify, WooCommerce and BigCommerce accept a single asset upload more easily than a folder, and the generated CSS pastes straight into a custom stylesheet.
• Game and animation work uses the same format: a sheet of 12 frames is what a CSS steps() animation or a canvas game loop expects, and the JSON map is what most engines load.

Tips

• Keep icons that change often out of the sprite; every edit means re-uploading the whole sheet and busting the cache.
• Use flat-colour art with few gradients to keep the sheet small; photographic icons belong in a separate image.
• For Retina screens, export your icons at 2× size, generate the sheet, then halve the width and height in your CSS and add a background-size of half the sheet width. The JSON map gives you every number.
• For a single icon that must be inlined in HTML or CSS, the Base64 ↔ Image Converter produces a data URI instead.
• If your icons are SVG and you need PNG copies at several sizes first, use the SVG ↔ PNG / JPG Converter.
• Need to cut a sheet back into tiles? The Image Splitter handles that. For website icons and tab favicons, the Favicon & App Icon Generator is the better fit.

Privacy

Your images never leave your browser. Packing, CSS generation and the ZIP are all produced on your device, so proprietary icon sets are never uploaded.