Icon color

This tutorial is part of Iconify SVG Framework tutorial.

You can only change color of monotone icons. Some icons, such as emoji, have a hardcoded palette that cannot be changed.

To change color of a monotone icon simply change text color.

All icons inside this div are light blue, including an umbrella icon and attachment icon

All text and icons inside this div are orange, including a hourglass icon and a briefcase icon

Red home icon:

Icon with palette:

html<div class="light-blue-block">
   All icons inside this div are light blue, including an umbrella icon
   <span class="iconify-inline" data-icon="ion:umbrella-sharp"></span>
   and attachment icon
   <span class="iconify-inline" data-icon="entypo-attachment"></span>
</div>
<div class="orange-block">
   All text and icons inside this div are orange, including a hourglass icon
   <span class="iconify" data-icon="bx:bx-hourglass" data-inline="true"></span>
   and a briefcase icon
   <span
       class="iconify"
       data-icon="bx:bxs-briefcase-alt"
       data-inline="true"
   ></span>
</div>
<div>
   Red home icon:
   <span class="iconify iconify-inline" data-icon="bx:bx-home"></span>
</div>
<div>
   Icon with palette:
   <span class="iconify iconify-inline" data-icon="noto:paintbrush"></span>
</div>

css// Change text color for ".orange-block" to #e70
.orange-block {
   color: #e70;
}

// Change all icons inside ".light-blue-block" to #08f
.light-blue-block .iconify {
   color: #08f;
}
// Change icon "bx:bx-home" to #e00
.iconify[data-icon='bx:bx-home'] {
   color: #e00;
}
// Failed attempt to change icon "noto:paintbrush" to #0e0
.iconify[data-icon='noto:paintbrush'] {
   color: #0e0;
}

Color only works for icons that do not have a palette. Color in icons that do have a palette, like noto:paintbrush in an example above, cannot be changed.

Demo breakdown

In demo above some icons have class="iconify-inline", but in stylesheet they are targetted by .iconify. This requires a small explanation.

When icons are rendered by Iconify SVG Framework, all icons get class "iconify", even ones that did not have it. That means if placeholder had class="iconify-inline", <svg> will have class="iconify iconify-inline" (and few other extra classes). All custom classes will be passed from placeholder to <svg> as well.

Why are icons using class="iconify-inline"? This is covered by inline mode tutorial.

Various ways to set color

You can change color the same way as you would for text.

Example above shows changing color with stylesheet.

You can also change color with inline style:

html<span class="iconify" data-icon="ion:umbrella-sharp" style="color: red"></span>

Target specific icon

To target a specific icon, you can:

Target icon by name

css.iconify[data-icon='mdi:home'] {
   color: red;
}

This will change color for all icons that have data-icon="mdi:home" to red.

Target icon by prefix

css.iconify--mdi {
   color: red;
}

When SVG Framework renders <svg>, it will add current provider and prefix to list of classes. See demo below.

Custom class

You can add custom class to placeholder:

html<span class="iconify red-icon" data-icon="mdi:home"></span>

Then you can target icon by that class name:

css.red-icon {
   color: red;
}

Example

html<span class="iconify red-icon" data-icon="mdi:home"></span>

Placeholder HTML

html<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   aria-hidden="true"
   focusable="false"
   role="img"
   class="iconify iconify--mdi red-icon"
   width="1em"
   height="1em"
   preserveAspectRatio="xMidYMid meet"
   viewBox="0 0 24 24"
   data-icon="mdi:home"
>
   <path d="M10 20v-6h4v6h5v-8h3L12 3L2 12h3v8h5z" fill="currentColor"></path>
</svg>

Rendered SVG

css/* Target icon by full name */
.iconify[data-icon='mdi:home'] {
   color: red;
}

/* Target icon by prefix */
.iconify--mdi {
   color: red;
}

/* Target icon by extr class */
.red-icon {
   color: red;
}

RGBA and HSLA colors

Avoid using rgba and hsla colors. Some icons have multiple layers on top of each other. Using semi-transparent color will result in both layers being visible.

Instead, use a solid color and add transparency with opacity. This will result in browser rendering shapes with a solid color, then applying opacity to an entire icon.

fill and stroke

Avoid using fill and stroke in stylesheet, unless you are using it for a specific icon.

Not all icons are the same. Some use fill for shapes, some use stroke. If you set fill, you might end up with filled shapes that should not be filled.