Colorize an SVG icon with the CSS filter parameter

Use a single black SVG icon and change its color with the filter CSS parameter

The mixin:

@mixin white {
    filter: invert(100%) sepia(0%) saturate(2%) hue-rotate(292deg)
        brightness(104%) contrast(101%);
}

Get the values for invert/sepia/saturate/etc for a specific color from this CodePen which is based on this StackOverflow thread.

When running, it gets close to the target color and shows a "loss" parameter indicating how close it got. It generates a new filter code everytime, so it can be rerun over and over to try to get one that is very accurate, e.g. a loss of less than 0.5. The stackoverflow piece explains why this is a thing.

Example use:

li {
    &:before {
        position: absolute;
        content: "";
        width: 20px;
        height: 20px;
        background: url(#{$icons}/check-circle.svg) center center no-repeat;
        background-size: 20px;
        @include white;
    }
}

Feedback?

Email us at enquiries@kinsa.cc.