Icons

Inline decorative icons rendered via CSS mask-image. Apply an .icon-<name> class to a <span> (or any inline element) to display an icon that scales with the surrounding text and inherits its color.

Accessibility: These icons are purely decorative. Always add aria-hidden="true" so screen readers skip them.

If the element, say, a <button> that wraps the icon does not have text, add aria-label (e.g., aria-label="Close") to it so screen readers announce the button's purpose.

Overview

<nav>
  <h1 class="icon-close"></h1>
  <p class="icon-close"></p>
  <small class="icon-close"></small>
  <button class="icon-close"></button>
  <button role="link" class="icon-close"></button>
  <a href="#" class="icon-close"></a>
</nav>

<hr>

<nav>
  <h1><span aria-hidden="true" class="icon-close"></span> close</h1>
  <p><span aria-hidden="true" class="icon-close"></span> close</p>
  <small><span aria-hidden="true" class="icon-close"></span> close</small>
  <button><span aria-hidden="true" class="icon-close"></span> close</button>
  <button role="link"><span aria-hidden="true" class="icon-close"></span> close</button>
  <a href="#"><span aria-hidden="true" class="icon-close"></span> close</a>
</nav>

Available Icons

<nav>
  <span aria-hidden="true" class="icon-checkbox"></span>
  <span aria-hidden="true" class="icon-chevron"></span>
  <span aria-hidden="true" class="icon-close"></span>
  <span aria-hidden="true" class="icon-date"></span>
  <span aria-hidden="true" class="icon-invalid"></span>
  <span aria-hidden="true" class="icon-loading"></span>
  <span aria-hidden="true" class="icon-minus"></span>
  <span aria-hidden="true" class="icon-search"></span>
  <span aria-hidden="true" class="icon-time"></span>
  <span aria-hidden="true" class="icon-valid"></span>
</nav>