Icon Blocks - Center Aligned

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

Meet Front UI/UX kit
SVG

300+

UI elements

SVG

270+

in 3 categories

SVG

450+

Organized sheets

This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.

Bootstrap 4 Grid

992px

Google Fonts

Poppins

Free Icons

FA Icon Set

Symbol overrides

Easily customizable

                  
                    <!-- Features Section -->
                    <div class="container space-2">
                      <!-- Title -->
                      <div class="w-lg-50 text-center mx-lg-auto mb-5">
                        <span class="d-block text-secondary font-size-1 font-weight-medium text-uppercase">Meet Front UI/UX kit</span>
                      </div>
                      <!-- End Title -->

                      <!-- Features -->
                      <div id="featuresSVG" class="svg-preloader w-lg-60 mx-lg-auto mb-5">
                        <div class="row mx-n2">
                          <div class="col-sm-4 px-2 mb-3 mb-sm-0">
                            <!-- Icon Block -->
                            <div class="border-dashed text-center rounded p-4">
                              <figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
                                <img class="js-svg-injector" src="../../assets/svg/icons/icon-45.svg" alt="SVG"
                                     data-parent="#featuresSVG">
                              </figure>
                              <h3 class="h5 mb-0">300+</h3>
                              <p class="font-size-1 mb-0">UI elements</p>
                            </div>
                            <!-- End Icon Block -->
                          </div>

                          <div class="col-sm-4 px-2 mb-3 mb-sm-0">
                            <!-- Icon Block -->
                            <div class="border-dashed text-center rounded p-4">
                              <figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
                                <img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
                                     data-parent="#featuresSVG">
                              </figure>
                              <h4 class="h5 mb-0">270+</h4>
                              <p class="font-size-1 mb-0">in 3 categories</p>
                            </div>
                            <!-- End Icon Block -->
                          </div>

                          <div class="col-sm-4 px-2">
                            <!-- Icon Block -->
                            <div class="border-dashed text-center rounded p-4">
                              <figure class="ie-height-56 w-100 max-width-8 mx-auto mb-3">
                                <img class="js-svg-injector" src="../../assets/svg/icons/icon-29.svg" alt="SVG"
                                     data-parent="#featuresSVG">
                              </figure>
                              <h4 class="h5 mb-0">450+</h4>
                              <p class="font-size-1 mb-0">Organized sheets</p>
                            </div>
                            <!-- End Icon Block -->
                          </div>
                        </div>
                      </div>
                      <!-- End Features -->

                      <div class="w-lg-50 text-center mx-lg-auto mb-10">
                        <p>This UI kit has all you need to manage your hypothetical customer's smart devices like thermostats, lights, and other appliances that make for a connected modern home.</p>
                      </div>

                      <div class="w-lg-65 text-center mx-lg-auto">
                        <div class="row">
                          <div class="col-6 col-md-3 mb-3 mb-md-0">
                            <!-- Icon Block -->
                            <div class="text-center">
                              <span class="btn btn-icon btn-white shadow-soft mb-3">
                                <span class="fas fa-align-justify btn-icon__inner"></span>
                              </span>
                              <h4 class="h6 mb-0">Bootstrap 4 Grid</h4>
                              <p class="font-size-1">992px</p>
                            </div>
                            <!-- End Icon Block -->
                          </div>

                          <div class="col-6 col-md-3 mb-3 mb-md-0">
                            <!-- Icon Block -->
                            <div class="text-center">
                              <span class="btn btn-icon btn-white shadow-soft mb-3">
                                <span class="fas fa-font btn-icon__inner"></span>
                              </span>
                              <h4 class="h6 mb-0">Google Fonts</h4>
                              <a class="text-secondary font-size-1" href="https://fonts.google.com/specimen/Poppins" target="_blank">
                                Poppins
                                <small class="fas fa-external-link-alt ml-1"></small>
                              </a>
                            </div>
                            <!-- End Icon Block -->
                          </div>

                          <div class="col-6 col-md-3">
                            <!-- Icon Block -->
                            <div class="text-center">
                              <span class="btn btn-icon btn-white shadow-soft mb-3">
                                <span class="fab fa-fonticons-fi btn-icon__inner"></span>
                              </span>
                              <h4 class="h6 mb-0">Free Icons</h4>
                              <a class="text-secondary font-size-1" href="https://fontawesome.com/" target="_blank">
                                FA Icon Set
                                <small class="fas fa-external-link-alt ml-1"></small>
                              </a>
                            </div>
                            <!-- End Icon Block -->
                          </div>

                          <div class="col-6 col-md-3">
                            <!-- Icon Block -->
                            <div class="text-center">
                              <span class="btn btn-icon btn-white shadow-soft mb-3">
                                <span class="fas fa-sync-alt btn-icon__inner"></span>
                              </span>
                              <h4 class="h6 mb-0">Symbol overrides</h4>
                              <p class="font-size-1">Easily customizable</p>
                            </div>
                            <!-- End Icon Block -->
                          </div>
                        </div>
                      </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 #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>