Sprite Sheets for UI Component Libraries

Sprite Sheets for UI Components

UI component libraries often need a consistent icon system that works across buttons, navigation menus, form controls, and status indicators. A well-designed sprite sheet provides this foundation with minimal overhead.

Component Icon Architecture

/* Base icon system */
[class^="ui-icon-"] {
  display: inline-block;
  vertical-align: middle;
  background-image: url('ui-sprites.png');
  background-repeat: no-repeat;
}

/* Size variants */
.ui-icon-sm { width: 16px; height: 16px; }
.ui-icon-md { width: 24px; height: 24px; }
.ui-icon-lg { width: 32px; height: 32px; }

For multi-size support, create separate sprite sheets at each size rather than scaling one sheet. This ensures pixel-perfect rendering.

Button Icons

<button class="btn btn-primary">
  <span class="ui-icon-sm ui-icon-save"></span>
  Save
</button>

<button class="btn btn-danger">
  <span class="ui-icon-sm ui-icon-delete"></span>
  Delete
</button>

Status Indicators

.status-icon { width: 12px; height: 12px; }
.status-success { background-position: 0 0; }
.status-warning { background-position: -14px 0; }
.status-error   { background-position: -28px 0; }
.status-info    { background-position: -42px 0; }

Navigation Icons

.nav-icon { width: 20px; height: 20px; }
.nav-home     { background-position: 0 -24px; }
.nav-search   { background-position: -22px -24px; }
.nav-profile  { background-position: -44px -24px; }
.nav-settings { background-position: -66px -24px; }

Design System Integration

When integrating sprites into a design system:

1. Token mapping — Map sprite classes to design tokens
2. Theme support — Create separate sprite sheets for light and dark themes, or use CSS filters
3. State variations — Include hover, active, disabled states as separate sprites
4. Consistent naming — Follow a convention: category-action-size
5. Documentation — Generate a visual sprite catalog showing all available icons

Dark Mode Support

For dark/light theme support with sprites:

.icon { background-image: url('sprites-dark.png'); }

@media (prefers-color-scheme: light) {
  .icon { background-image: url('sprites-light.png'); }
}

Or use CSS filters for simple color inversion:

.theme-light .icon {
  filter: invert(1);
}