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.

Code

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

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.

<svg class="icon">
  <use aria-hidden="true" xlink:href="/assets/svg/light.svg#circle-check"></use>
</svg>

@import components._

@icon(icon="", weight="", classes="", id="")

PropTypeDescription

icon
string
name of Font Awesome SVG icon (without the fa- prefix.)
If an icon is not provided, the fallback is check.
weight
string
regular | solid | light | thin (default is regular)
classes
string
appends/adds additional classes to svg class=“icon”, i.e. icon-16 icon-danger
id
string
appends an id="" to the svg

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCheck } from '@fortawesome/pro-regular-svg-icons/faCheck';

function () {
  return (
    <FontAwesomeIcon icon={faCheck} />
  );
}

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

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

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

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