Icons

Bootstrap icons

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

Bootstrap icons usage is a quick tutorial which describes the proper way of using Font Awesome icons in Bootstrap framework.

MDB uses a powerful set of icons called Font Awesome.

One Font, 1480 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn't require JavaScript.

Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

Free, as in Speech

Font Awesome is completely free for commercial use.

CSS Control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Perfect on Retina Displays

Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Accessibility-minded

Font Awesome loves screen readers and helps make your icons accessible on the web.

Basic usage

Example: basic icon fa-camera-retro

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the <i> tag for brevity, but using a <span> is more semantically correct).

Edit in sandbox 
        
            

                  <i class="fas fa-camera-retro"></i> fa-camera-retro
  • Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.

Larger icons

To increase icon sizes relative to their container, use the fa-xs, fa-sm, fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x, fa-10x classes.

Edit in sandbox 
        
            

                  <i class="fas fa-camera fa-xs"></i>
                  <i class="fas fa-camera fa-sm"></i>
                  <i class="fas fa-camera fa-lg"></i>
                  <i class="fas fa-camera fa-2x"></i>
                  <i class="fas fa-camera fa-3x"></i>
                  <i class="fas fa-camera fa-4x"></i>
                  <i class="fas fa-camera fa-5x"></i>
                  <i class="fas fa-camera fa-6x"></i>
                  <i class="fas fa-camera fa-7x"></i>
                  <i class="fas fa-camera fa-8x"></i>
                  <i class="fas fa-camera fa-9x"></i>
                  <i class="fas fa-camera fa-10x"></i>
  • If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Colors

amber-text

red-text

indigo-text

cyan-text

green-text

To see all colors options, go to colors list.

Edit in sandbox 
        
            

                  <p><i class="fas fa-bolt fa-3x amber-text pr-3" aria-hidden="true"></i> amber-text</p>
                  <p><i class="fas fa-bug fa-3x red-text pr-3" aria-hidden="true"></i> red-text</p>
                  <p><i class="fas fa-heart fa-3x indigo-text pr-3" aria-hidden="true"></i> indigo-text</p>
                  <p><i class="fas fa-bell fa-3x cyan-text pr-3" aria-hidden="true"></i> cyan-text</p>
                  <p><i class="fas fa-birthday-cake fa-3x green-text pr-3" aria-hidden="true"></i> green-text</p>

Margins

ml-3

mr-3

mx-4

my-4

m-5

You can add spacing to your icons from the top, bottom, right, left or all sides. Look at here to see all possibilities.

Edit in sandbox 
        
            

                  <p><i class="fas fa-gift fa-2x pink-text ml-3" aria-hidden="true"></i> ml-3</p>
                  <p><i class="fas fa-gift fa-2x pink-text mr-3" aria-hidden="true"></i> mr-3</p>
                  <p><i class="fas fa-gift fa-2x pink-text mx-4" aria-hidden="true"></i> mx-4</p>
                  <p><i class="fas fa-gift fa-2x pink-text my-4" aria-hidden="true"></i> my-4</p>
                  <p><i class="fas fa-gift fa-2x pink-text m-5" aria-hidden="true"></i> m-5</p>

Fixed Width Icons

With this classes you can have icons with fixed-width support styling.

facebook
twitter
instagram
linkedin
pinterest
Edit in sandbox 
        
            

            <div style="font-size: 2rem;">
              <div><i class="fab fa-facebook-f fa-fw blue-text"></i> facebook</div>
              <div><i class="fab fa-twitter fa-fw blue-text"></i> twitter</div>
              <div><i class="fab fa-instagram fa-fw pink-text"></i> instagram</div>
              <div><i class="fab fa-linkedin fa-fw blue-text"></i> linkedin</div>
              <div><i class="fab fa-pinterest fa-fw red-text"></i> pinterest</div>
            </div>

Icons in list

You can use icon with full-width in list.

  • List icons can
  • be used to
  • replace bullets
  • in lists
Edit in sandbox 
        
            

            <ul class="fa-ul">
              <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
              <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
              <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
              <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
            </ul>
  1. List icons can
  2. be used to
  3. replace bullets
  4. in lists
Edit in sandbox 
        
            

            <ol class="fa-ul">
              <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
              <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
              <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
              <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
            </ol>

Rotating Icons

With these classes you can rotate your icons.

Edit in sandbox 
        
            

            <div class="fa-3x">
              <i class="fas fa-bath"></i>
              <i class="fas fa-bath fa-rotate-90"></i>
              <i class="fas fa-bath fa-rotate-180"></i>
              <i class="fas fa-bath fa-rotate-270"></i>
              <i class="fas fa-bath fa-flip-horizontal"></i>
              <i class="fas fa-bath fa-flip-vertical"></i>
            </div>

