Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.
<bolt-icon
size="xlarge"
background="circle"
name="marketing-gray"
style="
color: #a65388;
--bolt-theme-icon-background: #a65388;
--bolt-theme-icon: #FFF;
--bolt-theme-icon-background-opacity: 1;
"></bolt-icon>
{% include "@bolt-components-icon/icon.twig" with {
name: "customer-service",
background: "circle",
size: "xlarge",
attributes: {
style: [
"color: #e64b18;",
"--bolt-theme-icon-background: #e64b18;",
"--bolt-theme-icon: #FFF;",
"--bolt-theme-icon-background-opacity: 1;"
]
}
} only %}