Skip to content

Icon color

This tutorial is part of Iconify for Svelte 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:
svelte<script>
   import IconifyIcon from '@iconify/svelte';
</script>

<style>

   /*
       Cannot target component in CSS, target SVG
       instead using Svelte's :global() function

       This is equivalent of adding inline={true} to each icon
   */

   div :global(svg) {
       vertical-align: -0.125em;
   }

   /* Change text color for ".orange-block" to #e70 */
   .orange-block {
       color: #e70;
   }
   /* Change all icons inside ".light-blue-block" to #08f */
   /*
       Must use :global() because Svelte cannot assign style to
       a component, so need to target SVG generated by component.
   */

   .light-blue-block :global(svg) {
       color: #08f;
   }

   /* Change text color for ".red-icon" to #e00 */
   /*
       Must use :global() because Svelte cannot assign style to a
       component by class name, it can only work with standard HTML tags.
   */

   div :global(.red-icon) {
       color: #e00;
   }
</style>

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

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.

Released under the Apache 2.0 License.