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;
}


