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} />;
import { faCoffee } from "@fortawesome/pro-regular-svg-icons/faCoffee";

<Icon icon={faCoffee} />;

Spacing

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

<div>
  <Icon icon={faSun} marginRight />
  Sun
</div>
<div>
  Moon
  <Icon icon={faMoon} marginLeft />
</div>
<div>
  <Icon icon={faSun} marginRight />
  Sun
</div>
<div>
  Moon
  <Icon icon={faMoon} marginLeft />
</div>

Custom color

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

/* when importing multiple versions of the same icon, use unique internal names */
import { faCheckCircle as solidCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCheckCircle as regularCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle";
/* when importing multiple versions of the same icon, use unique internal names */
import { faCheckCircle as solidCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
import { faCheckCircle as regularCheckCircle } from "@fortawesome/free-regular-svg-icons/faCheckCircle";

You can specify a css color directly on Icon

<Icon icon={solidCheckCircle} color="var(--bfc-base-c-success)" />
<Icon icon={solidCheckCircle} color="var(--bfc-base-c-success)" />

Or use a css class

<Icon icon={solidCheckCircle} className="bfc-warning" />
<Icon icon={solidCheckCircle} className="bfc-warning" />

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

<div className="bfc-success">
  <Icon icon={regularCheckCircle} marginRight />
  Success
</div>
<div className="bfc-success">
  <Icon icon={regularCheckCircle} marginRight />
  Success
</div>

Duotone icon

See more duotone options at fontawesome.com

import { faUfoBeam } from "@fortawesome/pro-duotone-svg-icons/faUfoBeam";

<Icon icon={faUfoBeam} />;
import { faUfoBeam } from "@fortawesome/pro-duotone-svg-icons/faUfoBeam";

<Icon icon={faUfoBeam} />;

Spinner

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

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

<Icon.Spinner />
<Icon.Spinner />

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:

<Icon.Spinner size={64} />
<Icon.Spinner size={64} />

Which is equivalent to:

import { faSpinnerThird } from "@fortawesome/pro-duotone-svg-icons/faSpinnerThird";
import Icon from "@intility/bifrost-react/Icon";

<Icon
  icon={faSpinnerThird}
  className="bf-icon-spinner bfc-theme"
  style={{ fontSize: 64 }}
/>;
import { faSpinnerThird } from "@fortawesome/pro-duotone-svg-icons/faSpinnerThird";
import Icon from "@intility/bifrost-react/Icon";

<Icon
  icon={faSpinnerThird}
  className="bf-icon-spinner bfc-theme"
  style={{ fontSize: 64 }}
/>;

Step

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

• "default"
• "active"
• "incomplete"
• "completed"

<Icon.Step />
<Icon.Step variant="active" />
<Icon.Step variant="incomplete" />
<Icon.Step variant="completed" />
<Icon.Step />
<Icon.Step variant="active" />
<Icon.Step variant="incomplete" />
<Icon.Step variant="completed" />

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:

<a href="/css/link#bf-title-link" className="bf-title-link">
  <Icon icon={faHouse} marginRight />
  Link
</a>

<button type="button" onClick={...} className="bf-title-link">
  <Icon icon={faPencil} marginRight />
  Link-styled button
</button>

<Button onClick={...}>
  <Icon icon={faPencil} marginRight />
  Bifrost Button
</Button>
<a href="/css/link#bf-title-link" className="bf-title-link">
  <Icon icon={faHouse} marginRight />
  Link
</a>

<button type="button" onClick={...} className="bf-title-link">
  <Icon icon={faPencil} marginRight />
  Link-styled button
</button>

<Button onClick={...}>
  <Icon icon={faPencil} marginRight />
  Bifrost Button
</Button>

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):

<a href="/css/link" title="Home" className="bf-link bf-large">
  <Icon icon={faHouse} />
</a>

<button type="button" title="Edit item" className="bf-link bf-large" onClick={...}>
  <Icon icon={faPencil} />
</button>

<Button small pill noPadding variant="flat" title="Edit item" onClick={...}>
  <Icon icon={faPencil} />
</Button>
<a href="/css/link" title="Home" className="bf-link bf-large">
  <Icon icon={faHouse} />
</a>

<button type="button" title="Edit item" className="bf-link bf-large" onClick={...}>
  <Icon icon={faPencil} />
</button>

<Button small pill noPadding variant="flat" title="Edit item" onClick={...}>
  <Icon icon={faPencil} />
</Button>

Sandbox

Since Codesandbox is an external service, only free icons will be available.

import Icon from "@intility/bifrost-react/Icon";
import { faCoffee } from "@fortawesome/free-solid-svg-icons/faCoffee";

export default function IconSandbox() {
  return <Icon icon={faCoffee} />;
}