---
title: Icons
---

{{#extend "layout-default"}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/uikit/icons.css">
  {{/content}}


  {{#content "fonts" mode="prepend"}}
    <link rel="stylesheet" href="{{global}}/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="{{global}}/fonts/7-stroke/7-stroke.css">
    <link rel="stylesheet" href="{{global}}/fonts/ionicons/ionicons.css">
    <link rel="stylesheet" href="{{global}}/fonts/mfglabs/mfglabs.css">
    <link rel="stylesheet" href="{{global}}/fonts/open-iconic/open-iconic.css">
    <link rel="stylesheet" href="{{global}}/fonts/themify/themify.css">
    <link rel="stylesheet" href="{{global}}/fonts/weather-icons/weather-icons.css">
    <link rel="stylesheet" href="{{global}}/fonts/glyphicons/glyphicons.css">
    <link rel="stylesheet" href="{{global}}/fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="{{global}}/fonts/octicons/octicons.css">
  {{/content}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-content">
        <div class="py-15">
          <div class="text-center">
            <h3>Browse 12 icons sets.</h3>
            <p class="title-desc">Web icons / Font awesome / 7-Stroke / Brand Icons / Glyphicons / Ion
              Icons / Material Design / Mfglabs / Open Iconic / Themify / Weather
              icons / Octicons</p>
          </div>
        </div>
        <!-- Panel -->
        <div class="panel">
          <div class="panel-body container-fluid">
            <div class="row row-lg">
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">web-icons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-dashboard" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-inbox" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-cloud" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-bell" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-book" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-bookmark" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-tag" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-library" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-share" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-reply" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-refresh" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-move" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-chat" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-envelope" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-user" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-menu" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-layout" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wb-fullscreen" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/web-icons.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">font-awesome</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-glass" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-music" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-search" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-envelope-o" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-heart" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-star" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-user" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-film" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-check" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-remove" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-signal" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-gear" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-home" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-road" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-download" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-inbox" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-refresh" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon fa-lock" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/font-awesome.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">7-stroke</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-cash" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-close" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-bluetooth" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-way" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-wristwatch" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-id" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-volume" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-users" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-switch" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-scissors" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-wallet" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-safe" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-video" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-upload" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-umbrella" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-tools" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-trash" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon pe-unlock" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/7-stroke.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">brand-icons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-behance" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-blogger" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-delicious" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-deviantart" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-dribbble" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-facebook" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-flickr" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-foursquare" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-github" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-instagram" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-lastfm" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-linkedin" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-pinterest" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-stackoverflow" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-reddit" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-tumblr" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-twitter" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon bd-vimeo" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/brand-icons.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">glyphicons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-tags" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-italic" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-bold" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-font" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-glass" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-envelope" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-music" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-search" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-heart" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-star" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-user" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-remove" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-home" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-road" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-time" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-upload" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-inbox" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon glyphicon glyphicon-lock" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/glyphicons.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">ionicons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-ios-albums" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-ios-aperture" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-ios-apps" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-ios-barcode" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-alert" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-eye" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-egg" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-document" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-disc" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-cube" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-chatboxes" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-checkmark" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-clipboard" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-clock" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-close" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-cloud" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-compass" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ion-md-contrast" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/ionicons.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">material-design</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon md-3d-rotation" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-album" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-archive" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-account" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-alert" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-check" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-o" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-return" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment-returned" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-assignment" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-attachment-alt" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-attachment" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-audio" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-badge-check" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-balance-wallet" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-balance" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-battery-alert" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon md-bike" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/material-design.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">mfglabs</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-cloud" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-arrow-up" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-arrow-down" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-arrow-right" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-arrow-left" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-reorder" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-list" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-reorder-square" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-reorder-square-line" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-coverflow" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-coverflow-line" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-pause" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-play" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-step-forward" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-step-backward" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-data-science" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-globe" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ml-paperplane-ico" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/mfglabs.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">open-iconic</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon io-align-center" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-align-left" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-align-right" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-aperture" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-audio" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-badge" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-ban" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-basket" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-beaker" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-bell" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-bluetooth" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-bold" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-bolt" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-book" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-bookmark" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-box" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-briefcase" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon io-browser" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/open-iconic.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">themify</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-wand" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-volume" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-user" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-unlock" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-unlink" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-trash" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-thought" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-target" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-tablet" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-star" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-spray" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-signal" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-settings" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-search" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-cut" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-bookmark" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-reload" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon ti-pin" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/themify.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">weather-icons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-cloudy" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-fog" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-hail" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-lightning" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-rain" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-showers" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-snow" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-sprinkle" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-thunderstorm" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-windy" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-cloud" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-degrees" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-fahrenheit" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-horizon" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-lightning" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-umbrella" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-sunrise" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon wi-sunset" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/weather-icons.html">Read More</a>
                  </div>
                </div>
              </div>
              <div class="col-xl-4 col-md-6">
                <h4 class="example-title">octicons</h4>
                <div class="example example-well overlay overlay-hover">
                  <ul class="blocks-6 m-0">
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-book" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-bookmark" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-clippy" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-dashboard" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-database" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-file-code" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-file-zip" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-git-branch" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-keyboard" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-mark-github" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-organization" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-repo" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-server" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-settings" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-terminal" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-shield" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-versions" aria-hidden="true"></i>
                      </div>
                    </li>
                    <li>
                      <div class="icondemo">
                        <i class="icon oi-watch" aria-hidden="true"></i>
                      </div>
                    </li>
                  </ul>
                  <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                    <a class="btn btn-inverse vertical-align-middle" href="./icons/octicons.html">Read More</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}