@extends('layouts.contentLayoutMaster')
{{-- page title --}}
@section('title','Boxicons')

@section('content')
<!-- boxicons icons section start -->
<section id="boxicons-icons">
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <div class="boxicons-icons overflow-hidden row">
            <!-- accessibility icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Accessibility</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-info-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-info-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-handicap"></i>
              </div>
              <label class="fonticon-classname">bx-handicap</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-help-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-help-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-accessibility"></i>
              </div>
              <label class="fonticon-classname">bx-accessibility</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-question-mark"></i>
              </div>
              <label class="fonticon-classname">bx-question-mark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-help-circle"></i>
              </div>
              <label class="fonticon-classname">bx-help-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-info-circle"></i>
              </div>
              <label class="fonticon-classname">bx-info-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-body"></i>
              </div>
              <label class="fonticon-classname">bx-body</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-captions"></i>
              </div>
              <label class="fonticon-classname">bx-captions</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-captions"></i>
              </div>
              <label class="fonticon-classname">bxs-captions</label>
            </div>
            <!-- alert icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Alert</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bell"></i>
              </div>
              <label class="fonticon-classname">bxs-bell</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-error"></i>
              </div>
              <label class="fonticon-classname">bxs-error</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-error-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-error-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-error-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-error-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bell-off"></i>
              </div>
              <label class="fonticon-classname">bxs-bell-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bell-ring"></i>
              </div>
              <label class="fonticon-classname">bxs-bell-ring</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bell-off"></i>
              </div>
              <label class="fonticon-classname">bx-bell-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bell-minus"></i>
              </div>
              <label class="fonticon-classname">bx-bell-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bell"></i>
              </div>
              <label class="fonticon-classname">bx-bell</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-error-circle"></i>
              </div>
              <label class="fonticon-classname">bx-error-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bell-minus"></i>
              </div>
              <label class="fonticon-classname">bxs-bell-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-error-alt"></i>
              </div>
              <label class="fonticon-classname">bx-error-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bell-plus"></i>
              </div>
              <label class="fonticon-classname">bx-bell-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bell-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-bell-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-error"></i>
              </div>
              <label class="fonticon-classname">bx-error</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-comment-error"></i>
              </div>
              <label class="fonticon-classname">bxs-comment-error</label>
            </div>
            <!-- arrow icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Arrow</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-top-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-right-top-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-downvote"></i>
              </div>
              <label class="fonticon-classname">bxs-downvote</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-down-arrow"></i>
              </div>
              <label class="fonticon-classname">bx-down-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-upvote"></i>
              </div>
              <label class="fonticon-classname">bx-upvote</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-trending-down"></i>
              </div>
              <label class="fonticon-classname">bx-trending-down</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-undo"></i>
              </div>
              <label class="fonticon-classname">bx-undo</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-right-top-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-right-top-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-trending-up"></i>
              </div>
              <label class="fonticon-classname">bx-trending-up</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-down-arrow-alt"></i>
              </div>
              <label class="fonticon-classname">bx-down-arrow-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-caret-left"></i>
              </div>
              <label class="fonticon-classname">bx-caret-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-top-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-left-top-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-down-arrow-square"></i>
              </div>
              <label class="fonticon-classname">bxs-down-arrow-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sort-z-a"></i>
              </div>
              <label class="fonticon-classname">bx-sort-z-a</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-up-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-up-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-left-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-up-arrow"></i>
              </div>
              <label class="fonticon-classname">bxs-up-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-left-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-right-arrow-square"></i>
              </div>
              <label class="fonticon-classname">bxs-right-arrow-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-caret-down"></i>
              </div>
              <label class="fonticon-classname">bx-caret-down</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-download"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-download</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-arrow-alt"></i>
              </div>
              <label class="fonticon-classname">bx-right-arrow-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-download"></i>
              </div>
              <label class="fonticon-classname">bx-download</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-upload"></i>
              </div>
              <label class="fonticon-classname">bx-upload</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevron-up"></i>
              </div>
              <label class="fonticon-classname">bx-chevron-up</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevron-down"></i>
              </div>
              <label class="fonticon-classname">bx-chevron-down</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-download"></i>
              </div>
              <label class="fonticon-classname">bxs-download</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sort-a-z"></i>
              </div>
              <label class="fonticon-classname">bx-sort-a-z</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-right-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-right-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-arrow"></i>
              </div>
              <label class="fonticon-classname">bx-left-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-left-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-left-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-caret-up"></i>
              </div>
              <label class="fonticon-classname">bx-caret-up</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-left-arrow"></i>
              </div>
              <label class="fonticon-classname">bxs-left-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-up-arrow-square"></i>
              </div>
              <label class="fonticon-classname">bxs-up-arrow-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sort"></i>
              </div>
              <label class="fonticon-classname">bx-sort</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-downvote"></i>
              </div>
              <label class="fonticon-classname">bx-downvote</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-arrow-alt"></i>
              </div>
              <label class="fonticon-classname">bx-left-arrow-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-transfer"></i>
              </div>
              <label class="fonticon-classname">bx-transfer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-sort-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-sort-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cloud-upload"></i>
              </div>
              <label class="fonticon-classname">bxs-cloud-upload</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cloud-download"></i>
              </div>
              <label class="fonticon-classname">bxs-cloud-download</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-transfer-alt"></i>
              </div>
              <label class="fonticon-classname">bx-transfer-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-left-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-left-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-upvote"></i>
              </div>
              <label class="fonticon-classname">bxs-upvote</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-right-arrow"></i>
              </div>
              <label class="fonticon-classname">bxs-right-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-arrow"></i>
              </div>
              <label class="fonticon-classname">bx-right-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-up-arrow"></i>
              </div>
              <label class="fonticon-classname">bx-up-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevrons-up"></i>
              </div>
              <label class="fonticon-classname">bx-chevrons-up</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevrons-down"></i>
              </div>
              <label class="fonticon-classname">bx-chevrons-down</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevrons-right"></i>
              </div>
              <label class="fonticon-classname">bx-chevrons-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevrons-left"></i>
              </div>
              <label class="fonticon-classname">bx-chevrons-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-redo"></i>
              </div>
              <label class="fonticon-classname">bx-redo</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sort-up"></i>
              </div>
              <label class="fonticon-classname">bx-sort-up</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-subdirectory-right"></i>
              </div>
              <label class="fonticon-classname">bx-subdirectory-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-subdirectory-left"></i>
              </div>
              <label class="fonticon-classname">bx-subdirectory-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-reply"></i>
              </div>
              <label class="fonticon-classname">bx-reply</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-reply-all"></i>
              </div>
              <label class="fonticon-classname">bx-reply-all</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sort-down"></i>
              </div>
              <label class="fonticon-classname">bx-sort-down</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-right-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-right-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-right-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-down-arrow"></i>
              </div>
              <label class="fonticon-classname">bxs-down-arrow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-up-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-up-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-down-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bx-right-down-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-arrow-back"></i>
              </div>
              <label class="fonticon-classname">bx-arrow-back</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-up-arrow-alt"></i>
              </div>
              <label class="fonticon-classname">bx-up-arrow-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-left-arrow-square"></i>
              </div>
              <label class="fonticon-classname">bxs-left-arrow-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-upload"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-upload</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-left-top-arrow-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-left-top-arrow-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-caret-right"></i>
              </div>
              <label class="fonticon-classname">bx-caret-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevron-left"></i>
              </div>
              <label class="fonticon-classname">bx-chevron-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chevron-right"></i>
              </div>
              <label class="fonticon-classname">bx-chevron-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-first-page"></i>
              </div>
              <label class="fonticon-classname">bx-first-page</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-last-page"></i>
              </div>
              <label class="fonticon-classname">bx-last-page</label>
            </div>
            <!-- brand icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Brand</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-periscope"></i>
              </div>
              <label class="fonticon-classname">bxl-periscope</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-discourse"></i>
              </div>
              <label class="fonticon-classname">bxl-discourse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-twitch"></i>
              </div>
              <label class="fonticon-classname">bxl-twitch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-sass"></i>
              </div>
              <label class="fonticon-classname">bxl-sass</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-wikipedia"></i>
              </div>
              <label class="fonticon-classname">bxl-wikipedia</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-git"></i>
              </div>
              <label class="fonticon-classname">bxl-git</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-kickstarter"></i>
              </div>
              <label class="fonticon-classname">bxl-kickstarter</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-edge"></i>
              </div>
              <label class="fonticon-classname">bxl-edge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-dropbox"></i>
              </div>
              <label class="fonticon-classname">bxl-dropbox</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-medium-square"></i>
              </div>
              <label class="fonticon-classname">bxl-medium-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-skype"></i>
              </div>
              <label class="fonticon-classname">bxl-skype</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-instagram-alt"></i>
              </div>
              <label class="fonticon-classname">bxl-instagram-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-foursquare"></i>
              </div>
              <label class="fonticon-classname">bxl-foursquare</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-internet-explorer"></i>
              </div>
              <label class="fonticon-classname">bxl-internet-explorer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-apple"></i>
              </div>
              <label class="fonticon-classname">bxl-apple</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-behance"></i>
              </div>
              <label class="fonticon-classname">bxl-behance</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-shopify"></i>
              </div>
              <label class="fonticon-classname">bxl-shopify</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-visa"></i>
              </div>
              <label class="fonticon-classname">bxl-visa</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-stripe"></i>
              </div>
              <label class="fonticon-classname">bxl-stripe</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-quora"></i>
              </div>
              <label class="fonticon-classname">bxl-quora</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-slack-old"></i>
              </div>
              <label class="fonticon-classname">bxl-slack-old</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-unsplash"></i>
              </div>
              <label class="fonticon-classname">bxl-unsplash</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-yelp"></i>
              </div>
              <label class="fonticon-classname">bxl-yelp</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-creative-commons"></i>
              </div>
              <label class="fonticon-classname">bxl-creative-commons</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-play-store"></i>
              </div>
              <label class="fonticon-classname">bxl-play-store</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-magento"></i>
              </div>
              <label class="fonticon-classname">bxl-magento</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-bing"></i>
              </div>
              <label class="fonticon-classname">bxl-bing</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-invision"></i>
              </div>
              <label class="fonticon-classname">bxl-invision</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-product-hunt"></i>
              </div>
              <label class="fonticon-classname">bxl-product-hunt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-drupal"></i>
              </div>
              <label class="fonticon-classname">bxl-drupal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-messenger"></i>
              </div>
              <label class="fonticon-classname">bxl-messenger</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-snapchat"></i>
              </div>
              <label class="fonticon-classname">bxl-snapchat</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-squarespace"></i>
              </div>
              <label class="fonticon-classname">bxl-squarespace</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-jsfiddle"></i>
              </div>
              <label class="fonticon-classname">bxl-jsfiddle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-twitter"></i>
              </div>
              <label class="fonticon-classname">bxl-twitter</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-youtube"></i>
              </div>
              <label class="fonticon-classname">bxl-youtube</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-whatsapp"></i>
              </div>
              <label class="fonticon-classname">bxl-whatsapp</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-tumblr"></i>
              </div>
              <label class="fonticon-classname">bxl-tumblr</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-dribbble"></i>
              </div>
              <label class="fonticon-classname">bxl-dribbble</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-google-plus"></i>
              </div>
              <label class="fonticon-classname">bxl-google-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-vimeo"></i>
              </div>
              <label class="fonticon-classname">bxl-vimeo</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-slack"></i>
              </div>
              <label class="fonticon-classname">bxl-slack</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-pocket"></i>
              </div>
              <label class="fonticon-classname">bxl-pocket</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-wix"></i>
              </div>
              <label class="fonticon-classname">bxl-wix</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-linkedin"></i>
              </div>
              <label class="fonticon-classname">bxl-linkedin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-facebook-square"></i>
              </div>
              <label class="fonticon-classname">bxl-facebook-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-telegram"></i>
              </div>
              <label class="fonticon-classname">bxl-telegram</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-google-plus-circle"></i>
              </div>
              <label class="fonticon-classname">bxl-google-plus-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-javascript"></i>
              </div>
              <label class="fonticon-classname">bxl-javascript</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-digg"></i>
              </div>
              <label class="fonticon-classname">bxl-digg</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-codepen"></i>
              </div>
              <label class="fonticon-classname">bxl-codepen</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-vk"></i>
              </div>
              <label class="fonticon-classname">bxl-vk</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-flickr"></i>
              </div>
              <label class="fonticon-classname">bxl-flickr</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-whatsapp-square"></i>
              </div>
              <label class="fonticon-classname">bxl-whatsapp-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-trello"></i>
              </div>
              <label class="fonticon-classname">bxl-trello</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-pinterest"></i>
              </div>
              <label class="fonticon-classname">bxl-pinterest</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-css3"></i>
              </div>
              <label class="fonticon-classname">bxl-css3</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-wordpress"></i>
              </div>
              <label class="fonticon-classname">bxl-wordpress</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-firefox"></i>
              </div>
              <label class="fonticon-classname">bxl-firefox</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-chrome"></i>
              </div>
              <label class="fonticon-classname">bxl-chrome</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-windows"></i>
              </div>
              <label class="fonticon-classname">bxl-windows</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-nodejs"></i>
              </div>
              <label class="fonticon-classname">bxl-nodejs</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-deviantart"></i>
              </div>
              <label class="fonticon-classname">bxl-deviantart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-linkedin-square"></i>
              </div>
              <label class="fonticon-classname">bxl-linkedin-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-mastercard"></i>
              </div>
              <label class="fonticon-classname">bxl-mastercard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-spotify"></i>
              </div>
              <label class="fonticon-classname">bxl-spotify</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-microsoft"></i>
              </div>
              <label class="fonticon-classname">bxl-microsoft</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-discord"></i>
              </div>
              <label class="fonticon-classname">bxl-discord</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-flickr-square"></i>
              </div>
              <label class="fonticon-classname">bxl-flickr-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-dailymotion"></i>
              </div>
              <label class="fonticon-classname">bxl-dailymotion</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-html5"></i>
              </div>
              <label class="fonticon-classname">bxl-html5</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-paypal"></i>
              </div>
              <label class="fonticon-classname">bxl-paypal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-redux"></i>
              </div>
              <label class="fonticon-classname">bxl-redux</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-less"></i>
              </div>
              <label class="fonticon-classname">bxl-less</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-medium-old"></i>
              </div>
              <label class="fonticon-classname">bxl-medium-old</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-vuejs"></i>
              </div>
              <label class="fonticon-classname">bxl-vuejs</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-medium"></i>
              </div>
              <label class="fonticon-classname">bxl-medium</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-baidu"></i>
              </div>
              <label class="fonticon-classname">bxl-baidu</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-bootstrap"></i>
              </div>
              <label class="fonticon-classname">bxl-bootstrap</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-stack-overflow"></i>
              </div>
              <label class="fonticon-classname">bxl-stack-overflow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-react"></i>
              </div>
              <label class="fonticon-classname">bxl-react</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-joomla"></i>
              </div>
              <label class="fonticon-classname">bxl-joomla</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-yahoo"></i>
              </div>
              <label class="fonticon-classname">bxl-yahoo</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-opera"></i>
              </div>
              <label class="fonticon-classname">bxl-opera</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-soundcloud"></i>
              </div>
              <label class="fonticon-classname">bxl-soundcloud</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-digitalocean"></i>
              </div>
              <label class="fonticon-classname">bxl-digitalocean</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-blogger"></i>
              </div>
              <label class="fonticon-classname">bxl-blogger</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-500px"></i>
              </div>
              <label class="fonticon-classname">bxl-500px</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-angular"></i>
              </div>
              <label class="fonticon-classname">bxl-angular</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-amazon"></i>
              </div>
              <label class="fonticon-classname">bxl-amazon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-airbnb"></i>
              </div>
              <label class="fonticon-classname">bxl-airbnb</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-android"></i>
              </div>
              <label class="fonticon-classname">bxl-android</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-bitcoin"></i>
              </div>
              <label class="fonticon-classname">bxl-bitcoin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-instagram"></i>
              </div>
              <label class="fonticon-classname">bxl-instagram</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-google"></i>
              </div>
              <label class="fonticon-classname">bxl-google</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-ebay"></i>
              </div>
              <label class="fonticon-classname">bxl-ebay</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-facebook"></i>
              </div>
              <label class="fonticon-classname">bxl-facebook</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-reddit"></i>
              </div>
              <label class="fonticon-classname">bxl-reddit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-mailchimp"></i>
              </div>
              <label class="fonticon-classname">bxl-mailchimp</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxl-github"></i>
              </div>
              <label class="fonticon-classname">bxl-github</label>
            </div>
            <!-- building icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Building</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-school"></i>
              </div>
              <label class="fonticon-classname">bxs-school</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-home"></i>
              </div>
              <label class="fonticon-classname">bxs-home</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-building-house"></i>
              </div>
              <label class="fonticon-classname">bx-building-house</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-home-circle"></i>
              </div>
              <label class="fonticon-classname">bx-home-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-institution"></i>
              </div>
              <label class="fonticon-classname">bxs-institution</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-home"></i>
              </div>
              <label class="fonticon-classname">bx-home</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-home-alt"></i>
              </div>
              <label class="fonticon-classname">bx-home-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-factory"></i>
              </div>
              <label class="fonticon-classname">bxs-factory</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-buildings"></i>
              </div>
              <label class="fonticon-classname">bx-buildings</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-building-house"></i>
              </div>
              <label class="fonticon-classname">bxs-building-house</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-building"></i>
              </div>
              <label class="fonticon-classname">bxs-building</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bank"></i>
              </div>
              <label class="fonticon-classname">bxs-bank</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-home-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-home-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-building"></i>
              </div>
              <label class="fonticon-classname">bx-building</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-buildings"></i>
              </div>
              <label class="fonticon-classname">bxs-buildings</label>
            </div>
            <!-- business icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Business</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-task"></i>
              </div>
              <label class="fonticon-classname">bx-task</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-briefcase-alt-2"></i>
              </div>
              <label class="fonticon-classname">bx-briefcase-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-briefcase-alt-2"></i>
              </div>
              <label class="fonticon-classname">bxs-briefcase-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-briefcase"></i>
              </div>
              <label class="fonticon-classname">bx-briefcase</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-news"></i>
              </div>
              <label class="fonticon-classname">bx-news</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-target-lock"></i>
              </div>
              <label class="fonticon-classname">bx-target-lock</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paperclip"></i>
              </div>
              <label class="fonticon-classname">bx-paperclip</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bar-chart-alt-2"></i>
              </div>
              <label class="fonticon-classname">bx-bar-chart-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pie-chart-alt"></i>
              </div>
              <label class="fonticon-classname">bx-pie-chart-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paper-plane"></i>
              </div>
              <label class="fonticon-classname">bx-paper-plane</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-briefcase-alt"></i>
              </div>
              <label class="fonticon-classname">bx-briefcase-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-copyright"></i>
              </div>
              <label class="fonticon-classname">bx-copyright</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chalkboard"></i>
              </div>
              <label class="fonticon-classname">bx-chalkboard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-line-chart"></i>
              </div>
              <label class="fonticon-classname">bx-line-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pie-chart"></i>
              </div>
              <label class="fonticon-classname">bx-pie-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bar-chart"></i>
              </div>
              <label class="fonticon-classname">bx-bar-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chart"></i>
              </div>
              <label class="fonticon-classname">bx-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bullseye"></i>
              </div>
              <label class="fonticon-classname">bx-bullseye</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-note"></i>
              </div>
              <label class="fonticon-classname">bxs-note</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pie-chart-alt-2"></i>
              </div>
              <label class="fonticon-classname">bxs-pie-chart-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bar-chart-alt"></i>
              </div>
              <label class="fonticon-classname">bx-bar-chart-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-note"></i>
              </div>
              <label class="fonticon-classname">bx-note</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-news"></i>
              </div>
              <label class="fonticon-classname">bxs-news</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-doughnut-chart"></i>
              </div>
              <label class="fonticon-classname">bxs-doughnut-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pin"></i>
              </div>
              <label class="fonticon-classname">bxs-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bar-chart-alt-2"></i>
              </div>
              <label class="fonticon-classname">bxs-bar-chart-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-report"></i>
              </div>
              <label class="fonticon-classname">bxs-report</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-spreadsheet"></i>
              </div>
              <label class="fonticon-classname">bxs-spreadsheet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-analyse"></i>
              </div>
              <label class="fonticon-classname">bx-analyse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-server"></i>
              </div>
              <label class="fonticon-classname">bxs-server</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-slideshow"></i>
              </div>
              <label class="fonticon-classname">bx-slideshow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-doughnut-chart"></i>
              </div>
              <label class="fonticon-classname">bx-doughnut-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-slideshow"></i>
              </div>
              <label class="fonticon-classname">bxs-slideshow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-stats"></i>
              </div>
              <label class="fonticon-classname">bx-stats</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-chalkboard"></i>
              </div>
              <label class="fonticon-classname">bxs-chalkboard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pie-chart-alt-2"></i>
              </div>
              <label class="fonticon-classname">bx-pie-chart-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-briefcase"></i>
              </div>
              <label class="fonticon-classname">bxs-briefcase</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-briefcase-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-briefcase-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-analyse"></i>
              </div>
              <label class="fonticon-classname">bxs-analyse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pin"></i>
              </div>
              <label class="fonticon-classname">bx-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bar-chart-square"></i>
              </div>
              <label class="fonticon-classname">bxs-bar-chart-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bar-chart-square"></i>
              </div>
              <label class="fonticon-classname">bx-bar-chart-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pie-chart"></i>
              </div>
              <label class="fonticon-classname">bxs-pie-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-chart"></i>
              </div>
              <label class="fonticon-classname">bxs-chart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-spreadsheet"></i>
              </div>
              <label class="fonticon-classname">bx-spreadsheet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sitemap"></i>
              </div>
              <label class="fonticon-classname">bx-sitemap</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pie-chart-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-pie-chart-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-server"></i>
              </div>
              <label class="fonticon-classname">bx-server</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-paper-plane"></i>
              </div>
              <label class="fonticon-classname">bxs-paper-plane</label>
            </div>
            <!-- code icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Code</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-commit"></i>
              </div>
              <label class="fonticon-classname">bx-git-commit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bug"></i>
              </div>
              <label class="fonticon-classname">bxs-bug</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-data"></i>
              </div>
              <label class="fonticon-classname">bx-data</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-compare"></i>
              </div>
              <label class="fonticon-classname">bx-git-compare</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-branch"></i>
              </div>
              <label class="fonticon-classname">bx-git-branch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-terminal"></i>
              </div>
              <label class="fonticon-classname">bx-terminal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-code"></i>
              </div>
              <label class="fonticon-classname">bx-code</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-code-curly"></i>
              </div>
              <label class="fonticon-classname">bx-code-curly</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-component"></i>
              </div>
              <label class="fonticon-classname">bxs-component</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-check-shield"></i>
              </div>
              <label class="fonticon-classname">bx-check-shield</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-code-alt"></i>
              </div>
              <label class="fonticon-classname">bx-code-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-pull-request"></i>
              </div>
              <label class="fonticon-classname">bx-git-pull-request</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bug-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-bug-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-check-shield"></i>
              </div>
              <label class="fonticon-classname">bxs-check-shield</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-terminal"></i>
              </div>
              <label class="fonticon-classname">bxs-terminal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-data"></i>
              </div>
              <label class="fonticon-classname">bxs-data</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-command"></i>
              </div>
              <label class="fonticon-classname">bx-command</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-repo-forked"></i>
              </div>
              <label class="fonticon-classname">bx-git-repo-forked</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-git-merge"></i>
              </div>
              <label class="fonticon-classname">bx-git-merge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-code-block"></i>
              </div>
              <label class="fonticon-classname">bx-code-block</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bug"></i>
              </div>
              <label class="fonticon-classname">bx-bug</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bug-alt"></i>
              </div>
              <label class="fonticon-classname">bx-bug-alt</label>
            </div>
            <!-- Communication icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Communication</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-support"></i>
              </div>
              <label class="fonticon-classname">bx-support</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message"></i>
              </div>
              <label class="fonticon-classname">bx-message</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mobile-vibration"></i>
              </div>
              <label class="fonticon-classname">bx-mobile-vibration</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-alt-dots"></i>
              </div>
              <label class="fonticon-classname">bx-message-alt-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-conversation"></i>
              </div>
              <label class="fonticon-classname">bxs-conversation</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-comment-dots"></i>
              </div>
              <label class="fonticon-classname">bx-comment-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-comment-detail"></i>
              </div>
              <label class="fonticon-classname">bxs-comment-detail</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-chat"></i>
              </div>
              <label class="fonticon-classname">bxs-chat</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dialpad-alt"></i>
              </div>
              <label class="fonticon-classname">bx-dialpad-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-phone-incoming"></i>
              </div>
              <label class="fonticon-classname">bx-phone-incoming</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-square-dots"></i>
              </div>
              <label class="fonticon-classname">bxs-message-square-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-phone-call"></i>
              </div>
              <label class="fonticon-classname">bx-phone-call</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-comment"></i>
              </div>
              <label class="fonticon-classname">bx-comment</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-alt-dots"></i>
              </div>
              <label class="fonticon-classname">bxs-message-alt-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-comment-add"></i>
              </div>
              <label class="fonticon-classname">bxs-comment-add</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-phone"></i>
              </div>
              <label class="fonticon-classname">bx-phone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-inbox"></i>
              </div>
              <label class="fonticon-classname">bxs-inbox</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-voicemail"></i>
              </div>
              <label class="fonticon-classname">bx-voicemail</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-microphone"></i>
              </div>
              <label class="fonticon-classname">bx-microphone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-rounded-dots"></i>
              </div>
              <label class="fonticon-classname">bxs-message-rounded-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-send"></i>
              </div>
              <label class="fonticon-classname">bx-send</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mail-send"></i>
              </div>
              <label class="fonticon-classname">bx-mail-send</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-comment-dots"></i>
              </div>
              <label class="fonticon-classname">bxs-comment-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-dots"></i>
              </div>
              <label class="fonticon-classname">bx-message-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-message-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-rounded"></i>
              </div>
              <label class="fonticon-classname">bxs-message-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-rounded-dots"></i>
              </div>
              <label class="fonticon-classname">bx-message-rounded-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-alt-left"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-alt-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-microphone-off"></i>
              </div>
              <label class="fonticon-classname">bx-microphone-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-microphone"></i>
              </div>
              <label class="fonticon-classname">bxs-microphone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-microphone-off"></i>
              </div>
              <label class="fonticon-classname">bxs-microphone-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-envelope"></i>
              </div>
              <label class="fonticon-classname">bxs-envelope</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message"></i>
              </div>
              <label class="fonticon-classname">bxs-message</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-square"></i>
              </div>
              <label class="fonticon-classname">bx-message-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-mobile-vibration"></i>
              </div>
              <label class="fonticon-classname">bxs-mobile-vibration</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-at"></i>
              </div>
              <label class="fonticon-classname">bx-at</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-comment"></i>
              </div>
              <label class="fonticon-classname">bxs-comment</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-megaphone"></i>
              </div>
              <label class="fonticon-classname">bxs-megaphone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-send"></i>
              </div>
              <label class="fonticon-classname">bxs-send</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-envelope"></i>
              </div>
              <label class="fonticon-classname">bx-envelope</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-phone-call"></i>
              </div>
              <label class="fonticon-classname">bxs-phone-call</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dialpad"></i>
              </div>
              <label class="fonticon-classname">bx-dialpad</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-phone-outgoing"></i>
              </div>
              <label class="fonticon-classname">bx-phone-outgoing</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-alt"></i>
              </div>
              <label class="fonticon-classname">bx-message-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-square-dots"></i>
              </div>
              <label class="fonticon-classname">bx-message-square-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-phone-incoming"></i>
              </div>
              <label class="fonticon-classname">bxs-phone-incoming</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-phone-outgoing"></i>
              </div>
              <label class="fonticon-classname">bxs-phone-outgoing</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-share-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-share-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-share"></i>
              </div>
              <label class="fonticon-classname">bxs-share</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-phone"></i>
              </div>
              <label class="fonticon-classname">bxs-phone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-left"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-right"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-alt-right"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-alt-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-conversation"></i>
              </div>
              <label class="fonticon-classname">bx-conversation</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-dots"></i>
              </div>
              <label class="fonticon-classname">bxs-message-dots</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-share"></i>
              </div>
              <label class="fonticon-classname">bx-share</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-share-alt"></i>
              </div>
              <label class="fonticon-classname">bx-share-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-message-rounded"></i>
              </div>
              <label class="fonticon-classname">bx-message-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-microphone-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-microphone-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-single-right"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-single-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chat"></i>
              </div>
              <label class="fonticon-classname">bx-chat</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-message-square"></i>
              </div>
              <label class="fonticon-classname">bxs-message-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hash"></i>
              </div>
              <label class="fonticon-classname">bx-hash</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-quote-single-left"></i>
              </div>
              <label class="fonticon-classname">bxs-quote-single-left</label>
            </div>
            <!-- design icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Design</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-brush-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-brush-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-droplet-half"></i>
              </div>
              <label class="fonticon-classname">bxs-droplet-half</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-color-fill"></i>
              </div>
              <label class="fonticon-classname">bxs-color-fill</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-palette"></i>
              </div>
              <label class="fonticon-classname">bxs-palette</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paint-roll"></i>
              </div>
              <label class="fonticon-classname">bx-paint-roll</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-magic-wand"></i>
              </div>
              <label class="fonticon-classname">bxs-magic-wand</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paint"></i>
              </div>
              <label class="fonticon-classname">bx-paint</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-paint-roll"></i>
              </div>
              <label class="fonticon-classname">bxs-paint-roll</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-eyedropper"></i>
              </div>
              <label class="fonticon-classname">bxs-eyedropper</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-palette"></i>
              </div>
              <label class="fonticon-classname">bx-palette</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-eraser"></i>
              </div>
              <label class="fonticon-classname">bxs-eraser</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-brush"></i>
              </div>
              <label class="fonticon-classname">bxs-brush</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-brush"></i>
              </div>
              <label class="fonticon-classname">bx-brush</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-paint"></i>
              </div>
              <label class="fonticon-classname">bxs-paint</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-brush-alt"></i>
              </div>
              <label class="fonticon-classname">bx-brush-alt</label>
            </div>
            <!-- device icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Device</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hdd"></i>
              </div>
              <label class="fonticon-classname">bx-hdd</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-battery-low"></i>
              </div>
              <label class="fonticon-classname">bxs-battery-low</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-mobile"></i>
              </div>
              <label class="fonticon-classname">bxs-mobile</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-laptop"></i>
              </div>
              <label class="fonticon-classname">bx-laptop</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-printer"></i>
              </div>
              <label class="fonticon-classname">bx-printer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mouse"></i>
              </div>
              <label class="fonticon-classname">bx-mouse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-keyboard"></i>
              </div>
              <label class="fonticon-classname">bxs-keyboard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hdd"></i>
              </div>
              <label class="fonticon-classname">bxs-hdd</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-joystick-button"></i>
              </div>
              <label class="fonticon-classname">bx-joystick-button</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-joystick-alt"></i>
              </div>
              <label class="fonticon-classname">bx-joystick-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-chip"></i>
              </div>
              <label class="fonticon-classname">bxs-chip</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dashboard"></i>
              </div>
              <label class="fonticon-classname">bxs-dashboard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-battery-full"></i>
              </div>
              <label class="fonticon-classname">bxs-battery-full</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-battery-charging"></i>
              </div>
              <label class="fonticon-classname">bxs-battery-charging</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-battery"></i>
              </div>
              <label class="fonticon-classname">bxs-battery</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mobile"></i>
              </div>
              <label class="fonticon-classname">bx-mobile</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-devices"></i>
              </div>
              <label class="fonticon-classname">bx-devices</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-joystick-button"></i>
              </div>
              <label class="fonticon-classname">bxs-joystick-button</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mouse-alt"></i>
              </div>
              <label class="fonticon-classname">bx-mouse-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-fingerprint"></i>
              </div>
              <label class="fonticon-classname">bx-fingerprint</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-tab"></i>
              </div>
              <label class="fonticon-classname">bx-tab</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-desktop"></i>
              </div>
              <label class="fonticon-classname">bx-desktop</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mobile-alt"></i>
              </div>
              <label class="fonticon-classname">bx-mobile-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-usb"></i>
              </div>
              <label class="fonticon-classname">bx-usb</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-tv"></i>
              </div>
              <label class="fonticon-classname">bx-tv</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-battery"></i>
              </div>
              <label class="fonticon-classname">bx-battery</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-chip"></i>
              </div>
              <label class="fonticon-classname">bx-chip</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-devices"></i>
              </div>
              <label class="fonticon-classname">bxs-devices</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-joystick"></i>
              </div>
              <label class="fonticon-classname">bx-joystick</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-mouse-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-mouse-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-radar"></i>
              </div>
              <label class="fonticon-classname">bx-radar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-memory-card"></i>
              </div>
              <label class="fonticon-classname">bx-memory-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-mobile-landscape"></i>
              </div>
              <label class="fonticon-classname">bx-mobile-landscape</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-joystick-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-joystick-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-joystick"></i>
              </div>
              <label class="fonticon-classname">bxs-joystick</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-memory-card"></i>
              </div>
              <label class="fonticon-classname">bxs-memory-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-mouse"></i>
              </div>
              <label class="fonticon-classname">bxs-mouse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-printer"></i>
              </div>
              <label class="fonticon-classname">bxs-printer</label>
            </div>
            <!-- e-commerce icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">E-commerce</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cart"></i>
              </div>
              <label class="fonticon-classname">bx-cart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-closet"></i>
              </div>
              <label class="fonticon-classname">bx-closet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-discount"></i>
              </div>
              <label class="fonticon-classname">bxs-discount</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-coupon"></i>
              </div>
              <label class="fonticon-classname">bxs-coupon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-store-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-store-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-purchase-tag"></i>
              </div>
              <label class="fonticon-classname">bx-purchase-tag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-barcode"></i>
              </div>
              <label class="fonticon-classname">bx-barcode</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-package"></i>
              </div>
              <label class="fonticon-classname">bx-package</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cart-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-cart-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-basket"></i>
              </div>
              <label class="fonticon-classname">bxs-basket</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-basket"></i>
              </div>
              <label class="fonticon-classname">bx-basket</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cart-alt"></i>
              </div>
              <label class="fonticon-classname">bx-cart-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-package"></i>
              </div>
              <label class="fonticon-classname">bxs-package</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cart"></i>
              </div>
              <label class="fonticon-classname">bxs-cart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-purchase-tag-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-purchase-tag-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-gift"></i>
              </div>
              <label class="fonticon-classname">bx-gift</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shopping-bag"></i>
              </div>
              <label class="fonticon-classname">bx-shopping-bag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-t-shirt"></i>
              </div>
              <label class="fonticon-classname">bxs-t-shirt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-store"></i>
              </div>
              <label class="fonticon-classname">bxs-store</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-barcode"></i>
              </div>
              <label class="fonticon-classname">bxs-barcode</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-store-alt"></i>
              </div>
              <label class="fonticon-classname">bx-store-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-purchase-tag-alt"></i>
              </div>
              <label class="fonticon-classname">bx-purchase-tag-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-purchase-tag"></i>
              </div>
              <label class="fonticon-classname">bxs-purchase-tag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-shopping-bag-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-shopping-bag-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-receipt"></i>
              </div>
              <label class="fonticon-classname">bxs-receipt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-gift"></i>
              </div>
              <label class="fonticon-classname">bxs-gift</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-store"></i>
              </div>
              <label class="fonticon-classname">bx-store</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-receipt"></i>
              </div>
              <label class="fonticon-classname">bx-receipt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-shopping-bag"></i>
              </div>
              <label class="fonticon-classname">bxs-shopping-bag</label>
            </div>
            <!-- emoji icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Emoji</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bot"></i>
              </div>
              <label class="fonticon-classname">bx-bot</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-ghost"></i>
              </div>
              <label class="fonticon-classname">bx-ghost</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-meh"></i>
              </div>
              <label class="fonticon-classname">bx-meh</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-happy"></i>
              </div>
              <label class="fonticon-classname">bx-happy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sad"></i>
              </div>
              <label class="fonticon-classname">bx-sad</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bot"></i>
              </div>
              <label class="fonticon-classname">bxs-bot</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-ghost"></i>
              </div>
              <label class="fonticon-classname">bxs-ghost</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-skull"></i>
              </div>
              <label class="fonticon-classname">bxs-skull</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-meh"></i>
              </div>
              <label class="fonticon-classname">bxs-meh</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-happy"></i>
              </div>
              <label class="fonticon-classname">bxs-happy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-sad"></i>
              </div>
              <label class="fonticon-classname">bxs-sad</label>
            </div>
            <!-- files & folders icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Files & Folders</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-txt"></i>
              </div>
              <label class="fonticon-classname">bxs-file-txt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-archive"></i>
              </div>
              <label class="fonticon-classname">bx-archive</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-file-find"></i>
              </div>
              <label class="fonticon-classname">bx-file-find</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-export"></i>
              </div>
              <label class="fonticon-classname">bx-export</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-md"></i>
              </div>
              <label class="fonticon-classname">bxs-file-md</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-archive-in"></i>
              </div>
              <label class="fonticon-classname">bx-archive-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-file-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-image"></i>
              </div>
              <label class="fonticon-classname">bxs-file-image</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file"></i>
              </div>
              <label class="fonticon-classname">bxs-file</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-archive"></i>
              </div>
              <label class="fonticon-classname">bxs-archive</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-file"></i>
              </div>
              <label class="fonticon-classname">bx-file</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-import"></i>
              </div>
              <label class="fonticon-classname">bx-import</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-box"></i>
              </div>
              <label class="fonticon-classname">bx-box</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-folder-open"></i>
              </div>
              <label class="fonticon-classname">bx-folder-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-folder-minus"></i>
              </div>
              <label class="fonticon-classname">bxs-folder-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-jpg"></i>
              </div>
              <label class="fonticon-classname">bxs-file-jpg</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-js"></i>
              </div>
              <label class="fonticon-classname">bxs-file-js</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-folder-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-folder-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-archive-in"></i>
              </div>
              <label class="fonticon-classname">bxs-archive-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-file-blank"></i>
              </div>
              <label class="fonticon-classname">bx-file-blank</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-folder"></i>
              </div>
              <label class="fonticon-classname">bxs-folder</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-find"></i>
              </div>
              <label class="fonticon-classname">bxs-file-find</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-css"></i>
              </div>
              <label class="fonticon-classname">bxs-file-css</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-html"></i>
              </div>
              <label class="fonticon-classname">bxs-file-html</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-folder"></i>
              </div>
              <label class="fonticon-classname">bx-folder</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-gif"></i>
              </div>
              <label class="fonticon-classname">bxs-file-gif</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-folder-minus"></i>
              </div>
              <label class="fonticon-classname">bx-folder-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-folder-plus"></i>
              </div>
              <label class="fonticon-classname">bx-folder-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-doc"></i>
              </div>
              <label class="fonticon-classname">bxs-file-doc</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-png"></i>
              </div>
              <label class="fonticon-classname">bxs-file-png</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-archive-out"></i>
              </div>
              <label class="fonticon-classname">bx-archive-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-pdf"></i>
              </div>
              <label class="fonticon-classname">bxs-file-pdf</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-box"></i>
              </div>
              <label class="fonticon-classname">bxs-box</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-archive-out"></i>
              </div>
              <label class="fonticon-classname">bxs-archive-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-blank"></i>
              </div>
              <label class="fonticon-classname">bxs-file-blank</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-file-json"></i>
              </div>
              <label class="fonticon-classname">bxs-file-json</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-folder-open"></i>
              </div>
              <label class="fonticon-classname">bxs-folder-open</label>
            </div>
            <!-- finance icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Finance</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-wallet-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-wallet-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-credit-card-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-credit-card-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dollar"></i>
              </div>
              <label class="fonticon-classname">bx-dollar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-credit-card-alt"></i>
              </div>
              <label class="fonticon-classname">bx-credit-card-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wallet-alt"></i>
              </div>
              <label class="fonticon-classname">bx-wallet-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wallet"></i>
              </div>
              <label class="fonticon-classname">bx-wallet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dollar-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-dollar-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-credit-card"></i>
              </div>
              <label class="fonticon-classname">bxs-credit-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dollar-circle"></i>
              </div>
              <label class="fonticon-classname">bx-dollar-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-money"></i>
              </div>
              <label class="fonticon-classname">bx-money</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-credit-card"></i>
              </div>
              <label class="fonticon-classname">bx-credit-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-wallet"></i>
              </div>
              <label class="fonticon-classname">bxs-wallet</label>
            </div>
            <!-- food & beverage icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Food & Beverage</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-coffee"></i>
              </div>
              <label class="fonticon-classname">bx-coffee</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-vial"></i>
              </div>
              <label class="fonticon-classname">bxs-vial</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dish"></i>
              </div>
              <label class="fonticon-classname">bx-dish</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-fridge"></i>
              </div>
              <label class="fonticon-classname">bxs-fridge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-drink"></i>
              </div>
              <label class="fonticon-classname">bxs-drink</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-fridge"></i>
              </div>
              <label class="fonticon-classname">bx-fridge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cake"></i>
              </div>
              <label class="fonticon-classname">bxs-cake</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dish"></i>
              </div>
              <label class="fonticon-classname">bxs-dish</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cake"></i>
              </div>
              <label class="fonticon-classname">bx-cake</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-flask"></i>
              </div>
              <label class="fonticon-classname">bxs-flask</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-coffee-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-coffee-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-wine"></i>
              </div>
              <label class="fonticon-classname">bxs-wine</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-coffee"></i>
              </div>
              <label class="fonticon-classname">bxs-coffee</label>
            </div>
            <!-- health icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Health</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-ambulance"></i>
              </div>
              <label class="fonticon-classname">bxs-ambulance</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-heart"></i>
              </div>
              <label class="fonticon-classname">bx-heart</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-plus-medical"></i>
              </div>
              <label class="fonticon-classname">bx-plus-medical</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dumbbell"></i>
              </div>
              <label class="fonticon-classname">bx-dumbbell</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-band-aid"></i>
              </div>
              <label class="fonticon-classname">bxs-band-aid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-first-aid"></i>
              </div>
              <label class="fonticon-classname">bx-first-aid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bath"></i>
              </div>
              <label class="fonticon-classname">bx-bath</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bed"></i>
              </div>
              <label class="fonticon-classname">bxs-bed</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pulse"></i>
              </div>
              <label class="fonticon-classname">bx-pulse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-test-tube"></i>
              </div>
              <label class="fonticon-classname">bx-test-tube</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-yin-yang"></i>
              </div>
              <label class="fonticon-classname">bxs-yin-yang</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-band-aid"></i>
              </div>
              <label class="fonticon-classname">bx-band-aid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-capsule"></i>
              </div>
              <label class="fonticon-classname">bxs-capsule</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-first-aid"></i>
              </div>
              <label class="fonticon-classname">bxs-first-aid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bed"></i>
              </div>
              <label class="fonticon-classname">bx-bed</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dna"></i>
              </div>
              <label class="fonticon-classname">bx-dna</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bath"></i>
              </div>
              <label class="fonticon-classname">bxs-bath</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-heart"></i>
              </div>
              <label class="fonticon-classname">bxs-heart</label>
            </div>
            <!-- interface icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Interface</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-search"></i>
              </div>
              <label class="fonticon-classname">bx-search</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-show"></i>
              </div>
              <label class="fonticon-classname">bx-show</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-power-off"></i>
              </div>
              <label class="fonticon-classname">bx-power-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-toggle-left"></i>
              </div>
              <label class="fonticon-classname">bx-toggle-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-toggle-right"></i>
              </div>
              <label class="fonticon-classname">bx-toggle-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-zoom-in"></i>
              </div>
              <label class="fonticon-classname">bx-zoom-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-slider-alt"></i>
              </div>
              <label class="fonticon-classname">bx-slider-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-menu-alt-right"></i>
              </div>
              <label class="fonticon-classname">bx-menu-alt-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-notification"></i>
              </div>
              <label class="fonticon-classname">bx-notification</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-x-square"></i>
              </div>
              <label class="fonticon-classname">bxs-x-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-checkbox"></i>
              </div>
              <label class="fonticon-classname">bxs-checkbox</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-zoom-out"></i>
              </div>
              <label class="fonticon-classname">bx-zoom-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-x-circle"></i>
              </div>
              <label class="fonticon-classname">bx-x-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dislike"></i>
              </div>
              <label class="fonticon-classname">bx-dislike</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-reset"></i>
              </div>
              <label class="fonticon-classname">bx-reset</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-filter"></i>
              </div>
              <label class="fonticon-classname">bx-filter</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-adjust"></i>
              </div>
              <label class="fonticon-classname">bx-adjust</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-extension"></i>
              </div>
              <label class="fonticon-classname">bx-extension</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-area"></i>
              </div>
              <label class="fonticon-classname">bx-area</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-space-bar"></i>
              </div>
              <label class="fonticon-classname">bx-space-bar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-radio-circle"></i>
              </div>
              <label class="fonticon-classname">bx-radio-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-radio-circle-marked"></i>
              </div>
              <label class="fonticon-classname">bx-radio-circle-marked</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-menu"></i>
              </div>
              <label class="fonticon-classname">bx-menu</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-filter-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-filter-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rotate-right"></i>
              </div>
              <label class="fonticon-classname">bx-rotate-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-collection"></i>
              </div>
              <label class="fonticon-classname">bxs-collection</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-detail"></i>
              </div>
              <label class="fonticon-classname">bxs-detail</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-copy"></i>
              </div>
              <label class="fonticon-classname">bxs-copy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cog"></i>
              </div>
              <label class="fonticon-classname">bxs-cog</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rotate-left"></i>
              </div>
              <label class="fonticon-classname">bx-rotate-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hide"></i>
              </div>
              <label class="fonticon-classname">bx-hide</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-trash-alt"></i>
              </div>
              <label class="fonticon-classname">bx-trash-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-detail"></i>
              </div>
              <label class="fonticon-classname">bx-detail</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-block"></i>
              </div>
              <label class="fonticon-classname">bx-block</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-x-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-x-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-check-double"></i>
              </div>
              <label class="fonticon-classname">bx-check-double</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-show-alt"></i>
              </div>
              <label class="fonticon-classname">bx-show-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-checkbox-checked"></i>
              </div>
              <label class="fonticon-classname">bxs-checkbox-checked</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-copy-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-copy-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dots-horizontal-rounded"></i>
              </div>
              <label class="fonticon-classname">bx-dots-horizontal-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-minus-circle"></i>
              </div>
              <label class="fonticon-classname">bx-minus-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-area"></i>
              </div>
              <label class="fonticon-classname">bxs-area</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dots-horizontal"></i>
              </div>
              <label class="fonticon-classname">bx-dots-horizontal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dots-vertical-rounded"></i>
              </div>
              <label class="fonticon-classname">bx-dots-vertical-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dots-vertical"></i>
              </div>
              <label class="fonticon-classname">bx-dots-vertical</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-tag"></i>
              </div>
              <label class="fonticon-classname">bx-tag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-category"></i>
              </div>
              <label class="fonticon-classname">bx-category</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-category-alt"></i>
              </div>
              <label class="fonticon-classname">bx-category-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-x"></i>
              </div>
              <label class="fonticon-classname">bx-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-copy"></i>
              </div>
              <label class="fonticon-classname">bx-copy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-check"></i>
              </div>
              <label class="fonticon-classname">bx-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-extension"></i>
              </div>
              <label class="fonticon-classname">bxs-extension</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-label"></i>
              </div>
              <label class="fonticon-classname">bx-label</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-zoom-out"></i>
              </div>
              <label class="fonticon-classname">bxs-zoom-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plus-square"></i>
              </div>
              <label class="fonticon-classname">bxs-plus-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-selection"></i>
              </div>
              <label class="fonticon-classname">bx-selection</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-exit-fullscreen"></i>
              </div>
              <label class="fonticon-classname">bx-exit-fullscreen</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-fullscreen"></i>
              </div>
              <label class="fonticon-classname">bx-fullscreen</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-collection"></i>
              </div>
              <label class="fonticon-classname">bx-collection</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-notification-off"></i>
              </div>
              <label class="fonticon-classname">bx-notification-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cut"></i>
              </div>
              <label class="fonticon-classname">bx-cut</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-expand"></i>
              </div>
              <label class="fonticon-classname">bx-expand</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-collapse"></i>
              </div>
              <label class="fonticon-classname">bx-collapse</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-plus"></i>
              </div>
              <label class="fonticon-classname">bx-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-crop"></i>
              </div>
              <label class="fonticon-classname">bx-crop</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-select-multiple"></i>
              </div>
              <label class="fonticon-classname">bx-select-multiple</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-menu-alt-left"></i>
              </div>
              <label class="fonticon-classname">bx-menu-alt-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-screenshot"></i>
              </div>
              <label class="fonticon-classname">bx-screenshot</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-trash"></i>
              </div>
              <label class="fonticon-classname">bx-trash</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-filter-alt"></i>
              </div>
              <label class="fonticon-classname">bx-filter-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-add-to-queue"></i>
              </div>
              <label class="fonticon-classname">bxs-add-to-queue</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-customize"></i>
              </div>
              <label class="fonticon-classname">bx-customize</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-zoom-in"></i>
              </div>
              <label class="fonticon-classname">bxs-zoom-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-slider"></i>
              </div>
              <label class="fonticon-classname">bx-slider</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-poll"></i>
              </div>
              <label class="fonticon-classname">bx-poll</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paste"></i>
              </div>
              <label class="fonticon-classname">bx-paste</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-adjust"></i>
              </div>
              <label class="fonticon-classname">bxs-adjust</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-history"></i>
              </div>
              <label class="fonticon-classname">bx-history</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-add-to-queue"></i>
              </div>
              <label class="fonticon-classname">bx-add-to-queue</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-clipboard"></i>
              </div>
              <label class="fonticon-classname">bx-clipboard</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-windows"></i>
              </div>
              <label class="fonticon-classname">bx-windows</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-like"></i>
              </div>
              <label class="fonticon-classname">bx-like</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-columns"></i>
              </div>
              <label class="fonticon-classname">bx-columns</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cog"></i>
              </div>
              <label class="fonticon-classname">bx-cog</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-search"></i>
              </div>
              <label class="fonticon-classname">bxs-search</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-window-close"></i>
              </div>
              <label class="fonticon-classname">bx-window-close</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-minus-square"></i>
              </div>
              <label class="fonticon-classname">bxs-minus-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-checkbox-checked"></i>
              </div>
              <label class="fonticon-classname">bx-checkbox-checked</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-checkbox"></i>
              </div>
              <label class="fonticon-classname">bx-checkbox</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-revision"></i>
              </div>
              <label class="fonticon-classname">bx-revision</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-checkbox-square"></i>
              </div>
              <label class="fonticon-classname">bx-checkbox-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-repost"></i>
              </div>
              <label class="fonticon-classname">bx-repost</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-label"></i>
              </div>
              <label class="fonticon-classname">bxs-label</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dislike"></i>
              </div>
              <label class="fonticon-classname">bxs-dislike</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-search-alt-2"></i>
              </div>
              <label class="fonticon-classname">bx-search-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-notification"></i>
              </div>
              <label class="fonticon-classname">bxs-notification</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-customize"></i>
              </div>
              <label class="fonticon-classname">bxs-customize</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-window"></i>
              </div>
              <label class="fonticon-classname">bx-window</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-window-open"></i>
              </div>
              <label class="fonticon-classname">bx-window-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-toggle-right"></i>
              </div>
              <label class="fonticon-classname">bxs-toggle-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-toggle-left"></i>
              </div>
              <label class="fonticon-classname">bxs-toggle-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-table"></i>
              </div>
              <label class="fonticon-classname">bx-table</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-crosshair"></i>
              </div>
              <label class="fonticon-classname">bx-crosshair</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-plus-circle"></i>
              </div>
              <label class="fonticon-classname">bx-plus-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-copy-alt"></i>
              </div>
              <label class="fonticon-classname">bx-copy-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-paste"></i>
              </div>
              <label class="fonticon-classname">bxs-paste</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hide"></i>
              </div>
              <label class="fonticon-classname">bxs-hide</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-select-multiple"></i>
              </div>
              <label class="fonticon-classname">bxs-select-multiple</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-show"></i>
              </div>
              <label class="fonticon-classname">bxs-show</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-duplicate"></i>
              </div>
              <label class="fonticon-classname">bxs-duplicate</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-duplicate"></i>
              </div>
              <label class="fonticon-classname">bx-duplicate</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-minus-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-minus-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plus-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-plus-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-widget"></i>
              </div>
              <label class="fonticon-classname">bxs-widget</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-trash"></i>
              </div>
              <label class="fonticon-classname">bxs-trash</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-tag"></i>
              </div>
              <label class="fonticon-classname">bxs-tag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-trash-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-trash-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-to-top"></i>
              </div>
              <label class="fonticon-classname">bxs-to-top</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-check-square"></i>
              </div>
              <label class="fonticon-classname">bx-check-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-like"></i>
              </div>
              <label class="fonticon-classname">bxs-like</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-search-alt-2"></i>
              </div>
              <label class="fonticon-classname">bxs-search-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-notification-off"></i>
              </div>
              <label class="fonticon-classname">bxs-notification-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-tag-x"></i>
              </div>
              <label class="fonticon-classname">bxs-tag-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-check-circle"></i>
              </div>
              <label class="fonticon-classname">bx-check-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-exit"></i>
              </div>
              <label class="fonticon-classname">bx-exit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-adjust-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-adjust-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-exit"></i>
              </div>
              <label class="fonticon-classname">bxs-exit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-check-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-check-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-check-square"></i>
              </div>
              <label class="fonticon-classname">bxs-check-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-minus"></i>
              </div>
              <label class="fonticon-classname">bx-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-search-alt"></i>
              </div>
              <label class="fonticon-classname">bx-search-alt</label>
            </div>
            <!-- layout icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Layout</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-layout"></i>
              </div>
              <label class="fonticon-classname">bx-layout</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-grid-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-grid-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-layer"></i>
              </div>
              <label class="fonticon-classname">bxs-layer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-bottom"></i>
              </div>
              <label class="fonticon-classname">bx-border-bottom</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-horizontal-center"></i>
              </div>
              <label class="fonticon-classname">bx-horizontal-center</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-card"></i>
              </div>
              <label class="fonticon-classname">bxs-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-vertical-center"></i>
              </div>
              <label class="fonticon-classname">bx-vertical-center</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-left"></i>
              </div>
              <label class="fonticon-classname">bx-border-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dock-top"></i>
              </div>
              <label class="fonticon-classname">bxs-dock-top</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-top"></i>
              </div>
              <label class="fonticon-classname">bx-border-top</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dock-right"></i>
              </div>
              <label class="fonticon-classname">bxs-dock-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-right"></i>
              </div>
              <label class="fonticon-classname">bx-border-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dock-left"></i>
              </div>
              <label class="fonticon-classname">bxs-dock-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-all"></i>
              </div>
              <label class="fonticon-classname">bx-border-all</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-move"></i>
              </div>
              <label class="fonticon-classname">bx-move</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-grid-small"></i>
              </div>
              <label class="fonticon-classname">bx-grid-small</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-dock-bottom"></i>
              </div>
              <label class="fonticon-classname">bxs-dock-bottom</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-grid-alt"></i>
              </div>
              <label class="fonticon-classname">bx-grid-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sidebar"></i>
              </div>
              <label class="fonticon-classname">bx-sidebar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-grid-horizontal"></i>
              </div>
              <label class="fonticon-classname">bx-grid-horizontal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-grid"></i>
              </div>
              <label class="fonticon-classname">bxs-grid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-move-vertical"></i>
              </div>
              <label class="fonticon-classname">bx-move-vertical</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-move-horizontal"></i>
              </div>
              <label class="fonticon-classname">bx-move-horizontal</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-card"></i>
              </div>
              <label class="fonticon-classname">bx-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dock-bottom"></i>
              </div>
              <label class="fonticon-classname">bx-dock-bottom</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-grid-vertical"></i>
              </div>
              <label class="fonticon-classname">bx-grid-vertical</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dock-right"></i>
              </div>
              <label class="fonticon-classname">bx-dock-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-layer"></i>
              </div>
              <label class="fonticon-classname">bx-layer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-layout"></i>
              </div>
              <label class="fonticon-classname">bxs-layout</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-grid"></i>
              </div>
              <label class="fonticon-classname">bx-grid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dock-top"></i>
              </div>
              <label class="fonticon-classname">bx-dock-top</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-border-radius"></i>
              </div>
              <label class="fonticon-classname">bx-border-radius</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-dock-left"></i>
              </div>
              <label class="fonticon-classname">bx-dock-left</label>
            </div>
            <!-- loader icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Loader</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-loader-alt"></i>
              </div>
              <label class="fonticon-classname">bx-loader-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-loader-circle"></i>
              </div>
              <label class="fonticon-classname">bx-loader-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-loader"></i>
              </div>
              <label class="fonticon-classname">bx-loader</label>
            </div>
            <!-- misc start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Misc</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-infinite"></i>
              </div>
              <label class="fonticon-classname">bx-infinite</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hive"></i>
              </div>
              <label class="fonticon-classname">bx-hive</label>
            </div>
            <!-- music icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Music</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-eject"></i>
              </div>
              <label class="fonticon-classname">bxs-eject</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-volume"></i>
              </div>
              <label class="fonticon-classname">bx-volume</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-music"></i>
              </div>
              <label class="fonticon-classname">bx-music</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-repeat"></i>
              </div>
              <label class="fonticon-classname">bx-repeat</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-play"></i>
              </div>
              <label class="fonticon-classname">bx-play</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-volume"></i>
              </div>
              <label class="fonticon-classname">bxs-volume</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-volume-mute"></i>
              </div>
              <label class="fonticon-classname">bxs-volume-mute</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-radio"></i>
              </div>
              <label class="fonticon-classname">bx-radio</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-play-circle"></i>
              </div>
              <label class="fonticon-classname">bx-play-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-volume-low"></i>
              </div>
              <label class="fonticon-classname">bxs-volume-low</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sync"></i>
              </div>
              <label class="fonticon-classname">bx-sync</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-stop-circle"></i>
              </div>
              <label class="fonticon-classname">bx-stop-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shuffle"></i>
              </div>
              <label class="fonticon-classname">bx-shuffle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-album"></i>
              </div>
              <label class="fonticon-classname">bx-album</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rewind-circle"></i>
              </div>
              <label class="fonticon-classname">bx-rewind-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pause-circle"></i>
              </div>
              <label class="fonticon-classname">bx-pause-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-skip-previous-circle"></i>
              </div>
              <label class="fonticon-classname">bx-skip-previous-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-volume-full"></i>
              </div>
              <label class="fonticon-classname">bxs-volume-full</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-volume-full"></i>
              </div>
              <label class="fonticon-classname">bx-volume-full</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-fast-forward-circle"></i>
              </div>
              <label class="fonticon-classname">bx-fast-forward-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rewind"></i>
              </div>
              <label class="fonticon-classname">bx-rewind</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-fast-forward"></i>
              </div>
              <label class="fonticon-classname">bx-fast-forward</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-headphone"></i>
              </div>
              <label class="fonticon-classname">bx-headphone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-playlist"></i>
              </div>
              <label class="fonticon-classname">bxs-playlist</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pause"></i>
              </div>
              <label class="fonticon-classname">bx-pause</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-equalizer"></i>
              </div>
              <label class="fonticon-classname">bx-equalizer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-volume-low"></i>
              </div>
              <label class="fonticon-classname">bx-volume-low</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-volume-mute"></i>
              </div>
              <label class="fonticon-classname">bx-volume-mute</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-skip-next-circle"></i>
              </div>
              <label class="fonticon-classname">bx-skip-next-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-album"></i>
              </div>
              <label class="fonticon-classname">bxs-album</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-fast-forward-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-fast-forward-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-music"></i>
              </div>
              <label class="fonticon-classname">bxs-music</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-skip-next-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-skip-next-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-stop"></i>
              </div>
              <label class="fonticon-classname">bx-stop</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-skip-previous"></i>
              </div>
              <label class="fonticon-classname">bx-skip-previous</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-rewind-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-rewind-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-skip-next"></i>
              </div>
              <label class="fonticon-classname">bx-skip-next</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-radio"></i>
              </div>
              <label class="fonticon-classname">bxs-radio</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-skip-previous-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-skip-previous-circle</label>
            </div>
            <!-- network icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Network</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wifi-off"></i>
              </div>
              <label class="fonticon-classname">bx-wifi-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wifi"></i>
              </div>
              <label class="fonticon-classname">bx-wifi</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-broadcast"></i>
              </div>
              <label class="fonticon-classname">bx-broadcast</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-station"></i>
              </div>
              <label class="fonticon-classname">bx-station</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bluetooth"></i>
              </div>
              <label class="fonticon-classname">bx-bluetooth</label>
            </div>

            <!-- object icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Object</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-lock-open-alt"></i>
              </div>
              <label class="fonticon-classname">bx-lock-open-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-lock-alt"></i>
              </div>
              <label class="fonticon-classname">bx-lock-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-lock"></i>
              </div>
              <label class="fonticon-classname">bxs-lock</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-torch"></i>
              </div>
              <label class="fonticon-classname">bxs-torch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bulb"></i>
              </div>
              <label class="fonticon-classname">bxs-bulb</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calculator"></i>
              </div>
              <label class="fonticon-classname">bxs-calculator</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-flag"></i>
              </div>
              <label class="fonticon-classname">bxs-flag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-flag-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-flag-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-disc"></i>
              </div>
              <label class="fonticon-classname">bxs-disc</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-buoy"></i>
              </div>
              <label class="fonticon-classname">bxs-buoy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-disc"></i>
              </div>
              <label class="fonticon-classname">bx-disc</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-key"></i>
              </div>
              <label class="fonticon-classname">bx-key</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-lock-open-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-lock-open-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-lock-open"></i>
              </div>
              <label class="fonticon-classname">bxs-lock-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-wrench"></i>
              </div>
              <label class="fonticon-classname">bxs-wrench</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-crown"></i>
              </div>
              <label class="fonticon-classname">bx-crown</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-crown"></i>
              </div>
              <label class="fonticon-classname">bxs-crown</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-flag"></i>
              </div>
              <label class="fonticon-classname">bx-flag</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-lock-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-lock-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-award"></i>
              </div>
              <label class="fonticon-classname">bxs-award</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-diamond"></i>
              </div>
              <label class="fonticon-classname">bx-diamond</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bulb"></i>
              </div>
              <label class="fonticon-classname">bx-bulb</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-magnet"></i>
              </div>
              <label class="fonticon-classname">bxs-magnet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plug"></i>
              </div>
              <label class="fonticon-classname">bxs-plug</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-ruler"></i>
              </div>
              <label class="fonticon-classname">bxs-ruler</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-buoy"></i>
              </div>
              <label class="fonticon-classname">bx-buoy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-anchor"></i>
              </div>
              <label class="fonticon-classname">bx-anchor</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-award"></i>
              </div>
              <label class="fonticon-classname">bx-award</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-save"></i>
              </div>
              <label class="fonticon-classname">bxs-save</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wrench"></i>
              </div>
              <label class="fonticon-classname">bx-wrench</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-magnet"></i>
              </div>
              <label class="fonticon-classname">bx-magnet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-plug"></i>
              </div>
              <label class="fonticon-classname">bx-plug</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-lock-open"></i>
              </div>
              <label class="fonticon-classname">bx-lock-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-save"></i>
              </div>
              <label class="fonticon-classname">bx-save</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-lock"></i>
              </div>
              <label class="fonticon-classname">bx-lock</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-ruler"></i>
              </div>
              <label class="fonticon-classname">bx-ruler</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-key"></i>
              </div>
              <label class="fonticon-classname">bxs-key</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calculator"></i>
              </div>
              <label class="fonticon-classname">bx-calculator</label>
            </div>

            <!-- photo & video icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Photos & Videos</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bolt-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-bolt-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-tone"></i>
              </div>
              <label class="fonticon-classname">bx-tone</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-image"></i>
              </div>
              <label class="fonticon-classname">bxs-image</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-brightness-half"></i>
              </div>
              <label class="fonticon-classname">bxs-brightness-half</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-face"></i>
              </div>
              <label class="fonticon-classname">bxs-face</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-carousel"></i>
              </div>
              <label class="fonticon-classname">bxs-carousel</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bolt-circle"></i>
              </div>
              <label class="fonticon-classname">bx-bolt-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-film"></i>
              </div>
              <label class="fonticon-classname">bxs-film</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-images"></i>
              </div>
              <label class="fonticon-classname">bx-images</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-photo-album"></i>
              </div>
              <label class="fonticon-classname">bx-photo-album</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-image-add"></i>
              </div>
              <label class="fonticon-classname">bxs-image-add</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-film"></i>
              </div>
              <label class="fonticon-classname">bx-film</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-brightness-half"></i>
              </div>
              <label class="fonticon-classname">bx-brightness-half</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-face"></i>
              </div>
              <label class="fonticon-classname">bx-face</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-landscape"></i>
              </div>
              <label class="fonticon-classname">bx-landscape</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-camera-off"></i>
              </div>
              <label class="fonticon-classname">bx-camera-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-videos"></i>
              </div>
              <label class="fonticon-classname">bxs-videos</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-aperture"></i>
              </div>
              <label class="fonticon-classname">bx-aperture</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-camera-off"></i>
              </div>
              <label class="fonticon-classname">bxs-camera-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-movie"></i>
              </div>
              <label class="fonticon-classname">bx-movie</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-landscape"></i>
              </div>
              <label class="fonticon-classname">bxs-landscape</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cast"></i>
              </div>
              <label class="fonticon-classname">bx-cast</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-image"></i>
              </div>
              <label class="fonticon-classname">bx-image</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-video-recording"></i>
              </div>
              <label class="fonticon-classname">bxs-video-recording</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-image-alt"></i>
              </div>
              <label class="fonticon-classname">bx-image-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-camera"></i>
              </div>
              <label class="fonticon-classname">bxs-camera</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-carousel"></i>
              </div>
              <label class="fonticon-classname">bx-carousel</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-brightness"></i>
              </div>
              <label class="fonticon-classname">bxs-brightness</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-video-off"></i>
              </div>
              <label class="fonticon-classname">bx-video-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-video-plus"></i>
              </div>
              <label class="fonticon-classname">bx-video-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-image-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-image-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-video-off"></i>
              </div>
              <label class="fonticon-classname">bxs-video-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-video-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-video-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-camera"></i>
              </div>
              <label class="fonticon-classname">bx-camera</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-photo-album"></i>
              </div>
              <label class="fonticon-classname">bxs-photo-album</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-movie"></i>
              </div>
              <label class="fonticon-classname">bxs-movie</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-image-add"></i>
              </div>
              <label class="fonticon-classname">bx-image-add</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-video"></i>
              </div>
              <label class="fonticon-classname">bxs-video</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-brightness"></i>
              </div>
              <label class="fonticon-classname">bx-brightness</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-video"></i>
              </div>
              <label class="fonticon-classname">bx-video</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-video-recording"></i>
              </div>
              <label class="fonticon-classname">bx-video-recording</label>
            </div>

            <!-- shape icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Shape</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pyramid"></i>
              </div>
              <label class="fonticon-classname">bx-pyramid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shape-triangle"></i>
              </div>
              <label class="fonticon-classname">bx-shape-triangle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-star-half"></i>
              </div>
              <label class="fonticon-classname">bxs-star-half</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-rectangle"></i>
              </div>
              <label class="fonticon-classname">bxs-rectangle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-certification"></i>
              </div>
              <label class="fonticon-classname">bx-certification</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-star"></i>
              </div>
              <label class="fonticon-classname">bx-star</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shield-alt-2"></i>
              </div>
              <label class="fonticon-classname">bx-shield-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-certification"></i>
              </div>
              <label class="fonticon-classname">bxs-certification</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-shield-alt-2"></i>
              </div>
              <label class="fonticon-classname">bxs-shield-alt-2</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cube"></i>
              </div>
              <label class="fonticon-classname">bxs-cube</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-square"></i>
              </div>
              <label class="fonticon-classname">bx-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shape-circle"></i>
              </div>
              <label class="fonticon-classname">bx-shape-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-square"></i>
              </div>
              <label class="fonticon-classname">bxs-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-square-rounded"></i>
              </div>
              <label class="fonticon-classname">bx-square-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rectangle"></i>
              </div>
              <label class="fonticon-classname">bx-rectangle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-square-rounded"></i>
              </div>
              <label class="fonticon-classname">bxs-square-rounded</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shape-square"></i>
              </div>
              <label class="fonticon-classname">bx-shape-square</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-polygon"></i>
              </div>
              <label class="fonticon-classname">bx-polygon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shield-alt"></i>
              </div>
              <label class="fonticon-classname">bx-shield-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-shield"></i>
              </div>
              <label class="fonticon-classname">bx-shield</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cube"></i>
              </div>
              <label class="fonticon-classname">bx-cube</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pyramid"></i>
              </div>
              <label class="fonticon-classname">bxs-pyramid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-polygon"></i>
              </div>
              <label class="fonticon-classname">bxs-polygon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cylinder"></i>
              </div>
              <label class="fonticon-classname">bx-cylinder</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cube-alt"></i>
              </div>
              <label class="fonticon-classname">bx-cube-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-shield"></i>
              </div>
              <label class="fonticon-classname">bxs-shield</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-star"></i>
              </div>
              <label class="fonticon-classname">bxs-star</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cylinder"></i>
              </div>
              <label class="fonticon-classname">bxs-cylinder</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cube-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-cube-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cuboid"></i>
              </div>
              <label class="fonticon-classname">bx-cuboid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-badge-check"></i>
              </div>
              <label class="fonticon-classname">bx-badge-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-circle"></i>
              </div>
              <label class="fonticon-classname">bx-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-badge-check"></i>
              </div>
              <label class="fonticon-classname">bxs-badge-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cuboid"></i>
              </div>
              <label class="fonticon-classname">bxs-cuboid</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-badge"></i>
              </div>
              <label class="fonticon-classname">bx-badge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-badge"></i>
              </div>
              <label class="fonticon-classname">bxs-badge</label>
            </div>

            <!-- sports icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Sports</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-tennis-ball"></i>
              </div>
              <label class="fonticon-classname">bx-tennis-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bowling-ball"></i>
              </div>
              <label class="fonticon-classname">bx-bowling-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-ball"></i>
              </div>
              <label class="fonticon-classname">bxs-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-ball"></i>
              </div>
              <label class="fonticon-classname">bx-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-trophy"></i>
              </div>
              <label class="fonticon-classname">bx-trophy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bowling-ball"></i>
              </div>
              <label class="fonticon-classname">bxs-bowling-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-trophy"></i>
              </div>
              <label class="fonticon-classname">bxs-trophy</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-basketball"></i>
              </div>
              <label class="fonticon-classname">bx-basketball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-tennis-ball"></i>
              </div>
              <label class="fonticon-classname">bxs-tennis-ball</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cycling"></i>
              </div>
              <label class="fonticon-classname">bx-cycling</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-football"></i>
              </div>
              <label class="fonticon-classname">bx-football</label>
            </div>

            <!-- time icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Time</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-time"></i>
              </div>
              <label class="fonticon-classname">bxs-time</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-timer"></i>
              </div>
              <label class="fonticon-classname">bx-timer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hourglass-top"></i>
              </div>
              <label class="fonticon-classname">bxs-hourglass-top</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-event"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-event</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hourglass"></i>
              </div>
              <label class="fonticon-classname">bx-hourglass</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hourglass-bottom"></i>
              </div>
              <label class="fonticon-classname">bxs-hourglass-bottom</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-x"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-watch-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-watch-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-time"></i>
              </div>
              <label class="fonticon-classname">bx-time</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hourglass"></i>
              </div>
              <label class="fonticon-classname">bxs-hourglass</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-alarm-off"></i>
              </div>
              <label class="fonticon-classname">bx-alarm-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-stopwatch"></i>
              </div>
              <label class="fonticon-classname">bx-stopwatch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-minus"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-stopwatch"></i>
              </div>
              <label class="fonticon-classname">bxs-stopwatch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-minus"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-alarm"></i>
              </div>
              <label class="fonticon-classname">bx-alarm</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-alarm-add"></i>
              </div>
              <label class="fonticon-classname">bx-alarm-add</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-check"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-time-five"></i>
              </div>
              <label class="fonticon-classname">bxs-time-five</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-watch"></i>
              </div>
              <label class="fonticon-classname">bxs-watch</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-x"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar"></i>
              </div>
              <label class="fonticon-classname">bx-calendar</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-alarm-off"></i>
              </div>
              <label class="fonticon-classname">bxs-alarm-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-time-five"></i>
              </div>
              <label class="fonticon-classname">bx-time-five</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-check"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-plus"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-alarm"></i>
              </div>
              <label class="fonticon-classname">bxs-alarm</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-alarm-add"></i>
              </div>
              <label class="fonticon-classname">bxs-alarm-add</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-timer"></i>
              </div>
              <label class="fonticon-classname">bxs-timer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-calendar-event"></i>
              </div>
              <label class="fonticon-classname">bxs-calendar-event</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-calendar-alt"></i>
              </div>
              <label class="fonticon-classname">bx-calendar-alt</label>
            </div>

            <!-- travel icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Travel</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-truck"></i>
              </div>
              <label class="fonticon-classname">bxs-truck</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-navigation"></i>
              </div>
              <label class="fonticon-classname">bxs-navigation</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-map"></i>
              </div>
              <label class="fonticon-classname">bxs-map</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-map-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-map-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-spa"></i>
              </div>
              <label class="fonticon-classname">bx-spa</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bus"></i>
              </div>
              <label class="fonticon-classname">bx-bus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-swim"></i>
              </div>
              <label class="fonticon-classname">bx-swim</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-run"></i>
              </div>
              <label class="fonticon-classname">bx-run</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-parking"></i>
              </div>
              <label class="fonticon-classname">bxs-parking</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-map"></i>
              </div>
              <label class="fonticon-classname">bx-map</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-map-alt"></i>
              </div>
              <label class="fonticon-classname">bx-map-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-globe-alt"></i>
              </div>
              <label class="fonticon-classname">bx-globe-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-car"></i>
              </div>
              <label class="fonticon-classname">bx-car</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-navigation"></i>
              </div>
              <label class="fonticon-classname">bx-navigation</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-landmark"></i>
              </div>
              <label class="fonticon-classname">bxs-landmark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-directions"></i>
              </div>
              <label class="fonticon-classname">bx-directions</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-gas-pump"></i>
              </div>
              <label class="fonticon-classname">bxs-gas-pump</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-globe"></i>
              </div>
              <label class="fonticon-classname">bx-globe</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plane-land"></i>
              </div>
              <label class="fonticon-classname">bxs-plane-land</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plane-take-off"></i>
              </div>
              <label class="fonticon-classname">bxs-plane-take-off</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-street-view"></i>
              </div>
              <label class="fonticon-classname">bx-street-view</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-train"></i>
              </div>
              <label class="fonticon-classname">bxs-train</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-gas-pump"></i>
              </div>
              <label class="fonticon-classname">bx-gas-pump</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-compass"></i>
              </div>
              <label class="fonticon-classname">bxs-compass</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-rocket"></i>
              </div>
              <label class="fonticon-classname">bxs-rocket</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rocket"></i>
              </div>
              <label class="fonticon-classname">bx-rocket</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-hotel"></i>
              </div>
              <label class="fonticon-classname">bx-hotel</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plane-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-plane-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-directions"></i>
              </div>
              <label class="fonticon-classname">bxs-directions</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-car"></i>
              </div>
              <label class="fonticon-classname">bxs-car</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-traffic-barrier"></i>
              </div>
              <label class="fonticon-classname">bxs-traffic-barrier</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-walk"></i>
              </div>
              <label class="fonticon-classname">bx-walk</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-ship"></i>
              </div>
              <label class="fonticon-classname">bxs-ship</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-world"></i>
              </div>
              <label class="fonticon-classname">bx-world</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bus"></i>
              </div>
              <label class="fonticon-classname">bxs-bus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-city"></i>
              </div>
              <label class="fonticon-classname">bxs-city</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-no-entry"></i>
              </div>
              <label class="fonticon-classname">bxs-no-entry</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-traffic"></i>
              </div>
              <label class="fonticon-classname">bxs-traffic</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-planet"></i>
              </div>
              <label class="fonticon-classname">bx-planet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hotel"></i>
              </div>
              <label class="fonticon-classname">bxs-hotel</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-train"></i>
              </div>
              <label class="fonticon-classname">bx-train</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-planet"></i>
              </div>
              <label class="fonticon-classname">bxs-planet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-taxi"></i>
              </div>
              <label class="fonticon-classname">bxs-taxi</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-no-entry"></i>
              </div>
              <label class="fonticon-classname">bx-no-entry</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-map-pin"></i>
              </div>
              <label class="fonticon-classname">bx-map-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-direction-right"></i>
              </div>
              <label class="fonticon-classname">bxs-direction-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-tree"></i>
              </div>
              <label class="fonticon-classname">bxs-tree</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-direction-left"></i>
              </div>
              <label class="fonticon-classname">bxs-direction-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-map-pin"></i>
              </div>
              <label class="fonticon-classname">bxs-map-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-taxi"></i>
              </div>
              <label class="fonticon-classname">bx-taxi</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-restaurant"></i>
              </div>
              <label class="fonticon-classname">bx-restaurant</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-compass"></i>
              </div>
              <label class="fonticon-classname">bx-compass</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-plane"></i>
              </div>
              <label class="fonticon-classname">bxs-plane</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-spa"></i>
              </div>
              <label class="fonticon-classname">bxs-spa</label>
            </div>
            <div class="col-12">
              <!-- user icons start -->
              <h4 class="card-title pl-1">User</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-male"></i>
              </div>
              <label class="fonticon-classname">bx-male</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-voice"></i>
              </div>
              <label class="fonticon-classname">bx-user-voice</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-check"></i>
              </div>
              <label class="fonticon-classname">bx-user-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-user-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-pin"></i>
              </div>
              <label class="fonticon-classname">bxs-user-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-log-out"></i>
              </div>
              <label class="fonticon-classname">bxs-log-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-badge"></i>
              </div>
              <label class="fonticon-classname">bxs-user-badge</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-rectangle"></i>
              </div>
              <label class="fonticon-classname">bxs-user-rectangle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-circle"></i>
              </div>
              <label class="fonticon-classname">bx-user-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-minus"></i>
              </div>
              <label class="fonticon-classname">bx-user-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-plus"></i>
              </div>
              <label class="fonticon-classname">bx-user-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-x"></i>
              </div>
              <label class="fonticon-classname">bx-user-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-log-out-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-log-out-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-voice"></i>
              </div>
              <label class="fonticon-classname">bxs-user-voice</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-minus"></i>
              </div>
              <label class="fonticon-classname">bxs-user-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-log-out-circle"></i>
              </div>
              <label class="fonticon-classname">bx-log-out-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user-pin"></i>
              </div>
              <label class="fonticon-classname">bx-user-pin</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-group"></i>
              </div>
              <label class="fonticon-classname">bxs-group</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-id-card"></i>
              </div>
              <label class="fonticon-classname">bxs-id-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-log-in"></i>
              </div>
              <label class="fonticon-classname">bx-log-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-user"></i>
              </div>
              <label class="fonticon-classname">bx-user</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-log-in-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-log-in-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-x"></i>
              </div>
              <label class="fonticon-classname">bxs-user-x</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user"></i>
              </div>
              <label class="fonticon-classname">bxs-user</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-group"></i>
              </div>
              <label class="fonticon-classname">bx-group</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-log-out"></i>
              </div>
              <label class="fonticon-classname">bx-log-out</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-id-card"></i>
              </div>
              <label class="fonticon-classname">bx-id-card</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-check"></i>
              </div>
              <label class="fonticon-classname">bxs-user-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-log-in-circle"></i>
              </div>
              <label class="fonticon-classname">bx-log-in-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-circle"></i>
              </div>
              <label class="fonticon-classname">bxs-user-circle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-user-detail"></i>
              </div>
              <label class="fonticon-classname">bxs-user-detail</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-contact"></i>
              </div>
              <label class="fonticon-classname">bxs-contact</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-log-in"></i>
              </div>
              <label class="fonticon-classname">bxs-log-in</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-female"></i>
              </div>
              <label class="fonticon-classname">bx-female</label>
            </div>
            <!-- weather icon start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Weather</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-moon"></i>
              </div>
              <label class="fonticon-classname">bxs-moon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-zap"></i>
              </div>
              <label class="fonticon-classname">bxs-zap</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bolt"></i>
              </div>
              <label class="fonticon-classname">bxs-bolt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-snow"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-snow</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-water"></i>
              </div>
              <label class="fonticon-classname">bx-water</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-lightning"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-lightning</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-thermometer"></i>
              </div>
              <label class="fonticon-classname">bxs-thermometer</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-light-rain"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-light-rain</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cloud"></i>
              </div>
              <label class="fonticon-classname">bxs-cloud</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cloud-lightning"></i>
              </div>
              <label class="fonticon-classname">bxs-cloud-lightning</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-flame"></i>
              </div>
              <label class="fonticon-classname">bxs-flame</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-cloud-rain"></i>
              </div>
              <label class="fonticon-classname">bxs-cloud-rain</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-droplet"></i>
              </div>
              <label class="fonticon-classname">bxs-droplet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-drizzle"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-drizzle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-sun"></i>
              </div>
              <label class="fonticon-classname">bx-sun</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud"></i>
              </div>
              <label class="fonticon-classname">bx-cloud</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-droplet"></i>
              </div>
              <label class="fonticon-classname">bx-droplet</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-cloud-rain"></i>
              </div>
              <label class="fonticon-classname">bx-cloud-rain</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-wind"></i>
              </div>
              <label class="fonticon-classname">bx-wind</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-hot"></i>
              </div>
              <label class="fonticon-classname">bxs-hot</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-moon"></i>
              </div>
              <label class="fonticon-classname">bx-moon</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-sun"></i>
              </div>
              <label class="fonticon-classname">bxs-sun</label>
            </div>
            <!-- writing icons start -->
            <div class="col-12">
              <h4 class="card-title pl-1">Writing</h4>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-font-color"></i>
              </div>
              <label class="fonticon-classname">bx-font-color</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-edit-alt"></i>
              </div>
              <label class="fonticon-classname">bxs-edit-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-graduation"></i>
              </div>
              <label class="fonticon-classname">bxs-graduation</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-book"></i>
              </div>
              <label class="fonticon-classname">bx-book</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bookmark-minus"></i>
              </div>
              <label class="fonticon-classname">bx-bookmark-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bookmarks"></i>
              </div>
              <label class="fonticon-classname">bx-bookmarks</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-link-external"></i>
              </div>
              <label class="fonticon-classname">bx-link-external</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-edit-alt"></i>
              </div>
              <label class="fonticon-classname">bx-edit-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-book-open"></i>
              </div>
              <label class="fonticon-classname">bx-book-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pen"></i>
              </div>
              <label class="fonticon-classname">bxs-pen</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-pencil"></i>
              </div>
              <label class="fonticon-classname">bxs-pencil</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-notepad"></i>
              </div>
              <label class="fonticon-classname">bxs-notepad</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-list-plus"></i>
              </div>
              <label class="fonticon-classname">bx-list-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-align-left"></i>
              </div>
              <label class="fonticon-classname">bx-align-left</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-book-open"></i>
              </div>
              <label class="fonticon-classname">bxs-book-open</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bookmark-star"></i>
              </div>
              <label class="fonticon-classname">bxs-bookmark-star</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bookmark-plus"></i>
              </div>
              <label class="fonticon-classname">bxs-bookmark-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bold"></i>
              </div>
              <label class="fonticon-classname">bx-bold</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-highlight"></i>
              </div>
              <label class="fonticon-classname">bx-highlight</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-font-size"></i>
              </div>
              <label class="fonticon-classname">bx-font-size</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bookmark-minus"></i>
              </div>
              <label class="fonticon-classname">bxs-bookmark-minus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-list-ul"></i>
              </div>
              <label class="fonticon-classname">bx-list-ul</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-list-ol"></i>
              </div>
              <label class="fonticon-classname">bx-list-ol</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-font-family"></i>
              </div>
              <label class="fonticon-classname">bx-font-family</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-list-check"></i>
              </div>
              <label class="fonticon-classname">bx-list-check</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bookmark"></i>
              </div>
              <label class="fonticon-classname">bxs-bookmark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-book-bookmark"></i>
              </div>
              <label class="fonticon-classname">bxs-book-bookmark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-book"></i>
              </div>
              <label class="fonticon-classname">bxs-book</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-book-content"></i>
              </div>
              <label class="fonticon-classname">bxs-book-content</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bookmark-plus"></i>
              </div>
              <label class="fonticon-classname">bx-bookmark-plus</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-book-content"></i>
              </div>
              <label class="fonticon-classname">bx-book-content</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-bookmark"></i>
              </div>
              <label class="fonticon-classname">bx-bookmark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-align-justify"></i>
              </div>
              <label class="fonticon-classname">bx-align-justify</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-strikethrough"></i>
              </div>
              <label class="fonticon-classname">bx-strikethrough</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-rename"></i>
              </div>
              <label class="fonticon-classname">bxs-rename</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-align-middle"></i>
              </div>
              <label class="fonticon-classname">bx-align-middle</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-bookmarks"></i>
              </div>
              <label class="fonticon-classname">bxs-bookmarks</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-italic"></i>
              </div>
              <label class="fonticon-classname">bx-italic</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-underline"></i>
              </div>
              <label class="fonticon-classname">bx-underline</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-text"></i>
              </div>
              <label class="fonticon-classname">bx-text</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-align-right"></i>
              </div>
              <label class="fonticon-classname">bx-align-right</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-unlink"></i>
              </div>
              <label class="fonticon-classname">bx-unlink</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-edit"></i>
              </div>
              <label class="fonticon-classname">bx-edit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-font"></i>
              </div>
              <label class="fonticon-classname">bx-font</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-heading"></i>
              </div>
              <label class="fonticon-classname">bx-heading</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-paragraph"></i>
              </div>
              <label class="fonticon-classname">bx-paragraph</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bxs-edit"></i>
              </div>
              <label class="fonticon-classname">bxs-edit</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pencil"></i>
              </div>
              <label class="fonticon-classname">bx-pencil</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-pen"></i>
              </div>
              <label class="fonticon-classname">bx-pen</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-notepad"></i>
              </div>
              <label class="fonticon-classname">bx-notepad</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-book-bookmark"></i>
              </div>
              <label class="fonticon-classname">bx-book-bookmark</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-left-indent"></i>
              </div>
              <label class="fonticon-classname">bx-left-indent</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-link"></i>
              </div>
              <label class="fonticon-classname">bx-link</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-link-alt"></i>
              </div>
              <label class="fonticon-classname">bx-link-alt</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rename"></i>
              </div>
              <label class="fonticon-classname">bx-rename</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-rss"></i>
              </div>
              <label class="fonticon-classname">bx-rss</label>
            </div>
            <div class="col-md-4 col-sm-6 col-12 fonticon-container">
              <div class="fonticon-wrap">
                <i class="bx bx-right-indent"></i>
              </div>
              <label class="fonticon-classname">bx-right-indent</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- boxicons icons section end -->
@endsection