Icon Blocks

Start building your website with dozens of ready-to-use icon blocks.

Icon blocks #1

Professional Design

Achieve virtually any design and layout from within the one template.

Front Strategy

We strive to figure out ways to help your business grow through all platforms.

Unlimited Power

Find what you need in one template and combine features at will.

              
                <!-- Icon Blocks Section -->
                <div class="container space-top-2">
                  <div class="row">
                    <div class="col-md-4 mb-7">
                      <div class="text-center px-lg-3">
                        <span class="btn btn-icon btn-lg btn-soft-danger rounded-circle mb-5">
                          <span class="fab fa-yelp btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
                        </span>
                        <h3 class="h5">Professional Design</h3>
                        <p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
                      </div>
                    </div>

                    <div class="col-md-4 mb-7">
                      <div class="text-center px-lg-3">
                        <span class="btn btn-icon btn-lg btn-soft-primary rounded-circle mb-5">
                          <span class="fas fa-fire btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
                        </span>
                        <h3 class="h5">Front Strategy</h3>
                        <p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
                      </div>
                    </div>

                    <div class="col-md-4 mb-7">
                      <div class="text-center px-lg-3">
                        <span class="btn btn-icon btn-lg btn-soft-success rounded-circle mb-5">
                          <span class="fab fa-whmcs btn-icon__inner fa-2x btn-icon__inner-bottom-minus"></span>
                        </span>
                        <h3 class="h5">Unlimited Power</h3>
                        <p class="mb-md-0">Find what you need in one template and combine features at will.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            

Icon blocks #2

Image Description

Professional Design

Achieve virtually any design and layout from within the one template.

Image Description

Front Strategy

We strive to figure out ways to help your business grow through all platforms.

Image Description

Unlimited Power

Find what you need in one template and combine features at will.

              
                <!-- Process Section -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Process -->
                      <div class="text-center">
                        <div class="position-relative">
                          <div id="SVGcircleProcess1" class="svg-preloader u-indicator-dots min-height-155 mb-2">
                            <!-- Icon -->
                            <span class="text-success btn btn-lg btn-icon mt-7">
                              <span class="fab fa-yelp font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
                            </span>
                            <!-- End Icon -->

                            <!-- SVG Shape -->
                            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
                              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-1.svg" alt="Image Description"
                                   data-parent="#SVGcircleProcess1">
                            </figure>
                            <!-- End SVG Shape -->
                          </div>
                        </div>

                        <h3 class="h5">Professional Design</h3>
                        <p class="mb-md-0">Achieve virtually any design and layout from within the one template.</p>
                      </div>
                      <!-- End Process -->
                    </div>

                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Process -->
                      <div class="text-center">
                        <div class="position-relative">
                          <div id="SVGcircleProcess2" class="svg-preloader u-indicator-dots min-height-155 mb-2">
                            <!-- Icon -->
                            <span class="text-primary btn btn-lg btn-icon mt-7">
                              <span class="fas fa-fire font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
                            </span>
                            <!-- End Icon -->

                            <!-- SVG Shape -->
                            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
                              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-2.svg" alt="Image Description"
                                   data-parent="#SVGcircleProcess2">
                            </figure>
                            <!-- End SVG Shape -->
                          </div>
                        </div>

                        <h3 class="h5">Front Strategy</h3>
                        <p class="mb-md-0">We strive to figure out ways to help your business grow through all platforms.</p>
                        <!-- End Process -->
                      </div>
                    </div>

                    <div class="col-md-4">
                      <!-- Process -->
                      <div class="text-center">
                        <div id="SVGcircleProcess3" class="svg-preloader min-height-155 mb-2">
                          <!-- Icon -->
                          <span class="text-danger btn btn-lg btn-icon mt-7">
                            <span class="fab fa-whmcs font-size-5 btn-icon__inner btn-icon__inner-bottom-minus"></span>
                          </span>
                          <!-- End Icon -->

                          <!-- SVG Shape -->
                            <figure class="w-100 position-absolute top-0 right-0 left-0 z-index-n1">
                              <img class="js-svg-injector" src="../../assets/svg/components/circle-process-3.svg" alt="Image Description"
                                   data-parent="#SVGcircleProcess3">
                            </figure>
                            <!-- End SVG Shape -->
                        </div>

                        <h3 class="h5">Unlimited Power</h3>
                        <p class="mb-md-0">Find what you need in one template and combine features at will.</p>
                        <!-- End Process -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Process Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #3

SVG

Can't find your answer?

We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.

Email us
SVG

Technical questions

