Skip to main content

Icon Coloring Tip

· One min read
Josh Weaver
Josh Weaver
Mainsail UI Core Team

When using the new <Icon /> from Mainsail-ui, you may find a special edge case that needs a different color than the 3 blues available from the color prop.

You're in luck, because className works as an escape hatch with our CSS Utility Class colors for text.

// Only offers 3 choices (light, default, dark), that cover most implementations<Icon color="light" name="delete"/>
// Use a css utility class instead, will override the svg's color<Icon className="text-red-dark" name="delete"/>

Because sometimes you just need a red trash can.