Icons

The icons in the UI-Toolkit are automatically generated from SVG files. These files are packaged up into a font that is then served directly to the browser via the UI-Toolkit CSS.

To render an icon, simply use the .icon class, along with the the class for the particular slug that you wish to render. For example, below, we render the Success icon using the .icon-success class.

<!-- Example icon -->
<span class="icon icon-arrow-up"></span>

We have a wide variety of icons available:

Styling Icons

Note that because these icons are rendered as characters in a font, you may style them however you wish using CSS.

<span class="icon icon-arrow-up" style="color: green; font-size: 2em;"></span>

Icons in Buttons

Primarily, buttons will contain only text. In the event that you would like to inject an icon into a button, the icon will be aligned to the text automatically.

<button>Look Up <span class="icon icon-arrow-up margin-left-tiny"></span></button>

Note that the icon can appear on either side.

<button><span class="icon icon-arrow-up margin-right-tiny"></span> Look Up!</button>

Ghosting Icons

Icon colors can be inverted using the .ghost class. This allows for icon use on darker backgrounds. We also provide functionality to invert colors of all descendants using the .ghost-children class. See ghosting for more information and examples.

<div class="bg-off-black inline-block padding-medium ghost-children">
    <span class="icon icon-download"></span>
    <span class="icon icon-bookmark-solid"></span>
    <span class="icon icon-paperless"></span>
    <span class="icon icon-close"></span>
</div>