How to Use Design Tokens to Change SVG Icon Colors

Using design tokens to manage SVG icon colors creates a scalable, consistent theming architecture across web and mobile applications. By abstracting color definitions into centralized design tokens and coupling them with CSS custom properties, developers can dynamically update the appearance of shared SVG icon libraries across themes, states, and brands without duplicating icon files or hardcoding hex codes.

1. Configure SVGs for Dynamic Inheritance

To make an SVG responsive to external color definitions, remove any hardcoded hex values (#000000, #FFFFFF, etc.) from the fill or stroke attributes within the SVG code. Replace these values with currentColor or reference a CSS variable directly.

<!-- Example Icon using currentColor -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
  <path fill="currentColor" d="M12 2L2 22h20L12 2z" />
</svg>

When currentColor is used, the SVG automatically inherits the CSS color value applied to its container or directly to the SVG element.

2. Define Color Tokens as CSS Variables

Design tokens are typically defined in a design system tool (like Figma or Style Dictionary) and exported into platform-specific formats. In web environments, export these tokens as CSS custom properties defined on the :root or specific scope elements.

:root {
  /* Global Brand Tokens */
  --token-color-primary: #0066cc;
  --token-color-secondary: #6c757d;
  --token-color-interactive: #0052a3;

  /* Semantic Theme Tokens */
  --token-icon-default: var(--token-color-primary);
  --token-icon-muted: var(--token-color-secondary);
}

[data-theme="dark"] {
  --token-icon-default: #66b2ff;
  --token-icon-muted: #a0aec0;
}

3. Apply Tokens to Shared Icon Sets

Depending on how the shared icon set is implemented, apply design tokens using one of the following approaches:

Method A: Inline SVGs or Component Wrappers

If icons are rendered as components (e.g., React, Vue, Web Components), bind the design token directly to the component’s style:

.icon {
  color: var(--token-icon-default);
  transition: color 0.2s ease-in-out;
}

.icon--muted {
  color: var(--token-icon-muted);
}

Method B: SVG Sprite Sheets with `<use>`

When loading icons from an external or inline SVG sprite sheet, CSS custom properties penetrate the Shadow DOM/cloned tree boundary created by the <use> tag:

<!-- SVG Sprite Instance -->
<svg class="icon icon-action">
  <use href="#icon-star"></use>
</svg>

.icon-action {
  color: var(--token-color-interactive);
}

4. Dynamically Altering Tokens in Real Time

Because design tokens are mapped to CSS custom properties, you can change icon colors globally or per context without re-rendering or downloading new SVG files:

Theme Switching: Changing the data-theme attribute on the root document (<html data-theme="dark">) cascades new token values to all rendered SVGs immediately.
Component-Level Overrides: Scope tokens locally by declaring new variable assignments on a specific wrapper:
```
.alert-box--danger {
  --token-icon-default: var(--token-color-danger, #e53e3e);
}
```
Runtime Customization: Update tokens programmatically using JavaScript to support user-selected custom themes:
```
document.documentElement.style.setProperty('--token-icon-default', '#ff5722');
```

This decoupled architecture keeps the SVG icon set lightweight, reusable, and fully synchronized with the design system’s overarching color palette.