Icon

Pega branded icon system.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage
  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}
Schema
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

Controls the size of the icon. Each size is set to a specific pixel value: 16px, 24px, 32px, and 38px. However, this prop is optional. When no size is specified, the icon is expected to act as an inline icon, which will grow or shrink depending on the font-size of its parent container.

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, navy, yellow, orange, gray, pink, berry, wine, violet
Install Install
  npm install @bolt/components-icon
Dependencies @bolt/core-v3.x @bolt/lazy-queue svg-baker-runtime