Icon

<bolt-icon
  name="checkmark-circle"
></bolt-icon>

Fluid icons are vertically aligned with adjacent text, and their height is based on inherited typography styles.

In combination with responsive typography, this allows icons to grow and shrink consistently with other responsive elements.

<bolt-icon
  name="checkmark-circle"
  size="sm"
></bolt-icon>
Fluid icon - sm
<br />

<bolt-icon
  name="checkmark-circle"
></bolt-icon>
Fluid icon - md (default)

<p class="bolt-body-copy-md">
  <bolt-icon
    name="checkmark-circle"
  ></bolt-icon>
  Fluid icon with responsive body copy
</p>

<h3 class="bolt-heading-md">
  <bolt-icon
    name="checkmark-circle"
  ></bolt-icon>
  Fluid icon with responsive heading
</h3>

Fixed icons remain a constant size and are unaffected by surrounding typography.

<bolt-icon
  fixed
  name="checkmark-circle"
  size="sm"
></bolt-icon>
Fixed icon - sm
<br />

<bolt-icon
  fixed
  name="checkmark-circle"
></bolt-icon>
Fixed icon - md (default)

Icons can be forced to override their default color with one of the available color options.

<bolt-icon
  color="darkMint"
  name="checkmark-circle-filled"
></bolt-icon>
darkMint

Icons are displayed using the <bolt-icon> custom element.

The <bolt-icon> custom element supports the following attributes:

• name (required): name of the icon to display

  • See the Iconography reference for supported icons.

• title (optional): title to be applied to the icon's SVG

  • Defaults to the value given for name.
  • See the Accessibility best practices for more information.

• color (optional): changes the icon's fill color

  • Please make sure to meet the minimum color-contrast ratio.
  • Available colors: white, charcoal, vibrantBlue, lightBlue, mediumBlue, darkBlue, cherryRed, sunburstOrange, lemonYellow, mustard, lavender, deepPurple, mint, darkMint, seaBlue, darkSeaBlue, ultralightGray, paleGray, darkGray, fossil, darkFossil, theme-error, theme-success, theme-info, theme-warning.

• Sizing attributes:

  • fixed or fluid (optional, but recommended)
    • Applies fixed sizing or fluid sizing (default)
  • size (optional): applies a curated icon size
    • For fixed icons:
      • md is 24x24 px (default)
      • sm is 16x16 px
    • For fluid icons:
      • md is 1.0x1.0 lh (default)
      • sm is 1.0x1.0 em
    • See Icon sizing for more info.

• decorative (optional)

  • When present, indicates that the icon is used strictly for decoration has no semantic meaning, which removes the underlying SVG's title, role, and relevant ARIA attributes.

There are two strategies available for configuring icon sizing behavior.

1. Fluid sizing
   • best used when an icon needs to scale relative to adjacent responsive typography
   • ideal for inline layout scenarios (icon behaves more like a <span>)
2. Fixed sizing
   • best used when an icon needs to retain a specific dimension that is unrelated to adjacent typography
   • ideal for block layout scenarios (icon behaves more like a <div>)

Fluid icon sizing (a.k.a., "responsive" icons) is a strategy for configuring icon sizing that takes advantage of modern CSS features. As of Bolt 7, fluid icon sizing is the default.

• Fluid icons are ideal for inline scenarios where the icon size should scale relative to adjacent responsive typography.
• If large enough, fluid icons may vertically overflow the line height, but it should never cause the CSS line box to grow beyond its natural height.

<bolt-icon
  fluid
  name="checkmark-circle"
  size="sm"
></bolt-icon>
sm fluid icon
<br />

<bolt-icon
  fluid
  name="checkmark-circle"
></bolt-icon>
md fluid icon (default)
<br />

<bolt-icon
  fluid
  name="checkmark-circle"
  style="--size: 2em;"
></bolt-icon>
custom fluid icon (2x2 em)

As of Bolt 7, fixed icon sizing is no longer the default. It is an older strategy with several limitations.

• Fixed icons are ideal for block layout scenarios and in places where an icon needs to retain a constant size.
• Fixed icons are vertically aligned to the baseline
  • This causes problems when applied to inline contexts (e.g., within paragraphs, lists, and other multi-line copy).
  • Icons larger than the contextual line-height may cause extra white space or uneven gaps between lines of text.
  • If the baseline cannot be determined within a parent element, the icon will likely sit higher than expected.
• Fixed icons have a constant px size that does not scale responsively.
  • Its size will not change between responsive breakpoints.
  • Its size does not change based on contextual typographic styles.

<bolt-icon
  fixed
  name="checkmark-circle"
  size="sm"
></bolt-icon>
sm fixed icon
<br />

<bolt-icon
  fixed
  name="checkmark-circle"
></bolt-icon>
md fixed icon (default)
<br />

<bolt-icon
  fixed
  name="checkmark-circle"
  style="--size: 32px;"
></bolt-icon>
custom fixed icon (32x32 px)

See also: Iconography principles for guidance on using icons effectively.

• An Icon is a symbol that is universally recognized that represents something else.
• Icons should be easily recognizable and contextually sensible.
• Their use should follow spacing rules for consistent sizing.
• Combine Icons with text labels for better comprehension. Only use Icons when it's absolutely necessary to make it easier for users to locate important screen components.
• Icons should comply with brand guidelines.
• Icons should not use third-party artwork.

• These are icons are universally recognized symbols (e.g. a printer to represent printing or an x-mark to represent closing something).
• These icons visually indicate functionality (e.g. the “opens in a new window” (external-link) icon.)
• INCLUDED with Bolt.

• Reflecting Nationwide's visual brand, these icons represent an abstract visualization of our company's products and services. (e.g. a car to represent auto insurance or a paw to represent pet insurance).
• Are used less frequently.
• Are used to visually enrich content.
• These typically do not imply an action that a user must perform.
• NOT INCLUDED with Bolt

• Ideal for inline scenarios where the Icon size should scale relative to adjacent responsive typography.
• May vertically overflow a text’s line height, but it should never cause the CSS line box to grow beyond its natural height.

• Ideal for block layout scenarios and in places where an Icon needs to retain a constant size.
• Are vertically aligned to the baseline.
• Have a constant px size that does not scale responsively.
  • Its size will not change between responsive breakpoints.
  • Its size does not change based on contextual typographic styles.

• When communicating simple actions and easily understood concepts.
• When making navigation easier for common actions.
• When notifying a user about status or important messages.
• When space needs to be conserved for more complex concepts.

• When an icon's meaning isn't immediately clear.
• When the text it supports is too abstract to be supported by visual representation.
• When it adds only decoration to a screen.
• When it is the direct child of a Link, except when that Icon is the external-link Icon.

• Text labels for utility Icons should use sentence case.

• When title attribute is added to convey information, must provide a meaningful description. title attribute can not be empty.
• Avoid self-referential words like "icon", "graphic", or "image" in the title.
• Don't use special characters in the title.
• The decorative attribute should be added when the icon doesn't have semantic meaning.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.