SVG Sprites for Design Systems

SVG Sprites for Design Systems

Design systems need a scalable, maintainable approach to icon management. SVG sprites are the ideal foundation because they combine flexibility with performance.

Icon Naming Conventions

Establish a consistent naming scheme:

{category}-{name}[-{variant}]

Examples:
  nav-home
  nav-search
  action-delete
  action-edit
  status-success
  status-warning
  arrow-up
  arrow-down
  arrow-left-circle

Categories prevent name collisions and make icons discoverable. Common categories: nav, action, status, media, social, arrow, file.

Size Variants

Design icons on a consistent grid with size variants:

icons/
  16/  (small: inline text, badges)
  20/  (compact: form inputs, tables)
  24/  (default: navigation, buttons)
  32/  (large: empty states, features)

Generate separate sprites per size or include all sizes with prefixed IDs:

<symbol id="icon-16-home" viewBox="0 0 16 16">...</symbol>
<symbol id="icon-24-home" viewBox="0 0 24 24">...</symbol>

Theming Support

For themeable design systems, all icons should use currentColor:

/* Light theme */
:root { --icon-color: #374151; }

/* Dark theme */
.dark { --icon-color: #d1d5db; }

.ds-icon {
  color: var(--icon-color);
  fill: currentColor;
}

Component API

Wrap the sprite system in a component with a controlled API:

interface IconProps {
  name: IconName;        // Type-safe union
  size?: "sm" | "md" | "lg" | "xl";
  color?: "current" | "primary" | "muted" | "danger";
  title?: string;        // Accessibility
  className?: string;    // Escape hatch
}

Map size tokens to pixel values internally:

const sizeMap = { sm: 16, md: 20, lg: 24, xl: 32 };

Versioning

Version your icon sprite as part of the design system package:

{
  "name": "@myorg/icons",
  "version": "2.4.0",
  "files": ["sprite.svg", "icon-names.ts"]
}

Follow semantic versioning:

• Patch — Bug fixes to existing icons
• Minor — New icons added
• Major — Icons removed or renamed

Documentation

Auto-generate an icon gallery from the sprite file:

1. Parse the sprite SVG to extract all symbol IDs
2. Render each symbol as a preview with its name
3. Show usage code for each icon
4. Include search and category filtering

This gallery becomes part of your design system documentation site and stays in sync with the actual sprite file.

Distribution

Distribute icons as an npm package that includes:

• The sprite SVG file
• TypeScript type definitions for icon names
• Framework-specific components (React, Vue)
• A CLI for generating project-specific subsets