Icon color

This tutorial is part of Iconify for Vue 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:

vue<template>
   <div>
       <div class="light-blue-block">
           All icons inside this div are light blue, including a bell icon
           <Icon icon="bi:bell-fill" :inline="true" />
           and stopwatch icon
           <Icon icon="bi:stopwatch" :inline="true" />
       </div>
       <div class="orange-block">
           This text and icon are orange:
           <Icon icon="bi:bell-fill" :inline="true" />
       </div>
       <div>
           Red home icons (shows different ways to change color):
           <Icon class="red-icon" icon="bx:bx-home" :inline="true" />
           <Icon :style="{ color: 'red' }" icon="bx:bx-home" :inline="true" />
           <Icon color="red" icon="bx:bx-home" :inline="true" />
       </div>
       <div>Icon with palette: <Icon icon="noto:paintbrush" :inline="true" /></div>
   </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
   components: {
       Icon,
   },
};
</script>


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.

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.