How to change SVG icon color with CSS

Q: Why won't my SVG change color?

Usually the SVG has a hard-coded fill (like fill="#000") that overrides your CSS. Remove it or set it to currentColor. Also note that a <img> SVG can't be recolored with CSS — it must be inline or used as a mask.

Q: What is currentColor?

A CSS keyword that resolves to the element's color value, letting an icon inherit text colour automatically.

Q: Can I change the color of an SVG in an img tag?

Not with fill. Either inline the SVG, or apply it as a CSS mask and set background-color.

The cleanest way to colour an SVG icon is to let it inherit the surrounding text colour. The magic word is currentColor — set it once and the icon matches your buttons, links and dark mode automatically.

Inline SVG: fill and stroke

If the SVG is inline in your HTML, target its fill (for solid icons) or stroke (for line icons):

.icon { fill: #6d5efc; }        /* solid icons */
.icon { stroke: #6d5efc; }      /* outline icons */

The currentColor trick

Author the icon with fill="currentColor". Now it takes whatever color the element has — so it matches text, changes on :hover, and adapts to dark mode for free:

<a href="/" style="color:#6d5efc">
  <svg fill="currentColor" ...>…</svg> Home
</a>

SVG as a background image

You can't set fill on a background SVG, but you can use it as a mask and colour it with background-color:

.icon {
  background-color: #6d5efc;
  -webkit-mask: url(icon.svg) center / contain no-repeat;
  mask: url(icon.svg) center / contain no-repeat;
}

Skip the editing

Recolor any icon visually and copy the SVG — no code required.

Open the editor →

Frequently asked questions

Why won't my SVG change color?

Usually the SVG has a hard-coded fill (like fill="#000") that overrides your CSS. Remove it or set it to currentColor. Also note that a <img> SVG can't be recolored with CSS — it must be inline or used as a mask.

What is currentColor?

A CSS keyword that resolves to the element's color value, letting an icon inherit text colour automatically.

Can I change the color of an SVG in an img tag?

Not with fill. Either inline the SVG, or apply it as a CSS mask and set background-color.