icon docs

Icon

Inline SVG icon system.

Published Last updated: 4.7.0 Change log Github NPM
Twig Usage
{% include '@bolt-elements-icon/icon.twig' with {
  name: 'bell-solid',
} 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

Name of Icon

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, 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-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, 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
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-v3.x

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