Last updated
When to Use CSS Sprites
- Large icon sets with many small images (20+ icons)
- Environments where HTTP/2 is not available
- Reducing render-blocking image requests on initial page load
- UI elements that appear on every page (navigation icons, social links)
- Hover state images that need to be pre-loaded to avoid flash
Use the CSS Sprite Generator at techconverter.me to upload your images, configure arrangement and padding, and download the sprite sheet along with ready-to-use CSS in seconds.
Examples
Example 1: Icon Set for a Navigation Bar
You have five navigation icons as separate PNG files: home.png, search.png, cart.png, profile.png, and settings.png. Each is 24x24 pixels. Upload all five to the generator and choose a horizontal arrangement. The generator produces a single sprite sheet 120x24 pixels and the following CSS:
.icon {
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
width: 24px;
height: 24px;
display: inline-block;
}
.icon-home { background-position: 0 0; }
.icon-search { background-position: -24px 0; }
.icon-cart { background-position: -48px 0; }
.icon-profile { background-position: -72px 0; }
.icon-settings { background-position: -96px 0; }
Apply the classes in your HTML:
<nav>
<a href="/"><span class="icon icon-home"></span> Home</a>
<a href="/search"><span class="icon icon-search"></span> Search</a>
<a href="/cart"><span class="icon icon-cart"></span> Cart</a>
</nav>
Five HTTP requests become one. On a slow connection, this can reduce icon load time by 80% or more.
Example 2: Grid Arrangement for a Large Icon Library
You have 48 social media icons, each 32x32 pixels. Upload them all and choose a grid arrangement with 8 columns. The generator creates a 256x192 pixel sprite sheet and CSS like this:
.social-icon {
background-image: url('/images/social-sprite.png');
background-repeat: no-repeat;
width: 32px;
height: 32px;
display: inline-block;
}
.icon-twitter { background-position: 0 0; }
.icon-facebook { background-position: -32px 0; }
.icon-instagram { background-position: -64px 0; }
.icon-linkedin { background-position: -96px 0; }
.icon-youtube { background-position: -128px 0; }
/* ... continues for all 48 icons */
The grid layout minimizes the total sprite sheet dimensions, keeping the file size small while accommodating all icons.
Example 3: Adding Padding to Prevent Bleed
When icons are displayed at non-integer positions or with anti-aliasing, neighboring sprites can bleed into the visible area. Configure the generator to add 4px padding between sprites:
/* With 4px padding, offsets account for the extra space */
.icon-home { background-position: 0 0; }
.icon-search { background-position: -32px 0; } /* 24px icon + 4px padding + 4px padding */
.icon-cart { background-position: -64px 0; }
The padding ensures clean rendering in all browsers, especially on Windows where ClearType rendering can cause sub-pixel bleed.