Icon color

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

jsximport React from 'react';

// <InlineIcon /> is equal to <Icon inline={true} />
import { InlineIcon } from '@iconify/react';

export function colorDemo() {
   return (
       <div>
           <div className="light-blue-block">
               All icons inside this div are light blue, including a bell icon{' '}
               <InlineIcon icon="bi:bell-fill" /> and stopwatch icon{' '}
               <InlineIcon icon="bi:stopwatch" />
           </div>
           <div className="orange-block">
               This text and icon are orange: <InlineIcon icon="bi:bell-fill" />
           </div>
           <div>
               Red home icons (shows different ways to change color):{' '}
               <InlineIcon className="red-icon" icon="bx:bx-home" />{' '}
               <InlineIcon style={{ color: 'red' }} icon="bx:bx-home" />{' '}
               <InlineIcon color="red" icon="bx:bx-home" />
           </div>
           <div>
               Icon with palette: <InlineIcon icon="noto:paintbrush" />
           </div>
       </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.

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.