Iconography

See standards on sizing, placement and colors on the Style Tab. Learn about our Orion Icon Library and how to add custom icons as a designer in the Contribute Tab.

Click on an icon to copy the class name.

XS 16px

SM 20px

MD 24px

LG 28px

XL 32px

Loading Icons

One moment please while we fetch the newest icons.

Coming soon...

Please enjoy a cat while you wait

Basic Usage

Simply attach the icon class to a <span> element. It is recommended that the icon is the only thing attached to it's element. Using an icon by itself, you may consider giving it role="img" and aria-label="Description" or aria-hidden="true" if the icon is only for decoration.

Copy

<!--Self Described Example-->
<span class="font-icon-info" role="img" aria-label="Information"></span>

<!--Decoration Example-->
<span>
    <span class="font-icon-generic-icon-clipboard" aria-hidden="true"></span>
    <span class="valign--middle">Copy</span>
</span>

Size

Examples of all the sizes supported.

<span class="font-icon-info" data-icon-size="xs" role="img" aria-label="xs"></span>
<span class="font-icon-info" data-icon-size="sm" role="img" aria-label="sm"></span>
<span class="font-icon-info" data-icon-size="md" role="img" aria-label="md"></span>
<span class="font-icon-info" data-icon-size="lg" role="img" aria-label="lg"></span>
<span class="font-icon-info" data-icon-size="xl" role="img" aria-label="xl"></span>

Colors

You can use utility classes to affect the colors of the icon.

Primary Neutral Positive Negative Caution Info

<span class="font-color--primary">
    <span class="font-icon-authentication" aria-hidden="true"></span>
    <span class="valign--middle">Primary</span>
</span>
<span class="font-color--neutral">
    <span class="font-icon-linked" aria-hidden="true"></span>
    <span class="valign--middle">Neutral</span>
</span>
<span class="font-color--positive">
    <span class="font-icon-circle-check-filled" aria-hidden="true"></span>
    <span class="valign--middle">Positive</span>
</span>
<span class="font-color--negative">
    <span class="font-icon-times-circle" aria-hidden="true"></span>
    <span class="valign--middle">Negative</span>
</span>
<span class="font-color--caution">
    <span class="font-icon-warning" aria-hidden="true"></span>
    <span class="valign--middle">Caution</span>
</span>
<span class="font-color--info">
    <span class="font-icon-info" aria-hidden="true"></span>
    <span class="valign--middle">Info</span>
</span>