icon docs

Icon

Inline SVG icon system.

Twig Usage
{% include '@bolt-elements-icon/icon.twig' with {
  name: 'bell-solid',
} only %}
Schema
Prop Name Description Type Default Value Option(s)
attributes

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

object
name

Name of Icon. Please note that currently Twitter, after rebranding, from July 2023 operating under the name X

string
  • add-circle, add-solid, add, agile, app-development, arrow-left, bar-chart-circle, bar-chart, bell-solid, bolt-logo-colored, briefcase, bullseye, calendar, certification, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, close-circle, close-solid, close, closed-caption, cloud, co-browse, collaboration, communications, copy-to-clipboard, credit-card, cube, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, dollar-circle, download, email, energy, entertainment, exclamation, external-link, eye-off, eye, face-happy, face-sad, facebook-solid, facebook, filter, financial, flag-solid, full-screen-off, full-screen-on, github, globe-circle, globe, government, grid, heart-solid, heart, hospitality, ideas, industries, info-circle, info-solid, insurance, integration, intelligent-virtual-assistant, interactive, java, knowledgebase, life-sciences, link, linkedin-solid, linkedin, list, lock-solid, lock, manufacturing, map-pin-solid, map-pin, media, menu, meteor, minus-circle, minus-solid, minus, mobility, molecule, more, omni-channel, orbit, partners, pega-announce, pega-book, pega-building-complex, pega-cart, pega-catalyst, pega-chat-question, pega-chat-typing, pega-chat, pega-compass, pega-connection-hierarchy, pega-cosmos, pega-database, pega-disability, pega-download-pdf, pega-handshake, pega-health-shield, pega-hub, pega-instructor, pega-map, pega-mention, pega-network, pega-patterns, pega-people, pega-phone-call, pega-pie-chart, pega-pin, pega-plane, pega-process-ai, pega-process-fabric, pega-process-mining, pega-send-submit, pega-setting, pega-shuffle, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pega-wifi, pencil, picture, platform, podcast, presentation, print, product-delivery, refresh, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, share, speed-dial, star-solid, support, system-admin, text-align-left, transportation, trash, triangle, truck, twitter-solid, twitter, unlock, upload, user-interface, user, video, warning, watch, workforce-intelligence, x, youtube-solid
custom_icon_path

Full source path to the custom icon.

string
size

Set icon size. If size is not set, the icon size will default to text size.

string
  • small, medium, large, xlarge
color

Set the icon color. If color is not set, the icon will default to text color.

string
  • teal, navy, yellow, orange, pink, berry, wine, violet
Install Install
npm install @bolt/elements-icon
Dependencies @bolt/core svgson

icon

Basic Icon An Icon is an inline SVG element. <svg class="e-bolt-icon"> is acceptable at rendering an icon, though the Twig template is the recommended usage for Drupal.
Important Notes: Icon element is a replacement for the Icon component. When writing inline SVG manually using <svg> HTML element, be sure to minifiy the SVG, add the element class class="e-bolt-icon", and add the attribute aria-hidden="true". Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Light Brand Icons
pega-announce
pega-book
pega-building-complex
pega-cart
pega-catalyst
pega-chat-question
pega-chat-typing
pega-chat
pega-compass
pega-connection-hierarchy
pega-cosmos
pega-database
pega-disability
pega-download-pdf
pega-handshake
pega-health-shield
pega-hub
pega-instructor
pega-map
pega-mention
pega-network
pega-patterns
pega-people
pega-phone-call
pega-pie-chart
pega-pin
pega-plane
pega-process-ai
pega-process-fabric
pega-process-mining
pega-send-submit
pega-setting
pega-shuffle
pega-subtitle
pega-tag
pega-thumbs-up
pega-timer
pega-wifi
Other Icons
add-circle
add-solid
add
agile
app-development
arrow-left
bar-chart-circle
bar-chart
bell-solid
bolt-logo-colored
briefcase
bullseye
calendar
certification
check-circle
check-solid
check
chevron-down
chevron-left
chevron-right
chevron-up
clock-circle
close-circle
close-solid
close
closed-caption
cloud
co-browse
collaboration
communications
copy-to-clipboard
credit-card
cube
customer-decision-hub
customer-onboarding
customer-service
data-integrations
documentation
dollar-circle
download
email
energy
entertainment
exclamation
external-link
eye-off
eye
face-happy
face-sad
facebook-solid
facebook
filter
financial
flag-solid
full-screen-off
full-screen-on
github
globe-circle
globe
government
grid
heart-solid
heart
hospitality
ideas
industries
info-circle
info-solid
insurance
integration
intelligent-virtual-assistant
interactive
java
knowledgebase
life-sciences
link
linkedin-solid
linkedin
list
lock-solid
lock
manufacturing
map-pin-solid
map-pin
media
menu
meteor
minus-circle
minus-solid
minus
mobility
molecule
more
omni-channel
orbit
partners
pencil
picture
platform
podcast
presentation
print
product-delivery
refresh
reply
reporting
retail
ribbon
robo-auto
rocket
sales-automation
scalability
search
share
speed-dial
star-solid
support
system-admin
text-align-left
transportation
trash
triangle
truck
twitter-solid
twitter
unlock
upload
user-interface
user
video
warning
watch
workforce-intelligence
x
youtube-solid
Dark Brand Icons
pega-announce
pega-book
pega-building-complex
pega-cart
pega-catalyst
pega-chat-question
pega-chat-typing
pega-chat
pega-compass
pega-connection-hierarchy
pega-cosmos
pega-database
pega-disability
pega-download-pdf
pega-handshake
pega-health-shield
pega-hub
pega-instructor
pega-map
pega-mention
pega-network
pega-patterns
pega-people
pega-phone-call
pega-pie-chart
pega-pin
pega-plane
pega-process-ai
pega-process-fabric
pega-process-mining
pega-send-submit
pega-setting
pega-shuffle
pega-subtitle
pega-tag
pega-thumbs-up
pega-timer
pega-wifi
Other Icons
add-circle
add-solid
add
agile
app-development
arrow-left
bar-chart-circle
bar-chart
bell-solid
bolt-logo-colored
briefcase
bullseye
calendar
certification
check-circle
check-solid
check
chevron-down
chevron-left
chevron-right
chevron-up
clock-circle
close-circle
close-solid
close
closed-caption
cloud
co-browse
collaboration
communications
copy-to-clipboard
credit-card
cube
customer-decision-hub
customer-onboarding
customer-service
data-integrations
documentation
dollar-circle
download
email
energy
entertainment
exclamation
external-link
eye-off
eye
face-happy
face-sad
facebook-solid
facebook
filter
financial
flag-solid
full-screen-off
full-screen-on
github
globe-circle
globe
government
grid
heart-solid
heart
hospitality
ideas
industries
info-circle
info-solid
insurance
integration
intelligent-virtual-assistant
interactive
java
knowledgebase
life-sciences
link
linkedin-solid
linkedin
list
lock-solid
lock
manufacturing
map-pin-solid
map-pin
media
menu
meteor
minus-circle
minus-solid
minus
mobility
molecule
more
omni-channel
orbit
partners
pencil
picture
platform
podcast
presentation
print
product-delivery
refresh
reply
reporting
retail
ribbon
robo-auto
rocket
sales-automation
scalability
search
share
speed-dial
star-solid
support
system-admin
text-align-left
transportation
trash
triangle
truck
twitter-solid
twitter
unlock
upload
user-interface
user
video
warning
watch
workforce-intelligence
x
youtube-solid
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  name: 'bell-solid',
} only %}
HTML
<svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon size