Have some technical questions? Hit us on community page or just say hello.

Open ticket
              
                <!-- Contacts Section -->
                <div class="container">
                  <div class="row space-2">
                    <div class="col-lg-6 u-ver-divider u-ver-divider--none-lg mb-7 mb-lg-0">
                      <!-- Contacts Info -->
                      <div class="media pr-lg-9">
                        <figure id="icon15" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
                               data-parent="#icon15">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Can't find your answer?</h3>
                          <p class="mb-1">We want to answer all of your queries. Get in touch and we'll get back to you as soon as we can.</p>
                          <a class="font-size-1" href="#">Email us <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Contacts Info -->
                    </div>

                    <div class="col-lg-6">
                      <!-- Contacts Info -->
                      <div class="media pl-lg-9">
                        <figure id="icon4" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
                               data-parent="#icon4">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Technical questions</h3>
                          <p class="mb-1">Have some technical questions? Hit us on community page or just say hello.</p>
                          <a class="font-size-1" href="#">Open ticket <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Contacts Info -->
                    </div>
                  </div>
                </div>
                <!-- End Contacts Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #4

SVG

Property guides

A must-have read for anyone buying or selling property.

Learn More
SVG

Affordability calculator

Find out how much you could borrow.

Check Now
SVG

Mortgage calculator

Calculate monthly mortgage payments.

Check Now
              
                <!-- Icon Blocks Section -->
                <div class="container space-2">
                  <div class="row justify-content-md-between">
                    <div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-9 mb-lg-0">
                      <!-- Icon Block -->
                      <div class="text-center px-lg-5">
                        <figure id="icon12" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-12.svg" alt="SVG"
                               data-parent="#icon12">
                        </figure>
                        <h3 class="h5">Property guides</h3>
                        <p>A must-have read for anyone buying or selling property.</p>
                        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                          Learn More
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-9 mb-lg-0">
                      <!-- Icon Block -->
                      <div class="text-center px-lg-5">
                        <figure id="icon10" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-10.svg" alt="SVG"
                               data-parent="#icon10">
                        </figure>
                        <h3 class="h5">Affordability calculator</h3>
                        <p>Find out how much you could borrow.</p>
                        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                          Check Now
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4">
                      <!-- Icon Block -->
                      <div class="text-center px-lg-5">
                        <figure id="icon11" class="svg-preloader ie-height-72 max-width-10 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-11.svg" alt="SVG"
                               data-parent="#icon11">
                        </figure>
                        <h3 class="h5">Mortgage calculator</h3>
                        <p>Calculate monthly mortgage payments.</p>
                        <a class="btn btn-sm btn-soft-primary transition-3d-hover" href="#">
                          Check Now
                          <span class="fas fa-angle-right ml-2"></span>
                        </a>
                      </div>
                      <!-- End Icon Block -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #5

SVG

Address

153 Williamson Plaza, 09514

SVG

Email

support@htmlstream.com

SVG

Phone Number

+1 (062) 109-9222

SVG

Fax

+1 (062) 109-9223

              
                <!-- Contacts Info Section -->
                <div class="clearfix space-2">
                  <div class="row no-gutters">
                    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
                      <!-- Contacts Info -->
                      <div class="text-center py-5">
                        <figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
                               data-parent="#icon8">
                        </figure>
                        <h2 class="h6 mb-0">Address</h2>
                        <p class="mb-0">153 Williamson Plaza, 09514</p>
                      </div>
                      <!-- End Contacts Info -->
                    </div>

                    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
                      <!-- Contacts Info -->
                      <div class="text-center py-5">
                        <figure id="icon15" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-15.svg" alt="SVG"
                               data-parent="#icon15">
                        </figure>
                        <h3 class="h6 mb-0">Email</h3>
                        <p class="mb-0">support@htmlstream.com</p>
                      </div>
                      <!-- End Contacts Info -->
                    </div>

                    <div class="col-sm-6 col-lg-3 u-ver-divider u-ver-divider--none-lg">
                      <!-- Contacts Info -->
                      <div class="text-center py-5">
                        <figure id="icon16" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-16.svg" alt="SVG"
                               data-parent="#icon16">
                        </figure>
                        <h3 class="h6 mb-0">Phone Number</h3>
                        <p class="mb-0">+1 (062) 109-9222</p>
                      </div>
                      <!-- End Contacts Info -->
                    </div>

                    <div class="col-sm-6 col-lg-3">
                      <!-- Contacts Info -->
                      <div class="text-center py-5">
                        <figure id="icon17" class="svg-preloader ie-height-56 max-width-8 mx-auto mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-17.svg" alt="SVG"
                               data-parent="#icon17">
                        </figure>
                        <h3 class="h6 mb-0">Fax</h3>
                        <p class="mb-0">+1 (062) 109-9223</p>
                      </div>
                      <!-- End Contacts Info -->
                    </div>
                  </div>
                </div>
                <!-- End Contacts Info Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #6

