UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

CSS Sprite Sheet Generator

Pack icons into a sheet plus CSS coordinates.

About CSS Sprite Sheet Generator

A CSS sprite sheet packs many small icons into one PNG. CSS background-position offsets then display each individual icon by shifting which portion of the sheet is visible. The technique originated as a performance fix for HTTP/1.1 — 30 icons in one file meant 1 request instead of 30. HTTP/2 has reduced that need, but sprite sheets remain useful for game texture atlases, CSS icon animations, and legacy environments. This tool accepts multiple PNG, SVG, or JPEG icon files, tiles them using a row-based packing algorithm, and outputs a PNG sprite, a CSS file with a class per icon, and a JSON manifest mapping filenames to coordinates. Class names are auto-generated in kebab-case from source filenames. Configurable padding prevents pixel bleed at fractional device pixel ratios. Everything runs via Canvas in your browser — icons never leave your tab.

Why use CSS Sprite Sheet Generator

Auto-Pack Multiple Icons

Drop 5 to 50 PNG or SVG icons and the tool tiles them into a single sheet using a row-based packing algorithm. Icons are placed sequentially in rows, producing a predictable, easily inspectable layout that maps directly to the generated CSS background-position values — no guessing which icon is at which coordinate.

CSS Coordinates Generated

For every icon, the output includes a CSS class containing the correct width, height, and background-position values derived from the icon's position in the sheet. Copy the classes directly into your stylesheet — no manual measurement, no pixel arithmetic, no CSS errors from off-by-one positioning.

Choose Padding Between Icons

Configurable padding of 1-10 pixels separates icons in the sheet. Padding prevents pixel bleed — the visual artefact where adjacent icons' edge pixels bleed into each other when the browser applies fractional scaling at non-integer device pixel ratios like 1.5x on mid-range Android displays.

PNG and JSON Output

The tool outputs both a PNG sprite sheet and a JSON manifest mapping each icon's filename to its x, y, width, and height coordinates. The JSON is useful for game engines, dynamic sprite renderers, and server-side templating systems that need the coordinate data in a machine-readable format.

Names From Filenames

CSS class names are auto-generated from each icon's filename, converted to kebab-case. An icon file named cart-fill.png produces a class named sprite-cart-fill, and arrow-right-sm.png produces sprite-arrow-right-sm, giving a consistent and predictable naming convention throughout the entire packed sprite set without manual editing.

100% Browser-Local Pack

Icon files are loaded into Canvas elements in your browser tab and composited into the sprite sheet entirely in JavaScript. Nothing is uploaded to any server. Proprietary icon sets, client brand assets, and unreleased UI component libraries stay private throughout the packing process.

How to use CSS Sprite Sheet Generator

  1. Upload multiple icon files — PNG, SVG, or JPEG — by selecting them together or dropping them onto the upload area.
  2. Set the padding between each icon in the sheet (2-4px is recommended to prevent bleed at fractional DPR scaling).
  3. Choose row-based or grid packing — row-based places icons sequentially in rows, grid enforces a uniform cell size.
  4. Click Pack to see the assembled sprite sheet preview alongside the generated CSS and JSON output.
  5. Copy the generated CSS classes into your stylesheet, or download the complete sprite.css file.
  6. Download sprite.png, sprite.css, and sprite.json as a ZIP for the complete package.

When to use CSS Sprite Sheet Generator

  • Building a web application that must support older HTTP/1.1 environments where individual icon fetches create meaningful latency.
  • Developing a browser-based game where icons, tiles, and UI elements need to be fetched in a single request and composited via Canvas.
  • Creating an icon animation using CSS background-position stepping across frames laid out in a sprite sheet.
  • Packaging an icon set for a component library or design system that needs both CSS utility classes and a JSON manifest for tooling integration.
  • Optimising a legacy web application's icon loading before migrating to HTTP/2, as a quick win that requires no server changes.
  • Producing a texture atlas for a lightweight WebGL renderer that expects all sprites in a single sampler texture.

Examples

20 PNG icons → sprite sheet

Input: 20 × 24×24 icons (arrow.png, cart.png, ...)

Output: sprite.png 240×72 (10 columns × 2 rows, 4px padding) + sprite.css with .sprite-arrow { background-position: 0 0; } etc.

Mixed sizes packed

Input: 8 icons of varying sizes (24×24, 32×32, 16×16)

Output: sprite.png with row-based packing, sprite.json mapping each name to {x, y, w, h}

Game UI tileset

Input: 12 × 64×64 game tiles

Output: sprite.png 384×128 (6 cols × 2 rows), JSON manifest for game engine

