Feature Request: Color Toning

[itsezc]

Color toning is allowing for multiple colors on an icon with CSS, alternative libraries like FontAwesome already offer such features:

https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons

While there aren't many logos that might need such coloring, it would be beneficial for logo icons and add additional detailing where previously it was not possible.

Would this be worth considering?

[xiaochunjimmy]

Thank you for your advice. This feature is really huge work for a non-profit organization. We may consider adding it later, it may be added in version 3.0 or Pro.

[xiaochunjimmy]

I hope that after our design guideline comes out, more contributors can complete it together.

[itsezc]

I hope that after our design guideline comes out, more contributors can complete it together.

I will be looking forward to both the design guide and the pro version

[liviuang]

I'll def jump in and help you creating due tone (colored version) of icons. What's the status on those guidelines @xiaochunjimmy ?

[itsezc]

@xiaochunjimmy I'm waiting on the guidelines so I can help with it too

[xiaochunjimmy]

Sorry, the guidelines still on my mind. I have been busy working lately, so does our developer. The due tone is a good idea. That means redesign most of the icons in my mind, and much more dev jobs. Sorry, we still need time to work for money and can only spare little part-time on remix icons. I have been wondering recently how can we have a way to make our projects sustainable and maintain high quality...

[itsezc]

@xiaochunjimmy If you can can release the guidelines for the icons, then the community can send pull requests which you can then accept, so you wouldn't have to do much work or the other approach is setting up a kickstarter page and a goal with the required amount that you think would make the project sustainable and the community will chip in to raise those funds.

[hounaine]

@xiaochunjimmy thank you for your efforts. and congratulations for the icons. l think this project is enough mature to have a pro version. Would you consider adding colors toning ?

[xiaochunjimmy]

@hounaine Thank you for your follow-up of this idea. The biggest problem is that I don’t have enough vigor/energy to consider color toning icons. There are still many problems to be solved. Such as the base-line of icon-fonts, style guidelines, and many other issues. I'd also like to pay some effort in promoting our products, RemixIcon was still known by only a few people. Pro version means responsibility, and it should be pursued with great vigor and enthusiasm. So I think it may not be the right time to start this work. Thanks again, looking forward to your feedback.

[hounaine]

Thank for your answer. Tell me if you have any suggestion to make this code go forward. I am open.

[baruchel]

Hi, it is rather easy to tint the icons by using the CSS filter attribute. Simply wrap your icon into some class having the following CSS attribute:

.my-icon-container {
    filter:  invert(100%) brightness(40%) sepia(100%) hue-rotate(45deg);
}

and then adjust with both the brightness attribute and the hue-rotate one.

Explanation: inverting maps black to white; setting the brightness maps the icon to some mid-level gray; some arbitrary color is injected by using the sepia function; then the wanted tint is found by adjusting the hue.

[itsezc]

@xiaochunjimmy since v3 dropped, have you considered how you might approach this at a lower level perhaps?