Icons

Monospaced Icons

Add class icon-monospaced on an icon to make each icon occupy the same amount of horizontal and vertical space.

<span aria-hidden="true" class="icon-monospaced icon-glass"></span>
<span aria-hidden="true" class="icon-monospaced icon-music"></span>
<span aria-hidden="true" class="icon-monospaced icon-search"></span>
<span aria-hidden="true" class="icon-monospaced icon-ok"></span>
<span aria-hidden="true" class="icon-monospaced icon-zoom-in"></span>
<span aria-hidden="true" class="icon-monospaced icon-envelope"></span>
<span aria-hidden="true" class="icon-monospaced icon-heart"></span>

Help Icon

Icon with a circular border, use for creating helpful tooltips for your users.

Icon Sizes

Add class icon-large, icon-2x, icon-3x, icon-4x, and icon-5x to change the size of an icon, increases the size by x1.33, x2, x3, x4, and x5, respectively.

<span aria-hidden="true" class="icon-large icon-heart"></span>
<span aria-hidden="true" class="icon-2x icon-heart"></span>
<span aria-hidden="true" class="icon-3x icon-heart"></span>
<span aria-hidden="true" class="icon-4x icon-heart"></span>
<span aria-hidden="true" class="icon-5x icon-heart"></span>

Stacked Icons

Use <span class="icon-stack"></span> to stack an icon or text on top of another icon, some minor positional adjustments may be required.

<span class="icon-stack">
    <span aria-hidden="true" class="icon-stop" style="font-size:32px;"></span>
    <span aria-hidden="true" class="icon-magnet" style="color: #FFF;"></span>
</span>

<span class="icon-stack">
    <span aria-hidden="true" class="icon-comment" style="font-size:32px;"></span>
    <span aria-hidden="true" class="icon-twitter" style="color: #FFF;"></span>
</span>

<span class="icon-stack">
    <span aria-hidden="true" class="icon-file" style="font-size:32px;"></span>
    <span aria-hidden="true" class="icon-text" style="font-size: 8px;top: 3px;">PDF</span>
</span>

Spinning Icons

Add class icon-spin on any icon to make it animate clockwise.

<span aria-hidden="true" class="icon-asterisk icon-spin"></span>
<span aria-hidden="true" class="icon-spinner icon-spin"></span>
<span aria-hidden="true" class="icon-refresh icon-spin"></span>

Rotate and Flip

Rotate or flip an icon () with classes:

icon-rotate-90

icon-rotate-180

icon-rotate-270

icon-flip-horizontal

icon-flip-vertical

<span aria-hidden="true" class="icon-rotate-90 icon-beaker"></span>
<span aria-hidden="true" class="icon-rotate-180 icon-beaker"></span>
<span aria-hidden="true" class="icon-rotate-270 icon-beaker"></span>
<span aria-hidden="true" class="icon-flip-horizontal icon-beaker"></span>
<span aria-hidden="true" class="icon-flip-vertical icon-beaker"></span>