diff --git a/app/Helpers/IconHelper.php b/app/Helpers/IconHelper.php
index f8512686c..a73c333f3 100644
--- a/app/Helpers/IconHelper.php
+++ b/app/Helpers/IconHelper.php
@@ -34,7 +34,7 @@ class IconHelper
             case 'user':
                 return 'fa-solid fa-user';
             case 'users':
-                return 'fas fa-users fa-fw';
+                return 'fas fa-users';
             case 'restore':
                 return 'fa-solid fa-trash-arrow-up';
             case 'external-link':
@@ -50,39 +50,39 @@ class IconHelper
             case 'checkmark':
                 return 'fas fa-check icon-white';
             case 'x':
-                return 'fas fa-times fa-fw';
+                return 'fas fa-times';
             case 'logout':
-                return 'fa fa-sign-out fa-fw';
+                return 'fa fa-sign-out';
             case 'admin-settings':
-                return 'fa fa-cogs fa-fw';
+                return 'fa fa-cogs';
             case 'settings':
-                return 'fa fa-sign-out fa-fw';
+                return 'fa fa-sign-out';
             case 'angle-left':
                 return 'fa fa-angle-left';
             case 'warning':
                 return 'fas fa-exclamation-triangle';
             case 'kits':
-                return 'fa fa-object-group fa-fw';
+                return 'fa fa-object-group';
             case 'assets':
-                return 'fas fa-barcode fa-fw';
+                return 'fas fa-barcode';
             case 'accessories':
-                return 'far fa-keyboard fa-fw';
+                return 'far fa-keyboard';
             case 'components':
-                return 'far fa-hdd fa-fw';
+                return 'far fa-hdd';
             case 'consumables':
-                return 'fas fa-tint fa-fw';
+                return 'fas fa-tint';
             case 'licenses':
-                return 'far fa-save fa-fw';
+                return 'far fa-save';
             case 'requestable':
-                return 'fa fa-laptop fa-fw';
+                return 'fa fa-laptop';
             case 'reports':
-                return 'fas fa-chart-bar fa-fw';
+                return 'fas fa-chart-bar';
             case 'heart':
                 return 'fas fa-heart';
             case 'circle':
                 return 'far fa-circle';
             case 'due':
-                return 'fas fa-history fa-fw';
+                return 'fas fa-history';
             case 'import':
                 return 'fas fa-cloud-upload-alt fa-fw';
             case 'search':
@@ -90,19 +90,23 @@ class IconHelper
             case 'alerts':
                 return 'far fa-flag';
             case 'password':
-                return 'fa-solid fa-asterisk fa-fw';
+                return 'fa fa-key';
             case 'api-key':
-                return 'fa-solid fa-user-secret fa-fw';
+                return 'fa-solid fa-user-secret';
             case 'nav-toggle':
                 return 'fas fa-bars';
             case 'dashboard':
-                return 'fas fa-tachometer-alt fa-fw';
+                return 'fas fa-tachometer-alt';
             case 'info-circle':
                     return 'fas fa-info-circle';
             case 'carat-right':
                 return 'fa fa-caret-right';
             case 'carat-up':
                 return 'fa fa-caret-up';
+            case 'arrow-circle-right':
+                return 'fa fa-arrow-circle-right';
+            case 'minus':
+                return 'fas fa-minus';
         }
     }
 }
diff --git a/resources/views/account/change-password.blade.php b/resources/views/account/change-password.blade.php
index 9899a9734..57509e5fa 100755
--- a/resources/views/account/change-password.blade.php
+++ b/resources/views/account/change-password.blade.php
@@ -59,7 +59,7 @@
             </div> <!-- .box-body -->
             <div class="box-footer text-right">
                 <a class="btn btn-link" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
-                <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
             </div>
 
         </div> <!-- .box-default -->
diff --git a/resources/views/account/profile.blade.php b/resources/views/account/profile.blade.php
index aecd8a4c1..d27367192 100755
--- a/resources/views/account/profile.blade.php
+++ b/resources/views/account/profile.blade.php
@@ -174,7 +174,7 @@
       </div> <!-- .box-body -->
       <div class="text-right box-footer">
         <a class="btn btn-link" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
-        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
       </div>
     </div> <!-- .box-default -->
     {{ Form::close() }}
diff --git a/resources/views/asset_maintenances/edit.blade.php b/resources/views/asset_maintenances/edit.blade.php
index 5c2cd1fa2..0f0903374 100644
--- a/resources/views/asset_maintenances/edit.blade.php
+++ b/resources/views/asset_maintenances/edit.blade.php
@@ -123,7 +123,7 @@
       </div> <!-- .box-body -->
 
       <div class="box-footer text-right">
-        <button type="submit" class="btn btn-success"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+        <button type="submit" class="btn btn-success"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
       </div>
     </div> <!-- .box-default -->
     </form>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 298d55f4e..0a3c93333 100755
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -58,7 +58,7 @@
 
                                         <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
                                             <label for="username">
-                                                <i class="fas fa-user" aria-hidden="true"></i>
+                                                <x-icon type="user" />
                                                 {{ trans('admin/users/table.username')  }}
                                             </label>
                                             <input class="form-control" placeholder="{{ trans('admin/users/table.username')  }}" name="username" type="text" id="username" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}" autofocus>
@@ -66,7 +66,7 @@
                                         </div>
                                         <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                             <label for="password">
-                                                <i class="fa fa-key" aria-hidden="true"></i>
+                                                <x-icon type="password" />
                                                 {{ trans('admin/users/table.password')  }}
                                             </label>
                                             <input class="form-control" placeholder="{{ trans('admin/users/table.password')  }}" name="password" type="password" id="password" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}">
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 5077b36f9..032805818 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -37,7 +37,7 @@
                             <div class="row">
                                 <div class="col-md-12">
                                     <div class="alert alert-info">
-                                        <i class="fas fa-info-circle" aria-hidden="true"></i>
+                                        <x-icon type="info-circle" />
                                         {!! trans('auth/general.username_help_top') !!}
                                     </div>
                                 </div>
@@ -55,7 +55,7 @@
                                     <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
 
                                         <div class="col-md-12">
-                                            <label for="username"><i class="fas fa-user" aria-hidden="true"></i> {{ trans('admin/users/table.username') }} </label>
+                                            <label for="username"><x-icon type="user" /> {{ trans('admin/users/table.username') }} </label>
                                             <input type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="{{ trans('admin/users/table.username') }}" aria-label="username">
                                             {!! $errors->first('username', '<span class="alert-msg"><i class="fas fa-times"></i> :message</span>') !!}
                                         </div>
@@ -67,13 +67,13 @@
                                     <br>
                                     <!-- show help text toggle -->
                                     <a href="#" id="show">
-                                        <i class="fa fa-caret-right"></i>
+                                        <x-icon type="caret-right" />
                                         {{ trans('general.show_help') }}
                                     </a>
 
                                     <!-- hide help text toggle -->
                                     <a href="#" id="hide" style="display:none">
-                                        <i class="fa fa-caret-up"></i>
+                                        <x-icon type="caret-up" />
                                         {{ trans('general.hide_help') }}
                                     </a>
 
diff --git a/resources/views/blade/icon.blade.php b/resources/views/blade/icon.blade.php
index 5b15e0166..2aad44c9b 100644
--- a/resources/views/blade/icon.blade.php
+++ b/resources/views/blade/icon.blade.php
@@ -1,5 +1,4 @@
 @props([
     'type' => '',
 ])
-<i class="{{ Icon::icon($type) }} {{ $attributes->get('class') }}"
-   aria-hidden="true" {{ isset($style) ? 'style="'.$attributes->get('style').'"' : '' }}></i>
\ No newline at end of file
+<i class="{{ Icon::icon($type) }} {{ $attributes->get('class') }}"{{ isset($style) ?  $attributes->merge(['style' => $style]) : '' }} aria-hidden="true"></i>
\ No newline at end of file
diff --git a/resources/views/blade/redirect_submit_options.blade.php b/resources/views/blade/redirect_submit_options.blade.php
index a6b0c7fc8..eb0619b52 100644
--- a/resources/views/blade/redirect_submit_options.blade.php
+++ b/resources/views/blade/redirect_submit_options.blade.php
@@ -27,7 +27,7 @@
                 @endif
 
                 <button type="submit" class="btn btn-primary pull-right{{ ($disabled_select ? ' disabled' : '') }}" style="margin-left:5px; border-radius: 3px;"{!! ($disabled_select ? ' data-tooltip="true" title="'.trans('admin/hardware/general.edit').'" disabled' : '') !!}>
