One of the questions many people ask in different design communities is how to solve this case.

How do I keep the color on an icon after I change them in a component?

For example:

I have a button with an icon on the left > I want to change the icon for the “close” to the “user” icon > The icon is currently black > After changing the icon, its color changes to the icon’s default color.

Thanks to

The solution

You need to make sure that the layer names inside the icons are the same. That way, it will work as expected.

Here are some clarifications before you ask :)

What happens if I change an icon with one layer to one with two?

After playing with it, I discovered that the first layer of the first icon meets the last layer of the other icon. Because of this, if the first layer of the first icon is black, the last layer of the other icon will also be black, and the first will be the default layer color.

Do case sensibility matter?

Yes, it is important. You must name the layers with the same letter case (uppercase and lowercase).

Thank you for reading the article. I hope this article helped you learn how to ensure the icon color will remain after you change it. Please feel free to share it with your friends or team members, and if you have any questions, please let me know.

If you enjoyed my article, I suggest you follow me and subscribe so you’ll receive an email whenever I post.

Want to get the most out of Medium? Click here to become a member. As a member, you’ll support me and lots of other writers.