Basic Icons

Basic Icons

Normal Icons

Inverse Icons

Round Icons

Round Inverse


<h3>Normal Icons</h3>
<span class="ms-icon"><i class="fa fa-cloud"></i></span>
<span class="ms-icon"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon"><i class="fa fa-coffee"></i></span>
<span class="ms-icon"><i class="fa fa-globe"></i></span>
<span class="ms-icon"><i class="fa fa-send"></i></span>
<span class="ms-icon"><i class="fa fa-user"></i></span>

<h3>Inverse Icons</h3>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-inverse"><i class="fa fa-user"></i></span>

<h3>Round Icons</h3>
<span class="ms-icon ms-icon-round"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-round"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-round"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-round"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-round"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-round"><i class="fa fa-user"></i></span>

<h3>Round Inverse</h3>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-round ms-icon-inverse"><i class="fa fa-user"></i></span>

Square Icons

Square Inverse

Circle Icons

Circle Inverse


<h3>Square Icons</h3>
<span class="ms-icon ms-icon-square"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-square"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-square"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-square"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-square"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-square"><i class="fa fa-user"></i></span>

<h3>Square Inverse</h3>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-square ms-icon-inverse"><i class="fa fa-user"></i></span>

<h3>Circle Icons</h3>
<span class="ms-icon ms-icon-circle"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-circle"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-circle"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-circle"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-circle"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-circle"><i class="fa fa-user"></i></span>

<h3>Circle Inverse</h3>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-coffee"></i></span>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-globe"></i></span>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-send"></i></span>
<span class="ms-icon ms-icon-circle ms-icon-inverse"><i class="fa fa-user"></i></span>


Icons Size

Icons Small Size

Icons Normal Size

Icons XL Size

Icons XLG Size

Normal Icons

Rounds Icons

Square Icons

Circle Icons


<span class="ms-icon ms-icon-sm"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-lg"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-xlg"><i class="fa fa-cloud"></i></span>

Inverse Icons

Normal Icons

Inverse Icons

Round Icons

Round Inverse

Square Icons

Square Inverse

Circle Icons

Circle Inverse


<span class="ms-icon ms-icon-white"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-inverse ms-icon-white"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-round"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-round ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-square"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-square ms-icon-inverse"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-circle"><i class="fa fa-cloud"></i></span>
<span class="ms-icon ms-icon-white ms-icon-circle ms-icon-inverse"><i class="fa fa-cloud"></i></span>

Colorful Icons










<span class="ms-icon color-info"><i class="fa fa-cloud"></i></span>
<span class="ms-icon color-success"><i class="fa fa-tachometer"></i></span>
<span class="ms-icon color-warning"><i class="fa fa-coffee"></i></span>
<span class="ms-icon color-danger"><i class="fa fa-globe"></i></span>
<span class="ms-icon color-royal"><i class="fa fa-send"></i></span>
<span class="ms-icon color-black"><i class="fa fa-user"></i></span>

MaterialStyle

Social Links