Icon Blocks

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

Left aligned #1

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>
                  
                

Left aligned #2

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>
                  
                

Left aligned #3

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>
                  
                

Left aligned #4

                  
                    <!-- 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 -->
                  
                

Left aligned #5

SVG

Flexible planning

Front Software's rich planning features enable your team to flexibly plan.

SVG

Accurate estimations

Use story points, hours, t-shirt sizes, or your own estimation technique.

SVG

Value-driven prioritization

Order user stories, issues, and bugs in your product backlog with simple dragging.

SVG

Transparent execution

Front Software brings a new level of transparency to your team's work.

SVG

Actionable results

Extensive reporting functionality gives your team critical insight into their agile process.

SVG

Scalable evolution

Front Software is agile project management designed for any teams.

Start free trial. * No credit card required.

                  
                    <!-- Features Section -->
                    <div class="container space-2 space-lg-3">
                      <!-- Icon Blocks -->
                      <div class="row mb-9">
                        <div class="col-sm-6 col-md-4 mb-7">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-29" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-29.svg" alt="SVG"
                                   data-parent="#iconExample15-29">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Flexible planning</h4>
                            </div>
                          </div>
                          <p>Front Software's rich planning features enable your team to flexibly plan.</p>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-md-4 mb-7">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-26" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-26.svg" alt="SVG"
                                   data-parent="#iconExample15-26">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Accurate estimations</h4>
                            </div>
                          </div>
                          <p>Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-md-4 mb-7 mb-md-0">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-31" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-31.svg" alt="SVG"
                                   data-parent="#iconExample15-31">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Value-driven prioritization</h4>
                            </div>
                          </div>
                          <p>Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-md-4 mb-7 mb-md-0">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-37" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-37.svg" alt="SVG"
                                   data-parent="#iconExample15-37">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Transparent execution</h4>
                            </div>
                          </div>
                          <p>Front Software brings a new level of transparency to your team's work.</p>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-md-4 mb-7 mb-md-0">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-5" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-5.svg" alt="SVG"
                                   data-parent="#iconExample15-5">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Actionable results</h4>
                            </div>
                          </div>
                          <p>Extensive reporting functionality gives your team critical insight into their agile process.</p>
                          <!-- End Icon Block -->
                        </div>

                        <div class="col-sm-6 col-md-4">
                          <!-- Icon Block -->
                          <div class="media align-items-center mb-2">
                            <figure id="iconExample15-28" class="svg-preloader ie-height-40 w-100 max-width-6 mr-3">
                              <img class="js-svg-injector" src="../../assets/svg/icons/icon-28.svg" alt="SVG"
                                   data-parent="#iconExample15-28">
                            </figure>
                            <div class="media-body">
                              <h4 class="h6 mb-0">Scalable evolution</h4>
                            </div>
                          </div>
                          <p>Front Software is agile project management designed for any teams.</p>
                          <!-- End Icon Block -->
                        </div>
                      </div>
                      <!-- End Icon Blocks -->

                      <div class="text-center">
                        <div class="mb-3">
                          <a class="btn btn-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mx-1" href="#">Sign up and Start Building</a>
                          <a class="btn btn-outline-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mx-1" href="#">Let's Talk</a>
                        </div>

                        <p class="small">Start free trial. * No credit card required.</p>
                      </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>
                  
                

Left aligned #6

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 -->
                  
                
                  
                    <!-- 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>
                  
                

Left aligned #7

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 -->
                  
                

Left aligned #8

Go Front with ease.

Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.

Flexible planning

Front Software's rich planning features enable your team to flexibly plan.

Accurate estimations

Use story points, hours, t-shirt sizes, or your own estimation technique.

Value-driven prioritization

Order user stories, issues, and bugs in your product backlog with simple dragging.

Transparent execution

Front Software brings a new level of transparency to your team's work.

Actionable results

Extensive reporting functionality gives your team critical insight into their agile process.

Scalable evolution Coming soon

Front Software is agile project management designed for any teams.

Start free trial. * No credit card required.

