Credits go to Barret Sonntag, for implementing the solution on Codepen, and
MultiplyByZer0, for providing the original solution over at StackOverflow.
Real Pixel - Color applied through CSS
background-color
:Filtered Pixel - Color applied through CSS
filter
:Use CSS filter property on your desired element to change its color value:
filter: invert(40%) sepia(84%) saturate(824%) hue-rotate(156deg) brightness(104%) contrast(101%);
Note: Your icon needs to be set to black for the
filter
to work. If you haven't set it to black already, you can prepend
brightness(0) saturate(100%)
to your filter
property for it to work appropriately.