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-building-complex
pega-cart
pega-catalyst
pega-chat-question
pega-chat-typing
pega-chat
pega-compass
pega-connection-hierarchy
pega-database
pega-disability
pega-download-pdf
pega-heath-shield
pega-instructor
pega-map
pega-network
pega-phone-call
pega-pie-chart
pega-pin
pega-plane
pega-process-fabric
pega-send-submit
pega-setting
pega-shuffle
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
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
youtube-solid
Dark Brand Icons
pega-announce
pega-building-complex
pega-cart
pega-catalyst
pega-chat-question
pega-chat-typing
pega-chat
pega-compass
pega-connection-hierarchy
pega-database
pega-disability
pega-download-pdf
pega-heath-shield
pega-instructor
pega-map
pega-network
pega-phone-call
pega-pie-chart
pega-pin
pega-plane
pega-process-fabric
pega-send-submit
pega-setting
pega-shuffle
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
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
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>