Icon

This component is a wrapper for the official react-fontawesome package. See Font Awesome react docs for usage, just replace <FontAwesomeIcon ... /> with <Icon ... />.

You can find all available icons on fontawesome.com/icons.

See the bifrost react installation page for icon pack installation instructions.

Basic Icon

There are several ways to add icons to your project, but we recommend deep importing each icon separately:

import { faCoffee } from "@fortawesome/pro-regular-svg-icons/faCoffee";

<Icon icon={faCoffee} />;

When importing multiple versions of the same icon, use unique internal names

import { faCoffee as solidCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";
import { faCoffee as regularCoffee } from "@fortawesome/free-regular-svg-icons/faCoffee";

Spacing

Use marginLeft or marginRight to add space between icon and text.

Custom color

Icons follow the current text color, or you can use the color prop for coloring the icon directly.

Or use a css class

Icons will inherit text color by default. marginRight adds spacing to the right of the icon.

Spinner

Use the <Icon.Spinner /> sub-component for a simple spinner.

If you need an overlay, see modal with spinner example.

Spinner size

The spinner icon follows current font-size by default, customize it with the size prop, either as a number (in px) or any value you can set as CSS font-size:

Step

Use the <Icon.Step /> sub-component for a single step of a wizard, available in 4 variants:

Clickable icon

Avoid using onClick directly on an <Icon> since it won't:

• Look like it's clickable
• Get a pointer (hand) cursor on hover
• Be accessible for keyboard users

Instead wrap it inside a link (<a>) or <button> element.

Also see <Button> docs and the link styling page.

Use link when navigating to a new URL, and button for any other action:

Icon-only link or button

When the link or button contains only an icon, we need to make sure:

• Clickable target area is large enough:
  • <a> and <button> needs .bf-large (16px font-size) to be compliant, but <Button small> is large enough as-is.
• It has a screen-reader accessible name:
  • Add a title for screen reader support (or aria-label if you don't want a browser tooltip):