Image

CSS Sprite Sheet Generator

Pack icons into a sheet plus CSS coordinates.

Loading interactive tool…

Embed this tool on your site

About this tool

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 — many icons in one file meant one request instead of many. HTTP/2 has reduced that need, but sprite sheets remain useful for CSS icon animations, small game tilesets, and legacy environments. This tool accepts up to 12 image files and lays them out in a uniform grid: you choose 1 to 6 columns, and every cell is sized to the largest icon plus the padding you set (0–24 px on each side). Click Build Sprite to preview the sheet and get CSS with a shared .sprite class plus one .icon-name class per file, holding its width, height and background-position. Class names are generated in kebab-case from the filenames. Download the sheet as sprite.png and copy the CSS from the text box. Everything runs via Canvas in your browser — icons never leave your tab.

Why use it

  • Predictable Grid Layout: Icons are placed left to right, top to bottom, in equal-sized cells, so the sheet is easy to inspect and every position maps directly to the generated CSS — 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 its cell. Copy the classes directly into your stylesheet — no manual measurement, no pixel arithmetic, no off-by-one errors.

  • Adjustable Cell Padding: Padding from 0 to 24 pixels surrounds each icon. It prevents pixel bleed — adjacent icons' edge pixels showing through when the browser scales at non-integer device pixel ratios like 1.5x on mid-range Android displays.

  • Names From Filenames: Class names are generated from each icon's filename in kebab-case. A file named cart-fill.png becomes .icon-cart-fill and Arrow Right.svg becomes .icon-arrow-right, and every icon also uses the shared .sprite class that sets the background image.

  • 100% Browser-Local Pack: Icon files are loaded into Canvas 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.

How to use

  1. Select up to 12 icon files (PNG, SVG, JPEG or WebP) together in the Upload icons picker.
  2. Set Columns (1–6, default 4) for the grid width.
  3. Set Cell padding in pixels (default 2) to leave space around each icon and prevent bleed.
  4. Click Build Sprite to see the assembled sheet and the generated CSS.
  5. Copy the CSS from the Generated CSS box into your stylesheet.
  6. Click Download PNG to save sprite.png next to that stylesheet.

When it helps

  • Building a web application that must support older HTTP/1.1 environments where individual icon fetches create meaningful latency.
  • Preparing a small set of game tiles or UI icons that should load as a single image.
  • Creating an icon animation using CSS background-position stepping across frames laid out in a sprite sheet.
  • Packaging a handful of toolbar or social icons into one PNG with ready-made CSS classes.
  • Optimising a legacy web application's icon loading before migrating to HTTP/2, as a quick win that requires no server changes.

Examples

12 PNG icons → sprite sheet

Input
12 × 24×24 icons (arrow.png, cart.png, ...), Columns 4, Cell padding 2
Expected result

sprite.png 112×84 (4 columns × 3 rows of 28×28 cells) + CSS such as .icon-arrow{width:24px;height:24px;background-position:-2px -2px;}

Mixed sizes packed

Input
8 icons of varying sizes (largest 32×32), Columns 4, Cell padding 2
Expected result

sprite.png 144×72 with 36×36 cells; each .icon-* class keeps its own width and height

Game UI tileset

Input
12 × 64×64 game tiles, Columns 6, Cell padding 0
Expected result

sprite.png 384×128 (6 cols × 2 rows) + one CSS class per tile

Tips

  • On HTTP/2, sprite sheets save fewer requests than they used to — weigh the convenience of one file against the cost of re-downloading the whole sheet when any icon changes.
  • Keep the default 2px padding (or more) — it 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.
  • Upload icons that share the same dimensions — mixed sizes still work, but every cell grows to the largest icon and the sheet fills with empty space.
  • 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 icon sets, and they remain a common approach for CSS icon animations driven by background-position stepping.
How many icons can I include?
Up to 12 per sheet, each up to 20 MB. The grid has 1 to 6 columns, so 12 icons at 4 columns make 3 rows. For larger sets, build several sheets.
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. The default 2px padding on every side gives a 4px gap between icons.
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 and position adjustment.
What happens with icons of different sizes?
Every cell takes the size of the largest icon plus padding, and smaller icons sit in the top-left of their cell. Each icon's CSS class still uses its own width and height, so it displays correctly; the sheet just contains some empty space.
Does the tool generate the CSS for me?
Yes. It outputs a .sprite rule that sets background-image: url('sprite.png') with no-repeat and inline-block, plus one .icon-name rule per file with width, height and background-position. Use both classes together, e.g. class="sprite icon-cart", and keep the PNG named sprite.png or update the URL.
Are my icons uploaded?
No. Icon files are read via the FileReader API and composited onto a Canvas element entirely within your browser tab. 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 Calculator Find the aspect ratio of any width and height, solve a missing width or height from a ratio, and get CSS aspect-ratio code. 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.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities