DEV Community 👩‍đŸ’ģ👨‍đŸ’ģ

DEV Community 👩‍đŸ’ģ👨‍đŸ’ģ is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

DEV has this feature:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