<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Tabler')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'icons', 'title' => 'Tabler')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'icons', 'title' => 'Tabler')) ?>

                    <div class="container-fluid">
<div class="card">
<div class="card-header block">
<h4 class="card-title mb-1.25">Overview</h4>
<p class="text-default-400">Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.</p>
</div>
<!-- end card-header-->
<div class="card-body">
<h4 class="mb-2 text-sm">Usage</h4>
<code>&lt;i class="iconify tabler--xxxx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify tabler--phone text-2xl"></i>
<i class="iconify tabler--ad-2 text-2xl"></i>
<i class="iconify tabler--device-desktop text-2xl"></i>
<i class="iconify tabler--device-tablet text-2xl"></i>
<i class="iconify tabler--device-gamepad text-2xl"></i>
<i class="iconify tabler--device-watch text-2xl"></i>
</div>
</div>
<!-- end card-body-->
<div class="card-body border-default-300 border-t border-dashed">
<h4 class="mb-2 text-sm">Colors</h4>
<code>&lt;i class="iconify tabler--xxxx text-xxxx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify tabler--camera text-primary text-2xl"></i>
<i class="iconify tabler--chart-pie-2 text-secondary text-2xl"></i>
<i class="iconify tabler--bell text-success text-2xl"></i>
<i class="iconify tabler--credit-card text-info text-2xl"></i>
<i class="iconify tabler--cloud text-warning text-2xl"></i>
<i class="iconify tabler--mail text-danger text-2xl"></i>
<i class="iconify tabler--lock text-dark text-2xl"></i>
<i class="iconify tabler--user text-purple text-2xl"></i>
<i class="iconify tabler--star text-light text-2xl"></i>
</div>
</div>
<div class="card-body border-default-300 border-t border-dashed">
<h4 class="mb-2 text-sm">Sizes</h4>
<code>&lt;i class="iconify tabler--xxxx text-xxxx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify tabler--phone text-xs"></i>
<i class="iconify tabler--ad-2 text-sm"></i>
<i class="iconify tabler--device-desktop text-base"></i>
<i class="iconify tabler--device-tablet text-lg"></i>
<i class="iconify tabler--device-watch text-xl"></i>
<i class="iconify tabler--device-watch text-2xl"></i>
<i class="iconify tabler--device-watch text-3xl"></i>
<i class="iconify tabler--device-watch text-4xl"></i>
<i class="iconify tabler--device-watch text-5xl"></i>
<i class="iconify tabler--device-watch text-6xl"></i>
<i class="iconify tabler--device-watch text-7xl"></i>
<i class="iconify tabler--device-watch text-8xl"></i>
<i class="iconify tabler--device-watch text-9xl"></i>
</div>
<div class="mt-3 flex items-center gap-3">
<i class="iconify tabler--device-watch"></i>
<i class="iconify tabler--device-watch size-3.25"></i>
<i class="iconify tabler--device-watch size-3.75"></i>
<i class="iconify tabler--device-watch text-base"></i>
<i class="iconify tabler--device-watch text-lg"></i>
<i class="iconify tabler--device-watch size-6"></i>
<i class="iconify tabler--device-watch size-8"></i>
<i class="iconify tabler--device-watch size-9"></i>
<i class="iconify tabler--device-watch size-10.5"></i>
<i class="iconify tabler--device-watch size-15"></i>
</div>
</div>
<!-- end card-body-->
<div class="card-body border-default-300 border-t border-dashed">
<h4 class="mt-0 mb-3">Icons</h4>
<div class="items-center flex flex-wrap gap-3 text-center">
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--phone text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Phone</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--ad-2 text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Ad 2</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--headphones text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Headphones</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--camera text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Camera</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--device-watch text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Watch</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--microphone text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Microphone</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--headset text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Headset</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--device-tablet text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Tablet</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--device-gamepad text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Gamepad</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--printer text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Printer</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--device-speaker text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Speaker</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--database text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Database</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--cloud text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Cloud</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--wifi text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Wi-Fi</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--bluetooth text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Bluetooth</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--usb text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">USB</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--folder text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Folder</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--lock text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Lock</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--key text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Key</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--shield text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Shield</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--paperclip text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Paperclip</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--bell text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Bell</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--search text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Search</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--briefcase text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Briefcase</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--shopping-cart text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Cart</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--file text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">File</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--book text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Book</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--mail text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Mail</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--user text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">User</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--user-circle text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">User Circle</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--phone-call text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Phone Call</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--music text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Music</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--movie text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Movie</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--file-upload text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Upload</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--cloud-upload text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Cloud Upload</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--share text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Share</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--arrow-right text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Arrow Right</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--arrow-left text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Arrow Left</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--arrow-up text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Arrow Up</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--arrow-down text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Arrow Down</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--search text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Search</span>
</div>
<div class="border-default-300 flex size-20 flex-col items-center justify-center gap-3 truncate rounded border border-dashed">
<i class="iconify tabler--refresh text-2xl"></i>
<span class="block w-full truncate text-center font-semibold">Refresh</span>
</div>
</div>
<!-- end display-->
<div class="mt-3 text-center">
<a class="btn bg-danger text-white hover:bg-danger-hover" href="https://tabler.io/icons" target="_blank">View All Icons</a>
</div>
</div>
<!-- end card-body-->
</div>
<!-- end card-->
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>