Icon Size A Icon’s size can be modified per use case.
Important Notes: Reference the schema for all options. Again, Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  size: 'xlarge',
  ...
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--xlarge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon color

Icon Color A Icon’s color can be modified per use case.
Important Notes: Reference the schema for all options. Additionally, a CSS custom property is available to change the icon color to any brand color. Define --e-bolt-icon-color inline style rule to set the desired color. Reference Color Tokens for all available brand colors. Again, Icon element can be used in tandem with Shape element to create a square or circle container around the icon. In such scenario, size and color should not be set on the Icon, they should be set on the Shape instead.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  color: 'navy',
  ...
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--navy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">...</svg>

icon use case custom svg

Icon Use Case: Custom SVG Custom SVG can be used instead to render an icon that is not available in the design system.
Important Notes: When creating a custom SVG, start with a 32px by 32px artboard in the design tool (Adobe Illustrator, Sketch, etc.). Make sure all layers have been converted to objects, meaning there is no stroke, only shapes with color fill. Combine all objects if they visually connect (i.e. create one big shape). Set the object’s fill color to #151619. Set the widest side to 32px and center the icon within the artboard. Save the SVG and then use imgoptim or another tool to minify it. Lastly: If you choose Twig usage: Add the relevant attributes {{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true" to the <svg> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the custom_icon_path prop. If you choose HTML usage: Add class="e-bolt-icon" along with relevant modifier class for each prop, and the attribute aria-hidden="true" to the <svg> HTML element. Then you can display the icon using the modified <svg> markup.
Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  custom_icon_path: 'full/path/to/custom-icon-file.twig',
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path fill="#151619" d="m32 16c0 8.8-7.2 16-16 16s-16-7.2-16-16 7.2-16 16-16 16 7.2 16 16zm-3.1 0-1.7 1.4-4-3.8 1.1-5.4 2.2.2c-1.6-2.2-3.9-3.9-6.5-4.7l.9 2.1-4.9 2.7-4.8-2.7.8-2.1c-2.6.9-4.8 2.5-6.5 4.7l2.2-.2 1 5.4-4 3.8-1.6-1.4c0 2.8.9 5.4 2.5 7.6l.5-2.2 5.5.7 2.3 5-1.9 1.2c2.6.8 5.4.8 8 0l-1.9-1.1 2.3-5 5.5-.7.5 2.2c1.6-2.3 2.5-4.9 2.5-7.7zm-16 4.5-1.9-5.9 5-3.6 5 3.6-1.9 5.9z"/></svg>

icon javascript usage

Icon Javascript Use The imported icon is a function that returns an <svg> element as a string. It automatically includes the e-bolt-icon class on the SVG. The function accepts a JSON object as an argument. It supports the same props as the Icon element, for example: chevronDown({ size: 'xsmall', class: 'u-bolt-margin-right-xsmall' }). If you are using a web component, wrap the icon in unsafeHTML() as follows: ${unsafeHTML(iconChevronDown())}.
Important Notes: A real-world example can currently be found in AccordionItemTrigger.js, shown in an altered demo below.
import { html, unsafeHTML } from '@bolt/element';
import { iconChevronDown } from '@bolt/elements-icon';

return html`
  
${unsafeHTML(iconChevronDown())}
`;