Setting Colors on CSS Colorizable SVGs

Colors of CSS colorizable SVGs are set with one CSS rule for each color. Each rule uses the color name for the class selector.

Number of colors and color names

The number of colors used by CSS colorizable SVGs depend on the icons' color scheme and colors used in the icons' effect (if an effect is applied).

To adjust icon colors with CSS, you need the color names used by the icons. The color names are shown in an interactive CSS in the file demo.html, which is included in each download of colorizable icons.

Alternatively you can look up the color names in the SVG's markup, where they are listed in a comment like this:

<!-- Color names: color-1, color-2, color-3 -->

By default the color names are color-1, color-2, etc., but you can specify a prefix for the color names in the download dialog to avoid conflicts with other class names. For example, if you specify "myproject" as the prefix, the color names will be myproject-color-1, myproject-color-2, etc..

Using a "Free Color"

When downloading the icons as CSS colorizable SVGs, the option "Use free color" can be selected. This makes the icon's "main" color a free color, which means it has no default value. Instead, when embedded into a webpage, it will inherit the "color" attribute from the containing html.

Using a free color is recommended if there is only one single color or one dominant color in the icons. In these cases the icons can be colored just as HTML text or monochrome icon fonts.

Below is a full example using SVG injection.

<div style="color: red;">
  <img src="fire-hazard-sign.svg" class="icon128" onload="InjectSvg(this)" />
</div>

<div style="color: orange;">
  <img src="fire-hazard-sign.svg" class="icon128" onload="InjectSvg(this)" />
</div>

Setting different colors for different icons

The color class selector in the CSS rule for each color can be combined with any other CSS selector in order to set only the colors below certain elements in the document.

To set the colors for only one specific SVG, assing an id to the SVG (or its containter) and combine the color selectors with an id selector. Here is an example how this may look:

<!-- icon 1 -->
<svg id="icon1">...</svg>
<!-- icon 2 -->
<svg id="icon2">...</svg>

<style>
  /* color definitions for icon 1 */
  #icon1 .color-1 { color: #5438ff; }
  #icon1 .color-2 { color: #4d604a; }
  #icon1 .color-3 { color: #85fa20; }
  /* color definitions for icon 2 */
  #icon2 .color-1 { color: #5438ff; }
  #icon2 .color-2 { color: #4d604a; }
  #icon2 .color-3 { color: #85fa20; }
</style>

Similarily, when coloring a group of icons, a specific class is assigned to the icons. This class is then combined in the coloring CSS rules. Here is an example how this may look:

<!-- icons using color scheme 1 -->
<svg class="color-scheme-1">...</svg>
<svg class="color-scheme-1">...</svg>
<!-- icons using color scheme 2 -->
<svg class="color-scheme-2">...</svg>
<svg class="color-scheme-2">...</svg>

<style>
  /* color definitions for color scheme 1 */
  .color-scheme-1 .color-1 { color: #5438ff; }
  .color-scheme-1 .color-2 { color: #4d604a; }
  .color-scheme-1 .color-3 { color: #85fa20; }
  /* color definitions for color scheme 2 */
  .color-scheme-2 .color-1 { color: #5438ff; }
  .color-scheme-2 .color-2 { color: #4d604a; }
  .color-scheme-2 .color-3 { color: #85fa20; }
</style>

Transitions between colors

With CSS transitions you can achieve a smooth animation of color changes. For CSS colorizable SVGs color transitions are set with one single CSS rule:

svg [color] {
  transition: color 400ms ease;
}

In this CSS rule 400ms is the duration of the transition and ease specifies the timing function. You can learn more about transitions here.

Note that the attribute selector [color] is required for performance reasons. Also, this works around a bug in Chrome which sometimes makes transitions run sequentially rather than concurrently.