CSS Sprite Generator

Click to upload image

Supported formats: PNG, JPG, WebP

Layout

Image spacing: 10px

050

Upload image to preview sprite

Merge multiple small icons into a CSS sprite sheet online. Local browser processing means no upload, and CSS background-position code is generated automatically across horizontal, vertical, and grid layouts.

ICO Generator

Image Compressor

Image Converter

Image Resizer

Image Cropper

Image Rotate & Flip

What is a CSS sprite?

A CSS sprite combines multiple small images into one larger image and uses background-position to display individual icons. The term sprite comes from early game consoles, which packed multiple animation frames into one large image and switched frames in sequence. The web borrowed the idea and uses it to load many small icons in a single request.

**Why do we need sprites?** In the HTTP/1.1 era, every image file triggers a separate request, with TCP handshake, TLS handshake, and request header overhead. One hundred icons meant one hundred requests. A sprite places every icon in one image, completing all icon loads in a single request and speeding up first paint. HTTP/2 multiplexing reduces part of that edge, but sprites still help with CDN caching, gzip compression, and HTTP/1.1 fallback.

**How it works:** Imagine a 200x60 sprite with three 60x60 icons in a row. To display the first, set a 60x60 element with `background: url(sprite.png); background-position: 0 0;`. Change to -60px 0 for the second, and -120px 0 for the third. This tool generates all those coordinates for you automatically.

**Modern alternatives:** SVG + use or symbol (recommended, vector, colorable, animatable), Icon Font (broad compatibility, cross-platform), HTTP/2 server push, and web font icons. Each has its own strengths, so choose based on your project's needs.

Use Cases

Web projects with many small icons that need to be combined into a sprite to cut HTTP requests and speed up first paint
Frontend developers who need to centralize icon assets and auto-generate CSS background-position code
Teams that want to batch-generate sprite plus CSS code and hand it off ready to integrate
After merging, run the combined image through the [image compression tool](/image/compress/) to shrink total size and improve LCP
App, Electron, or desktop clients that need to bundle static icon assets into a single image
Email HTML templates or static blogs that need multiple icons while remaining compatible with mail clients
Designers delivering icon assets in sprite form so frontend engineers can integrate quickly
Dedicated 2x sprites for Retina screens, adapted to 1x and 2x displays through background-size

How to Use

Click the upload area or drag multiple images into it (JPG, PNG, WebP, and GIF are all supported)
Reorder the icons in the left list with the drag handle or the up and down buttons
Choose Horizontal, Vertical, or Grid in the layout section on the left
Adjust the padding slider to set the pixel gap between icons (1 to 5px is recommended)
Preview the sprite in real time on the right, then click Download to save the PNG and Copy to grab the CSS

Features

One-click image merging: upload multiple small icons and combine them into a single sprite
Three layout modes: horizontal, vertical, and grid layouts switch freely for different uses
Adjustable padding: a 0 to 50px slider controls the gap between icons
Drag to reorder: drag icons in the list to change merge order, CSS coordinates update automatically
Mobile reorder: up and down buttons reorder icons on phones and tablets
Auto CSS output: every icon's background-position, width, and height are generated for you
Live preview: the sprite regenerates instantly on any change for a true WYSIWYG experience
One-click CSS copy: a built-in button copies the full stylesheet to the clipboard
One-click PNG download: the combined image saves locally as sprite.png
Local browser processing: the Canvas API merges files locally, so nothing is uploaded
Multiple input formats: JPG, PNG, WebP, and GIF are all supported
Transparency preserved: PNG output keeps the original transparent background for clean icon composition

Best Practices

Retina 2x adaptation: use 2x source files

If your users are on Retina displays (Mac, iPhone, HiDPI Windows), upload 2x resolution sources (such as 32x32 icons) and generate the sprite from those, then use background-size: 32px auto in CSS to scale back to 16x16. This way both 1x and 2x screens render sharply with a single sprite.

Sprites still matter on HTTP/2 projects

HTTP/2 multiplexing removes much of the request-count bottleneck, but sprites still win in four scenarios: CDN cache reuse, gzip or Brotli compression, intranet proxy traversal, and HTTP/1.1 fallback. Enterprise intranets, government and banking systems, and email HTML templates are still mostly HTTP/1.1, where sprites remain irreplaceable.

PNG-8 vs PNG-24: pick the right source bit depth

The tool outputs fixed PNG, but you choose the source bit depth. Flat or single-color icons should be PNG-8 (lossless transparency, 60-80% smaller than PNG-24). Icons with gradients, shadows, or highlights need PNG-24. The tool accepts any format, so optimize sources with a PNG compression tool first.

