@extends('layouts.vertical', ['subtitle' => 'iconify Icons'])

@section('content')
@include('layouts.partials/page-title', ['title' => 'Icons', 'subtitle' => 'iconify Icons'])

<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:leaf-bold-duotone" class="fs-2 text-primary"></iconify-icon>
            <h5 class="mt-2 mb-0">Leaf</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:airbuds-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Airbuds</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:adhesive-plaster-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Plaster</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:bicycling-round-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Bicycling</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:bookmark-circle-bold-duotone" class="fs-2 text-success"></iconify-icon>
            <h5 class="mt-2 mb-0">Bookmark</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:crown-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Crown</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:asteroid-broken" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Asteroid</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:bar-chair-broken" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Bar Chair</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:black-hole-line-duotone" class="fs-2 text-info"></iconify-icon>
            <h5 class="mt-2 mb-0">Hole</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:bookmark-circle-broken" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Bookmark</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:cart-4-broken" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Cart</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:cart-large-4-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Cart Large</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:chat-round-unread-bold-duotone" class="fs-2 text-dark"></iconify-icon>
            <h5 class="mt-2 mb-0">Chat</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:closet-2-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Closet</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:cloud-snowfall-minimalistic-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Cloud</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:command-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Command</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:compass-big-bold-duotone" class="fs-2 text-warning"></iconify-icon>
            <h5 class="mt-2 mb-0">Compass</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:confetti-minimalistic-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Confetti</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:corkscrew-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Corkscrew</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:cup-hot-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Cup</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:dollar-bold-duotone" class="fs-2 text-danger"></iconify-icon>
            <h5 class="mt-2 mb-0">Dollar</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:dumbbell-large-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Dumbbell</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:electric-refueling-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Refueling</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:earth-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Earth</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:figma-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Figma</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:flame-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Flame</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:floor-lamp-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Lamp</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:gallery-round-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Gallery</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:ghost-line-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Ghost</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <iconify-icon icon="solar:kick-scooter-bold-duotone" class="fs-2"></iconify-icon>
            <h5 class="mt-2 mb-0">Scooter</h5>
        </div>
    </div>
</div><!-- end row -->

<div class="my-4 text-center">
    <a href="https://icon-sets.iconify.design/" target="_blank" class="btn btn-primary">View All Icons</a>
</div>
@endsection