Bolt Design 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	`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-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-sort-ascending`, `pega-sort-descending`, `pega-sort`, `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`
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

npm install @bolt/elements-icon

Dependencies

@bolt/core-v3.x

svgson

Icon

Inline SVG icon system.