Change color on an SVG with CSS

Often I find myself wanting to change a SVG's color (fill) on hover; sometimes it works - sometimes it does not. The solution: currentColor.

Change SVG's fill-value into "currentColor". It will then inherit whatever color your font-family uses.

<svg width="1em" height="1em"> 
  <path fill="currentColor" d="m1022.74 942..."></path>
</svg>

You target changes in CSS by:

svg {
  color: red;
}

---

4 januari 2024