Icon component in Bolt

A symbolic image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-icon

Tips for custom icons:

For example: bolt-logo.svg would get colors stripped while bolt-logo-colored.svg would not!

Overview Usage Schema Edit this page Testing Steps
  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)

A Drupal-style attributes object with extra attributes to append to this component.


Icon name

, string

Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

string none
  • none, circle, square

Icon size.

  • small, medium, large, xlarge

Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

string auto
  • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink
Debug Panel