-                    <i class="fas fa-check icon-white" aria-hidden="true"></i>
+                    <x-icon type="checkmark" />
                     {{ $button_label }}
                 </button>
 
diff --git a/resources/views/components/view.blade.php b/resources/views/components/view.blade.php
index bbb9b6709..15acdc0eb 100644
--- a/resources/views/components/view.blade.php
+++ b/resources/views/components/view.blade.php
@@ -203,15 +203,15 @@
                       </td>
                       <td>
                         @if ($file->filename)
-                          <a href="{{ route('show.componentfile', [$component->id, $file->id]) }}" class="btn btn-sm btn-default">
-                            <i class="fas fa-download" aria-hidden="true"></i>
+                          <nobr><a href="{{ route('show.componentfile', [$component->id, $file->id]) }}" class="btn btn-sm btn-default">
+                            <x-icon type="download" />
                             <span class="sr-only">{{ trans('general.download') }}</span>
                           </a>
 
                           <a href="{{ route('show.componentfile', [$component->id, $file->id, 'inline' => 'true']) }}" class="btn btn-sm btn-default" target="_blank">
-                            <i class="fa fa-external-link" aria-hidden="true"></i>
+                            <x-icon type="external-link" />
                           </a>
-
+                          </nobr>
                         @endif
                       </td>
                       <td>{{ $file->created_at }}</td>
@@ -284,7 +284,26 @@
     </div>
     @endif
 
-  </div>
+  @can('checkout', Component::class)
+    <div class="col-md-12 hidden-print" style="padding-top: 5px;">
+            <a href="{{ route('components.checkout.show', $component->id)  }}" class="btn bg-maroon btn-social btn-block hidden-print">
+                 <x-icon type="checkout" />
+              {{ trans('admin/components/general.checkout') }}
+            </a>
+
+    </div>
+    @can('update', $component)
+      <div class="col-md-12 hidden-print" style="padding-top: 5px;">
+        <a href="{{ route('components.edit', $component->id) }}" class="btn btn-warning btn-social btn-block hidden-print">
+          <x-icon type="edit" />
+          {{ trans('admin/components/general.edit') }}
+        </a>
+      </div>
+    @endcan
+  @endcan
+
+
+</div>
 </div> <!-- .row-->
 
 @can('components.files', Component::class)
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 233912207..39a5d8b75 100755
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -37,10 +37,12 @@
         <p>{{ strtolower(trans('general.assets')) }}</p>
       </div>
       <div class="icon" aria-hidden="true">
-        <i class="fas fa-barcode" aria-hidden="true"></i>
+          <x-icon type="assets" />
       </div>
       @can('index', \App\Models\Asset::class)
