@extends('layouts.vertical', ['title' => 'Solar Icons', 'topbarTitle' => 'Solar Icons'])

@section('css')
@endsection

@section('content')

<div class="d-flex flex-wrap gap-3 justify-content-center icon-box">
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="4k">
            <iconify-icon icon="solar:4k-bold" class="fs-2"></iconify-icon>
        </div>
    </div>

    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accessibility">
            <iconify-icon icon="solar:accessibility-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Accumulator">
            <iconify-icon icon="solar:accumulator-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Add Circle">
            <iconify-icon icon="solar:add-circle-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Archive">
            <iconify-icon icon="solar:archive-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Armchair">
            <iconify-icon icon="solar:armchair-2-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Asteroid">
            <iconify-icon icon="solar:asteroid-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Atom">
            <iconify-icon icon="solar:atom-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Backpack">
            <iconify-icon icon="solar:backpack-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Backspace">
            <iconify-icon icon="solar:backspace-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bacteria">
            <iconify-icon icon="solar:bacteria-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bag 2">
            <iconify-icon icon="solar:bag-2-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Balloon">
            <iconify-icon icon="solar:balloon-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Balls">
            <iconify-icon icon="solar:balls-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Banknote">
            <iconify-icon icon="solar:banknote-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bar Chair">
            <iconify-icon icon="solar:bar-chair-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Basketball">
            <iconify-icon icon="solar:basketball-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bath">
            <iconify-icon icon="solar:bath-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bed">
            <iconify-icon icon="solar:bed-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bell Bing">
            <iconify-icon icon="solar:bell-bing-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bill">
            <iconify-icon icon="solar:bill-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bill Check">
            <iconify-icon icon="solar:bill-check-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bolt">
            <iconify-icon icon="solar:bolt-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bomb">
            <iconify-icon icon="solar:bomb-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Book 2">
            <iconify-icon icon="solar:book-2-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bookmark">
            <iconify-icon icon="solar:bookmark-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Boombox">
            <iconify-icon icon="solar:boombox-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bottle">
            <iconify-icon icon="solar:bottle-outline" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bowling">
            <iconify-icon icon="solar:bowling-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Box">
            <iconify-icon icon="solar:box-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Broom">
            <iconify-icon icon="solar:broom-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bug">
            <iconify-icon icon="solar:bug-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Bus">
            <iconify-icon icon="solar:bus-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Calculator">
            <iconify-icon icon="solar:calculator-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Camera">
            <iconify-icon icon="solar:camera-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Card">
            <iconify-icon icon="solar:card-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cardholder">
            <iconify-icon icon="solar:cardholder-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cart 2">
            <iconify-icon icon="solar:cart-2-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Case">
            <iconify-icon icon="solar:case-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cassette">
            <iconify-icon icon="solar:cassette-2-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cat">
            <iconify-icon icon="solar:cat-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Chair 2">
            <iconify-icon icon="solar:chair-2-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Chart 2">
            <iconify-icon icon="solar:chart-2-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Chat Dots">
            <iconify-icon icon="solar:chat-dots-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Checklist">
            <iconify-icon icon="solar:checklist-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="City">
            <iconify-icon icon="solar:city-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cloud">
            <iconify-icon icon="solar:cloud-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Code File">
            <iconify-icon icon="solar:code-file-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Command">
            <iconify-icon icon="solar:command-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Compass">
            <iconify-icon icon="solar:compass-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Condicioner">
            <iconify-icon icon="solar:condicioner-2-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Confetti">
            <iconify-icon icon="solar:confetti-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Copyright">
            <iconify-icon icon="solar:copyright-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Corkscrew">
            <iconify-icon icon="solar:corkscrew-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cosmetic">
            <iconify-icon icon="solar:cosmetic-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Course Up">
            <iconify-icon icon="solar:course-up-linear" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="CPU">
            <iconify-icon icon="solar:cpu-bold" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Crop">
            <iconify-icon icon="solar:crop-bold-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Crown">
            <iconify-icon icon="solar:crown-line-broken" class="fs-2"></iconify-icon>
        </div>
    </div>
    <div class="card mb-0">
        <div class="card-body d-flex flex-column align-items-center justify-content-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cup First">
            <iconify-icon icon="solar:cup-first-line-duotone" class="fs-2"></iconify-icon>
        </div>
    </div>
</div>

<div class="my-3 text-center">
    <a href="https://icon-sets.iconify.design/solar/" target="_blank" class="btn btn-danger">View All
        Icons</a>
</div>

@endsection

@section('scripts')

@endsection