icon docs

Icon

Pega branded icon system.

Published Last updated: 2.28.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

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 , 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

icon

icon size variation


icon theme variation

Icons inside a xdark theme

Icons inside a dark theme

Icons inside a light theme

Icons inside a xlight theme

icon color variation

auto

teal

navy

yellow

orange

gray

pink

berry

wine

violet

icon adding custom icons

Custom SVG Icons

Can't find an existing SVG that suits your needs?

Before jumping ahead and adding a new custom SVG icon, please make sure you come and chat with the Bolt team first to see if there's already an existing icon that could get used instead OR if it makes sense to add a new icon to the design system itself!


Adding Custom SVG Icons to Bolt

Note: make sure your custom SVG icon starts with custom- as this is required to ensure names of built-in icons don't collide with custom SVG icons added.

Step 1. Import your custom SVG Icon in a .js file that's compiled by the Bolt build tools. Note: make sure your SVG icon has been already exported for the web (docs coming soon!).

import './assets/icons/custom-users.svg';

Step 2. After recompiling the site's JavaScript, your custom SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-users", size: "xlarge" } only %}
<bolt-icon name="custom-users" size="xlarge"></bolt-icon>

Adding a Custom SVG Icon - Retain Original Colors

This advanced use case is rarely recommended since it can limit the number of places an SVG icon can get used and prevents the icon's color palette from adjusting based on the location it's used.

Step 1. Import your SVG Icon in a .js file, making sure your icon ends in -colored.svg

import './assets/icons/custom-arrow-left-colored.svg';

Step 2. After recompiling the site's JavaScript, your custom colored SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-arrow-left-colored", size: "xlarge", } %}
<bolt-icon name="custom-arrow-left-colored" size="xlarge"></bolt-icon>

icon custom colors

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.

via Web Component:

  <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>

via Twig Include:

  {% 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 %}

icon name variations


  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • dollar-open

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • dollar-open

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

icon with web component

Web Component Usage Bolt Icon is a web component. You can simply use <bolt-icon> in the markup to make it render.
<bolt-icon name="calendar"></bolt-icon>
Prop Usage Configure the icon with the properties specified in the schema.
<bolt-icon name="calendar" size="xlarge" background="square" color="orange"></bolt-icon>