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.

.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)[http://caniuse.com/#feat=css-masks]. As of the time of writing this (IE doesn't support this)[https://dev.windows.com/en-us/microsoft-edge/platform/status/masks] feature at all. Im using this in my Ionic apps which all support this feature.