Change SVG icons color with CSS only

If you are here, you are probably looking for a simple solution for changing SVG icons color, in a way that will be simple for implementation.

This post shows how to do this, and even has an SCSS bonus, that will reduce it to a single line of code.

Same icon different style - it is even possible to “animate” the icon with a GIF background or CSS keyframes

So lets get started!

The technique

This technique uses the <div> tag with mask-image and background-color, it will not be relevant when:

• You wish to use an <img/> tag as the html element for the icon since it is not possible to manipulate it with CSS.
• Implementing the SVG inline, in this case there are probably more appropriate techniques.

div

The html element for the icon will be a div, This will enable us to manipulate the SVG with CSS and get a basic implementation in the html comparing to inline SVG.

mask-image

We will use a mask for the icon, thus letting the SVG cover the div and give it structure.

background-color

The icon’s color is obtained from the div’s background-color, by it showing through the SVG’s structure.

Most basic implementation

The most basic implementation is a single class with all needed CSS attributes to apply to the div.

index.html

<div class="some-icon"></div>

style.css

.some-icon {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-image: url("/assets/icons/calendar.svg");
}

Advanced implementation

Defining one class for all the common attributes in global.css, for the non common attributes such as height, width, background-color and the mask-image add a specific class.

index.html

<div class="svg-icon calendar"></div>

style.css

.svg-icon.calander {
  height: 10px;
  width: 10px;
  background-color: $default-text;
  mask-image: url("/assets/icons/calendar.svg");
}

global.css

.svg-icon {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

Implementation for pros — mixins!

Mixins allow you to define styles that can be re-used throughout your stylesheet. They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.
— Sass official documentation

We will create a mixin using SCSS. The mixin will take arguments for all non-common attributes.

variables.scss

@mixin svg-icon($path, $height, $width, $color ) {
  height: $height;
  width: $width;
  background-color: $color;
  mask-image: url($path); 
  background-size: cover;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

index.html

<div class="calendar"></div>

style.scss

.calendar {
  @include svg-icon("/assets/icons/calendar.svg", 20px, 20px,   #818aac);
}

Mixins are included into the current context using the @include at-rule, which is written @include <name> or @include <name>(<arguments...>), with the name of the mixin being included.
— Sass official documentation

Live example:

To conclude

This is a very useful and basic implementation, that will keep your assets folder and your code as minimal as possible.