Animating Icons

With these classes you can animation your icons.

Edit in sandbox 
        
            

            <i class="fas fa-spinner fa-spin"></i>
            <i class="fas fa-circle-notch fa-spin"></i>
            <i class="fas fa-sync fa-spin"></i>
            <i class="fas fa-cog fa-spin"></i>
            <i class="fas fa-spinner fa-pulse"></i>
            <i class="fas fa-star-christmas fa-spin"></i>
            <i class="far fa-smile-beam fa-spin"></i>

Stacking icons

To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect. You can even throw larger icon classes on the parent to get further control of sizing.

Edit in sandbox 
        
            

            <i class="far fa-circle fa-2x"></i>
            <span class="fa-stack">
              <i class="far fa-circle fa-stack-2x"></i>
              <i class="fas fa-skull-crossbones fa-stack-1x"></i>
            </span>

            <span class="fa-stack fa-2x">
              <i class="fas fa-square fa-stack-2x fa-inverse"></i>
              <i class="fab fa-twitter fa-stack-1x"></i>
            </span>

            <span class="fa-stack fa-2x">
              <i class="fas fa-square fa-stack-2x"></i>
              <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
            </span>

            <span class="fa-stack fa-2x">
              <i class="fas fa-circle fa-stack-2x"></i>
              <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
            </span>
            <span class="fa-stack fa-2x">
              <i class="fas fa-square fa-stack-2x"></i>
              <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
            </span>
            <span class="fa-stack fa-4x">
              <i class="fas fa-square fa-stack-2x"></i>
              <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
            </span>
            <span class="fa-stack fa-2x">
              <i class="fas fa-camera fa-stack-1x"></i>
              <i class="fas fa-ban fa-stack-2x" style="color:red"></i>
            </span>

Bordered + Pulled Icons

Occasionally you might want to wrap text around an icon or give it some visual distinction with a border. Here’s how with the support styling we’ve included.

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
Edit in sandbox 
        
            

            <i class="fas fa-quote-left fa-2x fa-pull-left"></i>
            Gatsby believed in the green light, the orgastic future that year by year recedes before us.
            It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
            And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
Edit in sandbox 
        
            

            <i class="fas fa-arrow-right fa-2x fa-pull-right fa-border"></i>
            Gatsby believed in the green light, the orgastic future that year by year recedes before us.
            It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
            And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Buttons

It's good to improve the appearance of your buttons with icons. Look at here to see the other buttons options.

Edit in sandbox 
        
            

            <a class="btn-floating btn-lg purple-gradient"><i class="fas fa-bolt"></i></a>
            <button type="button" class="btn btn-info btn-rounded btn-lg">Button<i class="fas fa-heart ml-2" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-outline-default btn-rounded waves-effect"><i class="far fa-gem mr-2"
                aria-hidden="true"></i>Button</button>
            <button type="button" class="btn btn-indigo btn-md">Button<i class="fas fa-thumbs-up ml-2" aria-hidden="true"></i></button>
            <button type="button" class="btn btn-outline-warning waves-effect btn-sm"><i class="fas fa-user mr-2"
                aria-hidden="true"></i>Button</button>

Features

Icons are very useful when you want to show the features of something. Look at here to see more our features sections.

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Edit in sandbox 
        
            

            <!--Section: Features v.4-->
            <section>

              <!--Section heading-->
              <h2 class="h1 py-5 font-weight-bold text-center">Why is it so great?</h2>
              <!--Section description-->
              <p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam.</p>

              <!--Grid row-->
              <div class="row">

                <!--Grid column-->
                <div class="col-md-4">

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-flag-checkered deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">International</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-flask deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">Experimental</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-glass-martini deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">Relaxing</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4 mb-2 center-on-small-only flex-center">
                  <img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.webp" alt="" class="z-depth-0">
                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4">

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-heart deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">Beloved</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-bolt deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">Rapid</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                  <!--Grid row-->
                  <div class="row mb-2">
                    <div class="col-2">
                      <i class="fas fa-2x fa-magic deep-purple-text"></i>
                    </div>
                    <div class="col-10 text-left">
                      <h5 class="font-weight-bold">Magical</h5>
                      <p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
                        nam, aperiam minima assumenda
                        deleniti hic.</p>
                    </div>
                  </div>
                  <!--Grid row-->

                </div>
                <!--Grid column-->

              </div>
              <!--Grid row-->

            </section>
            <!--/Section: Features v.4-->

Full list

To see the full list of available icons click the button below

Icons list