CDN cache strategy: hash the filename for permanent caching

Avoid a fixed sprite.png filename. Rename with a content hash (such as sprite.a3f2b1.png) and set Cache-Control: max-age=31536000 for permanent caching. The browser downloads once, then serves from local cache, saving more bandwidth than HTTP/2 alone. The tool outputs sprite.png by default; you can rename after download.

gzip / Brotli compression makes sprites even smaller

A combined sprite has more pixel continuity than scattered small images, so gzip or Brotli compress it far more efficiently. Nginx with gzip level 1 typically shrinks sprites by 60-80%, and Brotli reaches 85%+. With Content-Encoding enabled, a 1MB sprite can transmit as 200-300KB. This is the most underappreciated sprite advantage.

CSS Modules / Vue scoped CSS: wrap with :global()

If your project uses CSS Modules or Vue scoped CSS, the .icon-home and .sprite class names from this tool will be locally hashed and stop working. Wrap shared classes with :global(.sprite) { ... } in your .module.css, or skip CSS Modules and rely on BEM naming instead.

Mix with Icon Font: core UI icons in Font, complex icons in sprites

The most stable production pattern is a mix. Use Icon Font for universal UI icons (settings, close, search, user) because they are colorable, vector, and cross-platform. Use sprites for complex colored icons (product logos, banner icons). The two approaches complement each other and avoid the maintenance cost of going all-in on one.

Use spritesmith for engineering projects, this tool for prototypes

For long-term projects, integrate spritesmith (Webpack) or gulp.spritesmith into the build pipeline: source changes auto-regenerate, hashed filenames are emitted, and SCSS or LESS variables are produced automatically. This tool is designed for zero-dependency prototypes and small deliveries, while build plugins suit CI/CD pipelines.

Modern projects can migrate from sprites to SVG symbol

If your project supports modern browsers (Chrome, Safari, Firefox, Edge, plus IE 11+), consider migrating from sprites to SVG symbol: a single file manages all icons, CSS controls color and animation, and there is no background-position coordinate maintenance. The sprite this tool outputs is a one-time asset that works as a transition during the migration.

FAQ

What is a CSS sprite and why combine images into one?

A CSS sprite combines multiple small images into one larger image and uses background-position to show individual icons. With sprites, the browser makes a single HTTP request to load every icon, which dramatically reduces request count and speeds up first paint compared to loading dozens of separate files. It is a classic frontend performance technique.

How do I combine multiple icons into a sprite online?

Upload your images and the tool merges them in the chosen layout with a live preview. On the right it outputs CSS background-position code (with width and height) for every icon, ready to paste into your stylesheet. The generated sprite is PNG and can be downloaded with one click.

How do I use the generated CSS code?

Place sprite.png in your project (for example /img/sprite.png) and paste the CSS into your stylesheet. Add the .sprite class plus the matching .icon-xxx class to any element that should show an icon, such as <i class="sprite icon-home"></i>. Class names are auto-generated from the original file names.

Which layout modes are supported?

Three modes: Horizontal (icons left to right in one row), Vertical (icons stacked top to bottom in one column), and Grid (icons auto-arranged into a square matrix; columns are the square root rounded up). Switch modes in the left panel to preview the result.

Can I adjust the gap between icons?

Yes. The left panel has a padding slider from 0 to 50px; 1 to 5px is recommended. Reasonable padding prevents edge pixel bleed during CSS positioning but does not affect usage. The padding lives inside the sprite, while the CSS only uses the precise background-position coordinates.

Can I reorder the icons?

Yes. Each item in the left list supports drag to reorder with the grip handle, and the up/down buttons work on mobile. The sprite and CSS coordinates regenerate automatically as soon as the order changes.

Which image formats are supported?

All common formats: JPG, PNG, WebP, GIF, and more. Output is always PNG (preserves transparency). PNG input is recommended because transparent backgrounds survive the merge into the sprite.

Are CSS sprites still useful in modern projects?

HTTP/2 multiplexing reduces part of the sprite advantage, but sprites still deliver value through CDN caching, gzip compression, and faster first paint for key icons. If you have fewer than 10 icons, or need color and animation, prefer SVG symbol or Icon Font. For many static PNG icons, sprites remain a stable and reliable choice.

Do sprites look blurry on Retina screens? How do I fix that?

Yes, they can. Retina screens (Mac, iPhone, HiDPI Windows) have 2x or 3x physical pixels, so a 1x sprite gets stretched and looks fuzzy. The fix is to upload 2x source files (32x32 instead of 16x16) and scale the sprite back to 16x16 in CSS with background-size: 32px auto.

