Working with multiple colors

In most cases, your icons will have only one color, which is reset to currentColor for easy CSS control. However, sometimes you need icons with multiple colors—such as a primary and a secondary color, or special accents.

This guide shows how to use the resetColors option to enable multi-color support, and how to control those colors from your CSS or design system.

Motivation

• You want to specify a known set of main colors in your CSS
• All other colors should be inherited from the parent (e.g., currentColor)
• You want to support themes, dark mode, or dynamic color changes

Configure resetColors for multicolored icons

See the color reset guide for a full explanation of the resetColors option.

Here's a typical configuration for multicolored icons:

svg({
  resetColors: {
    // 1. Define known main colors to be reset to currentColor
    replace: ['#6C707E', '#A8ADBD', '#818594'],
    // 2. Replace all other colors with a CSS variable for secondary color
    replaceUnknown: 'var(--icon-secondary-color)'
  }
});

• All icons with the listed colors will use currentColor (inheriting from CSS)
• All other colors will use the CSS variable --icon-secondary-color

Add CSS variables

To control the secondary color, add a CSS variable to your base styles:

@layer base {
  :root {
    /** Multi-color icons will use this variable as an additional color */
    --icon-secondary-color: currentColor;
  }
}

Usage in your app

You can set the secondary color using any CSS method:

With CSS Modules

.icon {
  color: theme('colors.red.600');
  --icon-secondary-color: theme('colors.green.600');
}

With Tailwind CSS

You can use arbitrary values or create a plugin for convenience:

<Icon name="my-icon" className="text-red-800 [--icon-secondary-color:theme(colors.green.600)]" />

Or, create a Tailwind plugin for icon-secondary-* utilities:

const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          'icon-secondary': value => ({
            '--icon-secondary-color': value
          })
        },
        { values: flatColors(theme('colors')) }
      );
    })
  ]
};

const flatColors = (colors, prefix = '') =>
  Object.entries(colors).reduce(
    (acc, [key, value]) =>
      Object.assign(
        acc,
        typeof value === 'object'
          ? flatColors(value, `${prefix}${key}-`)
          : { [`${prefix}${key}`]: value }
      ),
    {}
  );

Now you can use:

<Icon name="common/add" className="icon-secondary-green-800 hover:icon-secondary-red-800" />

With inline styles (not recommended)

<Icon name="my-icon" style={{ '--icon-secondary-color': '#00ff00' }} />

Best Practices

• Use currentColor for the main icon color
• Use CSS variables for secondary/tertiary colors
• Prefer CSS Modules or Tailwind plugins for maintainability
• Test your icons in different themes and color schemes
• See Color Reset API Reference for advanced configuration

Related

• Automatically reset colors
• Writing Icon Component
• Color Reset API Reference