--- title: "CSS Sprite Generator – Icons into One Sprite Sheet, Free" description: "Pack many icons into one transparent sprite sheet PNG and get the CSS classes and a JSON map of every frame, named from your files. Up to 50 icons, free." url: "https://imagecompressor.si/css-sprite-generator" lang: "en" --- # Generate a CSS sprite sheet Combine your icons into one image, and get a CSS class for each, ready to use in your page or game. ## How it works 1. **Add your images** Drag and drop, paste, or pick files. They upload over an encrypted connection. 2. **Pick a quality or a target size** Use the quality slider, or tell it exactly how many KB or MB you need. 3. **Download** Save each file, or grab them all at once as a ZIP. A page with forty small icons can make forty requests before it settles. A sprite sheet puts them all on one transparent image, so the browser downloads a single file and each icon is shown by moving the background to its place. The same idea packs the frames of a game character or the tiles of a map into one texture. Add your icons, up to fifty, in any format we read: PNG, SVG, WebP and the rest. Each keeps its own size and is packed into rows, the tallest first, with the gap you choose between them so edges never bleed together. The result shows the packed sheet and the CSS: one base class with the sheet, and one class per icon with its width, height and position, named after its file. The ZIP holds sprite.png, sprite.css and sprite.json, a map of every frame for game engines and scripts. The icons are processed on our server and deleted once the sheet is made. ## Using the CSS Put sprite.png next to the stylesheet and include sprite.css. Then an empty span with both classes, such as icon and icon-search, shows that icon at its size. Change the prefix if icon is already used on your site; the classes follow it. After any change to the icons, make the sheet again and replace both files together. ## Naming the files Class names come from the file names, made lowercase, with spaces and symbols turned into hyphens: Search Button.png becomes icon-search-button. Two files with the same name get a number. Rename the files before adding them if you want particular class names. ## Sharp icons on high-resolution screens For crisp icons on phones and laptops with dense screens, make the icons at twice the size you show them, build the sprite, and set background-size to half the sheet's width in your CSS. SVG icons give the cleanest result, since they are drawn at their full size. ## Sprites for games sprite.json lists each frame's position and size under its name, the shape most game frameworks and tools read or can read with a short loader. Add the frames of an animation in order, with names like run-1, run-2, and they keep that order in the map. Leave a gap of two pixels or more for game textures, so that scaling never picks up a neighbour's edge. ## Frequently asked questions ### How many icons can I add? From two to fifty in one sheet. ### Is the background transparent? Yes. The sheet is a PNG with transparency, and each icon keeps its own. ### Are large pictures allowed? Pictures over 1,024 pixels are made smaller to fit, keeping their shape; the sheet is at most 8,192 pixels on a side. ### Can I change the order? Packing puts taller icons first, so the order on the sheet is not the order you added them. The CSS and JSON find each by name. ### Are my icons stored? No. The sheet is packed on our server and your icons are wiped from it once the ZIP is sent. ### Is there an API? Yes: POST /api/v1/sprite takes the icons as multipart parts and returns the same ZIP. ### Do I still need sprites with HTTP/2? Fewer, as many small requests are cheap today. Sprites still help for icon sets and game textures. ## Related tools - [Favicon generator](https://imagecompressor.si/favicon-generator): One picture in, every icon a website needs out, with the HTML to paste. - [Convert an image to Base64](https://imagecompressor.si/image-to-base64): Get a data URI, an HTML tag and a CSS line for your image, ready to paste into code or an email template. - [Combine images side by side](https://imagecompressor.si/combine-images): Line up two or more pictures in a row, at the same height, with or without a gap between them.