icon docs

Icon

Getting Started

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

Install via NPM
npm install @bolt/components-icon

Usage 

{% include "@bolt-components-icon/icon.twig" with {
  name: "add-open",
  background: "circle",
  size: "medium",
} only %}

Schema

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

icon size variation

icon theme variation

icon branded 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:

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 theme background shape variations

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

icon name variations


  • 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

  • support

  • system-admin

  • training

  • transportation

  • twitter-solid

  • twitter

  • unlock

  • upload

  • user

  • user-interface

  • video

  • vision

  • warning

  • watch

  • workforce-intelligence

  • youtube-solid