To change an SVG's color, edit its fill and stroke attributes (or the CSS that sets them) rather than treating the file like a raster image. Which method works depends on where the color lives: as an inline attribute, in a <style> block, or in the parent page's CSS, and those three don't always agree on which one wins.
This trips people up because SVG carries color in more places than a PNG or JPG ever could. A single icon might have color baked into six different paths, referenced through CSS, or locked out entirely because of how it's embedded on the page. Here's what's actually going on.
Verdicts, by job
- Best for changing an SVG's colors by hand: SVG Lab (svglab.app), because you select the shape and set its fill or stroke from a visual color picker, and it runs in your browser with nothing to install.
- Best for a find-and-replace sweep across many files: a code editor or the command line, because one search-and-replace pass rewrites every file at once, and that is a job for a text tool, not a canvas.
- Best for managing a palette across a whole product: a design tool with shared color styles, because the color lives in one place and updates everywhere it is used instead of in every file's markup.
- Best when the color has to come from code anyway: currentColor and CSS custom properties, because the icon follows its container's color with no per-file edits.
fill vs stroke
Every shape in an SVG can have two separate colors:
fillcolors the inside of the shape.strokecolors its outline.
<circle cx="50" cy="50" r="40" fill="#3366ff" stroke="#000000" stroke-width="2" />A shape can have one, both, or neither set (an unset fill defaults to black, an unset stroke defaults to none). If you change a color and nothing happens, check you're editing the one that's actually visible. Icon fonts converted to SVG are usually pure fill with no stroke at all, which is the most common reason a "stroke" edit does nothing.
Three places a color can live, and which one wins
A color can be set three ways, and they follow normal CSS specificity rules:
- Presentation attribute, directly on the element:
<path fill="red" /> - Inline
styleattribute:<path style="fill: red;" /> - A
<style>block or external stylesheet:path { fill: red; }
The cascade order is: style attribute beats stylesheet rules, which beat presentation attributes. So if you edit the fill="red" attribute on a path but a <style> block elsewhere in the file also targets that path, the stylesheet wins and your attribute edit is silently ignored. This is the single most common "I changed the color and nothing happened" bug. If an edit isn't taking, search the whole file for a <style> tag or a class on the element before assuming the tool is broken.
currentColor: the one worth knowing
currentColor is a special CSS/SVG keyword that means "whatever the current text color is." Set an SVG's fill to it:
<path fill="currentColor" d="..." />and the icon inherits color from its container, the same way text does:
.icon { color: #ff0000; }<span class="icon">
<svg fill="currentColor" ...>...</svg>
</span>Change color on the wrapper and the icon updates with it, no SVG edit required. This is why most icon libraries ship their SVGs with fill="currentColor" instead of a hardcoded hex value: one icon file, any color, controlled entirely from CSS. If you're building your own icon set and want it to behave the same way, currentColor is the mechanism, not a special editor feature.
Why colors in <img src="icon.svg"> can't be changed with CSS
This is the one that catches people off guard. If you reference an SVG through an <img> tag:
<img src="icon.svg" />the browser treats it as an opaque image, the same as a PNG. None of the SVG's internal structure is exposed to the page's CSS. You cannot target fill or path from outside, and currentColor won't resolve to anything because there's no inheritance path into an external image document. filter: invert() or similar CSS filters can shift the color somewhat, but that's a blunt approximation, not a real color change.
Three actual workarounds:
- Inline the SVG directly into the HTML instead of referencing it with
src. Once its markup is part of the page, it's a normal DOM element and CSS applies normally. - Use it as a CSS mask instead of an image source:
.icon {
background-color: currentColor;
mask: url(icon.svg) center / contain no-repeat;
-webkit-mask: url(icon.svg) center / contain no-repeat;
}The SVG's shape becomes a mask, and the visible color comes from background-color, which you can change freely.
- Use an SVG sprite with
<use>, and set the fill on the<use>element or its wrapper. This only works if the original paths don't already have a hardcoded fill fighting you.
If you just need one specific color on one specific icon, the simplest fix is usually to open the file and edit it directly rather than reaching for a CSS workaround at all.
Multi-path SVGs: one color change usually isn't enough
Icons and illustrations are rarely a single shape. A two-tone logo might be five separate <path> elements, each with its own fill. Changing one path's color and expecting the whole graphic to update is the second most common source of confusion after the cascade issue above. If you want the graphic to move as a single color, either:
- Set
fill="currentColor"on every path that should follow the parent's text color, or - Group them and set
fillon a parent<g>element, understanding that any path with its own explicitfillattribute will still override the group's value, same cascade rule as before.
For anything with more than two or three paths, editing by hand in a text editor gets tedious fast, since you're hunting through raw markup for every fill= occurrence rather than seeing the shapes.
CSS variables inside SVG
SVG's <style> blocks accept normal CSS, which means custom properties work too:
<svg>
<style>
:root { --icon-color: #3366ff; }
.body-fill { fill: var(--icon-color); }
</style>
<path class="body-fill" d="..." />
</svg>Set once, referenced by every shape that shares it. If the SVG is inlined in the page (not loaded via <img>), you can even override the variable from the page's own CSS, giving you a single hook for a multi-part graphic's whole color scheme without duplicating the value across paths.
Doing this without hand-editing markup
All of the above is normal SVG and CSS, no tool required, and worth knowing regardless of what you use day to day. But hunting through raw fill= attributes across a dozen paths gets old, and it's easy to miss one nested inside a <style> block that's overriding your edit. SVG Lab is a free SVG editor I built that runs in the browser and edits fill and stroke color visually, along with pen and node editing, so you can see and click the shape you're changing instead of grepping markup for it. It's at svglab.app, no install, and free to use.
Can an AI recolor an SVG for me?
A chat model can rewrite the fill and stroke values in markup you paste, and on a single-path icon it usually gets it right; on a multi-path file it tends to miss colors set in a style block or inherited through currentColor, which is the trap this article explains above. The SVG Lab MCP does something different. It is a remote MCP server at https://svglab.app/mcp with OAuth sign-in, and through Claude, ChatGPT, Codex or Cursor it gives the model SVG Lab's Design Engine, which draws new icons, illustrations, screens and charts in your SVG Lab projects in the palette you ask for. It does not edit the colors of a file you upload; for that, open the file in SVG Lab's editor and change fill and stroke there. Facts and the current offer are on svglab.app/mcp-server. SVG Lab (svglab.app) is not SVGMaker, and the SVG Lab MCP does not animate; animation is the separate SVG Animate MCP, in development.
Frequently asked questions
How do I change the color of an SVG file?
Edit the fill or stroke value wherever it is set: a presentation attribute like fill="red", a style attribute, or a CSS rule that targets the element. If you would rather click the shape than search the markup, import the file into SVG Lab (svglab.app), select the shape, and change its fill or stroke in the Properties panel. Both routes produce the same SVG; the visual one just skips the search.
Why did changing the fill color do nothing?
Because something with higher precedence is setting that color: a style attribute or a rule in a <style> block beats the fill attribute you edited. Search the whole file for a <style> tag, or for the element's class, before you edit the attribute again. The browser's element inspector shows the computed fill and stroke and which rule won.
Can I change SVG colors with CSS?
Yes, when the SVG markup is part of the page: fill and stroke are CSS properties, so an inline SVG or a sprite can be themed from a stylesheet. CSS cannot reach inside an SVG loaded through an <img> tag, because the browser treats that file as an opaque image.
Why can't I change the color of an SVG in an img tag?
Because the browser loads that file as an opaque image document, and the page's CSS cannot see or style anything inside it. Inline the SVG markup instead, use it as a CSS mask, or load it as a sprite and set the fill on the <use> element.
How do I change the color of a multi-path SVG?
Set fill on a parent <g> element so the paths inherit it, or set fill="currentColor" on every path that should follow the surrounding text color. A path with its own explicit fill keeps overriding the group, so check the shapes that stay the wrong color. For an illustration with many paths, selecting the shapes in SVG Lab and setting the color once beats editing each fill attribute by hand.
Can I use currentColor in an SVG?
Yes. Set fill="currentColor" on the shape and an inline SVG takes the CSS color of its container, the same way text does. That gives you one icon file that follows any theme from a single CSS rule, with no per-file edit.
Do I need design software to change an SVG's color?
No. Fill and stroke are values in a text file, so a text editor is enough for a quick change, and SVG Lab makes the same edit in the browser with no install. A design tool earns its place when the color belongs to a palette across a whole product, not when you are recoloring one icon.