Artificial Reason Icons
Normal Icons
Inverse Icons
Round Icons
Round Inverse
<span class="icon-ar"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-round"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-round icon-ar-inverse"><i class="fa fa-cloud"></i></span>
Square Icons
Square Inverse
Circle Icons
Circle Inverse
<span class="icon-ar icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-square icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-circle"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-circle icon-ar-inverse"><i class="fa fa-cloud"></i></span>
Small Icons
Large Icons
<!-- Small Icons -->
<span class="icon-ar icon-ar-sm icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-sm icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-sm"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-sm icon-ar-circle"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-sm icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-sm icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-sm"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-sm icon-ar-circle"><i class="fa fa-globe"></i></span>
<!-- Large Icons -->
<span class="icon-ar icon-ar-lg icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-lg icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-lg icon-ar-circle"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-lg icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-lg icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-lg icon-ar-circle"><i class="fa fa-globe"></i></span>
XL Large Icons
<span class="icon-ar icon-ar-xl-lg icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-xl-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-circle"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-round"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-circle"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-square icon-ar-danger"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-round icon-ar-warning"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-success"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-xl-lg icon-ar-circle icon-ar-help"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-square icon-ar-info"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-round icon-ar-help"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-warning"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg icon-ar-circle icon-ar-success"><i class="fa fa-globe"></i></span>
Color Icons
Inverse Color Icons
<span class="icon-ar icon-ar-danger"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-warning"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-success"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-info"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-help"><i class="fa fa-send"></i></span>
<span class="icon-ar icon-ar-black"><i class="fa fa-user"></i></span>
<!-- Inverse -->
<span class="icon-ar icon-ar-danger icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-warning icon-ar-inverse"><i class="fa fa-tachometer"></i></span>
<span class="icon-ar icon-ar-success icon-ar-inverse"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-info icon-ar-inverse"><i class="fa fa-globe"></i></span>
<span class="icon-ar icon-ar-help icon-ar-inverse"><i class="fa fa-send"></i></span>
<span class="icon-ar icon-ar-black icon-ar-inverse"><i class="fa fa-user"></i></span>
White Icons for Darks Backgrounds
Normal Icons
Inverse Icons
Round Icons
Round Inverse
Square Icons
Square Inverse
Circle Icons
Circle Inverse
<span class="icon-ar icon-ar-white"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-round"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-round icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-square"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-square icon-ar-inverse"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-circle"><i class="fa fa-cloud"></i></span>
<span class="icon-ar icon-ar-white icon-ar-circle icon-ar-inverse"><i class="fa fa-cloud"></i></span>
Examples Size Icons
<span class="icon-ar icon-ar-xl-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-sm"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-xl-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-inverse icon-ar-sm"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-circle icon-ar-xl-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-circle icon-ar-lg"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-circle"><i class="fa fa-coffee"></i></span>
<span class="icon-ar icon-ar-circle icon-ar-sm"><i class="fa fa-coffee"></i></span>