Thursday, February 12, 2026 | Good evening!

FlyingWPress

Duotone Icon Styles

Duotone Icon Styles

March 09, 2024

This is a reminder snippet for me when I use Duotone SVG icons from Font Awesome. It requires a small amount of CSS to change the colors. The primary color is the internal icon, and the secondary is the background color. The opacity value changes the overall effect. Here is the official documentation and as you can see, converting that into Bricks-styles is not that intuitive..

%root% .fa-primary{
  fill:var(--white)
}
%root% .fa-secondary{
  fill:var(--accent-medium);
  opacity:1;
}

Leave a Reply

Featured