SVG

This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.

Learn More
SVG

Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.

Learn More
SVG

The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

Learn More
SVG

Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.

Learn More
SVG

Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.

Learn More
SVG

We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.

Learn More
SVG

It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.

Learn More
SVG

We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.

Learn More
SVG

As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.

Learn More

              
                <!-- Features Section -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon2" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
                               data-parent="#icon2">
                        </figure>
                        <p>This is where we sit down, grab a cup of coffee and dial in the details. Understanding the task at hand and ironing out the wrinkles is a key point.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon1" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
                               data-parent="#icon1">
                        </figure>
                        <p>Now that we've aligned the details, it's time to get things mapped out and organized. This part is really crucial in keeping the project in line to completion.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon3" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
                               data-parent="#icon3">
                        </figure>
                        <p>The time has come to bring those ideas and plans to life. This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon4" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-4.svg" alt="SVG"
                               data-parent="#icon4">
                        </figure>
                        <p>Whether through commerce or just an experience to tell your brand's story, the time has come to start using development languages that fit your projects needs.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon5" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
                               data-parent="#icon5">
                        </figure>
                        <p>Now that your brand is all dressed up and ready to party, it's time to release it to the world. By the way, let's celebrate already.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon6" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-6.svg" alt="SVG"
                               data-parent="#icon6">
                        </figure>
                        <p>We get it, you're busy and it is important that someone keep up with marketing and driving people to your brand. We've got you covered.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon7" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-7.svg" alt="SVG"
                               data-parent="#icon7">
                        </figure>
                        <p>It's important to stay detail oriented with every project we tackle. Staying focused allows us to turn every project we complete into something we love.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon8" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-8.svg" alt="SVG"
                               data-parent="#icon8">
                        </figure>
                        <p>We strive to embrace and drive change in our industry which allows us to keep our clients relevant and ready to adapt.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>

                    <div class="col-sm-6 col-lg-4 mb-7 mb-sm-9 mb-lg-0">
                      <!-- Icon Block -->
                      <div class="pr-lg-4">
                        <figure id="icon9" class="svg-preloader ie-height-56 max-width-8 mb-3">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
                               data-parent="#icon9">
                        </figure>
                        <p>As creatives, it's important that we strive to do work outside of obligation. This lets us stay ahead of the curve for our clients and internal projects.</p>
                        <a href="#">Learn More</a>
                      </div>
                      <!-- End Icon Block -->
                    </div>
                  </div>

                  <!-- Divider -->
                  <div class="w-65 w-lg-50 mx-auto">
                    <hr class="mt-0 mb-9">
                  </div>
                  <!-- End Divider -->

                  <div class="text-center">
                    <a href="#" class="btn btn-primary transition-3d-hover">See all Features</a>
                  </div>
                </div>
                <!-- End Features Section -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #7

Call us

+1 (062) 109-9222

Email us

support@htmlstream.com

Address

153 Williamson Plaza, Maggieberg
              
                <!-- Icon Blocks -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Contacts -->
                      <div class="media">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
                          <span class="fas fa-phone btn-icon__inner"></span>
                        </span>
                        <div class="media-body">
                          <h4 class="h6 text-secondary font-weight-normal mb-0">Call us</h4>
                          <span class="d-block font-size-1">+1 (062) 109-9222</span>
                        </div>
                      </div>
                      <!-- End Contacts -->
                    </div>

                    <div class="col-md-4 mb-7 mb-md-0">
                      <!-- Contacts -->
                      <div class="media">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
                          <span class="fas fa-envelope btn-icon__inner"></span>
                        </span>
                        <div class="media-body">
                          <h4 class="h6 text-secondary font-weight-normal mb-0">Email us</h4>
                          <span class="d-block font-size-1">support@htmlstream.com</span>
                        </div>
                      </div>
                      <!-- End Contacts -->
                    </div>

                    <div class="col-md-4">
                      <!-- Contacts -->
                      <div class="media">
                        <span class="btn btn-icon btn-soft-primary rounded-circle mr-3">
                          <span class="fas fa-map-marker-alt btn-icon__inner"></span>
                        </span>
                        <div class="media-body">
                          <h4 class="h6 text-secondary font-weight-normal mb-0">Address</h4>
                          <span class="d-block font-size-1">153 Williamson Plaza, Maggieberg</span>
                        </div>
                      </div>
                      <!-- End Contacts -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks -->
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

                <!-- JS Front -->
                <script src="../../assets/js/components/hs.svg-injector.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  $(window).on('load', function () {
                    // initialization of svg injector module
                    $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                  });
                </script>
              
            