-        <a href="{{ route('hardware.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+        <a href="{{ route('hardware.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+            <x-icon type="arrow-circle-right" />
+        </a>
       @endcan
     </div>
       </a>
@@ -55,10 +57,12 @@
         <p>{{ strtolower(trans('general.licenses')) }}</p>
       </div>
       <div class="icon" aria-hidden="true">
-        <i class="far fa-save"></i>
+          <x-icon type="licenses" />
       </div>
         @can('view', \App\Models\License::class)
-          <a href="{{ route('licenses.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+          <a href="{{ route('licenses.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+              <x-icon type="arrow-circle-right" />
+          </a>
         @endcan
     </div>
      </a>
@@ -74,10 +78,12 @@
         <p>{{ strtolower(trans('general.accessories')) }}</p>
       </div>
       <div class="icon" aria-hidden="true">
-        <i class="far fa-keyboard"></i>
+          <x-icon type="accessories" />
       </div>
       @can('index', \App\Models\Accessory::class)
-          <a href="{{ route('accessories.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+          <a href="{{ route('accessories.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+              <x-icon type="arrow-circle-right" />
+          </a>
       @endcan
     </div>
       </a>
@@ -93,10 +99,12 @@
         <p>{{ strtolower(trans('general.consumables')) }}</p>
       </div>
       <div class="icon" aria-hidden="true">
-        <i class="fas fa-tint"></i>
+          <x-icon type="consumables" />
       </div>
       @can('index', \App\Models\Consumable::class)
-        <a href="{{ route('consumables.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+        <a href="{{ route('consumables.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+            <x-icon type="arrow-circle-right" />
+        </a>
       @endcan
     </div>
   </div><!-- ./col -->
@@ -110,10 +118,12 @@
        <p>{{ strtolower(trans('general.components')) }}</p>
      </div>
      <div class="icon" aria-hidden="true">
-       <i class="far fa-hdd"></i>
+         <x-icon type="components" />
      </div>
        @can('view', \App\Models\License::class)
-         <a href="{{ route('components.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+         <a href="{{ route('components.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+             <x-icon type="arrow-circle-right" />
+         </a>
        @endcan
    </div>
     </a>
@@ -128,10 +138,12 @@
        <p>{{ strtolower(trans('general.people')) }}</p>
      </div>
      <div class="icon" aria-hidden="true">
-       <i class="fas fa-users"></i>
+         <x-icon type="users" />
      </div>
        @can('view', \App\Models\License::class)
-         <a href="{{ route('users.index') }}" class="small-box-footer">{{ trans('general.view_all') }} <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
+         <a href="{{ route('users.index') }}" class="small-box-footer">{{ trans('general.view_all') }}
+             <x-icon type="arrow-circle-right" />
+         </a>
        @endcan
    </div>
     </a>
@@ -201,7 +213,7 @@
         <h2 class="box-title">{{ trans('general.recent_activity') }}</h2>
         <div class="box-tools pull-right">
             <button type="button" class="btn btn-box-tool" data-widget="collapse" aria-hidden="true">
-                <i class="fas fa-minus" aria-hidden="true"></i>
+                <x-icon type="minus" />
                 <span class="sr-only">{{ trans('general.collapse') }}</span>
             </button>
         </div>
@@ -253,7 +265,7 @@
                 </h2>
                 <div class="box-tools pull-right">
                     <button type="button" class="btn btn-box-tool" data-widget="collapse" aria-hidden="true">
-                        <i class="fas fa-minus" aria-hidden="true"></i>
+                        <x-icon type="minus" />
                         <span class="sr-only">{{ trans('general.collapse') }}</span>
                     </button>
                 </div>
@@ -282,7 +294,7 @@
 					<h2 class="box-title">{{ trans('general.companies') }}</h2>
 					<div class="box-tools pull-right">
 						<button type="button" class="btn btn-box-tool" data-widget="collapse">
-							<i class="fas fa-minus" aria-hidden="true"></i>
+                            <x-icon type="minus" />
 							<span class="sr-only">{{ trans('general.collapse') }}</span>
 						</button>
 					</div>
@@ -307,27 +319,27 @@
 								<tr>
 									<th class="col-sm-3" data-visible="true" data-field="name" data-formatter="companiesLinkFormatter" data-sortable="true">{{ trans('general.name') }}</th>
 									<th class="col-sm-1" data-visible="true" data-field="users_count" data-sortable="true">
-										<i class="fas fa-users" aria-hidden="true"></i>
+                                        <x-icon type="users" />
 										<span class="sr-only">{{ trans('general.people') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="assets_count" data-sortable="true">
-										<i class="fas fa-barcode" aria-hidden="true"></i>
+                                        <x-icon type="assets" />
 										<span class="sr-only">{{ trans('general.asset_count') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="accessories_count" data-sortable="true">
-										<i class="far fa-keyboard" aria-hidden="true"></i>
+                                        <x-icon type="accessories" />
 										<span class="sr-only">{{ trans('general.accessories_count') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="consumables_count" data-sortable="true">
-										<i class="fas fa-tint" aria-hidden="true"></i>
+                                        <x-icon type="consumables" />
 										<span class="sr-only">{{ trans('general.consumables_count') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="components_count" data-sortable="true">
-										<i class="far fa-hdd" aria-hidden="true"></i>
+                                        <x-icon type="components" />
 										<span class="sr-only">{{ trans('general.components_count') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="licenses_count" data-sortable="true">
-										<i class="far fa-save" aria-hidden="true"></i>
+                                        <x-icon type="licenses" />
 										<span class="sr-only">{{ trans('general.licenses_count') }}</span>
 									</th>
 								</tr>
@@ -350,7 +362,7 @@
 					<h2 class="box-title">{{ trans('general.locations') }}</h2>
 					<div class="box-tools pull-right">
 						<button type="button" class="btn btn-box-tool" data-widget="collapse">
-							<i class="fas fa-minus" aria-hidden="true"></i>
+                            <x-icon type="minus" />
 							<span class="sr-only">{{ trans('general.collapse') }}</span>
 						</button>
 					</div>
@@ -376,7 +388,7 @@
 									<th class="col-sm-3" data-visible="true" data-field="name" data-formatter="locationsLinkFormatter" data-sortable="true">{{ trans('general.name') }}</th>
 									
 									<th class="col-sm-1" data-visible="true" data-field="assets_count" data-sortable="true">
-										<i class="fas fa-barcode" aria-hidden="true"></i>
+                                        <x-icon type="assets" />
 										<span class="sr-only">{{ trans('general.asset_count') }}</span>
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="assigned_assets_count" data-sortable="true">
@@ -384,7 +396,7 @@
 										{{ trans('general.assigned') }}
 									</th>
 									<th class="col-sm-1" data-visible="true" data-field="users_count" data-sortable="true">
-										<i class="fas fa-users" aria-hidden="true"></i>
+                                        <x-icon type="users" />
 										<span class="sr-only">{{ trans('general.people') }}</span>
 										
 									</th>
@@ -413,7 +425,7 @@
                 <h2 class="box-title">{{ trans('general.asset') }} {{ trans('general.categories') }}</h2>
                 <div class="box-tools pull-right">
                     <button type="button" class="btn btn-box-tool" data-widget="collapse">
-                        <i class="fas fa-minus" aria-hidden="true"></i>
+                        <x-icon type="minus" />
                         <span class="sr-only">{{ trans('general.collapse') }}</span>
                     </button>
                 </div>
@@ -441,23 +453,23 @@
                                     {{ trans('general.type') }}
                                 </th>
                                 <th class="col-sm-1" data-visible="true" data-field="assets_count" data-sortable="true">
-                                    <i class="fas fa-barcode" aria-hidden="true"></i>
+                                    <x-icon type="assets" />
                                     <span class="sr-only">{{ trans('general.asset_count') }}</span>
                                 </th>
                                 <th class="col-sm-1" data-visible="true" data-field="accessories_count" data-sortable="true">
-                                    <i class="far fa-keyboard" aria-hidden="true"></i>
+                                    <x-icon type="licenses" />
                                     <span class="sr-only">{{ trans('general.accessories_count') }}</span>
                                 </th>
                                 <th class="col-sm-1" data-visible="true" data-field="consumables_count" data-sortable="true">
-                                    <i class="fas fa-tint" aria-hidden="true"></i>
+                                    <x-icon type="consumables" />
                                     <span class="sr-only">{{ trans('general.consumables_count') }}</span>
                                 </th>
                                 <th class="col-sm-1" data-visible="true" data-field="components_count" data-sortable="true">
-                                    <i class="far fa-hdd" aria-hidden="true"></i>
+                                    <x-icon type="components" />
                                     <span class="sr-only">{{ trans('general.components_count') }}</span>
                                 </th>
                                 <th class="col-sm-1" data-visible="true" data-field="licenses_count" data-sortable="true">
-                                    <i class="far fa-save" aria-hidden="true"></i>
+                                    <x-icon type="licenses" />
                                     <span class="sr-only">{{ trans('general.licenses_count') }}</span>
                                 </th>
                             </tr>
diff --git a/resources/views/hardware/audit.blade.php b/resources/views/hardware/audit.blade.php
index 965937107..0bc445567 100644
--- a/resources/views/hardware/audit.blade.php
+++ b/resources/views/hardware/audit.blade.php
@@ -136,7 +136,7 @@
                     <div class="box-footer">
                         <a class="btn btn-link" href="{{ URL::previous() }}"> {{ trans('button.cancel') }}</a>
                         <button type="submit" class="btn btn-success pull-right{{ (!$asset->model ? ' disabled' : '') }}"{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid_fix').'" disabled' : '') !!}>
-                            <i class="fas fa-check icon-white" aria-hidden="true"></i>
+                            <x-icon type="checkmark" />
                             {{ trans('general.audit') }}
                         </button>
                     </div>
diff --git a/resources/views/hardware/bulk-checkout.blade.php b/resources/views/hardware/bulk-checkout.blade.php
index 562a27154..bab7849ec 100644
--- a/resources/views/hardware/bulk-checkout.blade.php
+++ b/resources/views/hardware/bulk-checkout.blade.php
@@ -86,7 +86,7 @@
       </div> <!--./box-body-->
       <div class="box-footer">
         <a class="btn btn-link" href="{{ URL::previous() }}"> {{ trans('button.cancel') }}</a>
-        <button type="submit" class="btn btn-primary pull-right"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.checkout') }}</button>
+        <button type="submit" class="btn btn-primary pull-right"><x-icon type="checkmark" /> {{ trans('general.checkout') }}</button>
       </div>
     </div>
       </form>
diff --git a/resources/views/hardware/bulk-delete.blade.php b/resources/views/hardware/bulk-delete.blade.php
index df988f5ad..f72e7e4d1 100644
--- a/resources/views/hardware/bulk-delete.blade.php
+++ b/resources/views/hardware/bulk-delete.blade.php
@@ -59,7 +59,7 @@
 
         <div class="box-footer text-right">
           <a class="btn btn-link" href="{{ URL::previous() }}" method="post" enctype="multipart/form-data">{{ trans('button.cancel') }}</a>
-          <button type="submit" class="btn btn-success" id="submit-button"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('button.delete') }}</button>
+          <button type="submit" class="btn btn-success" id="submit-button"><x-icon type="checkmark" /> {{ trans('button.delete') }}</button>
         </div><!-- /.box-footer -->
       </div><!-- /.box -->
     </form>
diff --git a/resources/views/hardware/bulk-restore.blade.php b/resources/views/hardware/bulk-restore.blade.php
index e4bfb6e4d..a99864268 100644
--- a/resources/views/hardware/bulk-restore.blade.php
+++ b/resources/views/hardware/bulk-restore.blade.php
@@ -53,7 +53,7 @@
 
         <div class="box-footer text-right">
           <a class="btn btn-link" href="{{ URL::previous() }}" method="post" enctype="multipart/form-data">{{ trans('button.cancel') }}</a>
-          <button type="submit" class="btn btn-success" id="submit-button"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('button.restore') }}</button>
+          <button type="submit" class="btn btn-success" id="submit-button"><x-icon type="checkmark" /> {{ trans('button.restore') }}</button>
         </div><!-- /.box-footer -->
       </div><!-- /.box -->
     </form>
diff --git a/resources/views/hardware/bulk.blade.php b/resources/views/hardware/bulk.blade.php
index f621d88fa..23ffa1b96 100755
--- a/resources/views/hardware/bulk.blade.php
+++ b/resources/views/hardware/bulk.blade.php
@@ -226,7 +226,7 @@
         </div> <!--/.box-body-->
 
         <div class="text-right box-footer">
-          <button type="submit" class="btn btn-success"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+          <button type="submit" class="btn btn-success"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
         </div>
       </div> <!--/.box.box-default-->
     </form>
diff --git a/resources/views/hardware/quickscan-checkin.blade.php b/resources/views/hardware/quickscan-checkin.blade.php
index ec6ef5719..7a31e3cf1 100644
--- a/resources/views/hardware/quickscan-checkin.blade.php
+++ b/resources/views/hardware/quickscan-checkin.blade.php
@@ -69,7 +69,7 @@
                 </div> <!--/.box-body-->
                 <div class="box-footer">
                     <a class="btn btn-link" href="{{ route('hardware.index') }}"> {{ trans('button.cancel') }}</a>
-                    <button type="submit" id="checkin_button" class="btn btn-success pull-right"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.checkin') }}</button>
+                    <button type="submit" id="checkin_button" class="btn btn-success pull-right"><x-icon type="checkmark" /> {{ trans('general.checkin') }}</button>
                 </div>
 
 
diff --git a/resources/views/hardware/quickscan.blade.php b/resources/views/hardware/quickscan.blade.php
index e4f6c8a55..c47c31dfe 100644
--- a/resources/views/hardware/quickscan.blade.php
+++ b/resources/views/hardware/quickscan.blade.php
@@ -88,7 +88,7 @@
                     </div> <!--/.box-body-->
                     <div class="box-footer">
                         <a class="btn btn-link" href="{{ route('hardware.index') }}"> {{ trans('button.cancel') }}</a>
-                        <button type="submit" id="audit_button" class="btn btn-success pull-right"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.audit') }}</button>
+                        <button type="submit" id="audit_button" class="btn btn-success pull-right"><x-icon type="checkmark" /> {{ trans('general.audit') }}</button>
                     </div>
 
 
diff --git a/resources/views/kits/checkout.blade.php b/resources/views/kits/checkout.blade.php
index 265329259..2b50412e1 100644
--- a/resources/views/kits/checkout.blade.php
+++ b/resources/views/kits/checkout.blade.php
@@ -68,7 +68,7 @@
       </div> <!--./box-body-->
       <div class="box-footer">
         <a class="btn btn-link" href="{{ route('kits.index') }}"> {{ trans('button.cancel') }}</a>
-        <button type="submit" class="btn btn-success pull-right"><i class="fas fa-check icon-white"></i> {{ trans('general.checkout') }}</button>
+        <button type="submit" class="btn btn-success pull-right"><x-icon type="checkmark" /> {{ trans('general.checkout') }}</button>
       </div>
     </div>
       </form>
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index 2c38e5911..edeeb6bf6 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -145,7 +145,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('index', \App\Models\Asset::class)
                                 <li aria-hidden="true"{!! (Request::is('hardware*') ? ' class="active"' : '') !!}>
                                     <a href="{{ url('hardware') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=1" : ''}} tabindex="-1" data-tooltip="true" data-placement="bottom" data-title="{{ trans('general.assets') }}">
-                                        <i class="fas fa-barcode fa-fw"></i>
+                                        <x-icon type="assets" />
                                         <span class="sr-only">{{ trans('general.assets') }}</span>
                                     </a>
                                 </li>
@@ -153,7 +153,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('view', \App\Models\License::class)
                                 <li aria-hidden="true"{!! (Request::is('licenses*') ? ' class="active"' : '') !!}>
                                     <a href="{{ route('licenses.index') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=2" : ''}} tabindex="-1" data-tooltip="true" data-placement="bottom" data-title="{{ trans('general.licenses') }}">
-                                        <i class="far fa-save fa-fw"></i>
+                                        <x-icon type="licenses" />
                                         <span class="sr-only">{{ trans('general.licenses') }}</span>
                                     </a>
                                 </li>
@@ -161,7 +161,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('index', \App\Models\Accessory::class)
                                 <li aria-hidden="true"{!! (Request::is('accessories*') ? ' class="active"' : '') !!}>
                                     <a href="{{ route('accessories.index') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=3" : ''}} tabindex="-1" data-tooltip="true" data-placement="bottom" data-title="{{ trans('general.accessories') }}">
-                                        <i class="far fa-keyboard fa-fw"></i>
+                                        <x-icon type="accessories" />
                                         <span class="sr-only">{{ trans('general.accessories') }}</span>
                                     </a>
                                 </li>
@@ -169,7 +169,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('index', \App\Models\Consumable::class)
                                 <li aria-hidden="true"{!! (Request::is('consumables*') ? ' class="active"' : '') !!}>
                                     <a href="{{ url('consumables') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=4" : ''}} tabindex="-1" data-tooltip="true" data-placement="bottom" data-title="{{ trans('general.consumables') }}">
-                                        <i class="fas fa-tint fa-fw"></i>
+                                        <x-icon type="consumables" />
                                         <span class="sr-only">{{ trans('general.consumables') }}</span>
                                     </a>
                                 </li>
@@ -177,7 +177,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('view', \App\Models\Component::class)
                                 <li aria-hidden="true"{!! (Request::is('components*') ? ' class="active"' : '') !!}>
                                     <a href="{{ route('components.index') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=5" : ''}} tabindex="-1" data-tooltip="true" data-placement="bottom" data-title="{{ trans('general.components') }}">
-                                        <i class="far fa-hdd fa-fw"></i>
+                                        <x-icon type="components" />
                                         <span class="sr-only">{{ trans('general.components') }}</span>
                                     </a>
                                 </li>
@@ -197,7 +197,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                             </div>
                                             <div class="col-xs-1">
                                                 <button type="submit" class="btn btn-primary pull-right">
-                                                    <i class="fas fa-search" aria-hidden="true"></i>
+                                                    <x-icon type="search" />
                                                     <span class="sr-only">{{ trans('general.search') }}</span>
                                                 </button>
                                             </div>
@@ -216,7 +216,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\Asset::class)
                                             <li {!! (Request::is('hardware/create') ? 'class="active>"' : '') !!}>
                                                 <a href="{{ route('hardware.create') }}" tabindex="-1">
-                                                    <i class="fas fa-barcode fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="assets" />
                                                     {{ trans('general.asset') }}
                                                 </a>
                                             </li>
@@ -224,7 +224,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\License::class)
                                             <li {!! (Request::is('licenses/create') ? 'class="active"' : '') !!}>
                                                 <a href="{{ route('licenses.create') }}" tabindex="-1">
-                                                    <i class="far fa-save fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="licenses" />
                                                     {{ trans('general.license') }}
                                                 </a>
                                             </li>
@@ -232,7 +232,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\Accessory::class)
                                             <li {!! (Request::is('accessories/create') ? 'class="active"' : '') !!}>
                                                 <a href="{{ route('accessories.create') }}" tabindex="-1">
-                                                    <i class="far fa-keyboard fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="accessories" />
                                                     {{ trans('general.accessory') }}
                                                 </a>
                                             </li>
@@ -240,7 +240,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\Consumable::class)
                                             <li {!! (Request::is('consunmables/create') ? 'class="active"' : '') !!}>
                                                 <a href="{{ route('consumables.create') }}" tabindex="-1">
-                                                    <i class="fas fa-tint fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="consumables" />
                                                     {{ trans('general.consumable') }}
                                                 </a>
                                             </li>
@@ -248,7 +248,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\Component::class)
                                             <li {!! (Request::is('components/create') ? 'class="active"' : '') !!}>
                                                 <a href="{{ route('components.create') }}" tabindex="-1">
-                                                    <i class="far fa-hdd fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="components" />
                                                     {{ trans('general.component') }}
                                                 </a>
                                             </li>
@@ -256,7 +256,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('create', \App\Models\User::class)
                                             <li {!! (Request::is('users/create') ? 'class="active"' : '') !!}>
                                                 <a href="{{ route('users.create') }}" tabindex="-1">
-                                                    <i class="fas fa-user fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="users" />
                                                     {{ trans('general.user') }}
                                                 </a>
                                             </li>
@@ -272,7 +272,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
                                     <li class="dropdown tasks-menu">
                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                            <i class="far fa-flag" aria-hidden="true"></i>
+                                            <x-icon type="alerts" />
                                             <span class="sr-only">{{ trans('general.alerts') }}</span>
                                             @if (count($alert_items))
                                                 <span class="label label-danger">{{ count($alert_items) }}</span>
@@ -326,31 +326,33 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                             <img src="{{ Auth::user()->present()->gravatar() }}" class="user-image"
                                                  alt="">
                                         @else
-                                            <i class="fas fa-user" aria-hidden="true"></i>
+                                            <x-icon type="user" />
                                         @endif
 
-                                        <span class="hidden-xs">{{ Auth::user()->getFullNameAttribute() }} <strong
-                                                    class="caret"></strong></span>
+                                        <span class="hidden-xs">
+                                            {{ Auth::user()->getFullNameAttribute() }}
+                                            <strong class="caret"></strong>
+                                        </span>
                                     </a>
                                     <ul class="dropdown-menu">
                                         <!-- User image -->
                                         <li {!! (Request::is('account/profile') ? ' class="active"' : '') !!}>
                                             <a href="{{ route('view-assets') }}">
-                                                <i class="fas fa-check fa-fw" aria-hidden="true"></i>
+                                                <x-icon type="checkmark" class="fa-fw" />
                                                 {{ trans('general.viewassets') }}
                                             </a></li>
 
                                         @can('viewRequestable', \App\Models\Asset::class)
                                             <li {!! (Request::is('account/requested') ? ' class="active"' : '') !!}>
                                                 <a href="{{ route('account.requested') }}">
-                                                    <i class="fas fa-check fa-disk fa-fw" aria-hidden="true"></i>
+                                                    <x-icon type="checkmark" class="fa-fw" />
                                                     {{ trans('general.requested_assets_menu') }}
                                                 </a></li>
                                         @endcan
 
                                         <li {!! (Request::is('account/accept') ? ' class="active"' : '') !!}>
                                             <a href="{{ route('account.accept') }}">
-                                                <i class="fas fa-check fa-disk fa-fw"></i>
+                                                <x-icon type="checkmark" class="fa-fw" />
                                                 {{ trans('general.accept_assets_menu') }}
                                             </a></li>
 
@@ -358,7 +360,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('self.profile')
                                         <li>
                                             <a href="{{ route('profile') }}">
-                                                <i class="fas fa-user fa-fw" aria-hidden="true"></i>
+                                                <x-icon type="user" class="fa-fw" />
                                                 {{ trans('general.editprofile') }}
                                             </a>
                                         </li>
@@ -366,7 +368,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
                                         <li>
                                             <a href="{{ route('account.password.index') }}">
-                                                <i class="fa-solid fa-asterisk fa-fw" aria-hidden="true"></i>
+                                                <x-icon type="password" class="fa-fw" />
                                                 {{ trans('general.changepassword') }}
                                             </a>
                                         </li>
@@ -375,8 +377,8 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                         @can('self.api')
                                             <li>
                                                 <a href="{{ route('user.api') }}">
-                                                    <i class="fa-solid fa-user-secret fa-fw"
-                                                       aria-hidden="true"></i></i> {{ trans('general.manage_api_keys') }}
+                                                    <x-icon type="api-key" class="fa-fw" />
+                                                     {{ trans('general.manage_api_keys') }}
                                                 </a>
                                             </li>
                                         @endcan
@@ -385,7 +387,8 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
                                             <a href="{{ route('logout.get') }}"
                                                onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
-                                                <i class="fa fa-sign-out fa-fw"></i> {{ trans('general.logout') }}
+                                                <x-icon type="logout" class="fa-fw" />
+                                                 {{ trans('general.logout') }}
                                             </a>
 
                                             <form id="logout-form" action="{{ route('logout.post') }}" method="POST"
@@ -402,7 +405,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                             @can('superadmin')
                                 <li>
                                     <a href="{{ route('settings.index') }}">
-                                        <i class="fa fa-cogs fa-fw" aria-hidden="true"></i>
+                                        <x-icon type="admin-settings" />
                                         <span class="sr-only">{{ trans('general.admin') }}</span>
                                     </a>
                                 </li>
@@ -413,7 +416,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                 <a href="#" style="float:left" class="sidebar-toggle-mobile visible-xs btn" data-toggle="push-menu"
                    role="button">
                     <span class="sr-only">{{ trans('general.toggle_navigation') }}</span>
-                    <i class="fas fa-bars"></i>
+                    <x-icon type="nav-toggle" />
                 </a>
                 <!-- Sidebar toggle button-->
             </header>
@@ -427,21 +430,22 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('admin')
                             <li {!! (\Request::route()->getName()=='home' ? ' class="active"' : '') !!} class="firstnav">
                                 <a href="{{ route('home') }}">
-                                    <i class="fas fa-tachometer-alt fa-fw" aria-hidden="true"></i>
+                                    <x-icon type="dashboard" class="fa-fw" />
                                     <span>{{ trans('general.dashboard') }}</span>
                                 </a>
                             </li>
                         @endcan
                         @can('index', \App\Models\Asset::class)
                             <li class="treeview{{ ((Request::is('statuslabels/*') || Request::is('hardware*')) ? ' active' : '') }}">
-                                <a href="#"><i class="fas fa-barcode fa-fw" aria-hidden="true"></i>
+                                <a href="#">
+                                    <x-icon type="assets" class="fa-fw" />
                                     <span>{{ trans('general.assets') }}</span>
-                                    <i class="fa fa-angle-left pull-right"></i>
+                                    <x-icon type="angle-left" class="pull-right"/>
                                 </a>
                                 <ul class="treeview-menu">
                                     <li>
                                         <a href="{{ url('hardware') }}">
-                                            <i class="far fa-circle text-grey fa-fw" aria-hidden="true"></i>
+                                            <x-icon type="circle" class="text-grey fa-fw"/>
                                             {{ trans('general.list_all') }}
                                             <span class="badge">
                                                 {{ (isset($total_assets)) ? $total_assets : '' }}
@@ -464,49 +468,48 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
                                     <li{!! (Request::query('status') == 'Deployed' ? ' class="active"' : '') !!}>
                                         <a href="{{ url('hardware?status=Deployed') }}">
-                                            <i class="far fa-circle text-blue fa-fw"></i>
+                                            <x-icon type="circle" class="text-blue fa-fw" />
                                             {{ trans('general.deployed') }}
                                             <span class="badge">{{ (isset($total_deployed_sidebar)) ? $total_deployed_sidebar : '' }}</span>
                                         </a>
                                     </li>
                                     <li{!! (Request::query('status') == 'RTD' ? ' class="active"' : '') !!}>
                                         <a href="{{ url('hardware?status=RTD') }}">
-                                            <i class="far fa-circle text-green fa-fw"></i>
+                                            <x-icon type="circle" class="text-green fa-fw" />
                                             {{ trans('general.ready_to_deploy') }}
                                             <span class="badge">{{ (isset($total_rtd_sidebar)) ? $total_rtd_sidebar : '' }}</span>
                                         </a>
                                     </li>
-                                    <li{!! (Request::query('status') == 'Pending' ? ' class="active"' : '') !!}><a
-                                                href="{{ url('hardware?status=Pending') }}"><i
-                                                    class="far fa-circle text-orange fa-fw"></i>
+                                    <li{!! (Request::query('status') == 'Pending' ? ' class="active"' : '') !!}><a href="{{ url('hardware?status=Pending') }}">
+                                            <x-icon type="circle" class="text-orange fa-fw" />
                                             {{ trans('general.pending') }}
                                             <span class="badge">{{ (isset($total_pending_sidebar)) ? $total_pending_sidebar : '' }}</span>
                                         </a>
                                     </li>
                                     <li{!! (Request::query('status') == 'Undeployable' ? ' class="active"' : '') !!} ><a
-                                                href="{{ url('hardware?status=Undeployable') }}"><i
-                                                    class="fas fa-times text-red fa-fw"></i>
+                                                href="{{ url('hardware?status=Undeployable') }}">
+                                            <x-icon type="x" class="text-red fa-fw" />
                                             {{ trans('general.undeployable') }}
                                             <span class="badge">{{ (isset($total_undeployable_sidebar)) ? $total_undeployable_sidebar : '' }}</span>
                                         </a>
                                     </li>
                                     <li{!! (Request::query('status') == 'byod' ? ' class="active"' : '') !!}><a
-                                                href="{{ url('hardware?status=byod') }}"><i
-                                                    class="fas fa-times text-red fa-fw"></i>
+                                                href="{{ url('hardware?status=byod') }}">
+                                            <x-icon type="x" class="text-red fa-fw" />
                                             {{ trans('general.byod') }}
                                             <span class="badge">{{ (isset($total_byod_sidebar)) ? $total_byod_sidebar : '' }}</span>
                                         </a>
                                     </li>
                                     <li{!! (Request::query('status') == 'Archived' ? ' class="active"' : '') !!}><a
-                                                href="{{ url('hardware?status=Archived') }}"><i
-                                                    class="fas fa-times text-red fa-fw"></i>
+                                                href="{{ url('hardware?status=Archived') }}">
+                                            <x-icon type="x" class="text-red fa-fw" />
                                             {{ trans('admin/hardware/general.archived') }}
                                             <span class="badge">{{ (isset($total_archived_sidebar)) ? $total_archived_sidebar : '' }}</span>
                                         </a>
                                     </li>
                                     <li{!! (Request::query('status') == 'Requestable' ? ' class="active"' : '') !!}><a
-                                                href="{{ url('hardware?status=Requestable') }}"><i
-                                                    class="fas fa-check text-blue fa-fw"></i>
+                                                href="{{ url('hardware?status=Requestable') }}">
+                                            <x-icon type="checkmark" class="text-blue fa-fw" />
                                             {{ trans('admin/hardware/general.requestable') }}
                                         </a>
                                     </li>
@@ -514,7 +517,8 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                     @can('audit', \App\Models\Asset::class)
                                         <li{!! (Request::is('hardware/audit/due') ? ' class="active"' : '') !!}>
                                             <a href="{{ route('assets.audit.due') }}">
-                                                <i class="fas fa-history text-yellow fa-fw"></i> {{ trans('general.audit_due') }}
+                                                <x-icon type="due" class="text-yellow fa-fw"/>
+                                                {{ trans('general.audit_due') }}
                                                 <span class="badge">{{ (isset($total_due_and_overdue_for_audit)) ? $total_due_and_overdue_for_audit : '' }}</span>
                                             </a>
                                         </li>
@@ -523,7 +527,8 @@ dir="{{ Helper::determineLanguageDirection() }}">
                                     @can('checkin', \App\Models\Asset::class)
                                     <li{!! (Request::is('hardware/checkins/due') ? ' class="active"' : '') !!}>
                                         <a href="{{ route('assets.checkins.due') }}">
-                                            <i class="fas fa-history text-yellow fa-fw"></i> {{ trans('general.checkin_due') }}
+                                            <x-icon type="due" class="text-orange fa-fw"/>
+                                            {{ trans('general.checkin_due') }}
                                             <span class="badge">{{ (isset($total_due_and_overdue_for_checkin)) ? $total_due_and_overdue_for_checkin : '' }}</span>
                                         </a>
                                     </li>
@@ -582,7 +587,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('view', \App\Models\License::class)
                             <li{!! (Request::is('licenses*') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('licenses.index') }}">
-                                    <i class="far fa-save fa-fw"></i>
+                                    <x-icon type="licenses" />
                                     <span>{{ trans('general.licenses') }}</span>
                                 </a>
                             </li>
@@ -590,7 +595,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('index', \App\Models\Accessory::class)
                             <li{!! (Request::is('accessories*') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('accessories.index') }}">
-                                    <i class="far fa-keyboard fa-fw"></i>
+                                    <x-icon type="accessories" class="fa-fw" />
                                     <span>{{ trans('general.accessories') }}</span>
                                 </a>
                             </li>
@@ -598,7 +603,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('view', \App\Models\Consumable::class)
                             <li{!! (Request::is('consumables*') ? ' class="active"' : '') !!}>
                                 <a href="{{ url('consumables') }}">
-                                    <i class="fas fa-tint fa-fw"></i>
+                                    <x-icon type="consumables" class="fa-fw" />
                                     <span>{{ trans('general.consumables') }}</span>
                                 </a>
                             </li>
@@ -606,7 +611,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('view', \App\Models\Component::class)
                             <li{!! (Request::is('components*') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('components.index') }}">
-                                    <i class="far fa-hdd fa-fw"></i>
+                                    <x-icon type="components" class="fa-fw" />
                                     <span>{{ trans('general.components') }}</span>
                                 </a>
                             </li>
@@ -614,7 +619,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('view', \App\Models\PredefinedKit::class)
                             <li{!! (Request::is('kits') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('kits.index') }}">
-                                    <i class="fa fa-object-group fa-fw"></i>
+                                    <x-icon type="kits" />
                                     <span>{{ trans('general.kits') }}</span>
                                 </a>
                             </li>
@@ -623,7 +628,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('view', \App\Models\User::class)
                             <li{!! (Request::is('users*') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('users.index') }}" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=6" : ''}}>
-                                    <i class="fas fa-users fa-fw"></i>
+                                    <x-icon type="users" />
                                     <span>{{ trans('general.people') }}</span>
                                 </a>
                             </li>
@@ -631,7 +636,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('import')
                             <li{!! (Request::is('import/*') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('imports.index') }}">
-                                    <i class="fas fa-cloud-upload-alt fa-fw" aria-hidden="true"></i>
+                                    <x-icon type="import" />
                                     <span>{{ trans('general.import') }}</span>
                                 </a>
                             </li>
@@ -640,9 +645,9 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('backend.interact')
                             <li class="treeview {!! in_array(Request::route()->getName(),App\Helpers\Helper::SettingUrls()) ? ' active': '' !!}">
                                 <a href="#" id="settings">
-                                    <i class="fas fa-cog" aria-hidden="true"></i>
+                                    <x-icon type="settings" />
                                     <span>{{ trans('general.settings') }}</span>
-                                    <i class="fa fa-angle-left pull-right"></i>
+                                    <x-icon type="angle-left" class="pull-right"/>
                                 </a>
 
                                 <ul class="treeview-menu">
@@ -732,9 +737,9 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('reports.view')
                             <li class="treeview{{ (Request::is('reports*') ? ' active' : '') }}">
                                 <a href="#" class="dropdown-toggle">
-                                    <i class="fas fa-chart-bar fa-fw"></i>
+                                    <x-icon type="reports" />
                                     <span>{{ trans('general.reports') }}</span>
-                                    <i class="fa fa-angle-left pull-right"></i>
+                                    <x-icon type="angle-left" class="pull-right"/>
                                 </a>
 
                                 <ul class="treeview-menu">
@@ -784,7 +789,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                         @can('viewRequestable', \App\Models\Asset::class)
                             <li{!! (Request::is('account/requestable-assets') ? ' class="active"' : '') !!}>
                                 <a href="{{ route('requestable-assets') }}">
-                                    <i class="fa fa-laptop fa-fw"></i>
+                                    <x-icon type="requestable" />
                                     <span>{{ trans('general.requestable_items') }}</span>
                                 </a>
                             </li>
@@ -805,7 +810,7 @@ dir="{{ Helper::determineLanguageDirection() }}">
                     <div class="row" style="margin-bottom: 0px; background-color: red; color: white; font-size: 15px;">
                         <div class="col-md-12"
                              style="margin-bottom: 0px; background-color: #b50408 ; color: white; padding: 10px 20px 10px 30px; font-size: 16px;">
-                            <i class="fas fa-exclamation-triangle fa-3x pull-left"></i>
+                            <x-icon type="warning" class="fa-3x pull-left"/>
                             <strong>{{ strtoupper(trans('general.debug_warning')) }}:</strong>
                             {!! trans('general.debug_warning_text') !!}
                         </div>
@@ -859,9 +864,8 @@ dir="{{ Helper::determineLanguageDirection() }}">
 
                 <div class="1hidden-xs pull-left">
                     <div class="pull-left" >
-                        <a target="_blank" href="https://snipeitapp.com" rel="noopener">Snipe-IT</a> is open source software,
-                        made with <i class="fas fa-heart" style="color: #a94442; font-size: 10px" aria-hidden="true"></i><span
-                                class="sr-only">love</span> by <a href="https://twitter.com/snipeitapp" rel="noopener">@snipeitapp</a>.
+                        <a target="_blank" href="https://snipeitapp.com" rel="noopener">Snipe-IT</a> is open source software, made with <x-icon type="heart" style="color: #a94442; font-size: 10px" />
+                            <span class="sr-only">love</span> by <a href="https://twitter.com/snipeitapp" rel="noopener">@snipeitapp</a>.
                     </div>
                     <div class="pull-right">
                     @if ($snipeSettings->version_footer!='off')
diff --git a/resources/views/layouts/edit-form.blade.php b/resources/views/layouts/edit-form.blade.php
index 2c582ec4b..dbe010ab3 100644
--- a/resources/views/layouts/edit-form.blade.php
+++ b/resources/views/layouts/edit-form.blade.php
@@ -46,7 +46,7 @@
                         @if (isset($topSubmit) && ($topSubmit=='true'))
                         <div class="col-md-3 text-right" style="padding-right: 10px;">
                             <button type="submit" class="btn btn-primary pull-right">
-                                <i class="fas fa-check icon-white" aria-hidden="true"></i>
+                                <x-icon type="checkmark" />
                                 {{ trans('general.save') }}
                             </button>
                         </div>
diff --git a/resources/views/livewire/slack-settings-form.blade.php b/resources/views/livewire/slack-settings-form.blade.php
index a5de8585e..069ddb49f 100644
--- a/resources/views/livewire/slack-settings-form.blade.php
+++ b/resources/views/livewire/slack-settings-form.blade.php
@@ -153,7 +153,7 @@
 
 
                         <button type="submit" {{$isDisabled}} class="btn btn-primary"{{ Helper::isDemoMode() ? ' disabled' : ''}}>
-                        <i class="fas fa-check icon-white" aria-hidden="true"></i> {{ $save_button }}</button>
+                        <x-icon type="checkmark" /> {{ $save_button }}</button>
 
                     </div> <!-- /.col-md-12 -->
                 </div><!--box-footer-->
diff --git a/resources/views/locations/bulk-delete.blade.php b/resources/views/locations/bulk-delete.blade.php
index deab1e7fb..e75d5f5f7 100644
--- a/resources/views/locations/bulk-delete.blade.php
+++ b/resources/views/locations/bulk-delete.blade.php
@@ -51,7 +51,7 @@
 
                     <div class="box-footer text-right">
                         <a class="btn btn-link pull-left" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
-                        <button type="submit" class="btn btn-success" id="submit-button"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.delete') }}</button>
+                        <button type="submit" class="btn btn-success" id="submit-button"><x-icon type="checkmark" /> {{ trans('general.delete') }}</button>
                     </div><!-- /.box-footer -->
                 </div><!-- /.box -->
             </form>
diff --git a/resources/views/models/bulk-delete.blade.php b/resources/views/models/bulk-delete.blade.php
index 570be2bce..79b41b206 100644
--- a/resources/views/models/bulk-delete.blade.php
+++ b/resources/views/models/bulk-delete.blade.php
@@ -55,7 +55,7 @@
 
                     <div class="box-footer text-right">
                         <a class="btn btn-link pull-left" href="{{ URL::previous() }}" method="post" enctype="multipart/form-data">{{ trans('button.cancel') }}</a>
-                        <button type="submit" class="btn btn-success" id="submit-button"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.delete') }}</button>
+                        <button type="submit" class="btn btn-success" id="submit-button"><x-icon type="checkmark" /> {{ trans('general.delete') }}</button>
                     </div><!-- /.box-footer -->
                 </div><!-- /.box -->
             </form>
diff --git a/resources/views/models/bulk-edit.blade.php b/resources/views/models/bulk-edit.blade.php
index 91b9e5f88..8a053b048 100644
--- a/resources/views/models/bulk-edit.blade.php
+++ b/resources/views/models/bulk-edit.blade.php
@@ -108,7 +108,7 @@
 
                     <div class="box-footer text-right">
                         <a class="btn btn-link pull-left" href="{{ URL::previous() }}" method="post" enctype="multipart/form-data">{{ trans('button.cancel') }}</a>
-                        <button type="submit" class="btn btn-success" id="submit-button"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.update') }}</button>
+                        <button type="submit" class="btn btn-success" id="submit-button"><x-icon type="checkmark" /> {{ trans('general.update') }}</button>
                     </div><!-- /.box-footer -->
                 </div> <!--/.box.box-default-->
             </form>
diff --git a/resources/views/partials/bootstrap-table.blade.php b/resources/views/partials/bootstrap-table.blade.php
index 837a95b3b..bdef53ecc 100644
--- a/resources/views/partials/bootstrap-table.blade.php
+++ b/resources/views/partials/bootstrap-table.blade.php
@@ -299,14 +299,14 @@
             }
 
             if ((row.available_actions) && (row.available_actions.clone === true)) {
-                actions += '<a href="{{ config('app.url') }}/' + dest + '/' + row.id + '/clone" class="actions btn btn-sm btn-info" data-tooltip="true" title="{{ trans('general.clone_item') }}"><i class="far fa-clone" aria-hidden="true"></i><span class="sr-only">Clone</span></a>&nbsp;';
+                actions += '<a href="{{ config('app.url') }}/' + dest + '/' + row.id + '/clone" class="actions btn btn-sm btn-info" data-tooltip="true" title="{{ trans('general.clone_item') }}"><x-icon type="clone" /><span class="sr-only">{{ trans('general.clone_item') }}</span></a>&nbsp;';
             }
 
             if ((row.available_actions) && (row.available_actions.update === true)) {
-                actions += '<a href="{{ config('app.url') }}/' + dest + '/' + row.id + '/edit" class="actions btn btn-sm btn-warning" data-tooltip="true" title="{{ trans('general.update') }}"><i class="fas fa-pencil-alt" aria-hidden="true"></i><span class="sr-only">{{ trans('general.update') }}</span></a>&nbsp;';
+                actions += '<a href="{{ config('app.url') }}/' + dest + '/' + row.id + '/edit" class="actions btn btn-sm btn-warning" data-tooltip="true" title="{{ trans('general.update') }}"><x-icon type="edit" /><span class="sr-only">{{ trans('general.update') }}</span></a>&nbsp;';
             } else {
                 if ((row.available_actions) && (row.available_actions.update != true)) {
-                    actions += '<span data-tooltip="true" title="{{ trans('general.cannot_be_edited') }}"><a class="btn btn-warning btn-sm disabled" onClick="return false;"><i class="fas fa-pencil-alt"></i></a></span>&nbsp;';
+                    actions += '<span data-tooltip="true" title="{{ trans('general.cannot_be_edited') }}"><a class="btn btn-warning btn-sm disabled" onClick="return false;"><x-icon type="edit" /></a></span>&nbsp;';
                 }
             }
 
@@ -323,11 +323,11 @@
                     + ' data-toggle="modal" '
                     + ' data-content="{{ trans('general.sure_to_delete') }} ' + name_for_box + '?" '
                     + ' data-title="{{  trans('general.delete') }}" onClick="return false;">'
-                    + '<i class="fas fa-trash" aria-hidden="true"></i><span class="sr-only">{{ trans('general.delete') }}</span></a>&nbsp;';
+                    + '<x-icon type="delete" /><span class="sr-only">{{ trans('general.delete') }}</span></a>&nbsp;';
             } else {
                 // Do not show the delete button on things that are already deleted
                 if ((row.available_actions) && (row.available_actions.restore != true)) {
-                    actions += '<span data-tooltip="true" title="{{ trans('general.cannot_be_deleted') }}"><a class="btn btn-danger btn-sm delete-asset disabled" onClick="return false;"><i class="fas fa-trash"></i></a></span>&nbsp;';
+                    actions += '<span data-tooltip="true" title="{{ trans('general.cannot_be_deleted') }}"><a class="btn btn-danger btn-sm delete-asset disabled" onClick="return false;"><x-icon type="delete" /><span class="sr-only">{{ trans('general.cannot_be_deleted') }}</span></a></span>&nbsp;';
                 }
 
             }
@@ -336,7 +336,7 @@
             if ((row.available_actions) && (row.available_actions.restore === true)) {
                 actions += '<form style="display: inline;" method="POST" action="{{ config('app.url') }}/' + dest + '/' + row.id + '/restore"> ';
                 actions += '@csrf';
-                actions += '<button class="btn btn-sm btn-warning" data-tooltip="true" title="{{ trans('general.restore') }}"><i class="fas fa-retweet"></i></button>&nbsp;';
+                actions += '<button class="btn btn-sm btn-warning" data-tooltip="true" title="{{ trans('general.restore') }}"><x-icon type="restore" /><span class="sr-only">{{ trans('general.restore') }}</span></button>&nbsp;';
             }
 
             actions +='</nobr>';
@@ -576,7 +576,7 @@
 
         if (value) {
             if ((value.indexOf("{") === -1) || (value.indexOf("}") ===-1)) {
-                return '<nobr><a href="' + value + '" target="_blank" title="{{ trans('general.external_link_tooltip') }} ' + value + '" data-tooltip="true"><i class="fa fa-external-link"></i> ' + value + '</a></nobr>';
+                return '<nobr><a href="' + value + '" target="_blank" title="{{ trans('general.external_link_tooltip') }} ' + value + '" data-tooltip="true"><x-icon type="external-link" /> ' + value + '</a></nobr>';
             }
             return value;
         }
@@ -612,7 +612,7 @@
 
                 extra_pretty_index = prettyLog(pretty_index);
 
-                result += extra_pretty_index + ': <del>' + value[index].old + '</del>  <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i> ' + value[index].new + '<br>'
+                result += extra_pretty_index + ': <del>' + value[index].old + '</del>  <x-icon type="long-arrow" /> ' + value[index].new + '<br>'
             }
 
         return result;
@@ -643,7 +643,7 @@
     // Create a linked phone number in the table list
     function phoneFormatter(value) {
         if (value) {
-            return  '<span style="white-space: nowrap;"><a href="tel:' + value + '" data-tooltip="true" title="{{ trans('general.call') }}"><i class="fa-solid fa-phone" aria-hidden="true"></i> ' + value + '</a></span>';
+            return  '<span style="white-space: nowrap;"><a href="tel:' + value + '" data-tooltip="true" title="{{ trans('general.call') }}"><x-icon type="phone" /> ' + value + '</a></span>';
         }
     }
 
@@ -718,7 +718,7 @@
 
     function emailFormatter(value) {
         if (value) {
-            return '<a href="mailto:' + value + '" style="white-space: nowrap" data-tooltip="true" title="{{ trans('general.send_email') }}"><i class="fa-regular fa-envelope" aria-hidden="true"></i> ' + value + '</a>';
+            return '<a href="mailto:' + value + '" style="white-space: nowrap" data-tooltip="true" title="{{ trans('general.send_email') }}"><x-icon type="email" /> ' + value + '</a>';
         }
     }
 
diff --git a/resources/views/partials/forms/edit/submit-button.blade.php b/resources/views/partials/forms/edit/submit-button.blade.php
index f0b18073d..7f2a99bfa 100644
--- a/resources/views/partials/forms/edit/submit-button.blade.php
+++ b/resources/views/partials/forms/edit/submit-button.blade.php
@@ -1,5 +1,5 @@
 <button type="submit" class="btn btn-primary pull-right">
-    <i class="fas fa-check icon-white"></i>
+    <x-icon type="checkmark" />
     {{ trans('general.save') }}
 </button>
 
diff --git a/resources/views/partials/forms/edit/submit.blade.php b/resources/views/partials/forms/edit/submit.blade.php
index 3d132b6e1..ba63f7958 100644
--- a/resources/views/partials/forms/edit/submit.blade.php
+++ b/resources/views/partials/forms/edit/submit.blade.php
@@ -2,6 +2,6 @@
 
 <div class="box-footer text-right" style="padding-bottom: 0px;">
     <a class="btn btn-link pull-left" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
-    <button type="submit" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=s" : ''}} class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+    <button type="submit" {{$snipeSettings->shortcuts_enabled == 1 ? "accesskey=s" : ''}} class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
 </div>
 <!-- / partials/forms/edit/submit.blade.php -->
diff --git a/resources/views/settings/alerts.blade.php b/resources/views/settings/alerts.blade.php
index 870692f1f..2798fe4bb 100644
--- a/resources/views/settings/alerts.blade.php
+++ b/resources/views/settings/alerts.blade.php
@@ -173,7 +173,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/asset_tags.blade.php b/resources/views/settings/asset_tags.blade.php
index 858ad718c..e1aa0a8ff 100644
--- a/resources/views/settings/asset_tags.blade.php
+++ b/resources/views/settings/asset_tags.blade.php
@@ -98,7 +98,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/barcodes.blade.php b/resources/views/settings/barcodes.blade.php
index 66e223f85..41e0319c1 100644
--- a/resources/views/settings/barcodes.blade.php
+++ b/resources/views/settings/barcodes.blade.php
@@ -141,7 +141,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-success"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-success"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/branding.blade.php b/resources/views/settings/branding.blade.php
index 4f984b4d4..89204a990 100644
--- a/resources/views/settings/branding.blade.php
+++ b/resources/views/settings/branding.blade.php
@@ -310,7 +310,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/general.blade.php b/resources/views/settings/general.blade.php
index 99ed0ddd4..406625079 100644
--- a/resources/views/settings/general.blade.php
+++ b/resources/views/settings/general.blade.php
@@ -395,7 +395,7 @@
                     <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                 </div>
                 <div class="text-right col-md-6">
-                    <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                    <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                 </div>
 
             </div>
diff --git a/resources/views/settings/google.blade.php b/resources/views/settings/google.blade.php
index d9a4c4c62..c4119b99a 100644
--- a/resources/views/settings/google.blade.php
+++ b/resources/views/settings/google.blade.php
@@ -104,7 +104,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords')===true) ? ' disabled': '' }}><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords')===true) ? ' disabled': '' }}><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/labels.blade.php b/resources/views/settings/labels.blade.php
index 058446e74..0aae313ec 100644
--- a/resources/views/settings/labels.blade.php
+++ b/resources/views/settings/labels.blade.php
@@ -417,7 +417,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/ldap.blade.php b/resources/views/settings/ldap.blade.php
index d7b703e54..08e704806 100644
--- a/resources/views/settings/ldap.blade.php
+++ b/resources/views/settings/ldap.blade.php
@@ -594,7 +594,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/localization.blade.php b/resources/views/settings/localization.blade.php
index 71067a80f..4fad2cadb 100644
--- a/resources/views/settings/localization.blade.php
+++ b/resources/views/settings/localization.blade.php
@@ -105,7 +105,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/saml.blade.php b/resources/views/settings/saml.blade.php
index 020124af5..93826dc49 100644
--- a/resources/views/settings/saml.blade.php
+++ b/resources/views/settings/saml.blade.php
@@ -177,7 +177,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-primary"{{ config('app.lock_passwords') === true ? ' disabled': '' }}><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-primary"{{ config('app.lock_passwords') === true ? ' disabled': '' }}><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/settings/security.blade.php b/resources/views/settings/security.blade.php
index a071b9a0f..9e114c2ba 100644
--- a/resources/views/settings/security.blade.php
+++ b/resources/views/settings/security.blade.php
@@ -180,7 +180,7 @@
                         <a class="btn btn-link text-left" href="{{ route('settings.index') }}">{{ trans('button.cancel') }}</a>
                     </div>
                     <div class="text-right col-md-6">
