CSS sprites: optimizing icons and graphics for a website

Every HTTP request for a separate icon slows page loading. CSS sprites solve this problem directly: they combine dozens of images into a single file and eliminate unnecessary network requests from the browser.

What is a CSS sprite

A CSS sprite is a single image (PNG, WebP, or SVG) containing several icons or images arranged in a specific grid. In CSS, each icon is specified as background-image with an exact background-position that indicates the required portion of the combined file.

A sprite reduces the number of HTTP requests, which speeds up the page's initial load. This used to be critically important with HTTP/1.1, when a browser could open only 6 parallel connections per domain.

How a CSS sprite works

Suppose a sprite contains three icons measuring 24×24 pixels, arranged in a row:

.icon {
  background-image: url('/sprites/icons.png');
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
}

.icon-home    { background-position: 0 0; }
.icon-search  { background-position: -24px 0; }
.icon-profile { background-position: -48px 0; }

Negative background-position values shift the image left or up, showing the required portion in the element's “window.” The browser loads one file, and CSS selects the required icon by its offset.

SVG sprites: the modern approach

Raster PNG sprites lose sharpness on Retina displays. A modern alternative is SVG sprites: they are scalable, sharp at any resolution, and smaller in file size.

The symbol + use pattern

An SVG sprite defines icons using <symbol> with a unique id, then inserts them using <use>:

<!-- sprite.svg (скрытый спрайт, inline в HTML) -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">
    <path d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"/>
  </symbol>
</svg>

<!-- Использование иконки -->
<svg class="icon"><use href="#icon-home"/></svg>
<svg class="icon"><use href="#icon-search"/></svg>

Advantages of SVG sprites

• Scalability: sharp on screens with any pixel density
• CSS styling: color, size, and hover effects using fill and stroke
• Accessibility: you can add <title> and aria-labelledby directly to <symbol>
• Smaller file size: SVG icons usually weigh less than PNG equivalents while offering better quality

When to use sprites

Sprites are still useful in specific scenarios:

With HTTP/2, the browser multiplexes requests over a single connection, so the benefits of sprites are reduced. Nevertheless, a single SVG file still makes an icon system easier to maintain.

Tools for creating sprites

Creating a sprite manually is inconvenient because you have to calculate the position of each icon precisely. The following tools can automate the process:

• Online generators: upload SVG files and get a ready-made sprite and CSS map
• gulp-svg-sprite / webpack-svg-sprite: integration into a project build
• svg-sprite (npm): a CLI utility for batch processing icons
• Figma → SVG export: export icons from a design with names that match the sprite IDs

For more on optimizing SVG files and generating sprites, see the SVG Sprite Generator guide. For more on optimizing images for SEO, see the image optimization guide.

Tool on reChecker

The CSS sprite generator on reChecker lets you upload a set of SVG icons and get a ready-made sprite file along with a CSS map of offsets—without installing build tools.

Open the tool on reChecker →