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.

Light

Toggle dark mode

Regular

Toggle dark mode

Solid

Toggle dark mode

Thin

Toggle dark mode

HTML

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

Twirl

app/views/components/icon.scala.html

@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

React

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
  icon-24Copy to Clipboard
• 1.25
  20
  .icon-20
  icon-20Copy to Clipboard
• 1.125
  18
  .icon-18
  icon-18Copy to Clipboard
• 1
  16
  .icon-16
  icon-16Copy to Clipboard
• .875
  14
  .icon-14
  icon-14Copy to Clipboard
• 0.75
  12
  .icon-12
  icon-12Copy to Clipboard
• 0.688
  11
  .icon-11
  icon-11Copy to Clipboard

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
  icon-neutralCopy to Clipboard

• Neutral subtle

  gray-500
  .icon-neutral-subtle
  icon-neutral-subtleCopy to Clipboard

• Neutral subtler

  gray-400
  .icon-neutral-subtler
  icon-neutral-subtlerCopy to Clipboard

• Brand

  brand-700
  .icon-brand
  icon-brandCopy to Clipboard

• Inverse

  white
  .icon-inverse
  icon-inverseCopy to Clipboard

• Success

  success-700
  .icon-success
  icon-successCopy to Clipboard

• Danger

  danger-700
  .icon-danger
  icon-dangerCopy to Clipboard

• Info

  info-700
  .icon-info
  icon-infoCopy to Clipboard

• Warning

  warning-800
  .icon-warning
  text-warningCopy to Clipboard

• Accent orange

  orange-600
  .icon-accent-orange
  icon-orange-accentCopy to Clipboard

• Accent cyan

  cyan-600
  .icon-cyan-orange
  icon-cyan-accentCopy to Clipboard

• Accent olive

  olive-700
  .icon-accent-olive
  icon-olive-accentCopy to Clipboard

• Accent magenta

  magenta-600
  .icon-accent-magenta
  icon-magenta-accentCopy to Clipboard

Search FA’s icon library