Image Description
Image Description
Image Description
                  
                    <!-- Icons Section -->
                    <div class="position-relative gradient-overlay-half-primary-v3 overflow-hidden">
                      <div class="container space-top-2 space-top-lg-3">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-9">
                          <h2 class="text-white font-weight-medium">Go Front with ease.</h2>
                          <p class="text-white-70">Whether you’re a seasoned agile expert, or just getting started, Jira Software unlocks the power of agile.</p>
                        </div>
                        <!-- End Title -->

                        <!-- Icon Blocks -->
                        <div class="w-lg-80 mx-lg-auto mb-11">
                          <div class="row mb-9">
                            <div class="col-6 col-md-4 mb-7">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-align-center"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Flexible planning</h4>
                              <p class="text-white-70">Front Software's rich planning features enable your team to flexibly plan.</p>
                              <!-- End Icon Block -->
                            </div>

                            <div class="col-6 col-md-4 mb-7">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-code-branch"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Accurate estimations</h4>
                              <p class="text-white-70">Use story points, hours, t-shirt sizes, or your own estimation technique.</p>
                              <!-- End Icon Block -->
                            </div>

                            <div class="col-6 col-md-4 mb-7 mb-md-0">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-shapes"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Value-driven prioritization</h4>
                              <p class="text-white-70">Order user stories, issues, and bugs in your product backlog with simple dragging.</p>
                              <!-- End Icon Block -->
                            </div>

                            <div class="col-6 col-md-4 mb-7 mb-md-0">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-clone"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Transparent execution</h4>
                              <p class="text-white-70">Front Software brings a new level of transparency to your team's work.</p>
                              <!-- End Icon Block -->
                            </div>

                            <div class="col-6 col-md-4">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-check-circle"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Actionable results</h4>
                              <p class="text-white-70">Extensive reporting functionality gives your team critical insight into their agile process.</p>
                              <!-- End Icon Block -->
                            </div>

                            <div class="col-6 col-md-4">
                              <!-- Icon Block -->
                              <span class="d-block text-white font-size-2 mb-3">
                                <span class="fas fa-compress"></span>
                              </span>
                              <h4 class="h6 text-white font-weight-semi-bold mb-3">Scalable evolution <span class="badge badge-warning font-weight-medium badge-pill ml-1">Coming soon</span></h4>
                              <p class="text-white-70">Front Software is agile project management designed for any teams.</p>
                              <!-- End Icon Block -->
                            </div>
                          </div>

                          <!-- Buttons -->
                          <div class="text-center">
                            <div class="mb-3">
                              <a class="btn btn-sm btn-white btn-wide text-primary transition-3d-hover" href="#">Sign up and Start Building</a>
                              <small class="d-block d-sm-inline-block text-white-70 my-3 my-sm-0 mx-sm-3">or</small>
                              <a class="btn btn-sm btn-indigo btn-wide transition-3d-hover" href="#">Talk to our Experts</a>
                            </div>
                            <p class="small text-white-70">Start free trial. * No credit card required.</p>
                          </div>
                          <!-- End Buttons -->
                        </div>
                        <!-- End Icon Blocks -->

                        <div class="w-85 w-md-75 w-lg-65 text-center mx-auto">
                          <img class="img-fluid" src="../../assets/svg/illustrations/ai-creation.svg" alt="Image Description">
                        </div>
                      </div>

                      <!-- SVG Background Shape -->
                      <figure class="w-35 position-absolute top-0 right-0 z-index-n1">
                        <div class="mt-n11 mr-n11">
                          <img class="js-svg-injector" src="../../assets/svg/components/half-circle-3.svg" alt="Image Description"
                               data-parent="#SVGHero">
                        </div>
                      </figure>
                      <figure class="w-25 position-absolute bottom-0 left-0 z-index-n1">
                        <div class="mb-n11 ml-n11">
                          <img class="js-svg-injector" src="../../assets/svg/components/half-circle-2.svg" alt="Image Description"
                               data-parent="#SVGHero">
                        </div>
                      </figure>
                      <!-- End SVG Background Shape -->
                    </div>
                    <!-- End Icons 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>
                  
                

Left aligned #9

SVG

Veteran Hiring Commitment

Committed to helping America's military veterans find work.

SVG

Social Responsibility Pledge

Formal programs or foundation to give back to communities.

SVG

Diversity Commitment

Has programs that support a diverse and inclusive workforce.

SVG

Pledge to Thrive

Taking steps to prioritize employee well-being.

                  
                    <div class="row">
                      <div class="col-sm-6 mb-5">
                        <!-- Icon Block -->
                        <div class="media">
                          <figure id="iconExample21" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/medal.svg" alt="SVG"
                                 data-parent="#iconExample21">
                          </figure>
                          <div class="media-body">
                            <h3 class="h6 mb-1">Veteran Hiring Commitment</h3>
                            <p>Committed to helping America's military veterans find work.</p>
                          </div>
                        </div>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-sm-6 mb-5">
                        <!-- Icon Block -->
                        <div class="media">
                          <figure id="iconExample25" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/social-responsibility.svg" alt="SVG"
                                 data-parent="#iconExample25">
                          </figure>
                          <div class="media-body">
                            <h4 class="h6 mb-1">Social Responsibility Pledge</h4>
                            <p>Formal programs or foundation to give back to communities.</p>
                          </div>
                        </div>
                        <!-- End Icon Block -->
                      </div>

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

                      <div class="col-sm-6 mb-5 mb-sm-0">
                        <!-- Icon Block -->
                        <div class="media">
                          <figure id="iconExample7" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/diversity.svg" alt="SVG"
                                 data-parent="#iconExample7">
                          </figure>
                          <div class="media-body">
                            <h4 class="h6 mb-1">Diversity Commitment</h4>
                            <p>Has programs that support a diverse and inclusive workforce.</p>
                          </div>
                        </div>
                        <!-- End Icon Block -->
                      </div>

                      <div class="col-sm-6">
                        <!-- Icon Block -->
                        <div class="media">
                          <figure id="iconExample29" class="svg-preloader ie-height-56 w-100 max-width-8 mr-4">
                            <img class="js-svg-injector" src="../../assets/svg/illustrations/growth.svg" alt="SVG"
                                 data-parent="#iconExample29">
                          </figure>
                          <div class="media-body">
                            <h4 class="h6 mb-1">Pledge to Thrive</h4>
                            <p>Taking steps to prioritize employee well-being.</p>
                          </div>
                        </div>
                        <!-- End Icon Block -->
                      </div>
                    </div>
                  
                
                  
                    <!-- 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>