Bolt Design System

Overview

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

npm install @bolt/components-icon

Tips for custom icons:

Filenames for any custom icons should be all lowercase.
Only use dashes in the filename to separate out words. No underscores or spaces!
To automatically disable color replacement, make sure the SVG icon ends with -colored.svg.

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

  {% 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)
Attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
Name	Icon name	, `string`	—	—
Background	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`
Size	Icon size.	`string`	—	`small`, `medium`, `large`, `xlarge`
Color	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`