@extends('layouts.vertical', ["page_title"=> "Two Tones Icons | Feather Icons"])

@section('content')
<!-- Start Content-->
<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">UBold</a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Icons</a></li>
                        <li class="breadcrumb-item active">Two Tone</li>
                    </ol>
                </div>
                <h4 class="page-title">Two Tone Icons</h4>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <h4 class="header-title">Examples</h4>
                    <p class="mb-3">Use <code>&lt;i data-feather="activity" class="icon-dual"&gt;&lt;/i&gt;</code>.</p>


                    <div class="row icons-list-demo">
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="activity" class="icon-dual"></i>
                                <span>activity</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icon-dual"></i>
                                <span>airplay</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="alert-circle" class="icon-dual"></i>
                                <span>alert-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="alert-octagon" class="icon-dual"></i>
                                <span>alert-octagon</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="alert-triangle" class="icon-dual"></i>
                                <span>alert-triangle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="align-center" class="icon-dual"></i>
                                <span>align-center</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="align-justify" class="icon-dual"></i>
                                <span>align-justify</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="align-left" class="icon-dual"></i>
                                <span>align-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="align-right" class="icon-dual"></i>
                                <span>align-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="anchor" class="icon-dual"></i>
                                <span>anchor</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="aperture" class="icon-dual"></i>
                                <span>aperture</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="archive" class="icon-dual"></i>
                                <span>archive</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-down-circle" class="icon-dual"></i>
                                <span>arrow-down-circle</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-down-left" class="icon-dual"></i>
                                <span>arrow-down-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-down-right" class="icon-dual"></i>
                                <span>arrow-down-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-down" class="icon-dual"></i>
                                <span>arrow-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-left-circle" class="icon-dual"></i>
                                <span>arrow-left-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-left" class="icon-dual"></i>
                                <span>arrow-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-right-circle" class="icon-dual"></i>
                                <span>arrow-right-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-right" class="icon-dual"></i>
                                <span>arrow-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-up-circle" class="icon-dual"></i>
                                <span>arrow-up-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-up-left" class="icon-dual"></i>
                                <span>arrow-up-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-up-right" class="icon-dual"></i>
                                <span>arrow-up-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="arrow-up" class="icon-dual"></i>
                                <span>arrow-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="at-sign" class="icon-dual"></i>
                                <span>at-sign</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="award" class="icon-dual"></i>
                                <span>award</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bar-chart-2" class="icon-dual"></i>
                                <span>bar-chart-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bar-chart" class="icon-dual"></i>
                                <span>bar-chart</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="battery-charging" class="icon-dual"></i>
                                <span>battery-charging</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="battery" class="icon-dual"></i>
                                <span>battery</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bell-off" class="icon-dual"></i>
                                <span>bell-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bell" class="icon-dual"></i>
                                <span>bell</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bluetooth" class="icon-dual"></i>
                                <span>bluetooth</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bold" class="icon-dual"></i>
                                <span>bold</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="book-open" class="icon-dual"></i>
                                <span>book-open</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="book" class="icon-dual"></i>
                                <span>book</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="bookmark" class="icon-dual"></i>
                                <span>bookmark</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="box" class="icon-dual"></i>
                                <span>box</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="briefcase" class="icon-dual"></i>
                                <span>briefcase</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="calendar" class="icon-dual"></i>
                                <span>calendar</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="camera-off" class="icon-dual"></i>
                                <span>camera-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="camera" class="icon-dual"></i>
                                <span>camera</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cast" class="icon-dual"></i>
                                <span>cast</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="check-circle" class="icon-dual"></i>
                                <span>check-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="check-square" class="icon-dual"></i>
                                <span>check-square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="check" class="icon-dual"></i>
                                <span>check</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevron-down" class="icon-dual"></i>
                                <span>chevron-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevron-left" class="icon-dual"></i>
                                <span>chevron-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevron-right" class="icon-dual"></i>
                                <span>chevron-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevron-up" class="icon-dual"></i>
                                <span>chevron-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevrons-down" class="icon-dual"></i>
                                <span>chevrons-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevrons-left" class="icon-dual"></i>
                                <span>chevrons-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevrons-right" class="icon-dual"></i>
                                <span>chevrons-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chevrons-up" class="icon-dual"></i>
                                <span>chevrons-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="chrome" class="icon-dual"></i>
                                <span>chrome</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="circle" class="icon-dual"></i>
                                <span>circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="clipboard" class="icon-dual"></i>
                                <span>clipboard</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="clock" class="icon-dual"></i>
                                <span>clock</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud-drizzle" class="icon-dual"></i>
                                <span>cloud-drizzle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud-lightning" class="icon-dual"></i>
                                <span>cloud-lightning</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud-off" class="icon-dual"></i>
                                <span>cloud-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud-rain" class="icon-dual"></i>
                                <span>cloud-rain</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud-snow" class="icon-dual"></i>
                                <span>cloud-snow</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cloud" class="icon-dual"></i>
                                <span>cloud</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="code" class="icon-dual"></i>
                                <span>code</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="codepen" class="icon-dual"></i>
                                <span>codepen</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="codesandbox" class="icon-dual"></i>
                                <span>codesandbox</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="coffee" class="icon-dual"></i>
                                <span>coffee</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="columns" class="icon-dual"></i>
                                <span>columns</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="command" class="icon-dual"></i>
                                <span>command</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="compass" class="icon-dual"></i>
                                <span>compass</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="copy" class="icon-dual"></i>
                                <span>copy</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-down-left" class="icon-dual"></i>
                                <span>corner-down-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-down-right" class="icon-dual"></i>
                                <span>corner-down-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-left-down" class="icon-dual"></i>
                                <span>corner-left-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-left-up" class="icon-dual"></i>
                                <span>corner-left-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-right-down" class="icon-dual"></i>
                                <span>corner-right-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-right-up" class="icon-dual"></i>
                                <span>corner-right-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-up-left" class="icon-dual"></i>
                                <span>corner-up-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="corner-up-right" class="icon-dual"></i>
                                <span>corner-up-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="cpu" class="icon-dual"></i>
                                <span>cpu</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="credit-card" class="icon-dual"></i>
                                <span>credit-card</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="crop" class="icon-dual"></i>
                                <span>crop</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="crosshair" class="icon-dual"></i>
                                <span>crosshair</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="database" class="icon-dual"></i>
                                <span>database</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="delete" class="icon-dual"></i>
                                <span>delete</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="disc" class="icon-dual"></i>
                                <span>disc</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="dollar-sign" class="icon-dual"></i>
                                <span>dollar-sign</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="download-cloud" class="icon-dual"></i>
                                <span>download-cloud</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="download" class="icon-dual"></i>
                                <span>download</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="droplet" class="icon-dual"></i>
                                <span>droplet</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="edit-2" class="icon-dual"></i>
                                <span>edit-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="edit-3" class="icon-dual"></i>
                                <span>edit-3</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="edit" class="icon-dual"></i>
                                <span>edit</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="external-link" class="icon-dual"></i>
                                <span>external-link</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="eye-off" class="icon-dual"></i>
                                <span>eye-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="eye" class="icon-dual"></i>
                                <span>eye</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="facebook" class="icon-dual"></i>
                                <span>facebook</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="fast-forward" class="icon-dual"></i>
                                <span>fast-forward</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="feather" class="icon-dual"></i>
                                <span>feather</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="figma" class="icon-dual"></i>
                                <span>figma</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="file-minus" class="icon-dual"></i>
                                <span>file-minus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="file-plus" class="icon-dual"></i>
                                <span>file-plus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="file-text" class="icon-dual"></i>
                                <span>file-text</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="file" class="icon-dual"></i>
                                <span>file</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="film" class="icon-dual"></i>
                                <span>film</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="filter" class="icon-dual"></i>
                                <span>filter</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="flag" class="icon-dual"></i>
                                <span>flag</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="folder-minus" class="icon-dual"></i>
                                <span>folder-minus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="folder-plus" class="icon-dual"></i>
                                <span>folder-plus</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="folder" class="icon-dual"></i>
                                <span>folder</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="framer" class="icon-dual"></i>
                                <span>framer</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="frown" class="icon-dual"></i>
                                <span>frown</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="gift" class="icon-dual"></i>
                                <span>gift</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="git-branch" class="icon-dual"></i>
                                <span>git-branch</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="git-commit" class="icon-dual"></i>
                                <span>git-commit</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="git-merge" class="icon-dual"></i>
                                <span>git-merge</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="git-pull-request" class="icon-dual"></i>
                                <span>git-pull-request</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="github" class="icon-dual"></i>
                                <span>github</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="gitlab" class="icon-dual"></i>
                                <span>gitlab</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="globe" class="icon-dual"></i>
                                <span>globe</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="grid" class="icon-dual"></i>
                                <span>grid</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="hard-drive" class="icon-dual"></i>
                                <span>hard-drive</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="hash" class="icon-dual"></i>
                                <span>hash</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="headphones" class="icon-dual"></i>
                                <span>headphones</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="heart" class="icon-dual"></i>
                                <span>heart</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="help-circle" class="icon-dual"></i>
                                <span>help-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="hexagon" class="icon-dual"></i>
                                <span>hexagon</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="home" class="icon-dual"></i>
                                <span>home</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="image" class="icon-dual"></i>
                                <span>image</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="inbox" class="icon-dual"></i>
                                <span>inbox</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="info" class="icon-dual"></i>
                                <span>info</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="instagram" class="icon-dual"></i>
                                <span>instagram</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="italic" class="icon-dual"></i>
                                <span>italic</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="key" class="icon-dual"></i>
                                <span>key</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="layers" class="icon-dual"></i>
                                <span>layers</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="layout" class="icon-dual"></i>
                                <span>layout</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="life-buoy" class="icon-dual"></i>
                                <span>life-buoy</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="link-2" class="icon-dual"></i>
                                <span>link-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="link" class="icon-dual"></i>
                                <span>link</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="linkedin" class="icon-dual"></i>
                                <span>linkedin</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="list" class="icon-dual"></i>
                                <span>list</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="loader" class="icon-dual"></i>
                                <span>loader</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="lock" class="icon-dual"></i>
                                <span>lock</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="log-in" class="icon-dual"></i>
                                <span>log-in</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="log-out" class="icon-dual"></i>
                                <span>log-out</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="mail" class="icon-dual"></i>
                                <span>mail</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="map-pin" class="icon-dual"></i>
                                <span>map-pin</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="map" class="icon-dual"></i>
                                <span>map</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="maximize-2" class="icon-dual"></i>
                                <span>maximize-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="maximize" class="icon-dual"></i>
                                <span>maximize</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="meh" class="icon-dual"></i>
                                <span>meh</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="menu" class="icon-dual"></i>
                                <span>menu</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="message-circle" class="icon-dual"></i>
                                <span>message-circle</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="message-square" class="icon-dual"></i>
                                <span>message-square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="mic-off" class="icon-dual"></i>
                                <span>mic-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="mic" class="icon-dual"></i>
                                <span>mic</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="minimize-2" class="icon-dual"></i>
                                <span>minimize-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="minimize" class="icon-dual"></i>
                                <span>minimize</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="minus-circle" class="icon-dual"></i>
                                <span>minus-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="minus-square" class="icon-dual"></i>
                                <span>minus-square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="minus" class="icon-dual"></i>
                                <span>minus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="monitor" class="icon-dual"></i>
                                <span>monitor</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="moon" class="icon-dual"></i>
                                <span>moon</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="more-horizontal" class="icon-dual"></i>
                                <span>more-horizontal</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="more-vertical" class="icon-dual"></i>
                                <span>more-vertical</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="mouse-pointer" class="icon-dual"></i>
                                <span>mouse-pointer</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="move" class="icon-dual"></i>
                                <span>move</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="music" class="icon-dual"></i>
                                <span>music</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="navigation-2" class="icon-dual"></i>
                                <span>navigation-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="navigation" class="icon-dual"></i>
                                <span>navigation</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="octagon" class="icon-dual"></i>
                                <span>octagon</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="package" class="icon-dual"></i>
                                <span>package</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="paperclip" class="icon-dual"></i>
                                <span>paperclip</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="pause-circle" class="icon-dual"></i>
                                <span>pause-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="pause" class="icon-dual"></i>
                                <span>pause</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="pen-tool" class="icon-dual"></i>
                                <span>pen-tool</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="percent" class="icon-dual"></i>
                                <span>percent</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-call" class="icon-dual"></i>
                                <span>phone-call</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-forwarded" class="icon-dual"></i>
                                <span>phone-forwarded</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-incoming" class="icon-dual"></i>
                                <span>phone-incoming</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-missed" class="icon-dual"></i>
                                <span>phone-missed</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-off" class="icon-dual"></i>
                                <span>phone-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone-outgoing" class="icon-dual"></i>
                                <span>phone-outgoing</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="phone" class="icon-dual"></i>
                                <span>phone</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="pie-chart" class="icon-dual"></i>
                                <span>pie-chart</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="play-circle" class="icon-dual"></i>
                                <span>play-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="play" class="icon-dual"></i>
                                <span>play</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="plus-circle" class="icon-dual"></i>
                                <span>plus-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="plus-square" class="icon-dual"></i>
                                <span>plus-square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="plus" class="icon-dual"></i>
                                <span>plus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="pocket" class="icon-dual"></i>
                                <span>pocket</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="power" class="icon-dual"></i>
                                <span>power</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="printer" class="icon-dual"></i>
                                <span>printer</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="radio" class="icon-dual"></i>
                                <span>radio</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="refresh-ccw" class="icon-dual"></i>
                                <span>refresh-ccw</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="refresh-cw" class="icon-dual"></i>
                                <span>refresh-cw</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="repeat" class="icon-dual"></i>
                                <span>repeat</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="rewind" class="icon-dual"></i>
                                <span>rewind</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="rotate-ccw" class="icon-dual"></i>
                                <span>rotate-ccw</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="rotate-cw" class="icon-dual"></i>
                                <span>rotate-cw</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="rss" class="icon-dual"></i>
                                <span>rss</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="save" class="icon-dual"></i>
                                <span>save</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="scissors" class="icon-dual"></i>
                                <span>scissors</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="search" class="icon-dual"></i>
                                <span>search</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="send" class="icon-dual"></i>
                                <span>send</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="server" class="icon-dual"></i>
                                <span>server</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="settings" class="icon-dual"></i>
                                <span>settings</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="share-2" class="icon-dual"></i>
                                <span>share-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="share" class="icon-dual"></i>
                                <span>share</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="shield-off" class="icon-dual"></i>
                                <span>shield-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="shield" class="icon-dual"></i>
                                <span>shield</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="shopping-bag" class="icon-dual"></i>
                                <span>shopping-bag</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="shopping-cart" class="icon-dual"></i>
                                <span>shopping-cart</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="shuffle" class="icon-dual"></i>
                                <span>shuffle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="sidebar" class="icon-dual"></i>
                                <span>sidebar</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="skip-back" class="icon-dual"></i>
                                <span>skip-back</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="skip-forward" class="icon-dual"></i>
                                <span>skip-forward</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="slack" class="icon-dual"></i>
                                <span>slack</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="slash" class="icon-dual"></i>
                                <span>slash</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="sliders" class="icon-dual"></i>
                                <span>sliders</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="smartphone" class="icon-dual"></i>
                                <span>smartphone</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="smile" class="icon-dual"></i>
                                <span>smile</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="speaker" class="icon-dual"></i>
                                <span>speaker</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="square" class="icon-dual"></i>
                                <span>square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="star" class="icon-dual"></i>
                                <span>star</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="stop-circle" class="icon-dual"></i>
                                <span>stop-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="sun" class="icon-dual"></i>
                                <span>sun</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="sunrise" class="icon-dual"></i>
                                <span>sunrise</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="sunset" class="icon-dual"></i>
                                <span>sunset</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="tablet" class="icon-dual"></i>
                                <span>tablet</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="tag" class="icon-dual"></i>
                                <span>tag</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="target" class="icon-dual"></i>
                                <span>target</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="terminal" class="icon-dual"></i>
                                <span>terminal</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="thermometer" class="icon-dual"></i>
                                <span>thermometer</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="thumbs-down" class="icon-dual"></i>
                                <span>thumbs-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="thumbs-up" class="icon-dual"></i>
                                <span>thumbs-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="toggle-left" class="icon-dual"></i>
                                <span>toggle-left</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="toggle-right" class="icon-dual"></i>
                                <span>toggle-right</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="tool" class="icon-dual"></i>
                                <span>tool</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="trash-2" class="icon-dual"></i>
                                <span>trash-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="trash" class="icon-dual"></i>
                                <span>trash</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="trello" class="icon-dual"></i>
                                <span>trello</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="trending-down" class="icon-dual"></i>
                                <span>trending-down</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="trending-up" class="icon-dual"></i>
                                <span>trending-up</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="triangle" class="icon-dual"></i>
                                <span>triangle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="truck" class="icon-dual"></i>
                                <span>truck</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="tv" class="icon-dual"></i>
                                <span>tv</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="twitch" class="icon-dual"></i>
                                <span>twitch</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="twitter" class="icon-dual"></i>
                                <span>twitter</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="type" class="icon-dual"></i>
                                <span>type</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="umbrella" class="icon-dual"></i>
                                <span>umbrella</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="underline" class="icon-dual"></i>
                                <span>underline</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="unlock" class="icon-dual"></i>
                                <span>unlock</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="upload-cloud" class="icon-dual"></i>
                                <span>upload-cloud</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="upload" class="icon-dual"></i>
                                <span>upload</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="user-check" class="icon-dual"></i>
                                <span>user-check</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="user-minus" class="icon-dual"></i>
                                <span>user-minus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="user-plus" class="icon-dual"></i>
                                <span>user-plus</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="user-x" class="icon-dual"></i>
                                <span>user-x</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="user" class="icon-dual"></i>
                                <span>user</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="users" class="icon-dual"></i>
                                <span>users</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="video-off" class="icon-dual"></i>
                                <span>video-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="video" class="icon-dual"></i>
                                <span>video</span>
                            </div>
                        </div>


                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="voicemail" class="icon-dual"></i>
                                <span>voicemail</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="volume-1" class="icon-dual"></i>
                                <span>volume-1</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="volume-2" class="icon-dual"></i>
                                <span>volume-2</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="volume-x" class="icon-dual"></i>
                                <span>volume-x</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="volume" class="icon-dual"></i>
                                <span>volume</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="watch" class="icon-dual"></i>
                                <span>watch</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="wifi-off" class="icon-dual"></i>
                                <span>wifi-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="wifi" class="icon-dual"></i>
                                <span>wifi</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="wind" class="icon-dual"></i>
                                <span>wind</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="x-circle" class="icon-dual"></i>
                                <span>x-circle</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="x-octagon" class="icon-dual"></i>
                                <span>x-octagon</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="x-square" class="icon-dual"></i>
                                <span>x-square</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="x" class="icon-dual"></i>
                                <span>x</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="youtube" class="icon-dual"></i>
                                <span>youtube</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="zap-off" class="icon-dual"></i>
                                <span>zap-off</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="zap" class="icon-dual"></i>
                                <span>zap</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="zoom-in" class="icon-dual"></i>
                                <span>zoom-in</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="zoom-out" class="icon-dual"></i>
                                <span>zoom-out</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end row -->


    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <h4 class="header-title">Sizes</h4>
                    <p class="mb-3">Use <code>&lt;i data-feather="activity" class="icons-**"&gt;&lt;/i&gt;</code>. Available sizes <code>sm,md,lg,xl,xxl</code></p>


                    <div class="row icons-list-demo">

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-xs icon-dual"></i>
                                <span>Extra Small</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-sm icon-dual"></i>
                                <span>Small</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-md icon-dual"></i>
                                <span>Medium</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-lg icon-dual"></i>
                                <span>Large</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-xl icon-dual"></i>
                                <span>Extra Large</span>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icons-xxl icon-dual"></i>
                                <span>Extra Extra Large</span>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <h5 class="mt-0 mb-1 header-title">Two Tones Color Icons</h5>
                    <p class="mb-3">Use <code>&lt;i data-feather="activity" class="icon-dual-**"&gt;&lt;/i&gt;</code>.</p>


                    <div class="row icons-list-demo">
                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="activity" class="icon-dual-primary"></i>
                                <span>activity</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="airplay" class="icon-dual-success"></i>
                                <span>airplay</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="alert-circle" class="icon-dual-danger"></i>
                                <span>alert-circle</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="alert-octagon" class="icon-dual-info"></i>
                                <span>alert-octagon</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="alert-triangle" class="icon-dual-warning"></i>
                                <span>alert-triangle</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="anchor" class="icon-dual-dark"></i>
                                <span>anchor</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="aperture" class="icon-dual-blue"></i>
                                <span>aperture</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="archive" class="icon-dual-pink"></i>
                                <span>archive</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="clock" class="icon-dual-danger"></i>
                                <span>clock</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="shopping-bag" class="icon-dual-info"></i>
                                <span>shopping-bag</span>
                            </div>
                        </div>

                        <div class="col-xl-3 col-lg-4 col-sm-6">
                            <div class="icon-item">
                                <i data-feather="printer" class="icon-dual-warning"></i>
                                <span>printer</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end card -->
        </div>
    </div>
    <!-- end row -->

</div> <!-- container -->
@endsection