Skip to content
Design System

Icons

Icons are used to visually communicate core parts of the product and available actions. They can help users understand where they are in the product and what common interaction patterns are available.

Design

Section titled “ Design”
Relies on the third-party library Font Awesome SVG sprites (HTML and Twirl), or the Font Awesome javascript API (React).View all resources

Variants

Section titled “Variants”

We load the SVG icons on demand from an icon sprite sheet. The SVG symbol ID is the icon’s name the in FontAwesome’s library.

Size

Section titled “Size”

By default, icons size according to their inline content. Set icons to a specific size with these tokens.

VisualREMPXClassCopy

  • 1.5
    24
    .icon-24
  • 1.25
    20
    .icon-20
  • 1.125
    18
    .icon-18
  • 1
    16
    .icon-16
  • .875
    14
    .icon-14
  • 0.75
    12
    .icon-12
  • 0.688
    11
    .icon-11

Condensed color palette

Section titled “Condensed color palette”

By default, icons inherit colors from their parent context including pseudo states like :hover, :active, and :focus. Set a specific color by including one of these classes with icon. For example, class="icon icon-brand"

If there are interactive pseudo states that effect a change of text color (:hover, :active, :focus, etc.), this will cascade down into the SVG icon fill.

VisualValueClassCopy

  • Neutral

    gray-800
    .icon-neutral

  • Neutral subtle

    gray-500
    .icon-neutral-subtle

  • Neutral subtler

    gray-400
    .icon-neutral-subtler

  • Brand

    brand-700
    .icon-brand

  • Inverse

    white
    .icon-inverse

  • Success

    success-700
    .icon-success

  • Danger

    danger-700
    .icon-danger

  • Info

    info-700
    .icon-info

  • Warning

    warning-800
    .icon-warning

  • Accent orange

    orange-600
    .icon-accent-orange

  • Accent cyan

    cyan-600
    .icon-cyan-orange

  • Accent olive

    olive-700
    .icon-accent-olive

  • Accent magenta

    magenta-600
    .icon-accent-magenta

Accessibility

Section titled “ Accessibility”
  • Use icons in combination with meaningful UI text to ensure comprehension and accessibility.
  • For icons with no accompanying UI text, also include an aria-label for the icon. There are very few widely recognized icons, so try to avoid this when possible.
  • Learn more about meaningful text labels in accessibility guidelines.
  • Icons must have an tooltip attached unless it has text that communicates what the icon is conveying. Use tooltips to let the user know what happens when the tab is selected. When writing tooltips, be short and concise and follow the content guidelines.

Design resources

Section titled “ Design resources”

Icon Library

Section titled “Icon Library”
  • We use FontAwesome Pro (FA) for most of our icon needs. If an icon from this library does not meet our need, we can create a custom icon.
  • We support:
    • Version 6.5.1
    • Light, Regular, Solid and Thin styles
Search FA’s icon libraryView icons in Figma