<!DOCTYPE html>

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

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

                    <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">Lucide is an open-source library of clean, scalable SVG icons for web and app development, offering easy integration and customization.</p>
</div>
<!-- end card-header-->
<div class="card-body">
<h4 class="mb-2 text-sm">Usage</h4>
<code>&lt;i class="iconify lucide--xxx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify lucide--camera text-2xl"></i>
<i class="iconify lucide--heart text-2xl"></i>
<i class="iconify lucide--star text-2xl"></i>
<i class="iconify lucide--check text-2xl"></i>
<i class="iconify lucide--bell text-2xl"></i>
<i class="iconify lucide--cloud text-2xl"></i>
<i class="iconify lucide--user 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 lucide--xxx text-xx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify lucide--house text-primary text-2xl"></i>
<i class="iconify lucide--settings text-secondary text-2xl"></i>
<i class="iconify lucide--calendar text-success text-2xl"></i>
<i class="iconify lucide--message-circle text-info text-2xl"></i>
<i class="iconify lucide--flag text-warning text-2xl"></i>
<i class="iconify lucide--folder text-danger text-2xl"></i>
<i class="iconify lucide--globe text-light text-2xl"></i>
<i class="iconify lucide--key text-dark text-2xl"></i>
<i class="iconify lucide--layers text-purple 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 lucide--xxxx text-xx"&gt;&lt;/i&gt;</code>
<div class="mt-3 flex items-center gap-3">
<i class="iconify lucide--phone size-8.75"></i>
<i class="iconify lucide--badge-dollar-sign size-7.5"></i>
<i class="iconify lucide--monitor size-6"></i>
<i class="iconify lucide--tablet size-4.25"></i>
<i class="iconify lucide--gamepad-2 size-3.5"></i>
<i class="iconify lucide--watch size-2.75"></i>
</div>
<div class="mt-3 flex items-center gap-3">
<i class="iconify lucide--watch size-3"></i>
<i class="iconify lucide--watch size-3.25"></i>
<i class="iconify lucide--watch size-4"></i>
<i class="iconify lucide--watch size-4.5"></i>
<i class="iconify lucide--watch size-5"></i>
<i class="iconify lucide--watch size-6"></i>
<i class="iconify lucide--watch size-8"></i>
<i class="iconify lucide--watch size-9"></i>
<i class="iconify lucide--watch size-10.5"></i>
<i class="iconify lucide--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 lucide--phone text-xl"></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 lucide--badge-percent text-xl"></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 lucide--headphones text-xl"></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 lucide--camera text-xl"></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 lucide--watch text-xl"></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 lucide--mic text-xl"></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 lucide--headset text-xl"></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 lucide--tablet text-xl"></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 lucide--gamepad-2 text-xl"></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 lucide--printer text-xl"></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 lucide--speaker text-xl"></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 lucide--database text-xl"></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 lucide--cloud text-xl"></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 lucide--wifi text-xl"></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 lucide--bluetooth text-xl"></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 lucide--usb text-xl"></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 lucide--folder text-xl"></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 lucide--lock text-xl"></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 lucide--key text-xl"></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 lucide--shield text-xl"></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 lucide--paperclip text-xl"></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 lucide--bell text-xl"></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 lucide--search text-xl"></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 lucide--briefcase text-xl"></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 lucide--shopping-cart text-xl"></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 lucide--file text-xl"></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 lucide--book text-xl"></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 lucide--mail text-xl"></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 lucide--user text-xl"></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 lucide--circle-user text-xl"></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 lucide--phone text-xl"></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 lucide--music text-xl"></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 lucide--film text-xl"></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 lucide--upload text-xl"></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 lucide--cloud-upload text-xl"></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 lucide--share text-xl"></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 lucide--arrow-right text-xl"></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 lucide--arrow-left text-xl"></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 lucide--arrow-up text-xl"></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 lucide--arrow-down text-xl"></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 lucide--search text-xl"></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 lucide--refresh-ccw text-xl"></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://lucide.dev/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>