Icon color

This tutorial is part of Iconify Icon web component 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 or use color attribute or add style with color.

All icons inside this div are light blue, including a bell icon and attachment icon

This text and icon are orange:

Red home icons (shows different ways to change color):

Icon with palette:

html<div class="light-blue-block">
   All icons inside this div are light blue, including a bell icon
   <iconify-icon inline icon="bi:bell-fill"></iconify-icon>
   and attachment icon
   <iconify-icon inline icon="bi:stopwatch"></iconify-icon>
</div>
<div class="orange-block">
   This text and icon are orange:
   <iconify-icon inline icon="bi:bell-fill"></iconify-icon>
</div>
<div>
   Red home icons (shows different ways to change color):
   <iconify-icon inline class="red-icon" icon="bx:bx-home"></iconify-icon>
   <iconify-icon inline style="color: red" icon="bx:bx-home"></iconify-icon>
</div>
<div>
   Icon with palette:
   <iconify-icon inline icon="noto:paintbrush"></iconify-icon>
</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 svg {
   color: #08f;
}
// Change text color for ".red-icon" to #e00
.red-icon {
   color: #e00;
}

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

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

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.