Icon blocks #8

              
                <!-- Icon Blocks -->
                <div class="container space-2">
                  <div class="row">
                    <div class="col-md-6 col-lg-4">
                      <!-- List Group -->
                      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-envelope list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Email:</span>
                              <a href="#">natalie.curtis@gmail.com</a>
                            </div>
                          </div>
                        </li>
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-link list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Web page:</span>
                              <a href="#">www.htmlstream.com/natalie</a>
                            </div>
                          </div>
                        </li>
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-map-marker-alt list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Location:</span>
                              <a href="#">London, England</a>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- End List Group -->
                    </div>

                    <div class="col-md-6 col-lg-4">
                      <!-- List Group -->
                      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-birthday-cake list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Birthday:</span>
                              <span class="d-block text-muted">May 3, 1986</span>
                            </div>
                          </div>
                        </li>
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-building list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Organization:</span>
                              <a href="#">Pixeel Ltd.</a>
                            </div>
                          </div>
                        </li>
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-mobile-alt list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Phone number:</span>
                              <a href="#">+44 (0161) 347 8854</a>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- End List Group -->
                    </div>

                    <div class="col-md-6 col-lg-4">
                      <!-- List Group -->
                      <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-globe list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Language:</span>
                              <span class="d-block text-muted">English, French</span>
                            </div>
                          </div>
                        </li>
                        <li class="list-group-item pt-0 pb-4">
                          <div class="media">
                            <span class="fas fa-tags list-group-icon mr-3"></span>
                            <div class="media-body text-lh-sm">
                              <span class="d-block mb-1">Skills:</span>
                              <a href="#">HTML5,</a>
                              <a href="#">CSS3,</a>
                              <a href="#">JavaScript,</a>
                              <a href="#">jQuery</a>
                            </div>
                          </div>
                        </li>
                      </ul>
                      <!-- End List Group -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks -->
              
            

Icon blocks #9

              
                <!-- Social Profiles -->
                <div class="card mb-4">
                  <div class="card-header pt-4 pb-3 px-0 mx-4">
                    <h3 class="h6 mb-0">Social Profiles</h3>
                  </div>

                  <div class="card-body pt-3 pb-4 px-4">
                    <!-- Social Profiles -->
                    <a class="media mb-4" href="#">
                      <div class="u-sm-avatar mr-3">
                        <img class="img-fluid" src="../../assets/img/160x160/img18.png" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <span class="d-block text-dark">Behance</span>
                        <small class="d-block text-secondary">1.2k followers</small>
                      </div>
                    </a>
                    <!-- End Social Profiles -->

                    <!-- Social Profiles -->
                    <a class="media mb-4" href="#">
                      <div class="u-sm-avatar mr-3">
                        <img class="img-fluid" src="../../assets/img/160x160/img21.png" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <span class="d-block text-dark">Dribbble</span>
                        <small class="d-block text-secondary">4.5k followers</small>
                      </div>
                    </a>
                    <!-- End Social Profiles -->

                    <!-- Social Profiles -->
                    <a class="media mb-4" href="#">
                      <div class="u-sm-avatar mr-3">
                        <img class="img-fluid" src="../../assets/img/160x160/img19.png" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <span class="d-block text-dark">Twitter</span>
                        <small class="d-block text-secondary">2.7k followers</small>
                      </div>
                    </a>
                    <!-- End Social Profiles -->

                    <!-- Social Profiles -->
                    <a class="media" href="#">
                      <div class="u-sm-avatar mr-3">
                        <img class="img-fluid" src="../../assets/img/160x160/img20.png" alt="Image Description">
                      </div>
                      <div class="media-body">
                        <span class="d-block text-dark">Facebook</span>
                        <small class="d-block text-secondary">3k followers</small>
                      </div>
                    </a>
                    <!-- End Social Profiles -->
                  </div>
                </div>
                <!-- End Social Profiles -->
              
            

Icon blocks #10

SVG

Responsive

Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.

Explore now
SVG

Customizable

Front template can be easily customized with its cutting-edge components and features.

Explore now
SVG

Premium

Front is not only for developers but also for designers, and includes a Sketch file.

Explore now
SVG

Documentation v2.0

