Icons

There are a number of icons that can be used by including the icon font. To use the icons, create an element with the following markup:

<span class="lui-icon  lui-icon--play" aria-hidden="true"></span>

Standard icons

Analytics icons

Icon sizing

Control the size of icons by adding a class. The following sizing options are available:

• small - 12px
• (default) - 16px
• large - 20px

<span class="lui-icon  lui-icon--large  lui-icon--play"></span>
<span class="lui-icon  lui-icon--play"></span>
<span class="lui-icon  lui-icon--small  lui-icon--play"></span>

Using another icon font

You can use other icon fonts, like for example Font Awsome, where icons are used. Just replace the "lui-icon" classes. Note that some components like search and checkbox will need additional overrides.

For example:

<button class="lui-button">
  <span class="lui-button__icon  lui-icon  lui-icon--play"></span>
</button>

with:

<button class="lui-button">
  <span class="lui-button__icon  fa  fa-camera-retro  fa-lg"></span>
</button>