Inline SVG icon system.

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

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


Name of Icon

  • 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-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-fabric, 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, youtube-solid

Full source path to the custom icon.


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

  • small, medium, large, xlarge

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

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