<?php include 'layouts/session.php'; ?>
<?php include 'layouts/main.php'; ?>

<head>

    <?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Feather Icons')); ?>

    <?php include 'layouts/head-css.php'; ?>

</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">

        <?php include 'layouts/menu.php'; ?>

        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    <?php includeFileWithVariables('layouts/page-title.php', array('pagetitle' => 'Icons', 'title' => 'Feather')); ?>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Examples</h4>
                                    <p class="text-muted mb-0">Use <code>&lt;i data-feather="**">&lt;/i></code> class.</p>
                                </div>
                                <div class="card-body pt-0">

                                    <div class="row icon-demo-content">
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="activity"></i> activity
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay"></i> airplay
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-circle"></i> alert-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-octagon"></i> alert-octagon
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-triangle"></i> alert-triangle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="align-center"></i> align-center
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="align-justify"></i> align-justify
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="align-left"></i> align-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="align-right"></i> align-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="anchor"></i> anchor
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="aperture"></i> aperture
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="archive"></i> archive
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-down-circle"></i> arrow-down-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-down-left"></i> arrow-down-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-down-right"></i> arrow-down-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-down"></i> arrow-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-left-circle"></i> arrow-left-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-left"></i> arrow-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-right-circle"></i> arrow-right-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-right"></i> arrow-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-up-circle"></i> arrow-up-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-up-left"></i> arrow-up-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-up-right"></i> arrow-up-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="arrow-up"></i> arrow-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="at-sign"></i> at-sign
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="award"></i> award
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bar-chart-2"></i> bar-chart-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bar-chart"></i> bar-chart
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="battery-charging"></i> battery-charging
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="battery"></i> battery
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bell-off"></i> bell-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bell"></i> bell
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bluetooth"></i> bluetooth
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bold"></i> bold
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="book-open"></i> book-open
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="book"></i> book
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="bookmark"></i> bookmark
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="box"></i> box
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="briefcase"></i> briefcase
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="calendar"></i> calendar
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="camera-off"></i> camera-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="camera"></i> camera
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cast"></i> cast
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="check-circle"></i> check-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="check-square"></i> check-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="check"></i> check
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevron-down"></i> chevron-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevron-left"></i> chevron-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevron-right"></i> chevron-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevron-up"></i> chevron-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevrons-down"></i> chevrons-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevrons-left"></i> chevrons-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevrons-right"></i> chevrons-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chevrons-up"></i> chevrons-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="chrome"></i> chrome
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="circle"></i> circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="clipboard"></i> clipboard
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="clock"></i> clock
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud-drizzle"></i> cloud-drizzle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud-lightning"></i> cloud-lightning
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud-off"></i> cloud-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud-rain"></i> cloud-rain
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud-snow"></i> cloud-snow
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cloud"></i> cloud
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="code"></i> code
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="codepen"></i> codepen
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="codesandbox"></i> codesandbox
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="coffee"></i> coffee
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="columns"></i> columns
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="command"></i> command
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="compass"></i> compass
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="copy"></i> copy
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-down-left"></i> corner-down-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-down-right"></i> corner-down-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-left-down"></i> corner-left-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-left-up"></i> corner-left-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-right-down"></i> corner-right-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-right-up"></i> corner-right-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-up-left"></i> corner-up-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="corner-up-right"></i> corner-up-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="cpu"></i> cpu
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="credit-card"></i> credit-card
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="crop"></i> crop
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="crosshair"></i> crosshair
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="database"></i> database
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="delete"></i> delete
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="disc"></i> disc
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="divide-circle"></i> divide-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="divide-square"></i> divide-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="divide"></i> divide
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="dollar-sign"></i> dollar-sign
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="download-cloud"></i> download-cloud
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="download"></i> download
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="dribbble"></i> dribbble
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="droplet"></i> droplet
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="edit-2"></i> edit-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="edit-3"></i> edit-3
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="edit"></i> edit
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="external-link"></i> external-link
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="eye-off"></i> eye-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="eye"></i> eye
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="facebook"></i> facebook
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="fast-forward"></i> fast-forward
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="feather"></i> feather
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="figma"></i> figma
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="file-minus"></i> file-minus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="file-plus"></i> file-plus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="file-text"></i> file-text
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="file"></i> file
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="film"></i> film
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="filter"></i> filter
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="flag"></i> flag
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="folder-minus"></i> folder-minus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="folder-plus"></i> folder-plus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="folder"></i> folder
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="framer"></i> framer
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="frown"></i> frown
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="gift"></i> gift
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="git-branch"></i> git-branch
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="git-commit"></i> git-commit
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="git-merge"></i> git-merge
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="git-pull-request"></i> git-pull-request
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="github"></i> github
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="gitlab"></i> gitlab
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="globe"></i> globe
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="grid"></i> grid
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="hard-drive"></i> hard-drive
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="hash"></i> hash
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="headphones"></i> headphones
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="heart"></i> heart
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="help-circle"></i> help-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="hexagon"></i> hexagon
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="home"></i> home
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="image"></i> image
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="inbox"></i> inbox
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="info"></i> info
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="instagram"></i> instagram
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="italic"></i> italic
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="key"></i> key
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="layers"></i> layers
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="layout"></i> layout
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="life-buoy"></i> life-buoy
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="link-2"></i> link-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="link"></i> link
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="linkedin"></i> linkedin
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="list"></i> list
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="loader"></i> loader
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="lock"></i> lock
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="log-in"></i> log-in
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="log-out"></i> log-out
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="mail"></i> mail
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="map-pin"></i> map-pin
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="map"></i> map
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="maximize-2"></i> maximize-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="maximize"></i> maximize
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="meh"></i> meh
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="menu"></i> menu
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="message-circle"></i> message-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="message-square"></i> message-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="mic-off"></i> mic-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="mic"></i> mic
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="minimize-2"></i> minimize-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="minimize"></i> minimize
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="minus-circle"></i> minus-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="minus-square"></i> minus-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="minus"></i> minus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="monitor"></i> monitor
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="moon"></i> moon
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="more-horizontal"></i> more-horizontal
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="more-vertical"></i> more-vertical
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="mouse-pointer"></i> mouse-pointer
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="move"></i> move
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="music"></i> music
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="navigation-2"></i> navigation-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="navigation"></i> navigation
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="octagon"></i> octagon
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="package"></i> package
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="paperclip"></i> paperclip
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="pause-circle"></i> pause-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="pause"></i> pause
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="pen-tool"></i> pen-tool
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="percent"></i> percent
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-call"></i> phone-call
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-forwarded"></i> phone-forwarded
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-incoming"></i> phone-incoming
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-missed"></i> phone-missed
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-off"></i> phone-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone-outgoing"></i> phone-outgoing
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="phone"></i> phone
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="pie-chart"></i> pie-chart
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="play-circle"></i> play-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="play"></i> play
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="plus-circle"></i> plus-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="plus-square"></i> plus-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="plus"></i> plus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="pocket"></i> pocket
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="power"></i> power
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="printer"></i> printer
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="radio"></i> radio
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="refresh-ccw"></i> refresh-ccw
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="refresh-cw"></i> refresh-cw
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="repeat"></i> repeat
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="rewind"></i> rewind
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="rotate-ccw"></i> rotate-ccw
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="rotate-cw"></i> rotate-cw
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="rss"></i> rss
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="save"></i> save
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="scissors"></i> scissors
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="search"></i> search
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="send"></i> send
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="server"></i> server
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="settings"></i> settings
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="share-2"></i> share-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="share"></i> share
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="shield-off"></i> shield-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="shield"></i> shield
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="shopping-bag"></i> shopping-bag
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="shopping-cart"></i> shopping-cart
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="shuffle"></i> shuffle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="sidebar"></i> sidebar
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="skip-back"></i> skip-back
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="skip-forward"></i> skip-forward
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="slack"></i> slack
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="slash"></i> slash
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="sliders"></i> sliders
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="smartphone"></i> smartphone
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="smile"></i> smile
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="speaker"></i> speaker
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="square"></i> square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="star"></i> star
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="stop-circle"></i> stop-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="sun"></i> sun
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="sunrise"></i> sunrise
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="sunset"></i> sunset
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="tablet"></i> tablet
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="tag"></i> tag
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="target"></i> target
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="terminal"></i> terminal
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="thermometer"></i> thermometer
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="thumbs-down"></i> thumbs-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="thumbs-up"></i> thumbs-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="toggle-left"></i> toggle-left
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="toggle-right"></i> toggle-right
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="tool"></i> tool
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="trash-2"></i> trash-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="trash"></i> trash
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="trello"></i> trello
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="trending-down"></i> trending-down
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="trending-up"></i> trending-up
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="triangle"></i> triangle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="truck"></i> truck
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="tv"></i> tv
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="twitch"></i> twitch
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="twitter"></i> twitter
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="type"></i> type
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="umbrella"></i> umbrella
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="underline"></i> underline
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="unlock"></i> unlock
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="upload-cloud"></i> upload-cloud
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="upload"></i> upload
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="user-check"></i> user-check
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="user-minus"></i> user-minus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="user-plus"></i> user-plus
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="user-x"></i> user-x
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="user"></i> user
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="users"></i> users
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="video-off"></i> video-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="video"></i> video
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="voicemail"></i> voicemail
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="volume-1"></i> volume-1
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="volume-2"></i> volume-2
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="volume-x"></i> volume-x
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="volume"></i> volume
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="watch"></i> watch
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="wifi-off"></i> wifi-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="wifi"></i> wifi
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="wind"></i> wind
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="x-circle"></i> x-circle
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="x-octagon"></i> x-octagon
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="x-square"></i> x-square
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="x"></i> x
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="youtube"></i> youtube
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="zap-off"></i> zap-off
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="zap"></i> zap
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="zoom-in"></i> zoom-in
                                        </div>
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="zoom-out"></i> zoom-out
                                        </div>
                                    </div>
                                    <!-- end row -->

                                </div>
                                <!-- end card-body -->
                            </div>
                            <!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Sizes</h4>
                                    <p class="text-muted mb-0">Use <code>&lt;i data-feather="activity" class="icon-**"&gt;&lt;/i&gt;</code>. Available sizes <code>xs, sm,md,lg,xl,xxl</code></p>
                                </div>
                                <div class="card-body pt-0">
                                    <div class="row icon-demo-content">

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-xs"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-sm"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-md"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-lg"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-xl"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-xxl"></i> airplay
                                        </div>

                                    </div>
                                    <!-- emd row -->
                                </div>
                                <!-- end card-body -->
                            </div>
                            <!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>
                    <!-- end row -->

                    <div class="row">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Two Tones Color Icons</h4>
                                    <p class="text-muted mb-0">Use <code>&lt;i data-feather="activity" class="icon-dual-**"&gt;&lt;/i&gt;</code>.</p>
                                </div>
                                <div class="card-body pt-0">

                                    <div class="row icon-demo-content">
                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="airplay" class="icon-dual"></i> airplay
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-circle" class="icon-dual-primary"></i> alert-circle
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-octagon" class="icon-dual-success"></i> alert-octagon
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="alert-triangle" class="icon-dual-info"></i> alert-triangle
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="anchor" class="icon-dual-warning"></i> anchor
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="aperture" class="icon-dual-danger"></i> aperture
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="archive" class="icon-dual-dark"></i> archive
                                        </div>

                                        <div class="col-xl-3 col-lg-4 col-sm-6">
                                            <i data-feather="clock" class="icon-dual-secondary"></i> clock
                                        </div>

                                    </div>
                                    <!-- emd row -->

                                </div>
                                <!-- end card-body -->
                            </div>
                            <!-- end card -->
                        </div>
                        <!-- end col -->
                    </div>

                    <!-- end row -->
                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->

            <?php include 'layouts/footer.php'; ?>
        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->



    <?php include 'layouts/customizer.php'; ?>

    <?php include 'layouts/vendor-scripts.php'; ?>

    <!-- App js -->
    <script src="assets/js/app.js"></script>
</body>

</html>