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-single, add-solid, add, agile, agile2, agriculture, ambulance, app-code, app-development, app-search, arrow-down, arrow-left, arrow-right, arrow-up, balance, bar-chart-circle, bar-chart-growth, bar-chart, bell-solid, bell, bicycle, bold-chevron-double, bold-chevron, bolt-logo-colored, box-open, briefcase, bullseye, calendar-solid, calendar, car, cart-solid, case-management, cell-tower, center-out, certification, check-circle, check-single, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, clock-circle, clock-solid, close-circle, close-single, close-solid, close, closed-caption-solid, closed-caption, cloud-solid, cloud, co-browse, coffee, collaboration, communications, contract, copy-to-clipboard, credit-card, cube, currency, customer-decision-hub, customer-onboarding, customer-service, customer, dashboard, data-integrations-encrypted, data-integrations, decisioning, directional-down, directional-left, directional-right, directional-up, documentation, dollar-circle, download-cloud, download, email, energy, entertainment, exclamation, exclamation-solid, external-link, eye-off-solid, eye-off, eye-solid, eye, face-happy, face-sad, facebook-circle, facebook-solid, facebook, farmhouse, fast, fast-delivery, filter, filter-solid, financial, flag, flag-solid, forward, full-screen-off, full-screen-on, gavel, genai-analyze, genai-automate, genai-autopilot, genai-blueprint, genai-cdh, genai-coach, genai-knowledge-buddy, genai-socrates, github-circle, github-solid, github, globe-circle, globe, government, grid, growth, health-chart, health, healthcare, heart-solid, heart, hospital, hospital-bed, hospitality, house, ideas, imbalance, industries, info-circle, info-solid, insurance, integration, intelligent-automation, intelligent-virtual-assistant, interactive, java, key, knowledgebase, laptop, life-sciences, link, linkedin-circle, linkedin-solid, linkedin, list, loading, lock, lock-solid, manufacturing, map-pin, map-pin-solid, media, menu, meteor, mining, minus, minus-circle, minus-single, minus-solid, mobility, molecule, money, money-bag, more-vertical, more, multiple-case-management, network-solid, network, omni-channel, orbit, package, parent-child-case, partners, path, pause-solid, pause, pega-announce, pega-book, pega-building-complex, pega-building, pega-cart, pega-catalyst, pega-chat-double-question, pega-chat-double-typing, pega-chat-double, pega-chat-question, pega-chat-square-double-question, pega-chat-square-double-typing, pega-chat-square-double, pega-chat-square-question, pega-chat-square-typing, pega-chat-square, 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-phone-ringing, pega-pie-chart, pega-pin-drop-circle, pega-pin-drop, pega-pin, pega-plane, pega-process-ai, pega-process-fabric, pega-process-mining, pega-send-submit, pega-setting, pega-shuffle, pega-subtitles-solid, pega-subtitle, pega-tag, pega-thumbs-up, pega-timer, pencil-solid, pencil, personal-chart, personalized, phone-call-solid, phone-call, picture, platform, play-solid, play, podcast-solid, podcast, prembridge, presentation, print, product-delivery, refresh, reload, reply, reporting, retail, ribbon, robo-auto, rocket, sales-automation, scalability, search, setting-solid, share-solid, share, small-business, sort-descending, sort, speed-dial, star-solid, star, support, system-admin, target, text-align-center, text-align-left, text-align-right, tools, transportation, trash-solid, trash, triangle, trophy, truck, twitter-solid, twitter, unlock-solid, unlock, upload-cloud, upload, user-interface, user-solid, user, video-solid, video, warning-solid, warning, watch, pega-wifi, workflow, workforce-intelligence, x-circle, x-solid, x, youtube-circle, youtube-solid, youtube
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