Skip to content
SvgJsx
Language: English

Make SVG Icons Use currentColor

Replace hard-coded fill and stroke colors with currentColor so your icons inherit the text color of their parent, change on hover and adapt to dark mode automatically.

Quick presets:
Drop .svg files here orFiles are read locally with FileReader and are never uploaded.
Options
Export:
import type { SVGProps } from "react";

const HeartIcon = ({ size = 24, ...props }: SVGProps<SVGSVGElement> & { size?: number | string }) => (
  <svg viewBox="0 0 24 24" className="icon icon-heart" width={size} height={size} {...props}>
    <g id="Layer_1" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M19.0001 14.0002c1.4900-1.4600 3.0000-3.2100 3.0000-5.5000A5.5000 5.5000 0 0 0 16.5000 3c-1.7600 0-3.0000.5000-4.5000 2-1.5000-1.5000-2.7400-2-4.5000-2A5.5000 5.5000 0 0 0 2 8.5000c0 2.3000 1.5000 4.0500 3 5.5000l7 7Z" style={{ fillOpacity: "0.15", fill: "currentColor" }} />
    </g>
  </svg>
);

export default HeartIcon;

Preview

Preview of the converted SVG
Original SVG
706B
Optimized SVG
548B(-22%)
Component
692B

What currentColor does

currentColor is a CSS keyword that resolves to the element's computed color value. When an SVG uses fill="currentColor", the icon is painted with whatever color applies to its parent, whether that comes from a Tailwind class, a link hover state or a dark-mode media query.

Design tools export icons with fixed hex values such as fill="#111827". That locks the icon to one color and forces you to keep separate files for each theme. Converting to currentColor turns one file into an icon that fits anywhere.

What the converter changes

With the currentColor option enabled:

  • fill and stroke attributes with a color value become currentColor.
  • fill and stroke inside inline style attributes are replaced too.
  • none, transparent, inherit and url(#gradient) references are kept, so outlines and gradients still work.
  • Other colors such as stop-color in gradients stay unchanged.

When not to use currentColor

Multi-colour illustrations, brand logos and flags rely on several specific colors. Replacing all of them with one color flattens the artwork. For those files keep the original colors, or use CSS custom properties for the few colors you want to theme.

Frequently asked questions

Why is my icon black after converting?

currentColor inherits the CSS color property. If the parent has no color set, browsers default to black. Set color on the icon or a parent, for example class="text-blue-600".

Does currentColor work with strokes?

Yes. Both fill and stroke accept currentColor, which is why outline icon sets like Lucide or Heroicons use stroke="currentColor".

Can I use currentColor in an <img> tag?

No. An SVG loaded through <img> or CSS background-image is isolated from the page's CSS, so currentColor resolves to black. The SVG must be inline, which is what a component gives you.

Will gradients still work?

Yes. Fills that reference a gradient with url(#id) are left untouched, and the referenced ids are preserved even when id stripping is enabled.