SVGKit
← Browse all toolsSVG Recolor / Theme

SVG Recolor / Theme

Edit

Replace fixed SVG colors with currentColor so icons can inherit theme color.

Loading...

Page context

Where SVG Recolor / Theme fits

SVG Recolor / Theme replaces fixed SVG colors with currentColor for themeable inline icons.

Related guides

Themeable icons

Using currentColor lets an inline SVG inherit CSS text color from its parent element, so one icon file adapts to every theme, state, and dark mode without generating variants.

How inheritance works

currentColor resolves against the CSS color property of the element that contains the SVG. Set a color on the button or link wrapping the icon and every replaced stroke and fill follows it.

Edits land as real SVG attributes select on canvas <rect x="130" y="120" width="100" height="70" fill="currentColor" /> standards-based — renders anywhere
SVG Recolor / Theme edits real SVG structure — what you change on the page is what lands in the file.
A selected rectangle with handles flowing into a real SVG rect element, illustrating how SVG Recolor / Theme edits land as standards-based attributes.

Current behavior

The first version replaces detected fixed color values with currentColor. Detailed per-color mapping is planned later.

When recoloring is the wrong tool

Multi-color artwork where specific colors carry meaning (status colors, brand marks) should keep its fixed palette. Recoloring suits monochrome and simple icons.

What you can change

SVG Recolor / Theme edits real SVG structure — elements, attributes, and values as they exist in the document — so what you change on the page is what lands in the file.

Edits are real SVG

Nothing is converted into a proprietary format along the way. The result remains standards-based markup that renders the same in browsers, editors, and build pipelines.

How to use

  1. Paste SVG. Paste SVG markup with fixed colors.
  2. Recolor. The tool replaces detected colors with currentColor.
  3. Wire the theme. Set a CSS color on the parent element to control the icon.
  4. Copy output. Copy the themeable SVG.

Frequently asked questions

Does it preserve transparent?
Yes. transparent is not replaced.
Can I choose a custom target color?
The first version targets currentColor. A configurable recolor tool is planned.
Does this work for icons?
Yes. It is especially useful for monochrome or simple multi-color icons.
Which colors get replaced?
Detected fixed fill and stroke values. Reserved keywords such as transparent and none stay untouched.
What about gradients and patterns?
Gradient stops are not rewritten in this version; solid fills and strokes are the current scope.
How do I set the final color?
Style the wrapping element: the CSS color property flows into every currentColor in the icon.
Why did my icon turn black?
The wrapping element has no color set, so currentColor resolves to the default text color. Add a CSS color to the parent.
Is SVG Recolor / Theme free?
Yes. SVGKit tools are free to use with no account required.