Files
hyper-theme/icons-unicons.html
2025-11-20 23:11:58 -06:00

5547 lines
373 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Unicons | Hyper - Responsive Bootstrap 5 Admin Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
<meta content="Coderthemes" name="author" />
<!-- App favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Theme Config Js -->
<script src="assets/js/hyper-config.js"></script>
<!-- Vendor css -->
<link href="assets/css/vendor.min.css" rel="stylesheet" type="text/css" />
<!-- App css -->
<link href="assets/css/app-saas.min.css" rel="stylesheet" type="text/css" id="app-style" />
<!-- Icons css -->
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Begin page -->
<div class="wrapper">
<!-- ========== Topbar Start ========== -->
<div class="navbar-custom">
<div class="topbar container-fluid">
<div class="d-flex align-items-center gap-lg-2 gap-1">
<!-- Topbar Brand Logo -->
<div class="logo-topbar">
<!-- Logo light -->
<a href="index.html" class="logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
<!-- Logo Dark -->
<a href="index.html" class="logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-dark-sm.png" alt="small logo">
</span>
</a>
</div>
<!-- Sidebar Menu Toggle Button -->
<button class="button-toggle-menu">
<i class="mdi mdi-menu"></i>
</button>
<!-- Horizontal Menu Toggle Button -->
<button class="navbar-toggle" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
<div class="lines">
<span></span>
<span></span>
<span></span>
</div>
</button>
<!-- Topbar Search Form -->
<div class="app-search dropdown d-none d-lg-block">
<form>
<div class="input-group">
<input type="search" class="form-control dropdown-toggle" placeholder="Search..." id="top-search">
<span class="mdi mdi-magnify search-icon"></span>
<button class="input-group-text btn btn-primary" type="submit">Search</button>
</div>
</form>
<div class="dropdown-menu dropdown-menu-animated dropdown-lg" id="search-dropdown">
<!-- item-->
<div class="dropdown-header noti-title">
<h5 class="text-overflow mb-2">Found <span class="text-danger">17</span> results</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="uil-notes font-16 me-1"></i>
<span>Analytics Report</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="uil-life-ring font-16 me-1"></i>
<span>How can I help you?</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<i class="uil-cog font-16 me-1"></i>
<span>User profile settings</span>
</a>
<!-- item-->
<div class="dropdown-header noti-title">
<h6 class="text-overflow mb-2 text-uppercase">Users</h6>
</div>
<div class="notification-list">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="d-flex">
<img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-2.jpg" alt="Generic placeholder image" height="32">
<div class="w-100">
<h5 class="m-0 font-14">Erwin Brown</h5>
<span class="font-12 mb-0">UI Designer</span>
</div>
</div>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="d-flex">
<img class="d-flex me-2 rounded-circle" src="assets/images/users/avatar-5.jpg" alt="Generic placeholder image" height="32">
<div class="w-100">
<h5 class="m-0 font-14">Jacob Deo</h5>
<span class="font-12 mb-0">Developer</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<ul class="topbar-menu d-flex align-items-center gap-3">
<li class="dropdown d-lg-none">
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ri-search-line font-22"></i>
</a>
<div class="dropdown-menu dropdown-menu-animated dropdown-lg p-0">
<form class="p-3">
<input type="search" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
</form>
</div>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<img src="assets/images/flags/us.jpg" alt="user-image" class="me-0 me-sm-1" height="12">
<span class="align-middle d-none d-lg-inline-block">English</span> <i class="mdi mdi-chevron-down d-none d-sm-inline-block align-middle"></i>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/images/flags/germany.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/images/flags/italy.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/images/flags/spain.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<img src="assets/images/flags/russia.jpg" alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span>
</a>
</div>
</li>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ri-notification-3-line font-22"></i>
<span class="noti-icon-badge"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0">
<div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border">
<div class="row align-items-center">
<div class="col">
<h6 class="m-0 font-16 fw-semibold"> Notification</h6>
</div>
<div class="col-auto">
<a href="javascript: void(0);" class="text-dark text-decoration-underline">
<small>Clear All</small>
</a>
</div>
</div>
</div>
<div class="px-2" style="max-height: 300px;" data-simplebar>
<h5 class="text-muted font-13 fw-normal mt-2">Today</h5>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item p-0 notify-item card unread-noti shadow-none mb-2">
<div class="card-body">
<span class="float-end noti-close-btn text-muted"><i class="mdi mdi-close"></i></span>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<h5 class="noti-item-title fw-semibold font-14">Datacorp <small class="fw-normal text-muted ms-1">1 min ago</small></h5>
<small class="noti-item-subtitle text-muted">Caleb Flakelar commented on Admin</small>
</div>
</div>
</div>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item p-0 notify-item card read-noti shadow-none mb-2">
<div class="card-body">
<span class="float-end noti-close-btn text-muted"><i class="mdi mdi-close"></i></span>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="notify-icon bg-info">
<i class="mdi mdi-account-plus"></i>
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<h5 class="noti-item-title fw-semibold font-14">Admin <small class="fw-normal text-muted ms-1">1 hours ago</small></h5>
<small class="noti-item-subtitle text-muted">New user registered</small>
</div>
</div>
</div>
</a>
<h5 class="text-muted font-13 fw-normal mt-0">Yesterday</h5>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item p-0 notify-item card read-noti shadow-none mb-2">
<div class="card-body">
<span class="float-end noti-close-btn text-muted"><i class="mdi mdi-close"></i></span>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="notify-icon">
<img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" />
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<h5 class="noti-item-title fw-semibold font-14">Cristina Pride <small class="fw-normal text-muted ms-1">1 day ago</small></h5>
<small class="noti-item-subtitle text-muted">Hi, How are you? What about our next meeting</small>
</div>
</div>
</div>
</a>
<h5 class="text-muted font-13 fw-normal mt-0">30 Dec 2021</h5>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item p-0 notify-item card read-noti shadow-none mb-2">
<div class="card-body">
<span class="float-end noti-close-btn text-muted"><i class="mdi mdi-close"></i></span>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="notify-icon bg-primary">
<i class="mdi mdi-comment-account-outline"></i>
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<h5 class="noti-item-title fw-semibold font-14">Datacorp</h5>
<small class="noti-item-subtitle text-muted">Caleb Flakelar commented on Admin</small>
</div>
</div>
</div>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item p-0 notify-item card read-noti shadow-none mb-2">
<div class="card-body">
<span class="float-end noti-close-btn text-muted"><i class="mdi mdi-close"></i></span>
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<div class="notify-icon">
<img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" />
</div>
</div>
<div class="flex-grow-1 text-truncate ms-2">
<h5 class="noti-item-title fw-semibold font-14">Karen Robinson</h5>
<small class="noti-item-subtitle text-muted">Wow ! this admin looks good and awesome design</small>
</div>
</div>
</div>
</a>
<div class="text-center">
<i class="mdi mdi-dots-circle mdi-spin text-muted h3 mt-0"></i>
</div>
</div>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item border-top py-2">
View All
</a>
</div>
</li>
<li class="dropdown d-none d-sm-inline-block">
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="ri-apps-2-line font-22"></i>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg p-0">
<div class="p-2">
<div class="row g-0">
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/slack.png" alt="slack">
<span>Slack</span>
</a>
</div>
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/github.png" alt="Github">
<span>GitHub</span>
</a>
</div>
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/dribbble.png" alt="dribbble">
<span>Dribbble</span>
</a>
</div>
</div>
<div class="row g-0">
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/bitbucket.png" alt="bitbucket">
<span>Bitbucket</span>
</a>
</div>
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/dropbox.png" alt="dropbox">
<span>Dropbox</span>
</a>
</div>
<div class="col">
<a class="dropdown-icon-item" href="#">
<img src="assets/images/brands/g-suite.png" alt="G Suite">
<span>G Suite</span>
</a>
</div>
</div> <!-- end row-->
</div>
</div>
</li>
<li class="d-none d-sm-inline-block">
<a class="nav-link" data-bs-toggle="offcanvas" href="#theme-settings-offcanvas">
<i class="ri-settings-3-line font-22"></i>
</a>
</li>
<li class="d-none d-sm-inline-block">
<div class="nav-link" id="light-dark-mode" data-bs-toggle="tooltip" data-bs-placement="left" title="Theme Mode">
<i class="ri-moon-line font-22"></i>
</div>
</li>
<li class="d-none d-md-inline-block">
<a class="nav-link" href="" data-toggle="fullscreen">
<i class="ri-fullscreen-line font-22"></i>
</a>
</li>
<li class="dropdown">
<a class="nav-link dropdown-toggle arrow-none nav-user px-2" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<span class="account-user-avatar">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" width="32" class="rounded-circle">
</span>
<span class="d-lg-flex flex-column gap-1 d-none">
<h5 class="my-0">Dominic Keller</h5>
<h6 class="my-0 fw-normal">Founder</h6>
</span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated profile-dropdown">
<!-- item-->
<div class=" dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome !</h6>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<i class="mdi mdi-account-circle me-1"></i>
<span>My Account</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<i class="mdi mdi-account-edit me-1"></i>
<span>Settings</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<i class="mdi mdi-lifebuoy me-1"></i>
<span>Support</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<i class="mdi mdi-lock-outline me-1"></i>
<span>Lock Screen</span>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">
<i class="mdi mdi-logout me-1"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<!-- ========== Topbar End ========== -->
<!-- ========== Left Sidebar Start ========== -->
<div class="leftside-menu">
<!-- Brand Logo Light -->
<a href="index.html" class="logo logo-light">
<span class="logo-lg">
<img src="assets/images/logo.png" alt="logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-sm.png" alt="small logo">
</span>
</a>
<!-- Brand Logo Dark -->
<a href="index.html" class="logo logo-dark">
<span class="logo-lg">
<img src="assets/images/logo-dark.png" alt="dark logo">
</span>
<span class="logo-sm">
<img src="assets/images/logo-dark-sm.png" alt="small logo">
</span>
</a>
<!-- Sidebar Hover Menu Toggle Button -->
<div class="button-sm-hover" data-bs-toggle="tooltip" data-bs-placement="right" title="Show Full Sidebar">
<i class="ri-checkbox-blank-circle-line align-middle"></i>
</div>
<!-- Full Sidebar Menu Close Button -->
<div class="button-close-fullsidebar">
<i class="ri-close-fill align-middle"></i>
</div>
<!-- Sidebar -->
<div class="h-100" id="leftside-menu-container" data-simplebar>
<!-- Leftbar User -->
<div class="leftbar-user">
<a href="pages-profile.html">
<img src="assets/images/users/avatar-1.jpg" alt="user-image" height="42" class="rounded-circle shadow-sm">
<span class="leftbar-user-name mt-2">Dominic Keller</span>
</a>
</div>
<!--- Sidemenu -->
<ul class="side-nav">
<li class="side-nav-title">Navigation</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarDashboards" aria-expanded="false" aria-controls="sidebarDashboards" class="side-nav-link">
<i class="uil-home-alt"></i>
<span class="badge bg-success float-end">5</span>
<span> Dashboards </span>
</a>
<div class="collapse" id="sidebarDashboards">
<ul class="side-nav-second-level">
<li>
<a href="dashboard-analytics.html">Analytics</a>
</li>
<li>
<a href="index.html">Ecommerce</a>
</li>
<li>
<a href="dashboard-projects.html">Projects</a>
</li>
<li>
<a href="dashboard-crm.html">CRM</a>
</li>
<li>
<a href="dashboard-wallet.html">E-Wallet</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-title">Apps</li>
<li class="side-nav-item">
<a href="apps-calendar.html" class="side-nav-link">
<i class="uil-calender"></i>
<span> Calendar </span>
</a>
</li>
<li class="side-nav-item">
<a href="apps-chat.html" class="side-nav-link">
<i class="uil-comments-alt"></i>
<span> Chat </span>
</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarCrm" aria-expanded="false" aria-controls="sidebarCrm" class="side-nav-link">
<i class="uil uil-tachometer-fast"></i>
<span class="badge bg-danger text-white float-end">New</span>
<span> CRM </span>
</a>
<div class="collapse" id="sidebarCrm">
<ul class="side-nav-second-level">
<li>
<a href="crm-projects.html">Projects</a>
</li>
<li>
<a href="crm-orders-list.html">Orders List</a>
</li>
<li>
<a href="crm-clients.html">Clients</a>
</li>
<li>
<a href="crm-management.html">Management</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarEcommerce" aria-expanded="false" aria-controls="sidebarEcommerce" class="side-nav-link">
<i class="uil-store"></i>
<span> Ecommerce </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarEcommerce">
<ul class="side-nav-second-level">
<li>
<a href="apps-ecommerce-products.html">Products</a>
</li>
<li>
<a href="apps-ecommerce-products-details.html">Products Details</a>
</li>
<li>
<a href="apps-ecommerce-orders.html">Orders</a>
</li>
<li>
<a href="apps-ecommerce-orders-details.html">Order Details</a>
</li>
<li>
<a href="apps-ecommerce-customers.html">Customers</a>
</li>
<li>
<a href="apps-ecommerce-shopping-cart.html">Shopping Cart</a>
</li>
<li>
<a href="apps-ecommerce-checkout.html">Checkout</a>
</li>
<li>
<a href="apps-ecommerce-sellers.html">Sellers</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
<i class="uil-envelope"></i>
<span> Email </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarEmail">
<ul class="side-nav-second-level">
<li>
<a href="apps-email-inbox.html">Inbox</a>
</li>
<li>
<a href="apps-email-read.html">Read Email</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarProjects" aria-expanded="false" aria-controls="sidebarProjects" class="side-nav-link">
<i class="uil-briefcase"></i>
<span> Projects </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarProjects">
<ul class="side-nav-second-level">
<li>
<a href="apps-projects-list.html">List</a>
</li>
<li>
<a href="apps-projects-details.html">Details</a>
</li>
<li>
<a href="apps-projects-gantt.html">Gantt <span class="badge rounded-pill bg-light text-dark font-10 float-end">New</span></a>
</li>
<li>
<a href="apps-projects-add.html">Create Project</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a href="apps-social-feed.html" class="side-nav-link">
<i class="uil-rss"></i>
<span> Social Feed </span>
</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarTasks" aria-expanded="false" aria-controls="sidebarTasks" class="side-nav-link">
<i class="uil-clipboard-alt"></i>
<span> Tasks </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarTasks">
<ul class="side-nav-second-level">
<li>
<a href="apps-tasks.html">List</a>
</li>
<li>
<a href="apps-tasks-details.html">Details</a>
</li>
<li>
<a href="apps-kanban.html">Kanban Board</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a href="apps-file-manager.html" class="side-nav-link">
<i class="uil-folder-plus"></i>
<span> File Manager </span>
</a>
</li>
<li class="side-nav-title">Custom</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" aria-controls="sidebarPages" class="side-nav-link">
<i class="uil-copy-alt"></i>
<span> Pages </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarPages">
<ul class="side-nav-second-level">
<li>
<a href="pages-profile.html">Profile</a>
</li>
<li>
<a href="pages-profile-2.html">Profile 2</a>
</li>
<li>
<a href="pages-invoice.html">Invoice</a>
</li>
<li>
<a href="pages-faq.html">FAQ</a>
</li>
<li>
<a href="pages-pricing.html">Pricing</a>
</li>
<li>
<a href="pages-maintenance.html">Maintenance</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" aria-controls="sidebarPagesAuth">
<span> Authentication </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarPagesAuth">
<ul class="side-nav-third-level">
<li>
<a href="pages-login.html">Login</a>
</li>
<li>
<a href="pages-login-2.html">Login 2</a>
</li>
<li>
<a href="pages-register.html">Register</a>
</li>
<li>
<a href="pages-register-2.html">Register 2</a>
</li>
<li>
<a href="pages-logout.html">Logout</a>
</li>
<li>
<a href="pages-logout-2.html">Logout 2</a>
</li>
<li>
<a href="pages-recoverpw.html">Recover Password</a>
</li>
<li>
<a href="pages-recoverpw-2.html">Recover Password 2</a>
</li>
<li>
<a href="pages-lock-screen.html">Lock Screen</a>
</li>
<li>
<a href="pages-lock-screen-2.html">Lock Screen 2</a>
</li>
<li>
<a href="pages-confirm-mail.html">Confirm Mail</a>
</li>
<li>
<a href="pages-confirm-mail-2.html">Confirm Mail 2</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarPagesError" aria-expanded="false" aria-controls="sidebarPagesError">
<span> Error </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarPagesError">
<ul class="side-nav-third-level">
<li>
<a href="pages-404.html">Error 404</a>
</li>
<li>
<a href="pages-404-alt.html">Error 404-alt</a>
</li>
<li>
<a href="pages-500.html">Error 500</a>
</li>
</ul>
</div>
</li>
<li>
<a href="pages-starter.html">Starter Page</a>
</li>
<li>
<a href="pages-preloader.html">With Preloader</a>
</li>
<li>
<a href="pages-timeline.html">Timeline</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a href="landing.html" target="_blank" class="side-nav-link">
<i class="uil-globe"></i>
<span class="badge text-bg-secondary float-end">New</span>
<span> Landing </span>
</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" aria-controls="sidebarLayouts" class="side-nav-link">
<i class="uil-window"></i>
<span> Layouts </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarLayouts">
<ul class="side-nav-second-level">
<li>
<a href="layouts-horizontal.html" target="_blank">Horizontal</a>
</li>
<li>
<a href="layouts-detached.html" target="_blank">Detached</a>
</li>
<li>
<a href="layouts-full.html" target="_blank">Full View</a>
</li>
<li>
<a href="layouts-fullscreen.html" target="_blank">Fullscreen View</a>
</li>
<li>
<a href="layouts-hover.html" target="_blank">Hover Menu</a>
</li>
<li>
<a href="layouts-compact.html" target="_blank">Compact</a>
</li>
<li>
<a href="layouts-icon-view.html" target="_blank">Icon View</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-title">Components</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" aria-controls="sidebarBaseUI" class="side-nav-link">
<i class="uil-box"></i>
<span> Base UI </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarBaseUI">
<ul class="side-nav-second-level">
<li>
<a href="ui-accordions.html">Accordions & Collapse</a>
</li>
<li>
<a href="ui-alerts.html">Alerts</a>
</li>
<li>
<a href="ui-avatars.html">Avatars</a>
</li>
<li>
<a href="ui-badges.html">Badges</a>
</li>
<li>
<a href="ui-breadcrumb.html">Breadcrumb</a>
</li>
<li>
<a href="ui-buttons.html">Buttons</a>
</li>
<li>
<a href="ui-cards.html">Cards</a>
</li>
<li>
<a href="ui-carousel.html">Carousel</a>
</li>
<li>
<a href="ui-dropdowns.html">Dropdowns</a>
</li>
<li>
<a href="ui-embed-video.html">Embed Video</a>
</li>
<li>
<a href="ui-grid.html">Grid</a>
</li>
<li>
<a href="ui-list-group.html">List Group</a>
</li>
<li>
<a href="ui-modals.html">Modals</a>
</li>
<li>
<a href="ui-notifications.html">Notifications</a>
</li>
<li>
<a href="ui-offcanvas.html">Offcanvas</a>
</li>
<li>
<a href="ui-placeholders.html">Placeholders</a>
</li>
<li>
<a href="ui-pagination.html">Pagination</a>
</li>
<li>
<a href="ui-popovers.html">Popovers</a>
</li>
<li>
<a href="ui-progress.html">Progress</a>
</li>
<li>
<a href="ui-ribbons.html">Ribbons</a>
</li>
<li>
<a href="ui-spinners.html">Spinners</a>
</li>
<li>
<a href="ui-tabs.html">Tabs</a>
</li>
<li>
<a href="ui-tooltips.html">Tooltips</a>
</li>
<li>
<a href="ui-links.html">Links</a>
</li>
<li>
<a href="ui-typography.html">Typography</a>
</li>
<li>
<a href="ui-utilities.html">Utilities</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarExtendedUI" aria-expanded="false" aria-controls="sidebarExtendedUI" class="side-nav-link">
<i class="uil-package"></i>
<span> Extended UI </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarExtendedUI">
<ul class="side-nav-second-level">
<li>
<a href="extended-dragula.html">Dragula</a>
</li>
<li>
<a href="extended-range-slider.html">Range Slider</a>
</li>
<li>
<a href="extended-ratings.html">Ratings</a>
</li>
<li>
<a href="extended-scrollbar.html">Scrollbar</a>
</li>
<li>
<a href="extended-scrollspy.html">Scrollspy</a>
</li>
<li>
<a href="extended-treeview.html">Treeview</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a href="widgets.html" class="side-nav-link">
<i class="uil-layer-group"></i>
<span> Widgets </span>
</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" aria-controls="sidebarIcons" class="side-nav-link">
<i class="uil-streering"></i>
<span> Icons </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarIcons">
<ul class="side-nav-second-level">
<li>
<a href="icons-remixicons.html">Remix Icons</a>
</li>
<li>
<a href="icons-mdi.html">Material Design</a>
</li>
<li>
<a href="icons-unicons.html">Unicons</a>
</li>
<li>
<a href="icons-lucide.html">Lucide</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" aria-controls="sidebarCharts" class="side-nav-link">
<i class="uil-chart"></i>
<span> Charts </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarCharts">
<ul class="side-nav-second-level">
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarApexCharts" aria-expanded="false" aria-controls="sidebarApexCharts">
<span> Apex Charts </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarApexCharts">
<ul class="side-nav-third-level">
<li>
<a href="charts-apex-area.html">Area</a>
</li>
<li>
<a href="charts-apex-bar.html">Bar</a>
</li>
<li>
<a href="charts-apex-bubble.html">Bubble</a>
</li>
<li>
<a href="charts-apex-candlestick.html">Candlestick</a>
</li>
<li>
<a href="charts-apex-column.html">Column</a>
</li>
<li>
<a href="charts-apex-heatmap.html">Heatmap</a>
</li>
<li>
<a href="charts-apex-line.html">Line</a>
</li>
<li>
<a href="charts-apex-mixed.html">Mixed</a>
</li>
<li>
<a href="charts-apex-timeline.html">Timeline</a>
</li>
<li>
<a href="charts-apex-boxplot.html">Boxplot</a>
</li>
<li>
<a href="charts-apex-treemap.html">Treemap</a>
</li>
<li>
<a href="charts-apex-pie.html">Pie</a>
</li>
<li>
<a href="charts-apex-radar.html">Radar</a>
</li>
<li>
<a href="charts-apex-radialbar.html">RadialBar</a>
</li>
<li>
<a href="charts-apex-scatter.html">Scatter</a>
</li>
<li>
<a href="charts-apex-polar-area.html">Polar Area</a>
</li>
<li>
<a href="charts-apex-sparklines.html">Sparklines</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarChartJSCharts" aria-expanded="false" aria-controls="sidebarChartJSCharts">
<span> ChartJS </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarChartJSCharts">
<ul class="side-nav-third-level">
<li>
<a href="charts-chartjs-area.html">Area</a>
</li>
<li>
<a href="charts-chartjs-bar.html">Bar</a>
</li>
<li>
<a href="charts-chartjs-line.html">Line</a>
</li>
<li>
<a href="charts-chartjs-other.html">Other</a>
</li>
</ul>
</div>
</li>
<li>
<a href="charts-sparkline.html">Sparklines</a>
</li>
<li>
<a href="charts-brite.html">Britecharts</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" aria-controls="sidebarForms" class="side-nav-link">
<i class="uil-document-layout-center"></i>
<span> Forms </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarForms">
<ul class="side-nav-second-level">
<li>
<a href="form-elements.html">Basic Elements</a>
</li>
<li>
<a href="form-advanced.html">Form Advanced</a>
</li>
<li>
<a href="form-validation.html">Validation</a>
</li>
<li>
<a href="form-wizard.html">Wizard</a>
</li>
<li>
<a href="form-fileuploads.html">File Uploads</a>
</li>
<li>
<a href="form-editors.html">Editors</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" aria-controls="sidebarTables" class="side-nav-link">
<i class="uil-table"></i>
<span> Tables </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarTables">
<ul class="side-nav-second-level">
<li>
<a href="tables-basic.html">Basic Tables</a>
</li>
<li>
<a href="tables-datatable.html">Data Tables</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" aria-controls="sidebarMaps" class="side-nav-link">
<i class="uil-location-point"></i>
<span> Maps </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarMaps">
<ul class="side-nav-second-level">
<li>
<a href="maps-google.html">Google Maps</a>
</li>
<li>
<a href="maps-vector.html">Vector Maps</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarMultiLevel" aria-expanded="false" aria-controls="sidebarMultiLevel" class="side-nav-link">
<i class="uil-folder-plus"></i>
<span> Multi Level </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarMultiLevel">
<ul class="side-nav-second-level">
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarSecondLevel" aria-expanded="false" aria-controls="sidebarSecondLevel">
<span> Second Level </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarSecondLevel">
<ul class="side-nav-third-level">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2</a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarThirdLevel" aria-expanded="false" aria-controls="sidebarThirdLevel">
<span> Third Level </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarThirdLevel">
<ul class="side-nav-third-level">
<li>
<a href="javascript: void(0);">Item 1</a>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarFourthLevel" aria-expanded="false" aria-controls="sidebarFourthLevel">
<span> Item 2 </span>
<span class="menu-arrow"></span>
</a>
<div class="collapse" id="sidebarFourthLevel">
<ul class="side-nav-forth-level">
<li>
<a href="javascript: void(0);">Item 2.1</a>
</li>
<li>
<a href="javascript: void(0);">Item 2.2</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<!-- Help Box -->
<div class="help-box text-white text-center">
<a href="javascript: void(0);" class="float-end close-btn text-white">
<i class="mdi mdi-close"></i>
</a>
<img src="assets/images/svg/help-icon.svg" height="90" alt="Helper Icon Image" />
<h5 class="mt-3">Unlimited Access</h5>
<p class="mb-3">Upgrade to plan to get access to unlimited reports</p>
<a href="javascript: void(0);" class="btn btn-secondary btn-sm">Upgrade</a>
</div>
<!-- end Help Box -->
</ul>
<!--- End Sidemenu -->
<div class="clearfix"></div>
</div>
</div>
<!-- ========== Left Sidebar End ========== -->
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="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);">Hyper</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Icons</a></li>
<li class="breadcrumb-item active">Unicons</li>
</ol>
</div>
<h4 class="page-title">Unicons</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 mb-4">Arrows</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-center-h'></i> uil-align-center-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-growth'></i> uil-arrow-growth
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-maximize-left'></i> uil-maximize-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-enter'></i> uil-enter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-code'></i> uil-code
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-resize'></i> uil-arrows-resize
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-resize-h'></i> uil-arrows-resize-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-shrink-h'></i> uil-arrows-shrink-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-h-alt'></i> uil-arrows-h-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-h'></i> uil-arrows-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-up-right-alt'></i> uil-corner-up-right-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-left'></i> uil-expand-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-scaling-right'></i> uil-scaling-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-download-alt'></i> uil-download-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-down-arrow'></i> uil-down-arrow
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-scaling-left'></i> uil-scaling-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-down'></i> uil-chart-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-double-down'></i> uil-angle-double-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-double-left'></i> uil-angle-double-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-double-right'></i> uil-angle-double-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-circle-down'></i> uil-arrow-circle-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-alt'></i> uil-expand-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-down'></i> uil-angle-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-resize-diagonal'></i> uil-arrow-resize-diagonal
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exchange-alt'></i> uil-exchange-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exchange'></i> uil-exchange
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-arrows'></i> uil-compress-arrows
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-caret-right'></i> uil-caret-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-from-top'></i> uil-arrow-from-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-to-bottom'></i> uil-arrow-to-bottom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-scroll'></i> uil-scroll
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sort'></i> uil-sort
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-scroll-h'></i> uil-scroll-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-right-down'></i> uil-arrows-right-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-left-down'></i> uil-arrows-left-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-up-right'></i> uil-arrows-up-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-point'></i> uil-compress-point
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-compress-h'></i> uil-arrow-compress-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-resize-v'></i> uil-arrows-resize-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-break'></i> uil-arrow-break
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-v-alt'></i> uil-arrows-v-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-v'></i> uil-arrows-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-shrink-v'></i> uil-arrows-shrink-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-center-v'></i> uil-align-center-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-up-right'></i> uil-arrow-up-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-up-left'></i> uil-arrow-up-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-up'></i> uil-angle-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-circle-up'></i> uil-arrow-circle-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-export'></i> uil-export
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-upload-alt'></i> uil-upload-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-double-up'></i> uil-angle-double-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-up-right'></i> uil-corner-up-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-up-left'></i> uil-corner-up-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sorting'></i> uil-sorting
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-right-down'></i> uil-corner-right-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-left-down'></i> uil-corner-left-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-down-right'></i> uil-corner-down-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-down-left'></i> uil-corner-down-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shuffle'></i> uil-shuffle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-down-right-alt'></i> uil-corner-down-right-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-top-arrow-to-top'></i> uil-top-arrow-to-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-top-arrow-from-top'></i> uil-top-arrow-from-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-random'></i> uil-arrow-random
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-direction'></i> uil-direction
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-right'></i> uil-angle-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-right-b'></i> uil-angle-right-b
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-circle-right'></i> uil-arrow-circle-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-to-right'></i> uil-arrow-to-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-from-right'></i> uil-arrow-from-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-from-corner'></i> uil-expand-from-corner
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-alt-left'></i> uil-compress-alt-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-alt'></i> uil-compress-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-arrows-alt'></i> uil-expand-arrows-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-corner-up-left-alt'></i> uil-corner-up-left-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-maximize'></i> uil-arrows-maximize
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-arrows'></i> uil-expand-arrows
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-down-right'></i> uil-arrow-down-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-down-left'></i> uil-arrow-down-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angle-left'></i> uil-angle-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-circle-left'></i> uil-arrow-circle-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-left-arrow-to-left'></i> uil-left-arrow-to-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-left-arrow-from-left'></i> uil-left-arrow-from-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrows-merge'></i> uil-arrows-merge
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-down'></i> uil-arrow-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-right'></i> uil-arrow-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-up'></i> uil-arrow-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-arrow-left'></i> uil-arrow-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-expand-right'></i> uil-expand-right
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Brand Logos</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dropbox'></i> uil-dropbox
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-google-drive-alt'></i> uil-google-drive-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dribbble'></i> uil-dribbble
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-line'></i> uil-line
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-facebook-f'></i> uil-facebook-f
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-instagram'></i> uil-instagram
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-facebook-messenger'></i> uil-facebook-messenger
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-black-berry'></i> uil-black-berry
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-intercom'></i> uil-intercom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-linkedin'></i> uil-linkedin
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-facebook'></i> uil-facebook
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-apple'></i> uil-apple
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-snapchat-ghost'></i> uil-snapchat-ghost
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-snapchat-square'></i> uil-snapchat-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-adobe'></i> uil-adobe
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-twitter'></i> uil-twitter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-behance'></i> uil-behance
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-instagram-alt'></i> uil-instagram-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-500px'></i> uil-500px
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-youtube'></i> uil-youtube
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-whatsapp'></i> uil-whatsapp
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-visual-studio'></i> uil-visual-studio
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tumblr-square'></i> uil-tumblr-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tumblr'></i> uil-tumblr
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-slack'></i> uil-slack
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medium-m'></i> uil-medium-m
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-github-alt'></i> uil-github-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-linkedin-alt'></i> uil-linkedin-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-google'></i> uil-google
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-raddit-alien-alt'></i> uil-raddit-alien-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vuejs'></i> uil-vuejs
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-google-play'></i> uil-google-play
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-google-drive'></i> uil-google-drive
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vuejs-alt'></i> uil-vuejs-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-github'></i> uil-github
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-slack-alt'></i> uil-slack-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-google-hangouts'></i> uil-google-hangouts
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-java-script'></i> uil-java-script
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-paypal'></i> uil-paypal
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Business</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-withdrawal'></i> uil-money-withdrawal
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-pie'></i> uil-chart-pie
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bill'></i> uil-bill
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-stack'></i> uil-money-stack
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-briefcase-alt'></i> uil-briefcase-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-suitcase-alt'></i> uil-suitcase-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-invoice'></i> uil-invoice
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-receipt'></i> uil-receipt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-yen'></i> uil-yen
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-yen-circle'></i> uil-yen-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-analysis'></i> uil-analysis
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-line'></i> uil-presentation-line
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pound'></i> uil-pound
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pound-circle'></i> uil-pound-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-line'></i> uil-chart-line
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-moneybag-alt'></i> uil-moneybag-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bag-alt'></i> uil-bag-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-moneybag'></i> uil-moneybag
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-suitcase'></i> uil-suitcase
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-euro'></i> uil-euro
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-insert'></i> uil-money-insert
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dollar-alt'></i> uil-dollar-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dollar-sign'></i> uil-dollar-sign
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-euro-circle'></i> uil-euro-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bag'></i> uil-bag
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-withdraw'></i> uil-money-withdraw
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-usd-square'></i> uil-usd-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dollar-sign-alt'></i> uil-dollar-sign-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-atm-card'></i> uil-atm-card
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-usd-circle'></i> uil-usd-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-bill'></i> uil-money-bill
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-money-bill-stack'></i> uil-money-bill-stack
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bitcoin-circle'></i> uil-bitcoin-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bitcoin'></i> uil-bitcoin
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-receipt-alt'></i> uil-receipt-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-graph-bar'></i> uil-graph-bar
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-signal-alt-3'></i> uil-signal-alt-3
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-growth'></i> uil-chart-growth
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart'></i> uil-chart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-bar'></i> uil-chart-bar
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-growth-alt'></i> uil-chart-growth-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-briefcase'></i> uil-briefcase
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-analytics'></i> uil-analytics
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-bar-alt'></i> uil-chart-bar-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calculator-alt'></i> uil-calculator-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crosshairs'></i> uil-crosshairs
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calendar-alt'></i> uil-calendar-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lightbulb'></i> uil-lightbulb
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chart-pie-alt'></i> uil-chart-pie-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-schedule'></i> uil-schedule
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-coins'></i> uil-coins
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lightbulb-alt'></i> uil-lightbulb-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-gold'></i> uil-gold
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-puzzle-piece'></i> uil-puzzle-piece
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sitemap'></i> uil-sitemap
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-hunting'></i> uil-hunting
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crosshair'></i> uil-crosshair
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crosshair-alt'></i> uil-crosshair-alt
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Chat</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-plus'></i> uil-comment-alt-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-plus'></i> uil-comment-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-redo'></i> uil-comment-alt-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-upload'></i> uil-comment-alt-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-upload'></i> uil-comment-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-medical'></i> uil-comment-alt-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-question'></i> uil-comment-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-heart'></i> uil-comment-alt-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-shield'></i> uil-comment-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-search'></i> uil-comment-search
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-shield'></i> uil-comment-alt-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-redo'></i> uil-comment-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-search'></i> uil-comment-alt-search
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-lock'></i> uil-comment-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-heart'></i> uil-comment-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-question'></i> uil-comment-alt-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-medical'></i> uil-comment-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-lock'></i> uil-comment-alt-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-share'></i> uil-comment-share
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-share'></i> uil-comment-alt-share
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-edit'></i> uil-comment-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-download'></i> uil-comment-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chat'></i> uil-chat
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-image'></i> uil-comment-alt-image
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-image'></i> uil-comment-image
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-download'></i> uil-comment-alt-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chat-bubble-user'></i> uil-chat-bubble-user
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-edit'></i> uil-comment-alt-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-lines'></i> uil-comment-lines
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-dots'></i> uil-comment-alt-dots
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-dots'></i> uil-comment-dots
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comments'></i> uil-comments
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-lines'></i> uil-comment-alt-lines
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-notes'></i> uil-comment-notes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-notes'></i> uil-comment-alt-notes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment'></i> uil-comment
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-message'></i> uil-comment-alt-message
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-chart-lines'></i> uil-comment-alt-chart-lines
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-message'></i> uil-comment-message
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comments-alt'></i> uil-comments-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt'></i> uil-comment-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-check'></i> uil-comment-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-chart-line'></i> uil-comment-chart-line
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-info-alt'></i> uil-comment-info-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-check'></i> uil-comment-alt-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-block'></i> uil-comment-alt-block
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-block'></i> uil-comment-block
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-verify'></i> uil-comment-verify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-verify'></i> uil-comment-alt-verify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-chat-info'></i> uil-chat-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-info'></i> uil-comment-alt-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-info'></i> uil-comment-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-exclamation'></i> uil-comment-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-exclamation'></i> uil-comment-alt-exclamation
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Cloud And Web</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-computing'></i> uil-cloud-computing
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-bookmark'></i> uil-cloud-bookmark
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-times'></i> uil-cloud-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-block'></i> uil-cloud-block
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-window'></i> uil-window
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-check'></i> uil-cloud-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-window-section'></i> uil-window-section
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-window-maximize'></i> uil-window-maximize
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-window-grid'></i> uil-window-grid
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-columns'></i> uil-columns
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-web-section-alt'></i> uil-web-section-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-web-section'></i> uil-web-section
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-web-grid-alt'></i> uil-web-grid-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grid'></i> uil-grid
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-web-grid'></i> uil-web-grid
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-server-alt'></i> uil-server-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-slash'></i> uil-cloud-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-server-connection'></i> uil-server-connection
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-database-alt'></i> uil-database-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-database'></i> uil-database
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-exclamation'></i> uil-cloud-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-upload'></i> uil-cloud-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-unlock'></i> uil-cloud-unlock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-shield'></i> uil-cloud-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-share'></i> uil-cloud-share
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-server'></i> uil-server
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-server-network-alt'></i> uil-server-network-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-server-network'></i> uil-server-network
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-servers'></i> uil-servers
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-redo'></i> uil-cloud-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-lock'></i> uil-cloud-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-heart'></i> uil-cloud-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-info'></i> uil-cloud-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-question'></i> uil-cloud-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-download'></i> uil-cloud-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-wifi'></i> uil-cloud-wifi
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-database-tree'></i> uil-cloud-database-tree
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-data-connection'></i> uil-cloud-data-connection
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-data-sharing'></i> uil-data-sharing
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-window-restore'></i> uil-window-restore
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bug'></i> uil-bug
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Communication</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-check'></i> uil-envelope-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-block'></i> uil-envelope-block
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-exclamation'></i> uil-envelope-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-add'></i> uil-envelope-add
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-outgoing-call'></i> uil-outgoing-call
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone-slash'></i> uil-phone-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-alt'></i> uil-envelope-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope'></i> uil-envelope
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-incoming-call'></i> uil-incoming-call
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone'></i> uil-phone
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone-alt'></i> uil-phone-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-forwaded-call'></i> uil-forwaded-call
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone-times'></i> uil-phone-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-share'></i> uil-envelope-share
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-upload-alt'></i> uil-envelope-upload-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-upload'></i> uil-envelope-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-receive'></i> uil-envelope-receive
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-minus'></i> uil-envelope-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-redo'></i> uil-envelope-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-search'></i> uil-envelope-search
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mailbox-alt'></i> uil-mailbox-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-shield'></i> uil-envelope-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-open'></i> uil-envelope-open
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-download-alt'></i> uil-envelope-download-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelopes'></i> uil-envelopes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone-volume'></i> uil-phone-volume
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-heart'></i> uil-envelope-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mailbox'></i> uil-mailbox
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calling'></i> uil-calling
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-laptop-cloud'></i> uil-laptop-cloud
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-download'></i> uil-envelope-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-technology'></i> uil-technology
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-info'></i> uil-envelope-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-fast-mail'></i> uil-fast-mail
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-question'></i> uil-envelope-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-send'></i> uil-envelope-send
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-postcard'></i> uil-postcard
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-fast-mail-alt'></i> uil-fast-mail-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-edit'></i> uil-envelope-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desktop-cloud-alt'></i> uil-desktop-cloud-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-bookmark'></i> uil-envelope-bookmark
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-times'></i> uil-envelope-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-star'></i> uil-envelope-star
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-missed-call'></i> uil-missed-call
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-phone-pause'></i> uil-phone-pause
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-envelope-lock'></i> uil-envelope-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rss-alt'></i> uil-rss-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-post-stamp'></i> uil-post-stamp
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Construction</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-screw'></i> uil-screw
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tape'></i> uil-tape
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-drill'></i> uil-drill
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shovel'></i> uil-shovel
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-no-entry'></i> uil-no-entry
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-paint-tool'></i> uil-paint-tool
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-constructor'></i> uil-constructor
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-jackhammer'></i> uil-jackhammer
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-traffic-barrier'></i> uil-traffic-barrier
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wall'></i> uil-wall
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wheel-barrow'></i> uil-wheel-barrow
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trowel'></i> uil-trowel
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-hard-hat'></i> uil-user-hard-hat
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Content</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-inner'></i> uil-border-inner
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-horizontal'></i> uil-border-horizontal
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grip-horizontal-line'></i> uil-grip-horizontal-line
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-document-layout-left'></i> uil-document-layout-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-document-layout-center'></i> uil-document-layout-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-document-layout-right'></i> uil-document-layout-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dialpad'></i> uil-dialpad
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-center'></i> uil-align-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-center-justify'></i> uil-align-center-justify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dialpad-alt'></i> uil-dialpad-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-bottom'></i> uil-border-bottom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-alt'></i> uil-border-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-alt'></i> uil-align-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-letter-right'></i> uil-align-letter-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-center-alt'></i> uil-align-center-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sort-amount-down'></i> uil-sort-amount-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sort-amount-up'></i> uil-sort-amount-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wrap-text'></i> uil-wrap-text
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-vertical'></i> uil-border-vertical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-top'></i> uil-border-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-left-justify'></i> uil-align-left-justify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-paragraph'></i> uil-paragraph
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align'></i> uil-align
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-right-indent-alt'></i> uil-right-indent-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-right-justify'></i> uil-align-right-justify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-right'></i> uil-border-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-right'></i> uil-align-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-clear'></i> uil-border-clear
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-list-ul'></i> uil-list-ul
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-list-ui-alt'></i> uil-list-ui-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-left-indent'></i> uil-left-indent
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-left-indent-alt'></i> uil-left-indent-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-left'></i> uil-border-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-subject'></i> uil-subject
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-left'></i> uil-align-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bars'></i> uil-bars
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-align-justify'></i> uil-align-justify
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bold'></i> uil-bold
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-text'></i> uil-text
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-underline'></i> uil-underline
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-text-strike-through'></i> uil-text-strike-through
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-italic'></i> uil-italic
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-text-size'></i> uil-text-size
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-text-fields'></i> uil-text-fields
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sigma'></i> uil-sigma
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-right-to-left-text-direction'></i> uil-right-to-left-text-direction
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-left-to-right-text-direction'></i> uil-left-to-right-text-direction
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Design Tools</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-align-top'></i> uil-vertical-align-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vector-square-alt'></i> uil-vector-square-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-object-ungroup'></i> uil-object-ungroup
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flip-h-alt'></i> uil-flip-h-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-th'></i> uil-th
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-panorama-v'></i> uil-panorama-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-align-center'></i> uil-vertical-align-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-distribute-bottom'></i> uil-vertical-distribute-bottom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flip-v'></i> uil-flip-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-align-bottom'></i> uil-vertical-align-bottom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pathfinder-unite'></i> uil-pathfinder-unite
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-square-full'></i> uil-square-full
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vector-square'></i> uil-vector-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ruler-combined'></i> uil-ruler-combined
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ruler'></i> uil-ruler
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-panorama-h-alt'></i> uil-panorama-h-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-panorama-h'></i> uil-panorama-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-object-group'></i> uil-object-group
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-line-alt'></i> uil-line-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-layers-alt'></i> uil-layers-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pathfinder'></i> uil-pathfinder
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-resize-square'></i> uil-image-resize-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flip-h'></i> uil-flip-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-resize-landscape'></i> uil-image-resize-landscape
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-distribution-right'></i> uil-horizontal-distribution-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-distribution-center'></i> uil-horizontal-distribution-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-distribution-left'></i> uil-horizontal-distribution-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-align-left'></i> uil-horizontal-align-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-align-right'></i> uil-horizontal-align-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-horizontal-align-center'></i> uil-horizontal-align-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-table'></i> uil-table
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-apps'></i> uil-apps
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-th-slash'></i> uil-th-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grids'></i> uil-grids
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exclude'></i> uil-exclude
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crop-alt-rotate-right'></i> uil-crop-alt-rotate-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crop-alt-rotate-left'></i> uil-crop-alt-rotate-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crop-alt'></i> uil-crop-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-circle-layer'></i> uil-circle-layer
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brush-alt'></i> uil-brush-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flip-v-alt'></i> uil-flip-v-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-distribution-top'></i> uil-vertical-distribution-top
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-vertical-distribution-center'></i> uil-vertical-distribution-center
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-border-out'></i> uil-border-out
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-minus-path'></i> uil-minus-path
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-repeat'></i> uil-repeat
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-line-spacing'></i> uil-line-spacing
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shrink'></i> uil-shrink
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-th-large'></i> uil-th-large
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bring-bottom'></i> uil-bring-bottom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bring-front'></i> uil-bring-front
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-v'></i> uil-compress-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress-lines'></i> uil-compress-lines
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-spin'></i> uil-spin
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compress'></i> uil-compress
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-palette'></i> uil-palette
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Devices</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mouse-alt'></i> uil-mouse-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tablet'></i> uil-tablet
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-print'></i> uil-print
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desktop-alt'></i> uil-desktop-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mobile-android-alt'></i> uil-mobile-android-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desktop'></i> uil-desktop
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-computer-mouse'></i> uil-computer-mouse
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mobile-android'></i> uil-mobile-android
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-laptop'></i> uil-laptop
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mouse'></i> uil-mouse
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-modem'></i> uil-modem
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-hdd'></i> uil-hdd
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-monitor'></i> uil-monitor
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-webcam'></i> uil-webcam
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wifi-router'></i> uil-wifi-router
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-weight'></i> uil-weight
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-processor'></i> uil-processor
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-circuit'></i> uil-circuit
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Education</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dna'></i> uil-dna
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flask'></i> uil-flask
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-diary'></i> uil-diary
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-diary-alt'></i> uil-diary-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-plus'></i> uil-presentation-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-lines-alt'></i> uil-presentation-lines-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-edit'></i> uil-presentation-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-book-alt'></i> uil-book-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-check'></i> uil-presentation-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-minus'></i> uil-presentation-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-times'></i> uil-presentation-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-science'></i> uil-science
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-atom'></i> uil-atom
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-backpack'></i> uil-backpack
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-notes'></i> uil-notes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-book'></i> uil-book
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flask-potion'></i> uil-flask-potion
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cell'></i> uil-cell
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-podium'></i> uil-podium
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-meeting-board'></i> uil-meeting-board
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-award'></i> uil-award
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medal'></i> uil-medal
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-graduation-hat'></i> uil-graduation-hat
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bell-school'></i> uil-bell-school
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-abacus'></i> uil-abacus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-game-structure'></i> uil-game-structure
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-telescope'></i> uil-telescope
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sperms'></i> uil-sperms
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation-play'></i> uil-presentation-play
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-award-alt'></i> uil-award-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-presentation'></i> uil-presentation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-book-open'></i> uil-book-open
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-notebooks'></i> uil-notebooks
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-robot'></i> uil-robot
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Emoji</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-nerd'></i> uil-nerd
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile'></i> uil-smile
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sad-dizzy'></i> uil-sad-dizzy
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-annoyed'></i> uil-annoyed
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sad'></i> uil-sad
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-meh-alt'></i> uil-meh-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-frown'></i> uil-frown
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-silence'></i> uil-silence
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-dizzy'></i> uil-smile-dizzy
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-squint'></i> uil-squint
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-meh'></i> uil-meh
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dizzy-meh'></i> uil-dizzy-meh
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-meh-closed-eye'></i> uil-meh-closed-eye
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sad-squint'></i> uil-sad-squint
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-beam'></i> uil-smile-beam
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sad-crying'></i> uil-sad-crying
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ninja'></i> uil-ninja
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-laughing'></i> uil-laughing
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-emoji'></i> uil-emoji
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sad-cry'></i> uil-sad-cry
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-annoyed-alt'></i> uil-annoyed-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-confused'></i> uil-confused
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grin'></i> uil-grin
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-wink-alt'></i> uil-smile-wink-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-unamused'></i> uil-unamused
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-squint-wink-alt'></i> uil-smile-squint-wink-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-kid'></i> uil-kid
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-surprise'></i> uil-surprise
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grin-tongue-wink'></i> uil-grin-tongue-wink
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-grin-tongue-wink-alt'></i> uil-grin-tongue-wink-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-squint-wink'></i> uil-smile-squint-wink
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-silent-squint'></i> uil-silent-squint
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-smile-wink'></i> uil-smile-wink
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sick'></i> uil-sick
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-angry'></i> uil-angry
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">File And Foloder</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-files-landscapes'></i> uil-files-landscapes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-books'></i> uil-books
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-plus-alt'></i> uil-file-plus-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clipboard-alt'></i> uil-clipboard-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-contract-dollar'></i> uil-file-contract-dollar
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-network'></i> uil-file-network
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-upload'></i> uil-folder-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-upload'></i> uil-file-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-upload-alt'></i> uil-file-upload-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-search-alt'></i> uil-file-search-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-minus'></i> uil-folder-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-share-alt'></i> uil-file-share-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-redo-alt'></i> uil-file-redo-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-shield-alt'></i> uil-file-shield-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-minus-alt'></i> uil-file-minus-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-minus'></i> uil-file-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-medical'></i> uil-folder-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-medical'></i> uil-file-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-lock'></i> uil-folder-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-lock-alt'></i> uil-file-lock-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-files-landscapes-alt'></i> uil-files-landscapes-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-landscape-alt'></i> uil-file-landscape-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-landscape'></i> uil-file-landscape
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-question'></i> uil-file-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-question'></i> uil-folder-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-question-alt'></i> uil-file-question-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder'></i> uil-folder
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-exclamation'></i> uil-folder-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-info'></i> uil-folder-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-heart'></i> uil-folder-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-heart'></i> uil-file-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-download'></i> uil-folder-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-copy-alt'></i> uil-file-copy-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-alt'></i> uil-file-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-download-alt'></i> uil-file-download-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-edit-alt'></i> uil-file-edit-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-copy-landscape'></i> uil-copy-landscape
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-copy-alt'></i> uil-copy-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-download'></i> uil-file-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-exclamation-alt'></i> uil-file-exclamation-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-exclamation'></i> uil-file-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-copy'></i> uil-copy
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file'></i> uil-file
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-document'></i> uil-document
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-times'></i> uil-folder-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-info-alt'></i> uil-file-info-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-times-alt'></i> uil-file-times-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-blank'></i> uil-file-blank
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clipboard-notes'></i> uil-clipboard-notes
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clipboard-blank'></i> uil-clipboard-blank
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clipboard'></i> uil-clipboard
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-times'></i> uil-file-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-bookmark-alt'></i> uil-file-bookmark-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-block-alt'></i> uil-file-block-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-plus'></i> uil-file-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-check'></i> uil-file-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-plus'></i> uil-folder-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-check'></i> uil-folder-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-check-alt'></i> uil-file-check-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-network'></i> uil-folder-network
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Location And Map</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compass'></i> uil-compass
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-shield'></i> uil-map-marker-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-question'></i> uil-map-marker-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-pin'></i> uil-map-pin
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-pin-alt'></i> uil-map-pin-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-minus'></i> uil-map-marker-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-edit'></i> uil-map-marker-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map'></i> uil-map
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-location-arrow-alt'></i> uil-location-arrow-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-location-point'></i> uil-location-point
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-info'></i> uil-map-marker-info
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-location-arrow'></i> uil-location-arrow
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-navigator'></i> uil-navigator
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-plus'></i> uil-map-marker-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker'></i> uil-map-marker
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-alt'></i> uil-map-marker-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-location-pin-alt'></i> uil-location-pin-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sign-right'></i> uil-sign-right
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sign-left'></i> uil-sign-left
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-directions'></i> uil-directions
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sign-alt'></i> uil-sign-alt
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Medical</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medical-square-full'></i> uil-medical-square-full
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-book-medical'></i> uil-book-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wheelchair-alt'></i> uil-wheelchair-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ambulance'></i> uil-ambulance
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medical-square'></i> uil-medical-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medical'></i> uil-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heart-medical'></i> uil-heart-medical
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thermometer'></i> uil-thermometer
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-syringe'></i> uil-syringe
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-stretcher'></i> uil-stretcher
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tablets'></i> uil-tablets
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-capsule'></i> uil-capsule
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medkit'></i> uil-medkit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-medical-drip'></i> uil-medical-drip
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-medical-alt'></i> uil-file-medical-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-prescription-bottle'></i> uil-prescription-bottle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heartbeat'></i> uil-heartbeat
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-monitor-heart-rate'></i> uil-monitor-heart-rate
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heart-rate'></i> uil-heart-rate
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ear'></i> uil-ear
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-assistive-listening-systems'></i> uil-assistive-listening-systems
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Multimedia</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-share'></i> uil-image-share
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-backward'></i> uil-backward
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-camera'></i> uil-camera
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-music-tune-slash'></i> uil-music-tune-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-scenery'></i> uil-scenery
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-images'></i> uil-images
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-headphones'></i> uil-headphones
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-step-backward'></i> uil-step-backward
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-search'></i> uil-image-search
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-shield'></i> uil-image-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-minus'></i> uil-image-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-play-circle'></i> uil-play-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-edit'></i> uil-image-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pause'></i> uil-pause
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pause-circle'></i> uil-pause-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-block'></i> uil-image-block
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-step-forward'></i> uil-step-forward
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-music-note'></i> uil-music-note
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-music'></i> uil-music
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-lock'></i> uil-image-lock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-question'></i> uil-image-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-v'></i> uil-image-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image'></i> uil-image
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-redo'></i> uil-image-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-headphones-alt'></i> uil-headphones-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-picture'></i> uil-picture
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-forward'></i> uil-forward
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-download'></i> uil-image-download
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-times'></i> uil-image-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-broken'></i> uil-image-broken
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-film'></i> uil-film
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-previous'></i> uil-previous
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-check'></i> uil-image-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-camera-plus'></i> uil-camera-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-plus'></i> uil-image-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-video'></i> uil-video
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-play'></i> uil-play
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-stop-circle'></i> uil-stop-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-upload'></i> uil-image-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-boombox'></i> uil-boombox
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-skip-forward'></i> uil-skip-forward
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-skip-forward-circle'></i> uil-skip-forward-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-skip-forward-alt'></i> uil-skip-forward-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-step-backward-circle'></i> uil-step-backward-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-step-backward-alt'></i> uil-step-backward-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shutter'></i> uil-shutter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rss-interface'></i> uil-rss-interface
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-equal-circle'></i> uil-equal-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-airplay'></i> uil-airplay
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-microphone-slash'></i> uil-microphone-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-flower'></i> uil-flower
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ticket'></i> uil-ticket
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mountains'></i> uil-mountains
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bolt-slash'></i> uil-bolt-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sliders-v'></i> uil-sliders-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sliders-v-alt'></i> uil-sliders-v-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-compact-disc'></i> uil-compact-disc
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clapper-board'></i> uil-clapper-board
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shutter-alt'></i> uil-shutter-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-record-audio'></i> uil-record-audio
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-camera-change'></i> uil-camera-change
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-selfie'></i> uil-selfie
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Photography Tools</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-eye'></i> uil-eye
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exposure-alt'></i> uil-exposure-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exposure-increase'></i> uil-exposure-increase
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bright'></i> uil-bright
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-focus-target'></i> uil-focus-target
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-focus-add'></i> uil-focus-add
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-capture'></i> uil-capture
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-focus'></i> uil-focus
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Security</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyhole-square'></i> uil-keyhole-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyhole-square-full'></i> uil-keyhole-square-full
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lock-open-alt'></i> uil-lock-open-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyhole-circle'></i> uil-keyhole-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-unlock'></i> uil-unlock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lock-access'></i> uil-lock-access
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-unlock-alt'></i> uil-unlock-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shield-question'></i> uil-shield-question
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shield-exclamation'></i> uil-shield-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shield-check'></i> uil-shield-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shield'></i> uil-shield
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-padlock'></i> uil-padlock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shield-slash'></i> uil-shield-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lock-alt'></i> uil-lock-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lock'></i> uil-lock
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Shape</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heart-alt'></i> uil-heart-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heart'></i> uil-heart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-triangle'></i> uil-triangle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-square-shape'></i> uil-square-shape
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-star'></i> uil-star
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-octagon'></i> uil-octagon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-square'></i> uil-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-circle'></i> uil-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-polygon'></i> uil-polygon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pentagon'></i> uil-pentagon
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Shopping</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shopping-cart-alt'></i> uil-shopping-cart-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cart'></i> uil-cart
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-store-alt'></i> uil-store-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tag-alt'></i> uil-tag-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-label-alt'></i> uil-label-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pricetag-alt'></i> uil-pricetag-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shop'></i> uil-shop
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shopping-basket'></i> uil-shopping-basket
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tag'></i> uil-tag
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-shopping-trolley'></i> uil-shopping-trolley
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-label'></i> uil-label
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-store'></i> uil-store
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-archive'></i> uil-archive
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-gift'></i> uil-gift
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Sign And Symbol</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trademark'></i> uil-trademark
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-closed-captioning'></i> uil-closed-captioning
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wheelchair'></i> uil-wheelchair
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-venus'></i> uil-venus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trademark-circle'></i> uil-trademark-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-copyright'></i> uil-copyright
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-servicemark'></i> uil-servicemark
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-registered'></i> uil-registered
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-symbol'></i> uil-symbol
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-creative-commons-pd-alt'></i> uil-creative-commons-pd-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-creative-commons-pd'></i> uil-creative-commons-pd
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mars'></i> uil-mars
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-accessible-icon-alt'></i> uil-accessible-icon-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-parking-square'></i> uil-parking-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ban'></i> uil-ban
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Sports</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-basketball'></i> uil-basketball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-football-ball'></i> uil-football-ball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ball'></i> uil-ball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-three'></i> uil-dice-three
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-basketball-hoop'></i> uil-basketball-hoop
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-club'></i> uil-club
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trophy'></i> uil-trophy
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volleyball'></i> uil-volleyball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-game'></i> uil-game
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-heart-sign'></i> uil-heart-sign
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-diamond'></i> uil-diamond
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-spade'></i> uil-spade
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sport'></i> uil-sport
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-kayak'></i> uil-kayak
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dumbbell'></i> uil-dumbbell
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-football'></i> uil-football
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-one'></i> uil-dice-one
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-four'></i> uil-dice-four
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-five'></i> uil-dice-five
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-six'></i> uil-dice-six
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dice-two'></i> uil-dice-two
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Time</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-eight'></i> uil-clock-eight
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-two'></i> uil-clock-two
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock'></i> uil-clock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-watch'></i> uil-watch
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-three'></i> uil-clock-three
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-watch-alt'></i> uil-watch-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-stopwatch-slash'></i> uil-stopwatch-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-nine'></i> uil-clock-nine
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-seven'></i> uil-clock-seven
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-stopwatch'></i> uil-stopwatch
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-ten'></i> uil-clock-ten
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clock-five'></i> uil-clock-five
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Transport</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-car-sideview'></i> uil-car-sideview
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bus-alt'></i> uil-bus-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-car-wash'></i> uil-car-wash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ship'></i> uil-ship
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-truck-loading'></i> uil-truck-loading
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-parcel'></i> uil-parcel
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-taxi'></i> uil-taxi
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-subway-alt'></i> uil-subway-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-subway'></i> uil-subway
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bus'></i> uil-bus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-truck'></i> uil-truck
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bus-school'></i> uil-bus-school
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-truck-case'></i> uil-truck-case
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">User Interface</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wifi'></i> uil-wifi
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-car'></i> uil-car
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volume-up'></i> uil-volume-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-search-alt'></i> uil-search-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-search-plus'></i> uil-search-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wifi-slash'></i> uil-wifi-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-search-minus'></i> uil-search-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bluetooth-b'></i> uil-bluetooth-b
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calcualtor'></i> uil-calcualtor
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volume-off'></i> uil-volume-off
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-video-slash'></i> uil-video-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tv-retro'></i> uil-tv-retro
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trash-alt'></i> uil-trash-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-toggle-off'></i> uil-toggle-off
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-star-half-alt'></i> uil-star-half-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volume-down'></i> uil-volume-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-utensils-alt'></i> uil-utensils-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-toggle-on'></i> uil-toggle-on
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-yellow'></i> uil-yellow
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bolt'></i> uil-bolt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cog'></i> uil-cog
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-share-alt'></i> uil-share-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bookmark-full'></i> uil-bookmark-full
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rss'></i> uil-rss
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trash'></i> uil-trash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sync'></i> uil-sync
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-redo'></i> uil-redo
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-minus'></i> uil-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bookmark'></i> uil-bookmark
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-umbrella'></i> uil-umbrella
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wallet'></i> uil-wallet
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plus-square'></i> uil-plus-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plus'></i> uil-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-package'></i> uil-package
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pen'></i> uil-pen
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-signal'></i> uil-signal
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-signal-alt'></i> uil-signal-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-minus-square-full'></i> uil-minus-square-full
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volume-mute'></i> uil-volume-mute
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-minus-circle'></i> uil-minus-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-glass-martini-alt'></i> uil-glass-martini-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-minus-square'></i> uil-minus-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-edit'></i> uil-edit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ellipsis-h'></i> uil-ellipsis-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-microphone'></i> uil-microphone
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-link-alt'></i> uil-link-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ellipsis-v'></i> uil-ellipsis-v
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-search'></i> uil-search
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-volume'></i> uil-volume
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-link-h'></i> uil-link-h
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thumbs-up'></i> uil-thumbs-up
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-layer-group'></i> uil-layer-group
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-globe'></i> uil-globe
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyboard'></i> uil-keyboard
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-link'></i> uil-link
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-home'></i> uil-home
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-restaurant'></i> uil-restaurant
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-home-alt'></i> uil-home-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exclamation-octagon'></i> uil-exclamation-octagon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-filter'></i> uil-filter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-question-circle'></i> uil-question-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-favorite'></i> uil-favorite
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-info-circle'></i> uil-info-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exclamation-triangle'></i> uil-exclamation-triangle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thumbs-down'></i> uil-thumbs-down
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calender'></i> uil-calender
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exclamation-circle'></i> uil-exclamation-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-edit-alt'></i> uil-edit-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-box'></i> uil-box
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-multiply'></i> uil-multiply
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-times-square'></i> uil-times-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-times-circle'></i> uil-times-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sim-card'></i> uil-sim-card
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-check-square'></i> uil-check-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-times'></i> uil-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-paperclip'></i> uil-paperclip
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cube'></i> uil-cube
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-battery-empty'></i> uil-battery-empty
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-battery-bolt'></i> uil-battery-bolt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-adjust-half'></i> uil-adjust-half
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-check'></i> uil-check
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bolt-alt'></i> uil-bolt-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-check-circle'></i> uil-check-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bullseye'></i> uil-bullseye
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-adjust-circle'></i> uil-adjust-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plus-circle'></i> uil-plus-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-adjust-alt'></i> uil-adjust-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-at'></i> uil-at
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-link-broken'></i> uil-link-broken
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness'></i> uil-brightness
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness-minus'></i> uil-brightness-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness-half'></i> uil-brightness-half
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness-low'></i> uil-brightness-low
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness-empty'></i> uil-brightness-empty
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-brightness-plus'></i> uil-brightness-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-adjust'></i> uil-adjust
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sun'></i> uil-sun
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-backspace'></i> uil-backspace
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyboard-alt'></i> uil-keyboard-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-key-skeleton-alt'></i> uil-key-skeleton-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-space-key'></i> uil-space-key
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyboard-hide'></i> uil-keyboard-hide
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-keyboard-show'></i> uil-keyboard-show
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-key-skeleton'></i> uil-key-skeleton
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-swatchbook'></i> uil-swatchbook
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-history'></i> uil-history
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cancel'></i> uil-cancel
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-auto-flash'></i> uil-auto-flash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plane'></i> uil-plane
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plane-departure'></i> uil-plane-departure
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mobile-vibrate'></i> uil-mobile-vibrate
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-glass'></i> uil-glass
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-voicemail'></i> uil-voicemail
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-voicemail-rectangle'></i> uil-voicemail-rectangle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-trees'></i> uil-trees
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plane-fly'></i> uil-plane-fly
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sync-slash'></i> uil-sync-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sync-exclamation'></i> uil-sync-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sign-out-alt'></i> uil-sign-out-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tachometer-fast'></i> uil-tachometer-fast
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-exit'></i> uil-exit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sign-in-alt'></i> uil-sign-in-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-entry'></i> uil-entry
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-upload'></i> uil-upload
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-refresh'></i> uil-refresh
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-power'></i> uil-power
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-food'></i> uil-food
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-archive-alt'></i> uil-archive-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-newspaper'></i> uil-newspaper
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-history-alt'></i> uil-history-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plane-arrival'></i> uil-plane-arrival
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-life-ring'></i> uil-life-ring
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-coffee'></i> uil-coffee
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-glass-martini'></i> uil-glass-martini
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-anchor'></i> uil-anchor
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lamp'></i> uil-lamp
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-swimmer'></i> uil-swimmer
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-building'></i> uil-building
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-crockery'></i> uil-crockery
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bed'></i> uil-bed
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-message'></i> uil-message
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rope-way'></i> uil-rope-way
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-feedback'></i> uil-feedback
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-pump'></i> uil-pump
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rotate-360'></i> uil-rotate-360
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-utensils'></i> uil-utensils
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-water-glass'></i> uil-water-glass
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bed-double'></i> uil-bed-double
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-baby-carriage'></i> uil-baby-carriage
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-external-link-alt'></i> uil-external-link-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-card-atm'></i> uil-card-atm
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tear'></i> uil-tear
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-football-american'></i> uil-football-american
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-glass-tea'></i> uil-glass-tea
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-streering'></i> uil-streering
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wrench'></i> uil-wrench
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-layers'></i> uil-layers
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-water-drop-slash'></i> uil-water-drop-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tv-retro-slash'></i> uil-tv-retro-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-calendar-slash'></i> uil-calendar-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-print-slash'></i> uil-print-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-eye-slash'></i> uil-eye-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-slash'></i> uil-image-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-image-alt-slash'></i> uil-image-alt-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mobey-bill-slash'></i> uil-mobey-bill-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-android-phone-slash'></i> uil-android-phone-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-alt-slash'></i> uil-comment-alt-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-comment-slash'></i> uil-comment-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-map-marker-slash'></i> uil-map-marker-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-lock-slash'></i> uil-lock-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-folder-slash'></i> uil-folder-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-filter-slash'></i> uil-filter-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-glass-martini-alt-slash'></i> uil-glass-martini-alt-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-slash'></i> uil-file-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-file-lanscape-slash'></i> uil-file-lanscape-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-car-slash'></i> uil-car-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-camera-slash'></i> uil-camera-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bell-slash'></i> uil-bell-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-plug'></i> uil-plug
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-layers-slash'></i> uil-layers-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desktop-slash'></i> uil-desktop-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-layer-group-slash'></i> uil-layer-group-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desktop-alt-slash'></i> uil-desktop-alt-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bell'></i> uil-bell
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-bag-slash'></i> uil-bag-slash
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-10-plus'></i> uil-10-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-12-plus'></i> uil-12-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-13-plus'></i> uil-13-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-16-plus'></i> uil-16-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-21-plus'></i> uil-21-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-17-plus'></i> uil-17-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-0-plus'></i> uil-0-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-3-plus'></i> uil-3-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-6-plus'></i> uil-6-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-ankh'></i> uil-ankh
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-archway'></i> uil-archway
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-18-plus'></i> uil-18-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-asterisk'></i> uil-asterisk
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-dashboard'></i> uil-dashboard
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-balance-scale'></i> uil-balance-scale
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Users</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-plus'></i> uil-user-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-square'></i> uil-user-square
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user'></i> uil-user
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-exclamation'></i> uil-user-exclamation
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-circle'></i> uil-user-circle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-users-alt'></i> uil-users-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-location'></i> uil-location
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-minus'></i> uil-user-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-times'></i> uil-user-times
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-book-reader'></i> uil-book-reader
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-user-check'></i> uil-user-check
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="header-title mb-4">Weather</h4>
<div class="row icons-list-demo">
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-snowflake'></i> uil-snowflake
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-clouds'></i> uil-clouds
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun-rain-alt'></i> uil-cloud-sun-rain-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-fahrenheit'></i> uil-fahrenheit
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-quarter'></i> uil-temperature-quarter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-showers-heavy'></i> uil-cloud-showers-heavy
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-snowflake-alt'></i> uil-snowflake-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun-rain'></i> uil-cloud-sun-rain
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-wind'></i> uil-wind
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-wind'></i> uil-cloud-wind
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-tornado'></i> uil-tornado
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud'></i> uil-cloud
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun'></i> uil-cloud-sun
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun-hail'></i> uil-cloud-sun-hail
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-three-quarter'></i> uil-temperature-three-quarter
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-moon-hail'></i> uil-cloud-moon-hail
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thunderstorm-sun'></i> uil-thunderstorm-sun
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-empty'></i> uil-temperature-empty
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thunderstorm'></i> uil-thunderstorm
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-snow-flake'></i> uil-snow-flake
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-thunderstorm-moon'></i> uil-thunderstorm-moon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-raindrops'></i> uil-raindrops
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-raindrops-alt'></i> uil-raindrops-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-rain'></i> uil-cloud-rain
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun-tear'></i> uil-cloud-sun-tear
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-rain-sun'></i> uil-cloud-rain-sun
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-moon-showers'></i> uil-cloud-moon-showers
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-forecastcloud-moon-tear'></i> uil-forecastcloud-moon-tear
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-moon-rain'></i> uil-cloud-moon-rain
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-showers-alt'></i> uil-cloud-showers-alt
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-showers'></i> uil-cloud-showers
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-hail'></i> uil-cloud-hail
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-moon'></i> uil-cloud-moon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-drizzle'></i> uil-cloud-drizzle
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-moon'></i> uil-moon
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-moonset'></i> uil-moonset
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-windsock'></i> uil-windsock
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-moon-eclipse'></i> uil-moon-eclipse
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-celsius'></i> uil-celsius
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-sun-meatball'></i> uil-cloud-sun-meatball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-moon-meatball'></i> uil-cloud-moon-meatball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-meatball'></i> uil-cloud-meatball
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-half'></i> uil-temperature-half
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-minus'></i> uil-temperature-minus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature-plus'></i> uil-temperature-plus
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-temperature'></i> uil-temperature
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-cloud-set'></i> uil-cloud-set
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-n-a'></i> uil-n-a
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-mountains-sun'></i> uil-mountains-sun
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-water'></i> uil-water
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-rainbow'></i> uil-rainbow
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-desert'></i> uil-desert
</div>
<div class="col-xl-3 col-lg-4 col-sm-6">
<i class='uil uil-sunset'></i> uil-sunset
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div> <!-- container -->
</div> <!-- content -->
<!-- Footer Start -->
<footer class="footer">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<script>document.write(new Date().getFullYear())</script> © Hyper - Coderthemes.com
</div>
<div class="col-md-6">
<div class="text-md-end footer-links d-none d-md-block">
<a href="javascript: void(0);">About</a>
<a href="javascript: void(0);">Support</a>
<a href="javascript: void(0);">Contact Us</a>
</div>
</div>
</div>
</div>
</footer>
<!-- end Footer -->
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
<!-- Theme Settings -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="theme-settings-offcanvas">
<div class="d-flex align-items-center bg-primary p-3 offcanvas-header">
<h5 class="text-white m-0">Theme Settings</h5>
<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-0">
<div data-simplebar class="h-100">
<div class="card mb-0 p-3">
<h5 class="mt-0 font-16 fw-bold mb-3">Choose Layout</h5>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Vertical</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal" class="form-check-input">
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Horizontal</h5>
</div>
</div>
<h5 class="my-3 font-16 fw-bold">Color Scheme</h5>
<div class="colorscheme-cardradio">
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="layout-color-light">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column bg-white rounded-2">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color" class="bg-white rounded-2 h-100">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="d-flex h-100 flex-column bg-white rounded-2">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Light</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100 bg-black" for="layout-color-dark">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
<span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
<span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
<span class="d-block border border-secondary border-opacity-25 border-3 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light-lighten d-flex p-1 align-items-center border-bottom border-opacity-25 border-primary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-auto"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
</span>
<span class="bg-light-lighten d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Dark</h5>
</div>
</div>
</div>
<div id="layout-width">
<h5 class="my-3 font-16 fw-bold">Layout Mode</h5>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-mode" id="layout-mode-fluid" value="fluid">
<label class="form-check-label p-0 avatar-md w-100" for="layout-mode-fluid">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column rounded-2">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Fluid</h5>
</div>
<div class="col-4" id="layout-boxed">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-layout-mode" id="layout-mode-boxed" value="boxed">
<label class="form-check-label p-0 avatar-md w-100 px-2" for="layout-mode-boxed">
<div id="sidebar-size" class="border-start border-end">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column rounded-2">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color" class="border-start border-end h-100">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Boxed</h5>
</div>
<div class="col-4" id="layout-detached">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-layout-mode" id="data-layout-detached" value="detached">
<label class="form-check-label p-0 avatar-md w-100" for="data-layout-detached">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom ">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="d-flex h-100 p-1 px-2">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 flex-column p-1 px-2">
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100"></span>
</span>
</span>
</span>
<span class="bg-light d-block p-1 mt-auto px-2"></span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Detached</h5>
</div>
</div>
</div>
<h5 class="my-3 font-16 fw-bold">Topbar Color</h5>
<div class="row">
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Light</h5>
</div>
<div class="col-4" style="--ct-dark-rgb: 64,73,84;">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-primary-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-dark d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-dark d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-primary-lighten rounded me-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-auto"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
<span class="d-block border border-primary border-opacity-25 border-3 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Dark</h5>
</div>
<div class="col-4">
<div class="form-check card-radio">
<input class="form-check-input" type="radio" name="data-topbar-color" id="topbar-color-brand" value="brand">
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-brand">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-primary bg-gradient d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-primary bg-gradient d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-light opacity-25 rounded me-1"></span>
<span class="d-block border border-3 border opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Brand</h5>
</div>
</div>
<div>
<h5 class="my-3 font-16 fw-bold">Menu Color</h5>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-menu-color" id="leftbar-color-light" value="light">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-color-light">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-opacity-25">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-light d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Light</h5>
</div>
<div class="col-4" style="--ct-dark-rgb: 64,73,84;">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-menu-color" id="leftbar-color-dark" value="dark">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-color-dark">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-dark d-flex h-100 flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 w-100 mb-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 w-100 mb-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 w-100 mb-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary border-primary border-opacity-25">
<span class="d-block p-1 bg-primary-lighten rounded me-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 ms-auto"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 ms-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 ms-1"></span>
<span class="d-block border border-secondary rounded border-opacity-25 border-3 ms-1"></span>
</span>
<span class="bg-dark d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Dark</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-menu-color" id="leftbar-color-brand" value="brand">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-color-brand">
<div id="sidebar-size">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-primary bg-gradient d-flex h-100 flex-column p-1 px-2">
<span class="d-block p-1 bg-light-lighten rounded mb-1"></span>
<span class="d-block border opacity-25 rounded border-3 w-100 mb-1"></span>
<span class="d-block border opacity-25 rounded border-3 w-100 mb-1"></span>
<span class="d-block border opacity-25 rounded border-3 w-100 mb-1"></span>
<span class="d-block border opacity-25 rounded border-3 w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</div>
<div id="topnav-color">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-flex p-1 align-items-center border-bottom border-secondary">
<span class="d-block p-1 bg-dark-lighten rounded me-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-auto"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded ms-1"></span>
</span>
<span class="bg-primary bg-gradient d-block p-1"></span>
</span>
</div>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Brand</h5>
</div>
</div>
</div>
<div id="sidebar-size">
<h5 class="my-3 font-16 fw-bold">Sidebar Size</h5>
<div class="row">
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-default" value="default">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-default">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1 px-2">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Default</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-compact" value="compact">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-compact">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column p-1">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Compact</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-small" value="condensed">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-small">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column" style="padding: 2px;">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Condensed</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-small-hover" value="sm-hover">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-small-hover">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="bg-light d-flex h-100 border-end flex-column" style="padding: 2px;">
<span class="d-block p-1 bg-dark-lighten rounded mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
<span class="d-block border border-3 border-secondary border-opacity-25 rounded w-100 mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Hover View</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-full" value="full">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-full">
<span class="d-flex h-100">
<span class="flex-shrink-0">
<span class="d-flex h-100 flex-column">
<span class="d-block p-1 bg-dark-lighten mb-1"></span>
</span>
</span>
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Full Layout</h5>
</div>
<div class="col-4">
<div class="form-check sidebar-setting card-radio">
<input class="form-check-input" type="radio" name="data-sidenav-size" id="leftbar-size-fullscreen" value="fullscreen">
<label class="form-check-label p-0 avatar-md w-100" for="leftbar-size-fullscreen">
<span class="d-flex h-100">
<span class="flex-grow-1">
<span class="d-flex h-100 flex-column">
<span class="bg-light d-block p-1"></span>
</span>
</span>
</span>
</label>
</div>
<h5 class="font-14 text-center text-muted mt-2">Fullscreen Layout</h5>
</div>
</div>
</div>
<div id="layout-position">
<h5 class="my-3 font-16 fw-bold">Layout Position</h5>
<div class="btn-group radio" role="group">
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-fixed" value="fixed">
<label class="btn btn-soft-primary w-sm" for="layout-position-fixed">Fixed</label>
<input type="radio" class="btn-check" name="data-layout-position" id="layout-position-scrollable" value="scrollable">
<label class="btn btn-soft-primary w-sm ms-0" for="layout-position-scrollable">Scrollable</label>
</div>
</div>
<div id="sidebar-user">
<div class="d-flex justify-content-between align-items-center mt-3">
<label class="font-16 fw-bold m-0" for="sidebaruser-check">Sidebar User Info</label>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" name="sidebar-user" id="sidebaruser-check">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas-footer border-top p-3 text-center">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
</div>
<div class="col-6">
<a href="https://themes.getbootstrap.com/product/hyper-responsive-admin-dashboard-template/" target="_blank" role="button" class="btn btn-primary w-100">Buy Now</a>
</div>
</div>
</div>
</div>
<!-- Vendor js -->
<script src="assets/js/vendor.min.js"></script>
<!-- App js -->
<script src="assets/js/app.min.js"></script>
</body>
</html>