Every component and plugin is well documented with live examples.

Explore now
              
                <!-- Icon Blocks Section -->
                <div class="container space-2">
                  <div class="row justify-content-lg-center">
                    <div class="col-md-6 col-lg-5 mb-7">
                      <!-- Icon Blocks -->
                      <div class="media pr-lg-5">
                        <figure id="icon9" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-9.svg" alt="SVG"
                               data-parent="#icon9">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Responsive</h3>
                          <p class="mb-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
                          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-md-6 col-lg-5 mb-7">
                      <!-- Icon Blocks -->
                      <div class="media pl-lg-5">
                        <figure id="icon3" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-3.svg" alt="SVG"
                               data-parent="#icon3">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Customizable</h3>
                          <p class="mb-1">Front template can be easily customized with its cutting-edge components and features.</p>
                          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="w-100"></div>

                    <div class="col-md-6 col-lg-5 mb-7 mb-lg-0">
                      <!-- Icon Blocks -->
                      <div class="media pr-lg-5">
                        <figure id="icon5" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
                               data-parent="#icon5">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Premium</h3>
                          <p class="mb-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
                          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>

                    <div class="col-md-6 col-lg-5">
                      <!-- Icon Blocks -->
                      <div class="media pl-lg-5">
                        <figure id="icon2" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                          <img class="js-svg-injector" src="../../assets/svg/icons/icon-2.svg" alt="SVG"
                               data-parent="#icon2">
                        </figure>
                        <div class="media-body">
                          <h3 class="h5">Documentation <span class="badge badge-success font-weight-medium badge-pill ml-1">v2.0</span></h3>
                          <p class="mb-1">Every component and plugin is well documented with live examples.</p>
                          <a class="font-size-1" href="#">Explore now <span class="fas fa-angle-right align-middle ml-2"></span></a>
                        </div>
                      </div>
                      <!-- End Icon Blocks -->
                    </div>
                  </div>
                </div>
                <!-- End Icon Blocks Section -->
              
            

Icon blocks #11

What we do?

More control and greater overview from simple, powerful features

This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.

SVG

Marketing

Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.

SVG

Clean design

Front template can be easily customized with its cutting-edge components and features.

SVG

Social services beta

Front is not only for developers but also for designers, and includes a Sketch file.

SVG

Creative ideas

Every component and plugin is well documented with live examples.

              
                <!-- What We Do Section -->
                <div class="container space-2">
                  <div class="row justify-content-lg-between">
                    <div class="col-lg-4 mb-7 mb-lg-0">
                      <!-- Title -->
                      <small class="text-secondary text-uppercase font-weight-medium mb-2">What we do?</small>
                      <h3 class="font-weight-medium">More control and greater overview from simple, powerful features</h3>
                      <p>This is where we really begin to visualize your napkin sketches and make them into beautiful pixels.</p>
                      <!-- End Title -->
                    </div>

                    <div class="col-lg-7">
                      <div class="row">
                        <div class="col-sm-6 mb-3">
                          <!-- Icon Blocks -->
                          <figure id="icon26" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
                                 data-parent="#icon26">
                          </figure>
                          <h4 class="h5">Marketing</h4>
                          <p class="font-size-1">Front is an incredibly beautiful, fully responsive, and mobile-first projects on the web.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-sm-6 mb-3">
                          <!-- Icon Blocks -->
                          <figure id="icon27" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-27.svg" alt="SVG"
                                 data-parent="#icon27">
                          </figure>
                          <h4 class="h5">Clean design</h4>
                          <p class="font-size-1">Front template can be easily customized with its cutting-edge components and features.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="w-100"></div>

                        <div class="col-sm-6 mb-3 mb-sm-0">
                          <!-- Icon Blocks -->
                          <figure id="icon25" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-25.svg" alt="SVG"
                                 data-parent="#icon25">
                          </figure>
                          <h4 class="h5">Social services <span class="badge badge-success font-weight-medium badge-pill ml-1">beta</span></h4>
                          <p class="font-size-1">Front is not only for developers but also for designers, and includes a Sketch file.</p>
                          <!-- End Icon Blocks -->
                        </div>

                        <div class="col-sm-6">
                          <!-- Icon Blocks -->
                          <figure id="icon28" class="svg-preloader ie-height-56 w-100 max-width-8 mb-3">
                            <img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
                                 data-parent="#icon28">
                          </figure>
                          <h4 class="h5">Creative ideas</h4>
                          <p class="font-size-1">Every component and plugin is well documented with live examples.</p>
                          <!-- End Icon Blocks -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End What We Do Section -->