Recolour an icon without opening an editor
Every colour found by value rather than by how it was written — so all three spellings of red change together.
Recolour an icon without opening an editor
Every colour in the file, found by value rather than by how it was written — so #f00, red and rgb(255 0 0) are all the same colour and all change together.
Drop an SVG here, or click to choose.
Read in this tab, never uploaded.
Colours in this file
An SVG in an img tag cannot be styled
This is the constraint that decides how icons get used. An SVG placed with <img src="icon.svg"> is a separate document as far as the browser is concerned. Your page's stylesheet does not reach inside it, currentColor has no colour to inherit, and no amount of CSS on the <img> will change the fill.
The same file pasted directly into the markup as <svg>…</svg> is part of the page and everything works: it inherits colour, responds to hover, and can be targeted by any selector. That is the entire reason icon systems inline their SVGs rather than linking them, and it is worth knowing before spending time on a recolouring rule that was never going to apply.
When you cannot inline it
Sometimes the SVG has to stay an external file — it is large, it is cached, or it comes from somewhere you do not control. Two approaches work. A CSS mask uses the SVG's shape to stamp out a background colour, so the colour comes entirely from CSS and the file supplies only the silhouette; it works well for single-colour icons and discards any colour in the original. Alternatively, the SVG can declare its own custom properties with fallbacks and be referenced in a way that lets them be set — more capable and considerably more setup.
For most projects the simpler conclusion holds: if an icon needs to change colour, inline it. Recolour the file here when you want a fixed set of variants on disk, and inline it when the colour has to follow the interface.
currentColor, and why it is usually the answer
An icon set as fill="currentColor" inherits the CSS color of whatever it sits inside. One file then works in every theme, every state and both light and dark, with no second copy and no filter.
Keep an exception where a colour carries meaning — a red in an error icon, a brand colour in a logo. Those are on the keep list rather than swept along with the rest.
It does not work for a multi-colour illustration, where the colours are the drawing rather than a theme. For those, mapping each colour onto a token is the better move.
Matching by value, not by string
A file exported from one tool might write #FF0000, another red, another rgb(255,0,0). A find-and-replace on the text catches one of them and leaves the rest, which is how an icon ends up half-recoloured.
Every colour here is parsed first, so all three forms are recognised as the same colour and replaced together.