Tips

  • On HTTP/2, sprite sheets save fewer requests than they used to — but for large icon sets (30+), the single-fetch approach is still measurably faster than parallel requests due to reduced per-request overhead.
  • Add 2-4px padding between sprites — prevents pixel bleed when CSS uses subpixel scaling at device pixel ratios like 1.5x, common on mid-range Android phones and some Windows displays.
  • For SVG icon sets, consider an SVG sprite (<symbol> + <use>) instead of a raster PNG sheet — better scaling at all resolutions, better accessibility (title and desc elements), and no rasterisation quality loss.
  • Game engines often expect specific JSON formats (Phaser's TexturePacker format, Unity sprite atlas JSON) — the generic manifest output from this tool will need adapting to match your engine's expected schema.
  • Regenerate the full sheet whenever any icon changes — partial updates cause stale background-position offsets in the CSS, which are hard to debug because the wrong icon silently appears instead of nothing.

Frequently Asked Questions

Are sprite sheets still useful with HTTP/2?▾
Less critical, but still relevant in some contexts. HTTP/2 multiplexing lets browsers request many small files in parallel without the connection overhead that made sprites necessary under HTTP/1.1. However, sprite sheets still reduce per-request overhead for very large icon sets, and they remain the preferred approach for game texture atlases and CSS icon animations driven by background-position stepping.
What's the difference between a sprite sheet and a texture atlas?▾
The terms are often used interchangeably, but texture atlas typically refers to a sprite sheet used in 3D rendering or game engines where the coordinates are used by GPU shader programs rather than CSS. This tool generates CSS sprite sheets with CSS background-position coordinates, but also outputs a JSON manifest usable as a basic texture atlas by game engines.
Can I include SVG icons in the sprite?▾
Yes. SVG files are rasterised to the browser canvas before being packed into the PNG sheet. The output sprite is always a raster PNG — SVGs lose their scalability when included. For scalable icon sets, consider an SVG sprite using the <symbol> and <use> elements instead, which preserves vector quality and is more accessible.
Why do I need padding between icons?▾
Without padding, icons placed adjacent to each other in the sheet share an edge pixel boundary. At non-integer device pixel ratios (common on mid-range Android phones at 1.5x or 2.5x DPR), sub-pixel rendering can bleed a thin line from the adjacent icon's edge into the displayed icon area. 2-4px padding eliminates this artefact.
Will it work with retina (2x) displays?▾
For crisp retina display, generate the sprite sheet from source icons at 2x their intended display size (e.g. 48×48 source for 24×24 CSS display size), then use background-size in CSS to scale the sheet down to the intended dimensions. The CSS generated by this tool assumes 1x source sizing — retina usage requires manual background-size adjustment.
Can I update one icon without regenerating the whole sheet?▾
No — updating a single icon changes the sheet's layout and thus every CSS background-position offset, even for icons that were not changed. The safest practice is to keep the source icon files in version control and regenerate the full sheet whenever any icon changes. Partial updates risk stale coordinate offsets in your CSS.
Does the tool generate the CSS for me?▾
Yes. For every icon in the sheet, the tool generates a CSS class with the background-image URL reference, background-position, width, and height. Copy the entire sprite.css output into your stylesheet, add the sprite.png to your assets folder, and the classes are ready to use immediately.
Are my icons uploaded?▾
No. Icon files are read via the FileReader API and composited onto a Canvas element entirely within your browser tab. The resulting PNG is exported via Canvas.toBlob. No file is sent to any server — proprietary icon sets and unreleased UI assets remain private throughout the packing process.

Explore the category

Aspect Ratio Helper Convert width and height pairs into modern aspect-ratio CSS plus legacy padding hacks. CSS Minifier Minify CSS by removing comments and whitespace CSS Beautifier Beautify CSS with clean indentation and optional comment preservation. CSS Gradient Generator Create linear or radial gradients with stops, angles, and copy-ready background snippets. CSS Triangle Generator Create directional CSS triangles using the transparent border technique with sizing controls. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS.
CSS Sprites: What They Are, Why They Matter, and Modern Alternatives CSS sprites were the standard performance technique for reducing icon HTTP requests in the HTTP/1.1 era. With HTTP/2 and SVG, the calculus h Apr 2026 · 7 min Color Spaces Explained: RGB, HSL, CMYK, and HEX for Developers RGB and HEX are the same thing in different notations. HSL is much more intuitive for humans. CMYK lives in print. Understanding these disti Apr 2026 · 8 min Base64 Images in HTML and CSS: When They Help and When They Hurt Embedding images as Base64 data URIs eliminates an HTTP request but increases file size by 33% and breaks caching. Here is when the trade-of Apr 2026 · 7 min

Glossary

Sprite sheet
A single image file containing multiple smaller images packed together into a grid or sequence. In web development, CSS background-position offsets are used to display individual sprites by shifting which portion of the sheet is visible within a fixed-size element.
background-position
A CSS property specifying the offset of a background image within its element's box. For sprite sheets, background-position is set to a negative x and y value that shifts the sheet so only the desired sprite is visible within the element's defined width and height.
Texture atlas
A single image file containing multiple textures or sprites, used by GPU rendering pipelines (WebGL, Unity, Phaser, etc.) to reduce the number of texture sampler switches during drawing. Functionally identical to a CSS sprite sheet, but accessed via UV coordinates rather than CSS background-position offsets.
Packing algorithm
The algorithm used to arrange multiple sprites into the smallest possible sheet. Row-based packing places sprites sequentially across rows, advancing to a new row when a row is full. More complex bin-packing algorithms allow tighter arrangements but produce less predictable layouts.
HTTP/1.1 multiplexing
Under HTTP/1.1, browsers open a limited number of parallel TCP connections per domain (typically 6). Each image requires its own request, meaning 30 icons block other resources behind connection limits. CSS sprite sheets combine all icons into one request, eliminating this bottleneck. HTTP/2 solved this with true request multiplexing.
DPR (Device Pixel Ratio)
The ratio of physical screen pixels to logical CSS pixels on a display. A DPR of 1 means one CSS pixel equals one physical pixel. A DPR of 2 (retina) means one CSS pixel is rendered by 4 physical pixels. Non-integer DPRs like 1.5 or 2.5 are common on Android and can cause sub-pixel bleed in tightly packed sprite sheets without padding.