SVG inherit Color

Let's Go

Nice short post for you guys but I think it's going to be a beneficial one.

Imagine we have a button like so:

On hover of this button, we will change the background to be blue and the color of the text to be white.

As you can see our SVG remains the same color, thankfully we can have our SVG inherit the color of the button text.

We do this like so:

<svg height="25px" width="25px" viewBox="0 0 100 100">
     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="currentColor" />
</svg>

We give the circle fill the value currentColor which will use whatever color we set our text to be.

So now on hover we have:

And that's all there is folks, hope you learned something.

Here is the Codepen with all the code: