Change color of SVGs Images with CSS Filter

The CSS filter property provides graphical effects such as blurring or color change in the rendering before the element is displayed. Filters are commonly used to adjust the rendering of images, backgrounds or borders.

You can change the color of SVG images with Filter property.

Examples:

.red {
filter: invert(67%) sepia(89%) saturate(7492%) hue-rotate(346deg) brightness(84%) contrast(146%);
}

.green {
filter: invert(62%) sepia(65%) saturate(3453%) hue-rotate(81deg) brightness(111%) contrast(132%);
}

.blue {
filter: invert(9%) sepia(100%) saturate(5655%) hue-rotate(245deg) brightness(101%) contrast(149%);
}

Result:

<img class="red" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

<img class="green" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

<img class="blue" src="https://freeforcommercialuse.net/unicorn-silhouette-birthday-fantasy-animal.svg">

For convert HEXA Color to Filter Property you can use this generator:https://codepen.io/sosuke/pen/Pjoqqp

SVG Source: FFCU DesignBundles SVGs