DEV Community

Jason Cruz
Jason Cruz

Posted on

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..

Top comments (0)