Simplex includes all Font Awesome icons.

Overall usage

Used to add icons to static content, lists and buttons.


  • The <span> element should be used for the icons as this element is a generic inline element.
  • If the icon is decorative, aria-hidden="true" should be included.
  • If the icon adds meaning to the content, additional information should be included for screen readers using the hidden class.

Decorative icons

Icons that are purely decorative should be hidden from screen readers to avoid verbal clutter. This is achieved using the aria-hidden attribute.

<span class="fas fa-chevron-left" aria-hidden="true"></span>
<span class="fas fa-chevron-right" aria-hidden="true"></span>
<span class="fas fa-times" aria-hidden="true"></span>
<span class="fas fa-plus" aria-hidden="true"></span>

Non-decorative icons

Icons that convey important information should contain a description for screen readers. This is achieved using hidden content.

<span class="fas fa-chevron-left">
  <span class="u-hidden">Left</span>

<span class="fas fa-chevron-right">
  <span class="u-hidden">Right</span>

<span class="fas fa-times">
  <span class="u-hidden">Close</span>

<span class="fas fa-plus">
  <span class="u-hidden">Open</span>

Adding color

Color can be added to any static icon using color utility classes.

<span class="fas fa-chevron-left c-primary"></span>
<span class="fas fa-chevron-right c-gray-40"></span>
<span class="fas fa-times c-red"></span>
<span class="fas fa-plus c-green"></span>

Adding icons to buttons

The .button--icon-left needs to be added beside the Font-awesome icon class. This shifts the icons slighty to the left.

<button type="button" class="button--primary">
  <span class="fas fa-chevron-left button--icon-left" aria-hidden="true"></span>

The .button--icon-right needs to be added beside the Font-awesome icon class. This shifts the icons slighty to the right.

<button type="button" class="button--primary">
  <span class="fas fa-chevron-right button--icon-right" aria-hidden="true"></span>

Icons can be used inside small buttons. As there is no supporting text for these icons, hidden text must be provided for screen readers

<button type="button" class="button--primary button-small">
  <span class="fas fa-times" aria-hidden="true">
    <span class="u-hidden">Close</span>
<button type="button" class="button--secondary button-small">
  <span class="fas fa-plus" aria-hidden="true">
    <span class="u-hidden">Open</span>
<button type="button" class="button--link button-small">
  <span class="fas fa-chevron-right" aria-hidden="true">
    <span class="u-hidden">Right</span>