icon

Icon

Inline SVG icon system.

Published

Last updated: 5.8.0

Github

NPM

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

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

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

cloud

co-browse

collaboration

communications

copy-to-clipboard

credit-card

cube

customer-decision-hub

customer-onboarding

customer-service

data-integrations

documentation

dollar-circle

download

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

list

lock-solid

lock

manufacturing

icon

icon docs Show Code Hide Code

Icon

Inline SVG icon system.

icon Show Code Hide Code

icon docs

icon