Icon

Inline SVG icon system.

Published

Last updated: 4.5.0

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

  npm install @bolt/elements-icon

Dependencies

@bolt/core-v3.x

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

list

lock-solid

lock

manufacturing

map-pin-solid

map-pin

media

menu

meteor

mobility

molecule

more

omni-channel

orbit

partners

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

Dark

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

list

lock-solid

lock

manufacturing

map-pin-solid

map-pin

media

menu

meteor

mobility

molecule

more

omni-channel

orbit

partners

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

Twig

{% include '@bolt-elements-icon/icon.twig' with { name: 'bell-solid', } only %}

HTML

Icon Size

A Icon’s size can be modified per use case.

Important Notes:

Reference the schema for all options.

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

Twig

{% include '@bolt-elements-icon/icon.twig' with { size: 'xlarge', ... } only %}

HTML

Icon Color

A Icon’s color can be modified per use case.

Important Notes:

Reference the schema for all options.

Additionally, a CSS custom property is available to change the icon color to any brand color. Define --e-bolt-icon-color inline style rule to set the desired color. Reference Color Tokens for all available brand colors.

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

Twig

{% include '@bolt-elements-icon/icon.twig' with { color: 'navy', ... } only %}

HTML

Icon Use Case: Custom SVG

Custom SVG can be used instead to render an icon that is not available in the design system.

Important Notes:

When creating a custom SVG, start with a 32px by 32px artboard in the design tool (Adobe Illustrator, Sketch, etc.).

Make sure all layers have been converted to objects, meaning there is no stroke, only shapes with color fill.

Combine all objects if they visually connect (i.e. create one big shape).

Set the object’s fill color to #151619.

Set the widest side to 32px and center the icon within the artboard.

Save the SVG and then use imgoptim or another tool to minify it.

Lastly:

If you choose a Twig usage:

Add the element relevant attributes {{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true" to the <svg> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the custom_icon_path prop.

If you choose a HTML usage:

Add the element class class="e-bolt-icon" and relevant modifier classes, and add the attribute aria-hidden="true" to the <svg> HTML element. Then you can display the icon using the modified <svg> markup.

Demo

Twig

{% include '@bolt-elements-icon/icon.twig' with { custom_icon_path: 'full/path/to/custom-icon-file.twig', } only %}

HTML

icon

icon docs

Icon

Inline SVG icon system.

icon

icon size

icon color

icon use case custom svg

icon

icon docs Show Code Hide Code

Icon

Inline SVG icon system.

icon Show Code Hide Code

icon size Show Code Hide Code

icon color Show Code Hide Code

icon use case custom svg Show Code Hide Code

icon docs

icon

icon size

icon color

icon use case custom svg