Home Docs Colors

Colors

Icons inherit their parent's text color by default. This guide covers how to customize icon colors using CSS, including duotone layer customization with CSS custom properties.

Basic Colors #

You can change the color of any icon using the CSS color property — either inline or via a CSS class:

Danger
Success
Info
Warning 
<!-- Inline color -->
<i class="icf-solid icf-heart" style="color: #ef4444;"></i>
<i class="icf-solid icf-circle-check" style="color: #10b981;"></i>
<i class="icf-solid icf-circle-info" style="color: #3b82f6;"></i>

Using CSS Classes

For reusable color styles, define CSS classes:

/* CSS class for colored icons */
.icon-danger { color: #ef4444; }
.icon-success { color: #10b981; }
.icon-primary { color: var(--primary); }
<i class="icf-solid icf-heart icon-danger"></i>
<i class="icf-solid icf-circle-check icon-success"></i>

Inheriting Color

Since icons use currentColor by default, they automatically inherit the text color of their parent element:

Parent color 
<!-- Icon inherits the parent's purple color -->
<div style="color: #8b5cf6;">
    <i class="icf-solid icf-star"></i> Purple star
</div>

Duotone Colors #

Duotone icons have two layers: a primary layer and a secondary (background) layer. Customize them using CSS custom properties:

Custom colors
Green shield
Gold bell 
<!-- Duotone icon with custom colors -->
<i class="icf-duotone icf-solid icf-heart"
   style="--icf-primary-color: #ef4444;
          --icf-primary-opacity: 1;
          --icf-secondary-color: #fecaca;
          --icf-secondary-opacity: 0.4;"></i>
CSS Variable Default Description
--icf-primary-color currentColor Color of the primary (foreground) layer
--icf-primary-opacity 1 Opacity of the primary layer
--icf-secondary-color currentColor Color of the secondary (background) layer
--icf-secondary-opacity 0.4 Opacity of the secondary layer

Duotone with CSS Classes

Define reusable duotone color themes with CSS classes:

/* Reusable duotone themes */
.duo-danger {
    --icf-primary-color: #ef4444;
    --icf-secondary-color: #fecaca;
}

.duo-success {
    --icf-primary-color: #10b981;
    --icf-secondary-color: #a7f3d0;
}
<i class="icf-duotone icf-solid icf-heart duo-danger"></i>
<i class="icf-duotone icf-solid icf-shield duo-success"></i>