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

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

<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">
            <i class="bx bx-child fs-2"></i>
            <h5 class="mt-2 mb-0">Child</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-balloon fs-2"></i>
            <h5 class="mt-2 mb-0">Balloon</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-coffee-bean fs-2"></i>
            <h5 class="mt-2 mb-0">Coffee Bean</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-sushi fs-2"></i>
            <h5 class="mt-2 mb-0">Sushi</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-shower fs-2"></i>
            <h5 class="mt-2 mb-0">Shower</h5>
        </div>
    </div>

    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-typescript fs-2"></i>
            <h5 class="mt-2 mb-0">Typescript</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-graphql fs-2"></i>
            <h5 class="mt-2 mb-0">Graphql</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-rfid fs-2"></i>
            <h5 class="mt-2 mb-0">Rfid</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-universal-access fs-2"></i>
            <h5 class="mt-2 mb-0">Universal</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-castle fs-2"></i>
            <h5 class="mt-2 mb-0">Castle</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-shield-minus fs-2"></i>
            <h5 class="mt-2 mb-0">Shield Minus</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-shield-plus fs-2"></i>
            <h5 class="mt-2 mb-0">Shield Plus</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-objects-vertical-bottom fs-2"></i>
            <h5 class="mt-2 mb-0">ObjectsVertical</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-vertical-top fs-2"></i>
            <h5 class="mt-2 mb-0">Vertical Top</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-color fs-2"></i>
            <h5 class="mt-2 mb-0">Color</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-horizontal-left fs-2"></i>
            <h5 class="mt-2 mb-0">HorizontalLeft</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-reflect-vertical fs-2"></i>
            <h5 class="mt-2 mb-0">ReflectVertical</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-postgresql fs-2"></i>
            <h5 class="mt-2 mb-0">Postgresql</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-mongodb fs-2"></i>
            <h5 class="mt-2 mb-0">Mongodb</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-deezer fs-2"></i>
            <h5 class="mt-2 mb-0">Deezer</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-xing fs-2"></i>
            <h5 class="mt-2 mb-0">Xing</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-cart-add fs-2"></i>
            <h5 class="mt-2 mb-0">Cart Add</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-cart-download fs-2"></i>
            <h5 class="mt-2 mb-0">CartDownload</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-no-signal fs-2"></i>
            <h5 class="mt-2 mb-0">No Signal</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-signal-5 fs-2"></i>
            <h5 class="mt-2 mb-0">Signal 5</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-cheese fs-2"></i>
            <h5 class="mt-2 mb-0">Cheese</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-hard-hat fs-2"></i>
            <h5 class="mt-2 mb-0">Hard Hat</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-home-alt-2 fs-2"></i>
            <h5 class="mt-2 mb-0">Home Alt 2</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-meta fs-2"></i>
            <h5 class="mt-2 mb-0">Meta</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-lemon fs-2"></i>
            <h5 class="mt-2 mb-0">Lemon</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-cable-car fs-2"></i>
            <h5 class="mt-2 mb-0">Cable Car </h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-cricket-ball fs-2"></i>
            <h5 class="mt-2 mb-0">Cricket Ball</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-tree-alt fs-2"></i>
            <h5 class="mt-2 mb-0">Tree Alt</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-male-female fs-2"></i>
            <h5 class="mt-2 mb-0">Male Female</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-invader fs-2"></i>
            <h5 class="mt-2 mb-0">Invader</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-baguette fs-2"></i>
            <h5 class="mt-2 mb-0">Baguette</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-fork fs-2"></i>
            <h5 class="mt-2 mb-0">Fork</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-knife fs-2"></i>
            <h5 class="mt-2 mb-0">Knife</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-circle-half fs-2"></i>
            <h5 class="mt-2 mb-0">Circle Half</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-circle-three-quarter fs-2"></i>
            <h5 class="mt-2 mb-0">Circle Quarter</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-bowl-rice fs-2"></i>
            <h5 class="mt-2 mb-0">Bowl Rice</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-bowl-hot fs-2"></i>
            <h5 class="mt-2 mb-0">Bowl Hot</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-popsicle fs-2"></i>
            <h5 class="mt-2 mb-0">Popsicle</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-cross fs-2"></i>
            <h5 class="mt-2 mb-0">Cross</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-scatter-chart fs-2"></i>
            <h5 class="mt-2 mb-0">Scatter Chart</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-money-withdraw fs-2"></i>
            <h5 class="mt-2 mb-0">MoneyWithdraw</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-candles fs-2"></i>
            <h5 class="mt-2 mb-0">Candles</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-math fs-2"></i>
            <h5 class="mt-2 mb-0">Math</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-party fs-2"></i>
            <h5 class="mt-2 mb-0">Party</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-leaf fs-2"></i>
            <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">
            <i class="bx bx-injection fs-2"></i>
            <h5 class="mt-2 mb-0">Injection</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bx-expand-vertical fs-2"></i>
            <h5 class="mt-2 mb-0">ExpandVertical</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-dog fs-2"></i>
            <h5 class="mt-2 mb-0">Dog</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxs-cat fs-2"></i>
            <h5 class="mt-2 mb-0">Cat</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-upwork fs-2"></i>
            <h5 class="mt-2 mb-0">Upwork</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-netlify fs-2"></i>
            <h5 class="mt-2 mb-0">Netlify</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-java fs-2"></i>
            <h5 class="mt-2 mb-0">Java</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-heroku fs-2"></i>
            <h5 class="mt-2 mb-0">Heroku</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-go-lang fs-2"></i>
            <h5 class="mt-2 mb-0">Go Lang</h5>
        </div>
    </div>
    <div class="card icon-box">
        <div class="card-body d-flex flex-column align-items-center justify-content-center">
            <i class="bx bxl-gmail fs-2"></i>
            <h5 class="mt-2 mb-0">Gmail</h5>
        </div>
    </div>
</div><!-- end row -->

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