Creating Icon Sprite Sheets for Web Applications

Icon Sprite Sheets

Icon sprite sheets are one of the most common and practical uses of CSS sprites. Instead of loading 30-50 individual icon files, you combine them into a single PNG and use CSS to display each icon.

Organizing Your Icons

Before generating a sprite sheet, prepare your icons:

1. Consistent dimensions — Standardize all icons to the same size (e.g., 24x24, 32x32, or 48x48 pixels)
2. Consistent padding — Include equal transparent padding within each icon for visual breathing room
3. Naming convention — Use descriptive filenames: icon-home.png, icon-search.png, icon-settings.png
4. Color format — Use PNG-24 with alpha transparency for clean edges

Generated CSS Structure

A sprite sheet generator produces CSS like this:

/* Base class — shared properties */
.icon {
  background-image: url('icons-sprite.png');
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}

/* Individual icon classes */
.icon-home {
  width: 24px;
  height: 24px;
  background-position: 0px 0px;
}

.icon-search {
  width: 24px;
  height: 24px;
  background-position: -26px 0px;
}

.icon-user {
  width: 24px;
  height: 24px;
  background-position: -52px 0px;
}

HTML Usage

<button>
  <span class="icon icon-home"></span>
  Home
</button>

<nav>
  <a href="/search"><span class="icon icon-search"></span> Search</a>
  <a href="/profile"><span class="icon icon-user"></span> Profile</a>
</nav>

Sizing Considerations

Choose your icon size based on use case:

Size	Use Case
16x16	Favicons, inline text icons
24x24	Standard UI icons, navigation
32x32	Toolbar icons, feature highlights
48x48	Landing page features, large buttons

Grid Arrangement Tips

• Place frequently-used icons first (they load first if the image loads progressively)
• Group related icons together (navigation, actions, status indicators)
• Use consistent padding (2-4px) to prevent bleed at zoom levels
• Consider separate sprite sheets for different icon sizes rather than mixing sizes