Icon

Icon. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-icon
  {% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}
Name Type Value(s) Description Default
name* string
  • academy, 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-operations, calendar, careers, case-management, check-circle, check-solid, check, chevron-down, chevron-left, chevron-right, chevron-up, close-open, close-solid, close, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exit-full screen, external-link, eye-off, eye, facebook-solid, facebook, field-service-gray, field-service, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin-solid, linkedin, lock, manufacturing, map-pin-solid, map-pin, marketing-gray, marketing, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter-solid, twitter, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid

Icon name.

N/A
background string
  • circle OR square

Background shape. This applies only to 'xlarge' icons.

N/A
size string
  • small, medium, large, xlarge

Icon size.

N/A
color string
  • teal OR blue

Icon color. Currently only support default (black) and teal.

N/A

icon

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:

        

  

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


Theme: light


  • Background: circle

  • Background: circle
    Color: teal

  • Background: circle
    Color: blue


  • Background: square

  • Background: square
    Color: teal

  • Background: square
    Color: blue

Theme: dark


  • Background: circle

  • Background: circle
    Color: teal

  • Background: circle
    Color: blue


  • Background: square

  • Background: square
    Color: teal

  • Background: square
    Color: blue


  • academy

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

  • calendar

  • careers

  • case-management

  • check-circle

  • check-solid

  • check

  • chevron-down

  • chevron-left

  • chevron-right

  • chevron-up

  • close-open

  • close-solid

  • close

  • cloud

  • co-browse

  • communications

  • copy-to-clipboard

  • customer-decision-hub

  • customer-onboarding

  • customer-service

  • data-integrations

  • documentation

  • download

  • email

  • energy

  • entertainment

  • exit-full screen

  • external-link

  • eye-off

  • eye

  • facebook-solid

  • facebook

  • field-service-gray

  • field-service

  • filter

  • financial

  • full-screen

  • github

  • global

  • government

  • healthcare

  • hospitality

  • industries

  • info-open

  • info-solid

  • insurance

  • integration

  • intelligent-virtual-assistant

  • java

  • knowledgebase

  • launchpad

  • life-sciences

  • linkedin-solid

  • linkedin

  • lock

  • manufacturing

  • map-pin-solid

  • map-pin

  • marketing-gray

  • marketing

  • menu

  • minus-open

  • minus-solid

  • mobility

  • more

  • omni-channel

  • partners

  • pencil

  • platform

  • podcast

  • print

  • product

  • product-delivery

  • refresh

  • reporting

  • retail

  • robo-auto

  • sales-automation

  • scalability

  • search

  • share

  • star-solid

  • support

  • system-admin

  • training

  • transportation

  • twitter-solid

  • twitter

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • youtube-solid