How to change SVG colors.

jasoncruzdev

Jason Cruz

Posted on August 13, 2022

How to change SVG colors.

ℹ️ Disclaimer

This will only worrk for svg icons that are solid colors, if you have 2 layers that or have spaces between the image, like a settings.svg icon that has a gear as an icon that has more than 1 gap between the image.. It wont work.

Do me a solid;

*❤️ 🦄, save & comment! *
Much ❤️❤️❤️❤️❤️

ℹ️ Back Story

I recently found myself struggling with changing SVG colors when trying to do it within PyQt5 Editor. I struggled for 10mins when I realized that there HAS to be a better way. I asked Google, with the "stackoverflow" attached at the end, and It lead me to a thread that looked like 8Mile from movie.

As per the thread found from 8yrs ago found. I wasn't going to "endulge" myself in reading that massive thread of word-vomit. So to make it super easier for the next programmer/coder looking for faster answers, here it is!

You can change any SVG color. Now how to get it to hover a different color change inside a python application, is beyond me at this conjuction in life, but I am positive I will find what I am looking for when the time comes.

FeatherIcons also has some really nice icons, ready to go! What I used, but also JUST found out I could do, is change the color I needed HERE before I download the icons, PLUS I can also adjust the size & stroke width before downloading lol (HUGE FAIL)

You live and you learn!

Other ways

My other way I did it before discoverying what I did in the previous sentence.

  • DUPLICATE THE FOLDER OF SVG's YOU WANT TO EDIT (Assuming the color is Black), so another folder you can have can be white or red. I remade a folder for all white logos.

  • Use any code editor, I used VSCode for this. Open the SVG inside your code editor. And it will show something like this..

svg example of a black icon

Note

  • You will want to make the changes to the attributes, fill="none" stroke="currentColor"

  • Flip the attributes of fill & stroke; You will want it looking like the picture below. after vscode edit

vscode svg edit, black to white

Example

Before



fill="none" stroke="currentColor"


Enter fullscreen mode Exit fullscreen mode

example of a black svg icon
before edit

After



fill="currentColor" stroke="white"


Enter fullscreen mode Exit fullscreen mode

changed svg color, black to white
after edit

I hope this was super helpful to you as it was to me..

💖 💪 🙅 🚩
jasoncruzdev
Jason Cruz

Posted on August 13, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to change SVG colors.
css How to change SVG colors.

August 13, 2022