-                        <button type="submit" class="btn btn-success"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('general.save') }}</button>
+                        <button type="submit" class="btn btn-success"><x-icon type="checkmark" /> {{ trans('general.save') }}</button>
                     </div>
 
                 </div>
diff --git a/resources/views/users/bulk-edit.blade.php b/resources/views/users/bulk-edit.blade.php
index b28eb602d..e1d3b4201 100644
--- a/resources/views/users/bulk-edit.blade.php
+++ b/resources/views/users/bulk-edit.blade.php
@@ -230,7 +230,7 @@
                         <a class="btn btn-link pull-left" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
 
                         <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords') ? ' disabled' : '') }}>
-                            <i class="fas fa-check icon-white" aria-hidden="true"></i>
+                            <x-icon type="checkmark" />
                             {{ trans('general.update') }}
                         </button>
 
diff --git a/resources/views/users/confirm-bulk-delete.blade.php b/resources/views/users/confirm-bulk-delete.blade.php
index b20c904d9..74fbaf830 100644
--- a/resources/views/users/confirm-bulk-delete.blade.php
+++ b/resources/views/users/confirm-bulk-delete.blade.php
@@ -129,7 +129,7 @@
         <div class="box-footer text-right">
           <a class="btn btn-link pull-left" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
 
-          <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords') ? ' disabled' : '') }} disabled="disabled"><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('button.submit') }}</button>
+          <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords') ? ' disabled' : '') }} disabled="disabled"><x-icon type="checkmark" /> {{ trans('button.submit') }}</button>
 
         </div><!-- /.box-footer -->
       </form>
diff --git a/resources/views/users/confirm-merge.blade.php b/resources/views/users/confirm-merge.blade.php
index f2658cbb6..8a2631134 100644
--- a/resources/views/users/confirm-merge.blade.php
+++ b/resources/views/users/confirm-merge.blade.php
@@ -121,7 +121,7 @@
                     </div> <!--/box-body-->
                     <div class="box-footer text-right">
                         <a class="btn btn-link pull-left" href="{{ URL::previous() }}">{{ trans('button.cancel') }}</a>
-                        <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords') ? ' disabled' : '') }} disabled><i class="fas fa-check icon-white" aria-hidden="true"></i> {{ trans('button.submit') }}</button>
+                        <button type="submit" class="btn btn-success"{{ (config('app.lock_passwords') ? ' disabled' : '') }} disabled><x-icon type="checkmark" /> {{ trans('button.submit') }}</button>
                     </div><!-- /.box-footer -->
 
                     @foreach ($users as $user)