icon docs

2.16.1

Icon

Icon component in Bolt

A symbolic image. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-icon

Tips for custom icons:

  • Filenames for any custom icons should be all lowercase.
  • Only use dashes in the filename to separate out words. No underscores or spaces!
  • To automatically disable color replacement, make sure the SVG icon ends with -colored.svg.

For example: bolt-logo.svg would get colors stripped while bolt-logo-colored.svg would not!

  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} 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)
Attributes

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

object
Name

Icon name

, string
Background

Customizes the background that's displayed behind the SVG icon itself. Choosing any option other than none will automatically add a bit of space around the SVG so the background has the necessary space. Note, this option is now available to icons of all sizes!

string none
  • none, circle, square
Size

Icon size.

string
  • small, medium, large, xlarge
Color

Icon color palette. Picking an option other than auto will override the default colors based on the color theme is placed within.

string auto
  • auto, teal, blue, indigo, yellow, orange, gray, green, white, pink

icon

icon size variation


icon theme variation

icon color variation

background: none color: auto background: circle color: auto background: square color: auto background: none color: teal background: circle color: teal background: square color: teal background: none color: blue background: circle color: blue background: square color: blue background: none color: indigo background: circle color: indigo background: square color: indigo background: none color: yellow background: circle color: yellow background: square color: yellow background: none color: orange background: circle color: orange background: square color: orange background: none color: gray background: circle color: gray background: square color: gray background: none color: green background: circle color: green background: square color: green background: none color: white background: circle color: white background: square color: white background: none color: pink background: circle color: pink background: square color: pink
background: none color: auto background: circle color: auto background: square color: auto background: none color: teal background: circle color: teal background: square color: teal background: none color: blue background: circle color: blue background: square color: blue background: none color: indigo background: circle color: indigo background: square color: indigo background: none color: yellow background: circle color: yellow background: square color: yellow background: none color: orange background: circle color: orange background: square color: orange background: none color: gray background: circle color: gray background: square color: gray background: none color: green background: circle color: green background: square color: green background: none color: white background: circle color: white background: square color: white background: none color: pink background: circle color: pink background: square color: pink

Custom SVG Icons

Can't find an existing SVG that suits your needs?

Before jumping ahead and adding a new custom SVG icon, please make sure you come and chat with the Bolt team first to see if there's already an existing icon that could get used instead OR if it makes sense to add a new icon to the design system itself!


Adding Custom SVG Icons to Bolt

Note: make sure your custom SVG icon starts with custom- as this is required to ensure names of built-in icons don't collide with custom SVG icons added.

Step 1. Import your custom SVG Icon in a .js file that's compiled by the Bolt build tools. Note: make sure your SVG icon has been already exported for the web (docs coming soon!).

import './assets/icons/custom-users.svg';

Step 2. After recompiling the site's JavaScript, your custom SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-users", size: "xlarge" } only %}
<bolt-icon name="custom-users" size="xlarge"></bolt-icon>

Adding a Custom SVG Icon - Retain Original Colors

This advanced use case is rarely recommended since it can limit the number of places an SVG icon can get used and prevents the icon's color palette from adjusting based on the location it's used.

Step 1. Import your SVG Icon in a .js file, making sure your icon ends in -colored.svg

import './assets/icons/custom-arrow-left-colored.svg';

Step 2. After recompiling the site's JavaScript, your custom colored SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-arrow-left-colored", size: "xlarge", } %}
<bolt-icon name="custom-arrow-left-colored" size="xlarge"></bolt-icon>

icon custom colors

Bolt's SVG icon system provides the ability to customize an individual icon's color (the shape itself), background color, and background opacity levels, in both the Twig and Custom Element formats the design system ships.

via Web Component:

  <bolt-icon
  size="xlarge"
  background="circle"
  name="marketing-gray"
  style="
    color: #a65388;
    --bolt-theme-icon-background: #a65388;
    --bolt-theme-icon: #FFF;
    --bolt-theme-icon-background-opacity: 1;
  "></bolt-icon>

via Twig Include:

  {% include "@bolt-components-icon/icon.twig" with {
  name: "customer-service",
  background: "circle",
  size: "xlarge",
  attributes: {
    style: [
      "color: #e64b18;",
      "--bolt-theme-icon-background: #e64b18;",
      "--bolt-theme-icon: #FFF;",
      "--bolt-theme-icon-background-opacity: 1;"
    ]
  }
} only %}

icon name variations


  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-atom

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-rocket

  • brand-satelite

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid

  • academy

  • add

  • add-open

  • add-solid

  • agile

  • app-development

  • app-exchange

  • arrow-left

  • asset-data

  • asset-infographic

  • asset-interactive

  • asset-link

  • asset-media

  • asset-podcast

  • asset-presentation

  • asset-text

  • asset-video

  • bolt-logo-colored

  • brand-atom

  • brand-meteor

  • brand-molecule

  • brand-operations

  • brand-orbit

  • brand-rocket

  • brand-satelite

  • brand-triangle

  • calendar

  • careers

  • case-management

  • chart-bar

  • check

  • check-circle

  • check-solid

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close

  • close-circled

  • close-open

  • close-solid

  • cloud

  • co-browse

  • collaboration

  • communications

  • copy-to-clipboard

  • credit-card

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • discussions

  • documentation

  • download

  • email

  • energy

  • entertainment

  • exclamation

  • exit-full-screen

  • external-link

  • eye

  • eye-off

  • face-happy

  • face-sad

  • facebook

  • facebook-solid

  • field-service

  • field-service-gray

  • file-small

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • heart

  • hospitality

  • ideas

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin

  • linkedin-solid

  • list

  • lock

  • manufacturing

  • map-pin

  • map-pin-solid

  • marketing

  • marketing-gray

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • questions

  • refresh

  • reply

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • thumbs-up-open

  • time-open

  • training

  • transportation

  • trash

  • twitter

  • twitter-solid

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • world-open

  • youtube-solid
Debug Panel