Examples

Basic Icons

mi-Settings :

<i class="mi mi-Settings"></i>

note

You can place Micon icons just about anywhere using the CSS Prefix mi and the icon’s name. Micon is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).
If you change the font-size of the icon’s container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger Icons

mi-lg :

<i class="mi mi-Settings mi-lg"></i>

mi-2x :

<i class="mi mi-Settings mi-2x"></i>

mi-3x :

<i class="mi mi-Settings mi-3x"></i>

mi-4x :

<i class="mi mi-Settings mi-4x"></i>

mi-5x :

<i class="mi mi-Settings mi-5x"></i>

note

To increase icon sizes relative to their container, use the mi-lg (33% increase), mi-2x, mi-3x, mi-4x, or mi-5x classes.
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Fixed Width Icons

mi-fw :

<i class="mi mi-Settings mi-fw"></i>

note

Use mi-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment. Especially useful in things like nav lists & list groups.

List Icons

List icons
can be used
as bullets
in lists

<ul class="mi-ul">
  <li><i class="mi-li mi mi-Settings"></i>List icons</li>
  <li><i class="mi-li mi mi-Send"></i>can be used</li>
  <li><i class="mi-li mi mi-Rotate mi-spin"></i>as bullets</li>
  <li><i class="mi-li mi mi-MyNetwork"></i>in lists</li>
</ul>

note

Use mi-ul and mi-li to easily replace default bullets in unordered lists.

Animated Icons

<i class="mi mi-Settings mi-spin"></i>
<i class="mi mi-Globe mi-pulse"></i>
<i class="mi mi-Refresh mi-spin"></i>

note

Use the mi-spin class to get any icon to rotate, and use mi-pulse to have it rotate with 8 steps. Works well with mi-Settings, mi-refresh, and more.
CSS3 animations aren’t supported in IE8 - IE9.
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect.

Rotated & Flipped

normal

mi-rotate-90

mi-rotate-180

mi-rotate-270

mi-flip-horizontal

icon-flip-vertical :

<i class="mi mi-SDCard"></i> normal
<i class="mi mi-SDCard mi-rotate-90"></i> mi-rotate-90
<i class="mi mi-SDCard mi-rotate-180"></i> mi-rotate-180
<i class="mi mi-SDCard mi-rotate-270"></i> mi-rotate-270
<i class="mi mi-SDCard mi-flip-horizontal"></i> mi-flip-horizontal
<i class="mi mi-SDCard mi-flip-vertical"></i> icon-flip-vertical

note

To arbitrarily rotate and flip icons, use the mi-rotate-* and mi-flip-* classes.

Stacked Icons

mi-BlockedLegacy on mi-BodyCam :

<span class="mi-stack mi-lg">
	<i class="mi mi-BodyCam mi-stack-1x"></i>
	<i class="mi mi-BlockedLegacy mi-stack-2x text-danger"></i>
</span>

mi-Heart on mi-HeartFill :

<span class="mi-stack mi-lg">
	<i class="mi mi-HeartFill mi-stack-1x  text-danger"></i>
	<i class="mi mi-Heart mi-stack-1x"></i>
</span>

note

To stack multiple icons, use the mi-stack class on the parent, the mi-stack-1x for the regularly sized icon, and mi-stack-2x for the larger icon. mi-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent to get further control of sizing.