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

@section('css')
@endsection

@section('content')

<div class="d-flex flex-wrap gap-3 justify-content-center icon-box mb-3">
    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-a-b-2">
        <div class="card-body">
            <i class="ti ti-a-b-2 fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-a-b-off">
        <div class="card-body">
            <i class="ti ti-a-b-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-a-b">
        <div class="card-body">
            <i class="ti ti-a-b fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-abacus-off">
        <div class="card-body">
            <i class="ti ti-abacus-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-abacus">
        <div class="card-body">
            <i class="ti ti-abacus fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-abc">
        <div class="card-body">
            <i class="ti ti-abc fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-access-point-off">
        <div class="card-body">
            <i class="ti ti-access-point-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-accessible-off">
        <div class="card-body">
            <i class="ti ti-accessible-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-accessible">
        <div class="card-body">
            <i class="ti ti-accessible fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-activity-heartbeat">
        <div class="card-body">
            <i class="ti ti-activity-heartbeat fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-activity">
        <div class="card-body">
            <i class="ti ti-activity fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ad-2">
        <div class="card-body">
            <i class="ti ti-ad-2 fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-ad-circle-off">
        <div class="card-body">
            <i class="ti ti-ad-circle-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ad-circle">
        <div class="card-body">
            <i class="ti ti-ad-circle fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ad-off">
        <div class="card-body">
            <i class="ti ti-ad-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ad">
        <div class="card-body">
            <i class="ti ti-ad fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-address-book-off">
        <div class="card-body">
            <i class="ti ti-address-book-off fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-address-book">
        <div class="card-body">
            <i class="ti ti-address-book fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-adjustments">
        <div class="card-body">
            <i class="ti ti-adjustments fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-aerial-lift">
        <div class="card-body">
            <i class="ti ti-aerial-lift fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-affiliate">
        <div class="card-body">
            <i class="ti ti-affiliate fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-air-balloon">
        <div class="card-body">
            <i class="ti ti-air-balloon fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-air-conditioning">
        <div class="card-body">
            <i class="ti ti-air-conditioning fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-air-traffic-control">
        <div class="card-body">
            <i class="ti ti-air-traffic-control fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-alarm">
        <div class="card-body">
            <i class="ti ti-alarm fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-album">
        <div class="card-body">
            <i class="ti ti-album fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-alert-circle">
        <div class="card-body">
            <i class="ti ti-alert-circle fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-alien">
        <div class="card-body">
            <i class="ti ti-alien fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-align-box-bottom-center">
        <div class="card-body">
            <i class="ti ti-align-box-bottom-center fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-align-left">
        <div class="card-body">
            <i class="ti ti-align-left fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-alpha">
        <div class="card-body">
            <i class="ti ti-alpha fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-alphabet-cyrillic">
        <div class="card-body">
            <i class="ti ti-alphabet-cyrillic fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-alt">
        <div class="card-body">
            <i class="ti ti-alt fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ambulance">
        <div class="card-body">
            <i class="ti ti-ambulance fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ampersand">
        <div class="card-body">
            <i class="ti ti-ampersand fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-analyze">
        <div class="card-body">
            <i class="ti ti-analyze fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-anchor">
        <div class="card-body">
            <i class="ti ti-anchor fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-angle">
        <div class="card-body">
            <i class="ti ti-angle fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-ankh">
        <div class="card-body">
            <i class="ti ti-ankh fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-antenna-bars-5">
        <div class="card-body">
            <i class="ti ti-antenna-bars-5 fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-antenna">
        <div class="card-body">
            <i class="ti ti-antenna fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-aperture">
        <div class="card-body">
            <i class="ti ti-aperture fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-api-app">
        <div class="card-body">
            <i class="ti ti-api-app fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-api">
        <div class="card-body">
            <i class="ti ti-api fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-app-window">
        <div class="card-body">
            <i class="ti ti-app-window fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-apple">
        <div class="card-body">
            <i class="ti ti-apple fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="ti ti-apps">
        <div class="card-body">
            <i class="ti ti-apps fs-2"></i>
        </div>
    </span>

    <span class="card mb-0" data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-title="ti ti-archery-arrow">
        <div class="card-body">
            <i class="ti ti-archery-arrow fs-2"></i>
        </div>
    </span>

</div>

<div class="text-center">
    <a href="https://tabler.io/icons" target="_blank" class="btn btn-danger">View All Icons</a>
</div>

@endsection

@section('scripts')

@endsection