Icons Basics

A basic settings that work with any set of icons. It is possible to change it's size, make icon size responsive, or change icon color. 

<span class="icon fa-address-book"></span>
<span class="icon icon-x2 fa-address-book"></span>
<span class="icon icon-x3 fa-address-book"></span>
<span class="icon icon-x4 fa-address-book"></span>
<span class="icon icon-x5 fa-address-book"></span>
				

<span class="icon icon-x5 fa-address-book red-bg"></span>
<span class="icon icon-x5 fa-address-book purple-bg"></span>
<span class="icon icon-x5 fa-address-book orange-bg"></span>
<span class="icon icon-x5 fa-address-book blue-bg"></span>
<span class="icon icon-x5 fa-address-book grey-bg"></span>
				

<span class="icon icon-x5 fa-address-book red-gradient"></span>
<span class="icon icon-x5 fa-address-book purple-gradient"></span>
<span class="icon icon-x5 fa-address-book orange-gradient"></span>
<span class="icon icon-x5 fa-address-book blue-gradient"></span>
<span class="icon icon-x5 fa-address-book grey-gradient"></span>

Default

Small

Medium

Large

Extra Large


<div class="row">
    <div class="col-12 col-md-4">
        <h3>Default</h3>
        <span class="icon fa-address-book"></span>
        <span class="icon icon-x2 fa-address-book"></span>
        <span class="icon icon-x3 fa-address-book"></span>
        <span class="icon icon-x4 fa-address-book"></span>
        <span class="icon icon-x5 fa-address-book"></span>
    </div>
    <div class="col-12 col-md-4">
        <h3>Small</h3>
        <span class="icon fa-address-book"></span>
        <span class="icon icon-sm-x2 fa-address-book"></span>
        <span class="icon icon-sm-x3 fa-address-book"></span>
        <span class="icon icon-sm-x4 fa-address-book"></span>
        <span class="icon icon-sm-x5 fa-address-book"></span>
    </div>
    <div class="col-12 col-md-4">
        <h3>Medium</h3>
        <span class="icon fa-address-book"></span>
        <span class="icon icon-md-x2 fa-address-book"></span>
        <span class="icon icon-md-x3 fa-address-book"></span>
        <span class="icon icon-md-x4 fa-address-book"></span>
        <span class="icon icon-md-x5 fa-address-book"></span>
    </div>
    <div class="col-12 col-md-4">
        <h3>Large</h3>
        <span class="icon fa-address-book"></span>
        <span class="icon icon-lg-x2 fa-address-book"></span>
        <span class="icon icon-lg-x3 fa-address-book"></span>
        <span class="icon icon-lg-x4 fa-address-book"></span>
        <span class="icon icon-lg-x5 fa-address-book"></span>
    </div>
    <div class="col-12 col-md-4">
        <h3>Extra Large</h3>
        <span class="icon fa-address-book"></span>
        <span class="icon icon-xl-x2 fa-address-book"></span>
        <span class="icon icon-xl-x3 fa-address-book"></span>
        <span class="icon icon-xl-x4 fa-address-book"></span>
        <span class="icon icon-xl-x5 fa-address-book"></span>
    </div>
</div>
.more-vertical
.more-horizontal
.chevron-left
.chevron-right
.chevron-up
.chevron-down
.close
.plus
.search
.play
.pause
.stop
.record
.record-paused
.send
.camera
.switch-camera
.eye
.zoom-in
.zoom-out
.rotate-left
.rotate-right
.flip
.crop
.image-full
.image-small

<span class="icon icon-x2 more-vertical"></span>
<span class="icon icon-x2 more-horizontal"></span>
<span class="icon icon-x2 chevron-left"></span>
<span class="icon icon-x2 chevron-right"></span>
<span class="icon icon-x2 chevron-up"></span>
<span class="icon icon-x2 chevron-down"></span>
<span class="icon icon-x2 close"></span>
<span class="icon icon-x2 plus"></span>
<span class="icon icon-x2 search"></span>
<span class="icon icon-x2 play"></span>
<span class="icon icon-x2 pause"></span>
<span class="icon icon-x2 stop"></span>
<span class="icon icon-x2 record"></span>
<span class="icon icon-x2 record-paused"></span>
<span class="icon icon-x2 send"></span>
<span class="icon icon-x2 camera"></span>
<span class="icon icon-x2 switch-camera"></span>
<span class="icon icon-x2 eye"></span>