Does merging icons lose image quality?

No. Merging simply places each image at its position on a large canvas. No resampling, compression, or color adjustment happens. The output PNG keeps the original quality. If you need to shrink the merged file further, run it through the [image compression tool](/image/compress/).

Are my sprite images uploaded to a server?

No. All merging happens in your local browser through the Canvas API. Files never leave your device and are discarded when you close the page. Internal icons, unreleased logos, and other sensitive assets are safe to process.

How do I download the generated sprite?

As soon as images are uploaded, a preview is generated. Click the Download button on the left to save sprite.png locally. The CSS is also produced automatically, and one click on Copy sends it to the clipboard.

Can I customize the class names?

Class names are auto-generated from the original file names with the .icon- prefix. For example, home.png becomes .icon-home. Use English, digits, and hyphens in file names to get clean, readable class names.

How do I choose between sprites, Icon Font, and SVG symbol?

It depends on the use case. Many static PNG icons or a need to support older IE versions: sprites. Universal UI icons that need to change color and stay cross-platform: Icon Font. Modern projects that need color, animation, and a single file to manage: SVG symbol is the top choice. In practice, mixing them is common: Icon Font for core UI icons, sprites for complex colored icons.

Can I shrink the merged sprite with the image compression tool?

Yes. This tool outputs lossless PNG, which can be large. A good workflow is: generate the sprite here, then use the [image compression tool](/image/compress/) to shrink the PNG or convert to JPG (if you do not need transparency), and finally use the [image converter](/image/convert/) to switch to WebP if you want. Combining the tools maximizes loading performance.

Glossary

CSS sprite: A technique that combines many small images into one larger image and uses background-position to display individual icons. A classic frontend performance optimization.
background-position: A CSS property that sets the starting coordinates of a background image. Sprites use negative values to shift the background left or up to the target icon. For example, background-position: -60px 0 shows the icon at a 60px offset.
background-size: A CSS property that controls the rendered size of a background image. The key to Retina adaptation: after generating a sprite from 2x sources, use background-size: 32px auto in CSS to scale back to 1x, keeping both 1x and 2x screens sharp.
Grid layout: The grid mode in this tool auto-calculates the column count as the square root of the icon count (rounded up) and arranges icons row-first into a square. Nine icons become a 3x3 grid.
Padding (icon gap): The pixel gap between adjacent sub-images in a sprite. 1 to 5px is recommended to prevent edge pixel bleed. The padding lives inside the sprite, while the CSS only uses the precise coordinates.
PNG transparency: PNG supports an alpha channel, so icons can have transparent backgrounds. The sprite output keeps PNG format, so transparent icons remain transparent after merging.
HTTP/2 multiplexing: HTTP/2 processes multiple requests in parallel on a single connection, reducing part of the sprite advantage. HTTP/2 still falls short of a combined sprite in CDN configuration, legacy browser compatibility, and gzip compression.
SVG symbol: SVG's <symbol> element with <use> references. Every icon lives in one SVG file, and CSS controls fill, stroke, and animation. The first-choice replacement for sprites in modern projects.
DPR (Device Pixel Ratio): The ratio between physical pixels and CSS pixels. Retina screens have DPR = 2, so a CSS 16x16 icon needs 32x32 physical pixels. DPR is the core parameter for adapting sprites to Retina screens.

Sprite Layout Mode Comparison

Layout	Arrangement rule	Typical use
Horizontal	Icons placed left to right in a single row	Nav bars, tab buttons, horizontal toolbars
Vertical	Icons stacked top to bottom in a single column	Vertical menus, list prefixes, top-down structures
Grid	Icons auto-arranged into a square matrix by count	General use, best default for unknown counts

Recommended Padding Values for Sprites

Padding (px)	Best for	Notes
`0px`	Clean edges, icons already include transparent padding	Most compact; edge pixels may bleed
`1-2px`	High-quality icons with a tiny safety margin	Recommended: balances compactness and stability
`3-5px`	Standard icons with shadows or strokes	Safe distance, widely used default
`6-10px`	Icons with mixed sizes or strokes	Avoids larger icons overlapping smaller ones
`10-50px`	Debugging or visual grouping	Not recommended for production

Retina 2x Sprite Adaptation Reference

Screen DPR	CSS size	Source file size	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Implementing image sprites in CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> and <use>
ReferenceWeb.dev - Replace images with CSS sprites
ReferenceWikipedia - Sprite (computer graphics)