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.
<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.