8th October 2022

Changing colour of SVGs

I'm currently working with a project that requires me to use create some svg files for icons that we are using. One issue that I noticed with the svg files I was using is that they weren't inheriting the colour of the parent component which means the alternative would be for me to create multiple similar svgs but with different colours and that is not practical. Surely there must be an easier solution right?

Lucky me there is 😁. Svg tags have a property called fill which is used to define the colour of the line drawn. If you give it a specific colour code like #FFFFFF, the stroke will be this colour no matter what.

If you want your svg files to inherit the colour of the parent components you should change the value of fill to currentColor. This means that the svg will take the value of the color property from its parent.