Change The Fill Color Of SVG With CSS

Posted By Weston Ganger

SVG’s are a pretty cool beast theres a lot you can do with them. One thing though that I commonly want to do is be able to change the fill color when using them as icons.

<i class="my-icon"></i>

.icon {
    width: 50px;
    height: 50px;

    /* Background Option 1: Use a background-color as the fill */
    background-color: red;

    /* Background Option 2: Use a background-image as the fill */
    background-image: url(background.png);

    /* Syntax Option 1: mask shorthand */
    mask: url(icon.svg) no-repeat 50% 50%;
    -webkit-mask: url(icon.svg) no-repeat 50% 50%;

    /* Syntax Option 2: mask-image only */
    mask-image: url(icon.svg);
    -webkit-mask-image: url(icon.svg);

(Here is the compatibility chart for this CSS)[]. As of the time of writing this (IE doesn’t support this)[] feature at all. Im using this in my Ionic apps which all support this feature.

Related External Links:

Article Topic:Software Development - HTML / CSS

Date:November 01, 2016