currentColor: the one SVG trick that makes icons themeable

SVG to React — Sat, 31 Oct 2026 08:48:03 GMT

Every frontend codebase eventually grows an icon problem. The designer hands over icons that are dark grey. Then the primary button needs them white, the danger menu item needs them red, dark mode needs them light, and hover states need yet another colour. Before long you have icon-close-white.svg, icon-close-red.svg and a CSS file full of filter hacks.

You can avoid all of that with one CSS keyword that has been in every browser for years: currentColor.

What currentColor means

currentColor is a CSS value that resolves to the element's computed color property. In ordinary HTML it's mostly a curiosity:

.card {
  color: #0f766e;
  border: 2px solid currentColor; /* border is teal too */
}

In SVG it is much more useful, because fill and stroke accept it. An icon whose paths use fill="currentColor" takes on the text colour of whatever it sits inside, and that colour inherits down the tree like any other text colour.

Put that inside and the star is crimson. Put it in a paragraph with color: white and the star is white. The SVG file stays the same.

Converting an existing icon

Most exported icons look like this:

Or, for outline icons:

The fix is to replace each hard-coded colour with currentColor and leave fill="none" alone:

A neat trick is to set the value once on the root . fill and stroke are inherited properties in SVG, so child shapes without their own value pick up the root's:

This is how popular sets like Lucide and Feather are built, and it's why they theme so easily.

Using it in React

In a React component, the icon follows its parent's colour automatically:

function CloseIcon(props) {
  return (
    
  );
}

export function DangerButton() {
  return (
    
  );
}

With Tailwind, a colour utility on the parent or the icon itself is all it takes:

Hover changes the button's color, and the icon follows. There's no second asset and no extra CSS rule.

Dark mode for free

Because the colour comes from CSS, dark mode is just a variable swap:

:root { --text: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root { --text: #e2e8f0; }
}
body { color: var(--text); }

Every currentColor icon on the page switches with the text. Compare that with maintaining a light and a dark version of every file.

Where it doesn't work

and CSS background-image. An SVG loaded as an image is an isolated document. It can't see your page's CSS, so currentColor resolves to the SVG's own default colour, which is usually black. To theme an icon, it must be inline SVG (including JSX components) or referenced via from an inline sprite. For background-style usage, CSS mask-image with background-color: currentColor is a workable alternative:

.icon-close {
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: url("/icons/close.svg") center / contain no-repeat;
          mask: url("/icons/close.svg") center / contain no-repeat;
}

Multi-colour icons and illustrations. If an icon has two or three intentional colours, replacing them all with currentColor flattens it. One option is to use currentColor for the main shape and CSS custom properties for the accents:

That only works for inline SVG too.

Inline style attributes and embedded block. Those override presentation attributes, so replacing only fill="" won't change anything. Check for both.

Opacity tricks. Some icons use a lighter shade for a secondary layer. Replace that with currentColor plus opacity="0.4", and the shading keeps working in any colour.

Overriding a single icon

Sometimes one icon should break from the text colour, like a success check in green inside a grey sentence. You don't need a special variant. Set color on the icon itself:


  Saved  just now

currentColor reads the closest computed color, so the icon's own value wins over its parent's. The same works with a class like text-green-600. Keeping the colour on color rather than fill means there's still only one property to control every icon, whether it inherits or is overridden.

A quick checklist

Single-colour icon? Use currentColor for fill or stroke, ideally on the root.
Keep fill="none" on outline icons.
Remove colours set in style attributes and

SVG to React Blog