diff --git a/app/Helpers/IconHelper.php b/app/Helpers/IconHelper.php
new file mode 100644
index 0000000000..fec9517913
--- /dev/null
+++ b/app/Helpers/IconHelper.php
@@ -0,0 +1,179 @@
+<?php
+
+namespace App\Helpers;
+
+class IconHelper
+{
+
+    public static function icon($type) {
+        switch ($type) {
+            case 'checkout':
+                return 'fa-solid fa-rotate-left';
+            case 'checkin':
+                return 'fa-solid fa-rotate-right';
+            case 'edit':
+                return 'fas fa-pencil-alt';
+            case 'clone':
+                return 'far fa-clone';
+            case 'delete':
+                return 'fas fa-trash';
+            case 'create':
+                return 'fa-solid fa-plus';
+            case 'audit':
+                return 'fa-solid fa-clipboard-check';
+            case '2fa reset':
+                return 'fa-solid fa-mobile-screen';
+            case 'new-user':
+                return 'fa-solid fa-user-plus';
+            case 'merged-user':
+                return 'fa-solid fa-people-arrows';
+            case 'delete-user':
+                return 'fa-solid fa-user-minus';
+            case 'update-user':
+                return 'fa-solid fa-user-pen';
+            case 'user':
+                return 'fa-solid fa-user';
+            case 'users':
+                return 'fas fa-users';
+            case 'restore':
+                return 'fa-solid fa-trash-arrow-up';
+            case 'external-link':
+                return 'fa fa-external-link';
+            case 'email':
+                return 'fa-regular fa-envelope';
+            case 'phone':
+                return 'fa-solid fa-phone';
+            case 'long-arrow-right':
+                return 'fas fa-long-arrow-alt-right';
+            case 'download':
+                return 'fas fa-download';
+            case 'checkmark':
+                return 'fas fa-check icon-white';
+            case 'x':
+                return 'fas fa-times';
+            case 'logout':
+                return 'fa fa-sign-out';
+            case 'admin-settings':
+                return 'fa fa-cogs';
+            case 'settings':
+                return 'fa fa-cog';
+            case 'angle-left':
+                return 'fa fa-angle-left';
+            case 'warning':
+                return 'fas fa-exclamation-triangle';
+            case 'kits':
+                return 'fa fa-object-group';
+            case 'assets':
+                return 'fas fa-barcode';
+            case 'accessories':
+                return 'far fa-keyboard';
+            case 'components':
+                return 'far fa-hdd';
+            case 'consumables':
+                return 'fas fa-tint';
+            case 'licenses':
+                return 'far fa-save';
+            case 'requestable':
+                return 'fa fa-laptop';
+            case 'reports':
+                return 'fas fa-chart-bar';
+            case 'heart':
+                return 'fas fa-heart';
+            case 'circle':
+                return 'fa-regular fa-circle';
+            case 'circle-solid':
+                return 'fa-solid fa-circle';
+            case 'due':
+                return 'fas fa-history';
+            case 'import':
+                return 'fas fa-cloud-upload-alt fa-fw';
+            case 'search':
+                return 'fas fa-search';
+            case 'alerts':
+                return 'far fa-flag';
+            case 'password':
+                return 'fa-solid fa-key';
+            case 'api-key':
+                return 'fa-solid fa-user-secret';
+            case 'nav-toggle':
+                return 'fas fa-bars';
+            case 'dashboard':
+                return 'fas fa-tachometer-alt';
+            case 'info-circle':
+                    return 'fas fa-info-circle';
+            case 'caret-right':
+                return 'fa fa-caret-right';
+            case 'caret-up':
+                return 'fa fa-caret-up';
+            case 'caret-down':
+                return 'fa fa-caret-down';
+            case 'arrow-circle-right':
+                return 'fa fa-arrow-circle-right';
+            case 'minus':
+                return 'fas fa-minus';
+            case 'spinner':
+                return 'fas fa-spinner fa-spin';
+            case 'copy-clipboard':
+                return 'fa-regular fa-clipboard';
+            case 'paperclip':
+                return 'fas fa-paperclip';
+            case 'files':
+                return 'fa-regular fa-file';
+            case 'more-info':
+                return 'far fa-life-ring';
+            case 'calendar':
+                return 'fas fa-calendar';
+            case 'plus':
+                return 'fas fa-plus';
+            case 'history':
+                return 'fas fa-history';
+            case 'more-files':
+                return 'fa-solid fa-laptop-file';
+            case 'maintenances':
+                return 'fas fa-wrench';
+            case 'seats':
+                return 'far fa-list-alt';
+            case 'globe-us':
+                return 'fas fa-globe-americas';
+            case 'locked':
+                return 'fas fa-lock';
+            case 'unlocked':
+                return 'fas fa-lock';
+            case 'locations':
+                return 'fas fa-map-marker-alt';
+            case 'superadmin':
+                return 'fas fa-crown';
+            case 'print':
+                return 'fa-solid fa-print';
+            case 'checkin-and-delete':
+                return 'fa-solid fa-user-xmark';
+            case 'branding':
+                return 'fas fa-copyright';
+            case 'general-settings':
+                return 'fa-solid fa-list-check';
+            case 'groups':
+                return 'fa-solid fa-user-group';
+            case 'bell':
+                return 'fa-solid fa-bell';
+            case 'hashtag':
+                return 'fa-solid fa-hashtag';
+            case 'asset-tags':
+                return 'fas fa-list-ol';
+            case 'labels':
+                return 'fas fa-tags';
+            case 'ldap':
+                return 'fas fa-sitemap';
+            case 'google':
+                return 'fa-brands fa-google';
+            case 'saml':
+                return 'fas fa-sign-in-alt';
+            case 'backups':
+                return 'fas fa-file-archive';
+            case 'logins':
+                return 'fas fa-crosshairs';
+            case 'oauth':
+                return 'fas fa-user-secret';
+
+        }
+    }
+}
diff --git a/app/Http/Controllers/AssetModelsController.php b/app/Http/Controllers/AssetModelsController.php
index 4421829f48..b6bb34738d 100755
--- a/app/Http/Controllers/AssetModelsController.php
+++ b/app/Http/Controllers/AssetModelsController.php
@@ -233,7 +233,7 @@ class AssetModelsController extends Controller
 
             if ($model->restore()) {
                 $logaction = new Actionlog();
-                $logaction->item_type = User::class;
+                $logaction->item_type = AssetModel::class;
                 $logaction->item_id = $model->id;
                 $logaction->created_at = date('Y-m-d H:i:s');
                 $logaction->user_id = auth()->id();
diff --git a/app/Http/Controllers/LocationsController.php b/app/Http/Controllers/LocationsController.php
index c498f09926..f32e6b8489 100755
--- a/app/Http/Controllers/LocationsController.php
+++ b/app/Http/Controllers/LocationsController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Http\Requests\ImageUploadRequest;
+use App\Models\Actionlog;
 use App\Models\Asset;
 use App\Models\Location;
 use App\Models\User;
@@ -193,7 +194,13 @@ class LocationsController extends Controller
      */
     public function show($id = null) : View | RedirectResponse
     {
-        $location = Location::find($id);
+        $location = Location::withCount('assignedAssets as assigned_assets_count')
+            ->withCount('assets as assets_count')
+            ->withCount('rtd_assets as rtd_assets_count')
+            ->withCount('children as children_count')
+            ->withCount('users as users_count')
+            ->withTrashed()
+            ->find($id);
 
         if (isset($location->id)) {
             return view('locations/view', compact('location'));
@@ -249,6 +256,41 @@ class LocationsController extends Controller
     }
 
 
+    /**
+     * Restore a given Asset Model (mark as un-deleted)
+     *
+     * @author [A. Gianotto] [<snipe@snipe.net>]
+     * @since [v1.0]
+     * @param int $id
+     */
+    public function postRestore($id) : RedirectResponse
+    {
+        $this->authorize('create', Location::class);
+
+        if ($location = Location::withTrashed()->find($id)) {
+
+            if ($location->deleted_at == '') {
+                return redirect()->back()->with('error', trans('general.not_deleted', ['item_type' => trans('general.location')]));
+            }
+
+            if ($location->restore()) {
+                $logaction = new Actionlog();
+                $logaction->item_type = Location::class;
+                $logaction->item_id = $location->id;
+                $logaction->created_at = date('Y-m-d H:i:s');
+                $logaction->user_id = auth()->id();
+                $logaction->logaction('restore');
+
+                return redirect()->route('locations.index')->with('success', trans('admin/locations/message.restore.success'));
+            }
+
+            // Check validation
+            return redirect()->back()->with('error', trans('general.could_not_restore', ['item_type' => trans('general.location'), 'error' => $location->getErrors()->first()]));
+        }
+
+        return redirect()->back()->with('error', trans('admin/models/message.does_not_exist'));
+
+    }
     public function print_all_assigned($id) : View | RedirectResponse
     {
         if ($location = Location::where('id', $id)->first()) {
diff --git a/app/Presenters/AssetPresenter.php b/app/Presenters/AssetPresenter.php
index b86135f33b..e55cb00c2e 100644
--- a/app/Presenters/AssetPresenter.php
+++ b/app/Presenters/AssetPresenter.php
@@ -579,6 +579,6 @@ class AssetPresenter extends Presenter
 
     public function glyph()
     {
-        return '<i class="fas fa-barcode" aria-hidden="true"></i>';
+        return '<x-icon type="assets" />';
     }
 }
diff --git a/app/Presenters/CompanyPresenter.php b/app/Presenters/CompanyPresenter.php
index 7603191fc1..bcb77c7eba 100644
--- a/app/Presenters/CompanyPresenter.php
+++ b/app/Presenters/CompanyPresenter.php
@@ -65,40 +65,46 @@ class CompanyPresenter extends Presenter
                 'field' => 'users_count',
                 'searchable' => false,
                 'sortable' => true,
-                'title' => '<span class="hidden-xs"><i class="fas fa-users"></i></span><span class="hidden-md hidden-lg">'.trans('general.users').'</span></th>',
+                'title' => trans('general.users'),
                 'visible' => true,
+                'class' => 'css-users',
 
             ], [
                 'field' => 'assets_count',
                 'searchable' => false,
                 'sortable' => true,
-                'title' => '<span class="hidden-xs"><i class="fas fa-barcode" aria-hidden="true"></i></span><span class="hidden-md hidden-lg">'.trans('general.assets').'</span>',
+                'title' => trans('general.assets'),
                 'visible' => true,
+                'class' => 'css-barcode',
 
             ], [
                 'field' => 'licenses_count',
                 'searchable' => false,
                 'sortable' => true,
+                'title' => trans('general.licenses'),
                 'visible' => true,
-                'title' => ' <span class="hidden-xs"><i class="far fa-save"></i></span><span class="hidden-md hidden-lg">'.trans('general.licenses').'</span>',
+                'class' => 'css-license',
             ], [
                 'field' => 'accessories_count',
                 'searchable' => false,
                 'sortable' => true,
+                'title' => trans('general.accessories'),
                 'visible' => true,
-                'title' => ' <span class="hidden-xs"><i class="far fa-keyboard"></i></span><span class="hidden-md hidden-lg">'.trans('general.accessories').'</span>',
+                'class' => 'css-accessory',
             ], [
                 'field' => 'consumables_count',
                 'searchable' => false,
                 'sortable' => true,
+                'title' => trans('general.consumables'),
                 'visible' => true,
-                'title' => ' <span class="hidden-xs"><i class="fas fa-tint"></i></span><span class="hidden-md hidden-lg">'.trans('general.consumables').'</span>',
+                'class' => 'css-consumable',
             ], [
                 'field' => 'components_count',
                 'searchable' => false,
                 'sortable' => true,
+                'title' => trans('general.components'),
                 'visible' => true,
-                'title' => ' <span class="hidden-xs"><i class="far fa-hdd"></i></span><span class="hidden-md hidden-lg">'.trans('general.components').'</span>',
+                'class' => 'css-component',
             ], [
                 'field' => 'updated_at',
                 'searchable' => false,
diff --git a/app/Presenters/DepreciationReportPresenter.php b/app/Presenters/DepreciationReportPresenter.php
index 50a8b73b54..6905385615 100644
--- a/app/Presenters/DepreciationReportPresenter.php
+++ b/app/Presenters/DepreciationReportPresenter.php
@@ -394,6 +394,6 @@ class DepreciationReportPresenter extends Presenter
 
     public function glyph()
     {
-        return '<i class="fas fa-barcode" aria-hidden="true"></i>';
+        return '<x-icon type="reports" class="text-orange" />';
     }
 }
diff --git a/app/Presenters/LocationPresenter.php b/app/Presenters/LocationPresenter.php
index 56d710ac96..d6bbe0db11 100644
--- a/app/Presenters/LocationPresenter.php
+++ b/app/Presenters/LocationPresenter.php
@@ -235,7 +235,7 @@ class LocationPresenter extends Presenter
 
     public function glyph()
     {
-        return '<i class="fas fa-map-marker-alt" aria-hidden="true"></i>';
+        return '<x-icon type="locations" />';
     }
 
     public function fullName()
diff --git a/app/Presenters/ManufacturerPresenter.php b/app/Presenters/ManufacturerPresenter.php
index 3e36cbcde0..07a22c9ea4 100644
--- a/app/Presenters/ManufacturerPresenter.php
+++ b/app/Presenters/ManufacturerPresenter.php
@@ -94,36 +94,36 @@ class ManufacturerPresenter extends Presenter
                 'searchable' => false,
                 'sortable' => true,
                 'switchable' => true,
-                'title' => ' <span class="hidden-md hidden-lg">Assets</span>'
-                    .'<span class="hidden-xs"><i class="fas fa-barcode fa-lg"></i></span>',
+                'title' => trans('general.assets'),
                 'visible' => true,
+                'class' => 'css-barcode',
             ],
             [
                 'field' => 'licenses_count',
                 'searchable' => false,
                 'sortable' => true,
                 'switchable' => true,
-                'title' => ' <span class="hidden-md hidden-lg">Licenses</span>'
-                    .'<span class="hidden-xs"><i class="far fa-save fa-lg"></i></span>',
+                'title' => trans('general.licenses'),
                 'visible' => true,
+                'class' => 'css-license',
             ],
             [
                 'field' => 'consumables_count',
                 'searchable' => false,
                 'sortable' => true,
                 'switchable' => true,
-                'title' => ' <span class="hidden-md hidden-lg">Consumables</span>'
-                    .'<span class="hidden-xs"><i class="fas fa-tint fa-lg"></i></span>',
+                'title' => trans('general.consumables'),
                 'visible' => true,
+                'class' => 'css-consumable',
             ],
             [
                 'field' => 'accessories_count',
                 'searchable' => false,
                 'sortable' => true,
                 'switchable' => true,
-                'title' => ' <span class="hidden-md hidden-lg">Accessories</span>'
-                    .'<span class="hidden-xs"><i class="far fa-keyboard fa-lg"></i></span>',
+                'title' => trans('general.accessories'),
                 'visible' => true,
+                'class' => 'css-accessory',
             ],
             [
                 'field' => 'created_at',
diff --git a/app/Presenters/UserPresenter.php b/app/Presenters/UserPresenter.php
index 7054676a93..635eaa86aa 100644
--- a/app/Presenters/UserPresenter.php
+++ b/app/Presenters/UserPresenter.php
@@ -492,6 +492,6 @@ class UserPresenter extends Presenter
 
     public function glyph()
     {
-        return '<i class="fas fa-user" aria-hidden="true"></i>';
+        return '<x-icon type="user"/>';
     }
 }
diff --git a/config/app.php b/config/app.php
index 060d82d525..bc74b4dd05 100755
--- a/config/app.php
+++ b/config/app.php
@@ -372,7 +372,9 @@ return [
         'Google2FA' => PragmaRX\Google2FALaravel\Facade::class,
         'Image'     => Intervention\Image\ImageServiceProvider::class,
         'Carbon' => Carbon\Carbon::class,
-        'Helper' => App\Helpers\Helper::class, // makes it much easier to use 'Helper::blah' in blades (which is where we usually use this)
+        'Helper' => App\Helpers\Helper::class,
+        // makes it much easier to use 'Helper::blah' in blades (which is where we usually use this)
+        'Icon' => App\Helpers\IconHelper::class,
         'Socialite' => Laravel\Socialite\Facades\Socialite::class,
 
 
diff --git a/public/css/build/app.css b/public/css/build/app.css
index f703469050..7f575c30ea 100644
Binary files a/public/css/build/app.css and b/public/css/build/app.css differ
diff --git a/public/css/build/overrides.css b/public/css/build/overrides.css
index d8169245b6..8062628551 100644
Binary files a/public/css/build/overrides.css and b/public/css/build/overrides.css differ
diff --git a/public/css/dist/all.css b/public/css/dist/all.css
index 8957c00995..9b24bf7bb8 100644
Binary files a/public/css/dist/all.css and b/public/css/dist/all.css differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 547cbd7f5c..3ccb348cbb 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,8 +2,8 @@
     "/js/build/app.js": "/js/build/app.js?id=5030f4cb69d0d0b87b7fe6ba1b9eece9",
     "/css/dist/skins/skin-black-dark.css": "/css/dist/skins/skin-black-dark.css?id=f0b08873a06bb54daeee176a9459f4a9",
     "/css/dist/skins/_all-skins.css": "/css/dist/skins/_all-skins.css?id=f4397c717b99fce41a633ca6edd5d1f4",
-    "/css/build/overrides.css": "/css/build/overrides.css?id=e83697e14b9cd1478ea2bda8fb50f30c",
-    "/css/build/app.css": "/css/build/app.css?id=ff82b7edca60f7276504bde91568f6d1",
+    "/css/build/overrides.css": "/css/build/overrides.css?id=cfbc06b0e0ebd9ee7294c4950dcc4933",
+    "/css/build/app.css": "/css/build/app.css?id=bcb566c8a13855e85053527728126d07",
     "/css/build/AdminLTE.css": "/css/build/AdminLTE.css?id=4ea0068716c1bb2434d87a16d51b98c9",
     "/css/dist/skins/skin-yellow.css": "/css/dist/skins/skin-yellow.css?id=7b315b9612b8fde8f9c5b0ddb6bba690",
     "/css/dist/skins/skin-yellow-dark.css": "/css/dist/skins/skin-yellow-dark.css?id=393aaa7b368b0670fc42434c8cca7dc7",
@@ -19,7 +19,7 @@
     "/css/dist/skins/skin-blue.css": "/css/dist/skins/skin-blue.css?id=f677207c6cf9678eb539abecb408c374",
     "/css/dist/skins/skin-blue-dark.css": "/css/dist/skins/skin-blue-dark.css?id=0640e45bad692dcf62873c6e85904899",
     "/css/dist/skins/skin-black.css": "/css/dist/skins/skin-black.css?id=76482123f6c70e866d6b971ba91de7bb",
-    "/css/dist/all.css": "/css/dist/all.css?id=053e0f8c49e8cf1b903c80c8f67639eb",
+    "/css/dist/all.css": "/css/dist/all.css?id=2e2e514b7e7fd63a0c6a882749ef2b13",
     "/css/dist/signature-pad.css": "/css/dist/signature-pad.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/css/dist/signature-pad.min.css": "/css/dist/signature-pad.min.css?id=6a89d3cd901305e66ced1cf5f13147f7",
     "/js/select2/i18n/af.js": "/js/select2/i18n/af.js?id=4f6fcd73488ce79fae1b7a90aceaecde",
diff --git a/public/sounds/lock.mp3 b/public/sounds/lock.mp3
new file mode 100644
index 0000000000..8628f2fd3c
Binary files /dev/null and b/public/sounds/lock.mp3 differ
diff --git a/resources/assets/less/overrides.less b/resources/assets/less/overrides.less
index a6a2347d41..3358e55632 100644
--- a/resources/assets/less/overrides.less
+++ b/resources/assets/less/overrides.less
@@ -718,6 +718,7 @@ th.css-consumable > .th-inner,
 th.css-envelope > .th-inner,
 th.css-users > .th-inner,
 th.css-location > .th-inner,
+th.css-component > .th-inner,
 th.css-accessory > .th-inner
 {
   font-size: 0px;
@@ -736,6 +737,7 @@ th.css-consumable > .th-inner::before,
 th.css-envelope > .th-inner::before,
 th.css-users > .th-inner::before,
 th.css-location > .th-inner::before,
+th.css-component > .th-inner::before,
 th.css-accessory > .th-inner::before
 
 {
@@ -791,6 +793,11 @@ th.css-location > .th-inner::before {
   content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-size: 19px; margin-bottom: 0px;
 }
 
+th.css-component > .th-inner::before
+{
+  content: "\f0a0"; font-family: "Font Awesome 5 Free"; font-weight: 500;
+}
+
 
 .small-box .inner {
   padding-left: 15px;
diff --git a/resources/lang/en-US/admin/locations/message.php b/resources/lang/en-US/admin/locations/message.php
index 6226c71ab6..488ec9c670 100644
--- a/resources/lang/en-US/admin/locations/message.php
+++ b/resources/lang/en-US/admin/locations/message.php
@@ -8,6 +8,7 @@ return array(
     'assoc_child_loc'	 => 'This location is currently the parent of at least one child location and cannot be deleted. Please update your locations to no longer reference this location and try again. ',
     'assigned_assets' => 'Assigned Assets',
     'current_location' => 'Current Location',
+    'open_map' => 'Open in :map_provider_icon Maps',
 
 
     'create' => array(
@@ -20,6 +21,11 @@ return array(
         'success' => 'Location updated successfully.'
     ),
 
+    'restore' => array(
+        'error'   => 'Location was not restored, please try again',
+        'success' => 'Location restored successfully.'
+    ),
+
     'delete' => array(
         'confirm'   	=> 'Are you sure you wish to delete this location?',
         'error'   => 'There was an issue deleting the location. Please try again.',
diff --git a/resources/views/accessories/view.blade.php b/resources/views/accessories/view.blade.php
index f3add91d40..41e8d1c41b 100644
--- a/resources/views/accessories/view.blade.php
+++ b/resources/views/accessories/view.blade.php
@@ -25,7 +25,7 @@
                     <li class="active">
                         <a href="#checkedout" data-toggle="tab">
                             <span class="hidden-lg hidden-md">
-                            <i class="fas fa-info-circle fa-2x" aria-hidden="true"></i>
+                            <x-icon type="info-circle" class="fa-2x" />
                             </span>
                             <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
                         </a>
@@ -34,7 +34,8 @@
                     <li>
                         <a href="#history" data-toggle="tab">
                         <span class="hidden-lg hidden-md">
-                        <i class="fas fa-history fa-2x" aria-hidden="true"></i></span>
+                            <x-icon type="history" class="fa-2x" />
+                        </span>
                         <span class="hidden-xs hidden-sm">{{ trans('general.history') }}</span>
                         </a>
                     </li>
@@ -43,11 +44,12 @@
                     @can('accessories.files', $accessory)
                         <li>
                             <a href="#files" data-toggle="tab">
-            <span class="hidden-lg hidden-md">
-            <i class="far fa-file fa-2x" aria-hidden="true"></i></span>
+                                <span class="hidden-lg hidden-md">
+                                <x-icon type="files" class="fa-2x" />
+                                </span>
                                 <span class="hidden-xs hidden-sm">{{ trans('general.file_uploads') }}
                                     {!! ($accessory->uploads->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($accessory->uploads->count()).'</badge>' : '' !!}
-            </span>
+                                </span>
                             </a>
                         </li>
                     @endcan
@@ -55,7 +57,13 @@
                     @can('update', $accessory)
                         <li class="pull-right">
                             <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-                                <i class="fas fa-paperclip" aria-hidden="true"></i> {{ trans('button.upload') }}
+                                <span class="hidden-lg hidden-xl hidden-md">
+                                    <x-icon type="paperclip" class="fa-2x" />
+                                </span>
+                                <span class="hidden-xs hidden-sm">
+                                    <x-icon type="paperclip" />
+                                    {{ trans('button.upload') }}
+                                </span>
                             </a>
                         </li>
                     @endcan
@@ -186,6 +194,7 @@
                                         @foreach ($accessory->uploads as $file)
                                             <tr>
                                                 <td>
+                                                    <x-icon type="paperclip" class="fa-2x" />
                                                     <i class="{{ Helper::filetype_icon($file->filename) }} icon-med" aria-hidden="true"></i>
                                                     <span class="sr-only">{{ Helper::filetype_icon($file->filename) }}</span>
 
@@ -217,7 +226,7 @@
                                                         </a>
 
                                                         <a href="{{ route('show.accessoryfile', [$accessory->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>
 
                                                     @endif
@@ -320,33 +329,46 @@
 </div>
 
     <div class="col-md-3 pull-right">
+
+        @can('update', \App\Models\Accessory::class)
+            <div class="text-center" style="padding-top:5px;">
+                <a href="{{ route('accessories.edit', $accessory->id) }}" style="margin-right:5px;" class="btn btn-warning btn-sm btn-social btn-block hidden-print">
+                    <x-icon type="edit" />
+                    {{ trans('admin/accessories/general.edit') }}
+                </a>
+            </div>
+        @endcan
+
         @can('checkout', \App\Models\Accessory::class)
                 <div class="text-center" style="padding-top:5px;">
-                    <a href="{{ route('accessories.checkout.show', $accessory->id) }}" style="margin-right:5px; width:100%" class="btn btn-primary btn-sm" {{ (($accessory->numRemaining() > 0 ) ? '' : ' disabled') }}>{{ trans('general.checkout') }}</a>
+                    <a href="{{ route('accessories.checkout.show', $accessory->id) }}" style="margin-right:5px; width:100%" class="btn bg-maroon btn-sm btn-social btn-block hidden-print {{ (($accessory->numRemaining() > 0 ) ? '' : ' disabled') }}">
+                        <x-icon type="checkout" />
+                        {{ trans('general.checkout') }}
+                    </a>
                 </div>
         @endcan
-        @can('update', \App\Models\Accessory::class)
-               <div class="text-center" style="padding-top:5px;">
-                  <a href="{{ route('accessories.edit', $accessory->id) }}" style="margin-right:5px; width:100%" class="btn btn-primary btn-sm">{{ trans('admin/accessories/general.edit') }}</a>
-               </div>
-        @endcan
+
         @can('create', \App\Models\Accessory::class)
                 <div class="text-center" style="padding-top:5px;">
-                    <a href="{{ route('clone/accessories', $accessory->id) }}" style="margin-right:5px; width:100%" class="btn btn-primary btn-sm">{{ trans('admin/accessories/general.clone') }}</a>
+                    <a href="{{ route('clone/accessories', $accessory->id) }}" style="margin-right:5px; width:100%"  class="btn btn-info btn-block btn-sm btn-social hidden-print">
+                        <x-icon type="clone" />
+                        {{ trans('admin/accessories/general.clone') }}</a>
                 </div>
         @endcan
 
         @can('delete', $accessory)
             @if ($accessory->checkouts_count == 0)
                 <div class="text-center" style="padding-top:5px;">
-                    <button class="btn btn-block btn-danger delete-asset" style="padding-top:5px;" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.delete_confirm_no_undo', ['item' => $accessory->name]) }}" data-target="#dataConfirmModal">
+                    <button class="btn btn-block btn-danger btn-sm btn-social delete-asset" style="padding-top:5px;" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.delete_confirm_no_undo', ['item' => $accessory->name]) }}" data-target="#dataConfirmModal">
+                        <x-icon type="delete" />
                     {{ trans('general.delete') }}
                     </button>
                 </div>
             @else
                 <div class="text-center" style="padding-top:5px;">
                     <span data-tooltip="true" title=" {{ trans('admin/accessories/general.delete_disabled') }}">
-                        <a href="#" class="btn btn-block btn-danger disabled">
+                        <a href="#" class="btn btn-block btn-danger btn-sm btn-social delete-asset disabled">
+                            <x-icon type="delete" />
                         {{ trans('general.delete') }}
                         </a>
                     </span>
diff --git a/resources/views/account/change-password.blade.php b/resources/views/account/change-password.blade.php
index 9899a9734e..57509e5fab 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 aecd8a4c12..d27367192a 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/account/view-assets.blade.php b/resources/views/account/view-assets.blade.php
index a4ffa16ec7..b973ad2bd0 100755
--- a/resources/views/account/view-assets.blade.php
+++ b/resources/views/account/view-assets.blade.php
@@ -42,7 +42,7 @@
           <li>
             <a href="#asset" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+            <x-icon type="assets" class="fa-2x" />
             </span>
               <span class="hidden-xs hidden-sm">{{ trans('general.assets') }}
                 {!! ($user->assets()->AssetsForShow()->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->assets()->AssetsForShow()->count()).'</badge>' : '' !!}
@@ -64,7 +64,7 @@
           <li>
             <a href="#accessories" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="far fa-keyboard fa-2x"></i>
+            <x-icon type="accessories" class="fa-2x" />
             </span>
               <span class="hidden-xs hidden-sm">{{ trans('general.accessories') }}
                 {!! ($user->accessories->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->accessories->count()).'</badge>' : '' !!}
diff --git a/resources/views/asset_maintenances/edit.blade.php b/resources/views/asset_maintenances/edit.blade.php
index 5c2cd1fa2d..c3aa8e1483 100644
--- a/resources/views/asset_maintenances/edit.blade.php
+++ b/resources/views/asset_maintenances/edit.blade.php
@@ -63,7 +63,7 @@
           <div class="input-group col-md-3{{  (Helper::checkIfRequired($item, 'start_date')) ? ' required' : '' }}">
             <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true" data-date-clear-btn="true">
               <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="start_date" id="start_date" value="{{ old('start_date', $item->start_date) }}">
-              <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+              <span class="input-group-addon"><x-icon type="calendar" /></span>
             </div>
             {!! $errors->first('start_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
           </div>
@@ -78,7 +78,7 @@
           <div class="input-group col-md-3{{  (Helper::checkIfRequired($item, 'completion_date')) ? ' required' : '' }}">
             <div class="input-group date" data-date-clear-btn="true" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
               <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="completion_date" id="completion_date" value="{{ old('completion_date', $item->completion_date) }}">
-              <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+              <span class="input-group-addon"><x-icon type="calendar" /></span>
             </div>
             {!! $errors->first('completion_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
           </div>
@@ -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 298d55f4ec..0a3c93333f 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 5077b36f9a..0328058184 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/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index 1be653fe0a..0e529d3f52 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -11,8 +11,6 @@
         <div class="container">
             <div class="row">
 
-
-
                 <div class="col-md-6 col-md-offset-3">
 
                     <div class="box login-box" style="width: 100%">
@@ -32,7 +30,7 @@
                                     <input type="hidden" name="token" value="{{ $token }}">
 
                                     <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
-                                        <label class="col-md-4 control-label"><i class="fas fa-user" aria-hidden="true"></i> {{ trans('admin/users/table.username')  }}</label>
+                                        <label class="col-md-4 control-label"><x-icon type="user" /> {{ trans('admin/users/table.username')  }}</label>
 
                                         <div class="col-md-6">
                                             <input type="text" class="form-control" name="username" value="{{ old('username', $username) }}">
@@ -42,7 +40,10 @@
                         </div>
 
                         <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
-                            <label class="col-md-4 control-label" for="password"><i class="fa fa-key" aria-hidden="true"></i> {{ trans('admin/users/table.password')  }}</label>
+                            <label class="col-md-4 control-label" for="password">
+                                <x-icon type="password" />
+                                {{ trans('admin/users/table.password')  }}
+                            </label>
 
                             <div class="col-md-6">
                                 <input type="password" class="form-control" name="password" aria-label="password">
@@ -51,7 +52,9 @@
                         </div>
 
                         <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
-                            <label class="col-md-4 control-label" for="password_confirmation"><i class="fa fa-key" aria-hidden="true"></i> {{ trans('admin/users/table.password_confirm')  }}</label>
+                            <label class="col-md-4 control-label" for="password_confirmation">
+                                <x-icon type="password" />
+                                {{ trans('admin/users/table.password_confirm')  }}</label>
                             <div class="col-md-6">
                                 <input type="password" class="form-control" name="password_confirmation" aria-label="password_confirmation">
                                 {!! $errors->first('password_confirmation', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
diff --git a/resources/views/blade/icon.blade.php b/resources/views/blade/icon.blade.php
new file mode 100644
index 0000000000..7aa6fdd408
--- /dev/null
+++ b/resources/views/blade/icon.blade.php
@@ -0,0 +1,10 @@
+{{-- IMPORTANT!!! Make sure there is no newline at the end of this file, or it will break the loaders for the tables --}}
+
+@props([
+    'type' => '',
+    'class' => false,
+    'style' => false,
+    'id' => false,
+    'title' => false,
+])
+<i {{ $attributes->merge(['class' => Icon::icon($type).' '.$class]) }} {{ isset($style) ? $attributes->merge(['style' => $style]): '' }}  {{ isset($title) ? $attributes->merge(['title' => $title]): '' }}  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 a6b0c7fc88..eb0619b520 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/companies/view.blade.php b/resources/views/companies/view.blade.php
index 0b94446b2b..d5911c1360 100644
--- a/resources/views/companies/view.blade.php
+++ b/resources/views/companies/view.blade.php
@@ -71,7 +71,7 @@
                     <li>
                         <a href="#users_tab" data-toggle="tab">
                             <span class="hidden-lg hidden-md">
-                            <i class="fas fa-users"></i></span>
+                            <x-icon type="users" /></span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.people') }}
                                 {!! (($company->users) && ($company->users->count() > 0 )) ? '<badge class="badge badge-secondary">'.number_format($company->users->count()).'</badge>' : '' !!}
                             </span>
diff --git a/resources/views/components/view.blade.php b/resources/views/components/view.blade.php
index bbb9b67097..287b0b23a8 100644
--- a/resources/views/components/view.blade.php
+++ b/resources/views/components/view.blade.php
@@ -61,7 +61,7 @@
         <li class="active">
           <a href="#checkedout" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-info-circle fa-2x" aria-hidden="true"></i>
+            <x-icon type="info-circle" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
           </a>
@@ -83,7 +83,7 @@
         @can('components.files', $component)
           <li class="pull-right">
             <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-              <i class="fas fa-paperclip" aria-hidden="true"></i> {{ trans('button.upload') }}
+              <x-icon type="paperclip" /> {{ trans('button.upload') }}
             </a>
           </li>
         @endcan
@@ -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('update', $component)
+    <div class="col-md-12 hidden-print" style="padding-top: 5px;">
+      <a href="{{ route('components.edit', $component->id) }}" class="btn btn-sm btn-warning btn-social btn-block hidden-print">
+        <x-icon type="edit" />
+        {{ trans('admin/components/general.edit') }}
+      </a>
+    </div>
+  @endcan
+
+  @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 btn-sm bg-maroon btn-social btn-block hidden-print">
+                 <x-icon type="checkout" />
+              {{ trans('admin/components/general.checkout') }}
+            </a>
+    </div>
+  @endcan
+
+
+</div>
 </div> <!-- .row-->
 
 @can('components.files', Component::class)
diff --git a/resources/views/consumables/view.blade.php b/resources/views/consumables/view.blade.php
index f6ea14042e..7cfbef2445 100644
--- a/resources/views/consumables/view.blade.php
+++ b/resources/views/consumables/view.blade.php
@@ -38,7 +38,7 @@
             <li>
               <a href="#checkedout" data-toggle="tab">
                 <span class="hidden-lg hidden-md">
-                <i class="fas fa-users fa-2x" aria-hidden="true"></i>
+                <x-icon type="users" class="fa-2x" />
                 </span>
                     <span class="hidden-xs hidden-sm">{{ trans('general.assigned') }}
                       {!! ($consumable->users_consumables > 0 ) ? '<badge class="badge badge-secondary">'.number_format($consumable->users_consumables).'</badge>' : '' !!}
@@ -74,7 +74,7 @@
             @can('update', $consumable)
               <li class="pull-right">
                 <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-                  <i class="fas fa-paperclip" aria-hidden="true"></i> {{ trans('button.upload') }}
+                  <x-icon type="paperclip" /> {{ trans('button.upload') }}
                 </a>
               </li>
             @endcan
@@ -97,39 +97,51 @@
                 
                 @can('update', $consumable)
                   <div class="col-md-12">
-                    <a href="{{ route('consumables.edit', $consumable->id) }}" style="margin-bottom:5px;"  class="btn btn-sm btn-block btn-primary hidden-print">{{ trans('button.edit') }}</a>
+                    <a href="{{ route('consumables.edit', $consumable->id) }}" style="margin-bottom:5px;"  class="btn btn-sm btn-block btn-social btn-warning hidden-print">
+                      <x-icon type="edit" />
+                      {{ trans('button.edit') }}
+                    </a>
                   </div>
                 @endcan
 
-                  @can('create', Consumable::class)
+                  @can('checkout', $consumable)
+                    @if ($consumable->numRemaining() > 0)
+                      <div class="col-md-12">
+                        <a href="{{ route('consumables.checkout.show', $consumable->id) }}" style="margin-bottom:5px;" class="btn btn-sm btn-block bg-maroon btn-social hidden-print">
+                          <x-icon type="checkout" />
+                          {{ trans('general.checkout') }}
+                        </a>
+                      </div>
+                    @else
+                      <div class="col-md-12">
+                        <button style="margin-bottom:10px;" class="btn btn-block bg-maroon btn-sm btn-social hidden-print disabled">
+                          <x-icon type="checkout" />
+                          {{ trans('general.checkout') }}
+                        </button>
+                      </div>
+                    @endif
+                  @endif
+
+
+                @can('create', Consumable::class)
 
                     <div class="col-md-12">
-                      <a href="{{ route('consumables.clone.create', $consumable->id) }}" style="margin-bottom:5px;"  class="btn btn-sm btn-block btn-primary hidden-print">{{ trans('button.var.clone', ['item_type' => trans('general.consumable')]) }}</a>
+                      <a href="{{ route('consumables.clone.create', $consumable->id) }}" style="margin-bottom:5px;"  class="btn btn-sm btn-block btn-info btn-social hidden-print">
+                        <x-icon type="clone" />
+                        {{ trans('button.var.clone', ['item_type' => trans('general.consumable')]) }}
+                      </a>
                     </div>
 
                   @endcan
 
-                  @can('checkout', $consumable)
-                    @if ($consumable->numRemaining() > 0)
-                        <div class="col-md-12">
-                            <a href="{{ route('consumables.checkout.show', $consumable->id) }}" style="margin-bottom:5px;" class="btn btn-sm btn-block btn-primary hidden-print">
-                              {{ trans('general.checkout') }}
-                            </a>
-                        </div>
-                    @else
-                        <div class="col-md-12">
-                          <button style="margin-bottom:10px;" class="btn btn-block btn-primary btn-sm disabled">
-                            {{ trans('general.checkout') }}
-                          </button>
-                        </div>
-                    @endif
-                @endif
 
 
                   @can('delete', $consumable)
                     <div class="col-md-12" style="padding-top: 10px; padding-bottom: 20px">
                       @if ($consumable->deleted_at=='')
-                        <button class="btn btn-sm btn-block btn-danger delete-asset" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $consumable->name]) }}" data-target="#dataConfirmModal">{{ trans('general.delete') }}
+                        <button class="btn btn-sm btn-block btn-danger btn-social hidden-print delete-asset" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $consumable->name]) }}" data-target="#dataConfirmModal">
+                          <x-icon type="delete" />
+                          {{ trans('general.delete') }}
                         </button>
                         <span class="sr-only">{{ trans('general.delete') }}</span>
                       @endif
@@ -487,7 +499,7 @@
                                 </a>
 
                                 <a href="{{ route('show.consumablefile', [$consumable->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>
                               @endif
                             </td>
diff --git a/resources/views/custom_fields/fields/edit.blade.php b/resources/views/custom_fields/fields/edit.blade.php
index 0ffc6f5d43..12c3a3fb73 100644
--- a/resources/views/custom_fields/fields/edit.blade.php
+++ b/resources/views/custom_fields/fields/edit.blade.php
@@ -143,7 +143,7 @@
               </div>
               <div class="col-md-9 col-md-offset-3" id="encrypt_warning" style="display:none;">
                   <div class="callout callout-danger">
-                      <p><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> {{ trans('admin/custom_fields/general.encrypt_field_help') }}</p>
+                      <p><x-icon type="warning" /> {{ trans('admin/custom_fields/general.encrypt_field_help') }}</p>
                   </div>
               </div>
           @endif
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index 2339122072..39a5d8b751 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/errors/403.blade.php b/resources/views/errors/403.blade.php
index e2a8642ca6..1196f69994 100644
--- a/resources/views/errors/403.blade.php
+++ b/resources/views/errors/403.blade.php
@@ -18,7 +18,7 @@
     <div style="padding-top: 200px">
       <img src="{{ config('app.url') }}/img/sad-panda.png" style="width: 200px; height: 200px;" class="pull-left">
             <div class="error-content">
-              <h2><i class="fas fa-exclamation-triangle text-yellow"></i> 403 Forbidden.</h2>
+              <h2><x-icon type="warning" class="text-yellow" /> 403 Forbidden.</h2>
               <p>
                 {!! trans('general.sad_panda', ['link' => config('app.url')]) !!}
               </p>
diff --git a/resources/views/errors/404.blade.php b/resources/views/errors/404.blade.php
index 77d7c32521..021897922e 100644
--- a/resources/views/errors/404.blade.php
+++ b/resources/views/errors/404.blade.php
@@ -18,7 +18,7 @@
     <div style="padding-top: 200px">
       <img src="{{ config('app.url') }}/img/sad-panda.png" style="width: 200px; height: 200px;" class="pull-left">
             <div class="error-content">
-              <h2><i class="fas fa-exclamation-triangle text-yellow"></i> 404 Page not found.</h2>
+              <h2><x-icon type="warning" class="text-yellow" /> 404 Page not found.</h2>
               <p>
                 Sad panda. We could not find the page you were looking for.
                 You should maybe <a href="{{ config('app.url') }}">return to the dashboard</a>.
diff --git a/resources/views/errors/503.blade.php b/resources/views/errors/503.blade.php
index 4adb020d4e..c3af4644a2 100644
--- a/resources/views/errors/503.blade.php
+++ b/resources/views/errors/503.blade.php
@@ -20,7 +20,7 @@
 
       <div class="box-header with-border">
         <h1 class="box-title">
-          <i class="fas fa-exclamation-triangle text-orange" aria-hidden="true"></i>
+          <x-icon type="warning" class="text-orange" />
           {{ trans('general.maintenance_mode_title') }}
         </h1>
       </div><!-- /.box-header -->
diff --git a/resources/views/groups/index.blade.php b/resources/views/groups/index.blade.php
index 49d7d768b9..5f96551d31 100755
--- a/resources/views/groups/index.blade.php
+++ b/resources/views/groups/index.blade.php
@@ -43,7 +43,7 @@
               <tr>
                <th data-switchable="true" data-sortable="true" data-field="id" data-visible="false">{{ trans('general.id') }}</th>
                <th data-switchable="true" data-sortable="true" data-field="name" data-formatter="groupsAdminLinkFormatter" data-visible="true">{{ trans('admin/groups/table.name') }}</th>
-                  <th data-switchable="true" data-sortable="true" data-field="users_count" data-visible="true"><i class="fas fa-user" aria-hidden="true"></i><span class="sr-only">{{ trans('admin/groups/table.users') }}</span></th>
+                  <th data-switchable="true" data-sortable="true" data-field="users_count" data-visible="true"><x-icon type="user" /><span class="sr-only">{{ trans('admin/groups/table.users') }}</span></th>
                <th data-switchable="true" data-sortable="true" data-field="created_at" data-visible="true" data-formatter="dateDisplayFormatter">{{ trans('general.created_at') }}</th>
                <th data-switchable="false" data-searchable="false" data-sortable="false" data-field="created_by"  data-formatter="usersLinkFormatter">{{ trans('general.created_by') }}</th>
                <th data-switchable="false" data-searchable="false" data-sortable="false" data-field="actions"   data-formatter="groupsActionsFormatter">{{ trans('table.actions') }}</th>
diff --git a/resources/views/hardware/audit.blade.php b/resources/views/hardware/audit.blade.php
index 9659371071..2a88e171bc 100644
--- a/resources/views/hardware/audit.blade.php
+++ b/resources/views/hardware/audit.blade.php
@@ -44,7 +44,7 @@
                                             {{ $asset->model->name }}
                                         @else
                                             <span class="text-danger text-bold">
-                                              <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+                                              <x-icon type="warning" />
                                               {{ trans('admin/hardware/general.model_invalid')}}
                                             </span>
                                             {{ trans('admin/hardware/general.model_invalid_fix')}}
@@ -109,7 +109,7 @@
                             <div class="col-md-8">
                                 <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true">
                                     <input type="text" class="form-control" placeholder="{{ trans('general.next_audit_date') }}" name="next_audit_date" id="next_audit_date" value="{{ old('next_audit_date', $next_audit_date) }}">
-                                    <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                                    <span class="input-group-addon"><x-icon type="calendar" /></span>
                                 </div>
                                 {!! $errors->first('next_audit_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                                  <p class="help-block">{!! trans('general.next_audit_date_help') !!}</p>
@@ -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 562a27154e..465336563d 100644
--- a/resources/views/hardware/bulk-checkout.blade.php
+++ b/resources/views/hardware/bulk-checkout.blade.php
@@ -42,7 +42,7 @@
                   <div class="col-md-8">
                       <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-end-date="0d" data-date-clear-btn="true">
                           <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="checkout_at" id="checkout_at" value="{{ old('checkout_at') }}">
-                          <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                          <span class="input-group-addon"><x-icon type="calendar" /></span>
                       </div>
                       {!! $errors->first('checkout_at', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                   </div>
@@ -56,7 +56,7 @@
                   <div class="col-md-8">
                       <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-start-date="0d" data-date-clear-btn="true">
                           <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="expected_checkin" id="expected_checkin" value="{{ old('expected_checkin') }}">
-                          <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                          <span class="input-group-addon"><x-icon type="calendar" /></span>
                       </div>
                       {!! $errors->first('expected_checkin', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                   </div>
@@ -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 df988f5ad2..f72e7e4d1b 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 e4bfb6e4dd..a998642685 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 f621d88fa8..d36513e889 100755
--- a/resources/views/hardware/bulk.blade.php
+++ b/resources/views/hardware/bulk.blade.php
@@ -60,7 +60,7 @@
             <div class="col-md-4">
               <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
                 <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="purchase_date" id="purchase_date" value="{{ old('purchase_date') }}">
-                <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                <span class="input-group-addon"><x-icon type="calendar" /></span>
               </div>
               {!! $errors->first('purchase_date', '<span class="alert-msg"><i class="fas fa-times"></i> :message</span>') !!}
             </div>
@@ -78,7 +78,7 @@
              <div class="col-md-4">
                   <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
                       <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="expected_checkin" id="expected_checkin" value="{{ old('expected_checkin') }}">
-                      <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                      <span class="input-group-addon"><x-icon type="calendar" /></span>
                  </div>
 
                  {!! $errors->first('expected_checkin', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
@@ -178,7 +178,7 @@
             <div class="col-md-4">
               <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
                 <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="next_audit_date" id="next_audit_date" value="{{ old('next_audit_date') }}">
-                <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                <span class="input-group-addon"><x-icon type="calendar" /></span>
               </div>
 
               {!! $errors->first('next_audit_date', '<span class="alert-msg" aria-hidden="true">
@@ -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/checkin.blade.php b/resources/views/hardware/checkin.blade.php
index 12a0627aec..5686e74dd4 100755
--- a/resources/views/hardware/checkin.blade.php
+++ b/resources/views/hardware/checkin.blade.php
@@ -53,7 +53,7 @@
                                                         {{ $asset->model->name }}
                                                     @else
                                                         <span class="text-danger text-bold">
-                              <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+                              <x-icon type="warning" />
                               {{ trans('admin/hardware/general.model_invalid')}}
                             </span>
                                                         {{ trans('admin/hardware/general.model_invalid_fix')}}
diff --git a/resources/views/hardware/checkout.blade.php b/resources/views/hardware/checkout.blade.php
index 17b971a5ba..a067a5a11d 100755
--- a/resources/views/hardware/checkout.blade.php
+++ b/resources/views/hardware/checkout.blade.php
@@ -50,7 +50,7 @@
                                         {{ $asset->model->name }}
                                     @else
                                         <span class="text-danger text-bold">
-                                              <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+                                              <x-icon type="warning" />
                                               {{ trans('admin/hardware/general.model_invalid')}}
                                         </span>
 
@@ -109,8 +109,8 @@
                                     <input type="text" class="form-control"
                                            placeholder="{{ trans('general.select_date') }}" name="checkout_at"
                                            id="checkout_at" value="{{ old('checkout_at', date('Y-m-d')) }}">
-                                    <span class="input-group-addon"><i class="fas fa-calendar"
-                                                                       aria-hidden="true"></i></span>
+                                    <span class="input-group-addon">
+                                        <x-icon type="calendar" /></span>
                                 </div>
                                 {!! $errors->first('checkout_at', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                             </div>
@@ -128,8 +128,9 @@
                                     <input type="text" class="form-control"
                                            placeholder="{{ trans('general.select_date') }}" name="expected_checkin"
                                            id="expected_checkin" value="{{ old('expected_checkin') }}">
-                                    <span class="input-group-addon"><i class="fas fa-calendar"
-                                                                       aria-hidden="true"></i></span>
+                                    <span class="input-group-addon">
+                                        <x-icon type="calendar" />
+                                    </span>
                                 </div>
                                 {!! $errors->first('expected_checkin', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                             </div>
@@ -153,13 +154,13 @@
                                     <div class="callout callout-info">
 
                                         @if ($asset->requireAcceptance())
-                                            <i class="far fa-envelope" aria-hidden="true"></i>
+                                            <x-icon type="email" />
                                             {{ trans('admin/categories/general.required_acceptance') }}
                                             <br>
                                         @endif
 
                                         @if ($asset->getEula())
-                                            <i class="far fa-envelope" aria-hidden="true"></i>
+                                            <x-icon type="email" />
                                             {{ trans('admin/categories/general.required_eula') }}
                                             <br>
                                         @endif
diff --git a/resources/views/hardware/edit.blade.php b/resources/views/hardware/edit.blade.php
index f31326cc4d..bdbc3c3c2e 100755
--- a/resources/views/hardware/edit.blade.php
+++ b/resources/views/hardware/edit.blade.php
@@ -44,7 +44,7 @@
           </div>
           <div class="col-md-2 col-sm-12">
               <button class="add_field_button btn btn-default btn-sm">
-                  <i class="fas fa-plus"></i>
+                  <x-icon type="plus" />
               </button>
           </div>
       @endif
@@ -103,7 +103,7 @@
         <div class="col-md-9 col-sm-9 col-md-offset-3">
 
         <a id="optional_info" class="text-primary">
-            <i class="fa fa-caret-right fa-2x" id="optional_info_icon"></i>
+            <x-icon type="caret-right" class="fa-2x" id="optional_info_icon" />
             <strong>{{ trans('admin/hardware/form.optional_infos') }}</strong>
         </a>
 
@@ -124,7 +124,7 @@
                 <div class="input-group col-md-4">
                     <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
                         <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="next_audit_date" id="next_audit_date" value="{{ old('next_audit_date', $item->next_audit_date) }}" readonly style="background-color:inherit" maxlength="10">
-                        <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                        <span class="input-group-addon"><x-icon type="calendar" /></span>
                     </div>
                 </div>
                 <div class="col-md-8 col-md-offset-3">
@@ -153,7 +153,7 @@
     <div class="form-group">
         <div class="col-md-9 col-sm-9 col-md-offset-3">
             <a id="order_info" class="text-primary">
-                <i class="fa fa-caret-right fa-2x" id="order_info_icon"></i>
+                <x-icon type="caret-right" class="fa-2x" id="order_info_icon" />
                 <strong>{{ trans('admin/hardware/form.order_details') }}</strong>
             </a>
 
@@ -255,17 +255,15 @@
                         $("#assigned_user").show();
 
                         $("#selected_status_status").removeClass('text-danger');
-                        $("#selected_status_status").removeClass('text-warning');
                         $("#selected_status_status").addClass('text-success');
-                        $("#selected_status_status").html('<i class="fas fa-check"></i> {{ trans('admin/hardware/form.asset_deployable')}}');
+                        $("#selected_status_status").html('<x-icon type="checkmark" /> {{ trans('admin/hardware/form.asset_deployable')}}');
 
 
                     } else {
                         $("#assignto_selector").hide();
-                        $("#selected_status_status").removeClass('text-danger');
                         $("#selected_status_status").removeClass('text-success');
-                        $("#selected_status_status").addClass('text-warning');
-                        $("#selected_status_status").html('<i class="fas fa-exclamation-triangle"></i> {{ trans('admin/hardware/form.asset_not_deployable')}} ');
+                        $("#selected_status_status").addClass('text-danger');
+                        $("#selected_status_status").html('<x-icon type="warning" /> {{ trans('admin/hardware/form.asset_not_deployable')}} ');
                     }
                 }
             });
@@ -324,7 +322,7 @@
                 box_html += '<input type="text"  class="form-control" name="asset_tags[' + x + ']" value="{{ (($snipeSettings->auto_increment_prefix!='') && ($snipeSettings->auto_increment_assets=='1')) ? $snipeSettings->auto_increment_prefix : '' }}'+ auto_tag +'" required>';
                 box_html += '</div>';
                 box_html += '<div class="col-md-2 col-sm-12">';
-                box_html += '<a href="#" class="remove_field btn btn-default btn-sm"><i class="fas fa-minus"></i></a>';
+                box_html += '<a href="#" class="remove_field btn btn-default btn-sm"><x-icon type="minus" /></a>';
                 box_html += '</div>';
                 box_html += '</div>';
                 box_html += '</div>';
diff --git a/resources/views/hardware/quickscan-checkin.blade.php b/resources/views/hardware/quickscan-checkin.blade.php
index ec6ef5719f..de892399cc 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>
 
 
@@ -99,7 +99,7 @@
                         </tr>
                         <tr id="checkin-loader" style="display: none;">
                             <td colspan="3">
-                                <i class="fas fa-spinner spin" aria-hidden="true"></i> {{ trans('general.processing') }}...
+                                <x-icon type="spinner" />  {{ trans('general.processing') }}...
                             </td>
                         </tr>
                         </thead>
diff --git a/resources/views/hardware/quickscan.blade.php b/resources/views/hardware/quickscan.blade.php
index e4f6c8a55e..867eeaa2b0 100644
--- a/resources/views/hardware/quickscan.blade.php
+++ b/resources/views/hardware/quickscan.blade.php
@@ -51,12 +51,9 @@
                                 <label class="form-control">
                                     <input type="checkbox" value="1" name="update_location" {{ old('update_location') == '1' ? ' checked="checked"' : '' }}>
                                     <span>{{ trans('admin/hardware/form.asset_location') }}
-                                    <a href="#" class="text-dark-gray" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="<i class='far fa-life-ring'></i> {{ trans('general.more_info') }}" data-html="true" data-content="{{ trans('general.quickscan_bulk_help') }}"><i class="far fa-life-ring"></i></a></span>
-
+                                    <a href="#" class="text-dark-gray" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="<i class='far fa-life-ring'></i> {{ trans('general.more_info') }}" data-html="true" data-content="{{ trans('general.quickscan_bulk_help') }}">
+                                        <x-icon type="more-info" /></a></span>
                                 </label>
-
-
-
                             </div>
                         </div>
 
@@ -67,7 +64,7 @@
                             <div class="col-md-9">
                                 <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-clear-btn="true">
                                     <input type="text" class="form-control" placeholder="{{ trans('general.next_audit_date') }}" name="next_audit_date" id="next_audit_date" value="{{ old('next_audit_date', $next_audit_date) }}">
-                                    <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                                    <span class="input-group-addon"><x-icon type="calendar" /></span>
                                 </div>
                                 {!! $errors->first('next_audit_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
                             </div>
@@ -83,16 +80,14 @@
                             </div>
                         </div>
 
-
-
                     </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>
-
-
-
             </div>
 
 
@@ -116,7 +111,8 @@
                         </tr>
                         <tr id="audit-loader" style="display: none;">
                             <td colspan="3">
-                                <i class="fas fa-spinner spin" aria-hidden="true"></i> {{ trans('admin/hardware/form.processing_spinner') }}
+                                <x-icon type="spinner" />
+                                {{ trans('admin/hardware/form.processing_spinner') }}
                             </td>
                         </tr>
                         </thead>
diff --git a/resources/views/hardware/view.blade.php b/resources/views/hardware/view.blade.php
index 4961cfce25..2da4038340 100755
--- a/resources/views/hardware/view.blade.php
+++ b/resources/views/hardware/view.blade.php
@@ -44,7 +44,7 @@
                     <li class="active">
                         <a href="#details" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                          <i class="fas fa-info-circle fa-2x"></i>
+                            <x-icon type="info-circle" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
                         </a>
@@ -53,7 +53,7 @@
                     <li>
                         <a href="#software" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="far fa-save fa-2x" aria-hidden="true"></i>
+                           <x-icon type="licenses" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.licenses') }}
                                 {!! ($asset->licenses->count() > 0 ) ? '<span class="badge badge-secondary">'.number_format($asset->licenses->count()).'</span>' : '' !!}
@@ -64,7 +64,7 @@
                     <li>
                         <a href="#components" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="far fa-hdd fa-2x" aria-hidden="true"></i>
+                            <x-icon type="components" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.components') }}
                                 {!! ($asset->components->count() > 0 ) ? '<span class="badge badge-secondary">'.number_format($asset->components->count()).'</span>' : '' !!}
@@ -75,7 +75,7 @@
                     <li>
                         <a href="#assets" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+                            <x-icon type="assets" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.assets') }}
                                 {!! ($asset->assignedAssets()->count() > 0 ) ? '<span class="badge badge-secondary">'.number_format($asset->assignedAssets()->count()).'</span>' : '' !!}
@@ -88,7 +88,7 @@
                     <li>
                         <a href="#history" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="fas fa-history fa-2x" aria-hidden="true"></i>
+                              <x-icon type="history" class="fa-2x "/>
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.history') }}
                           </span>
@@ -98,7 +98,7 @@
                     <li>
                         <a href="#maintenances" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="fas fa-wrench fa-2x" aria-hidden="true"></i>
+                              <x-icon type="maintenances" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.maintenances') }}
                                 {!! ($asset->assetmaintenances()->count() > 0 ) ? '<span class="badge badge-secondary">'.number_format($asset->assetmaintenances()->count()).'</span>' : '' !!}
@@ -109,7 +109,7 @@
                     <li>
                         <a href="#files" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                            <i class="far fa-file fa-2x" aria-hidden="true"></i>
+                            <x-icon type="files" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">{{ trans('general.files') }}
                                 {!! ($asset->uploads->count() > 0 ) ? '<span class="badge badge-secondary">'.number_format($asset->uploads->count()).'</span>' : '' !!}
@@ -121,7 +121,7 @@
                     <li>
                         <a href="#modelfiles" data-toggle="tab">
                           <span class="hidden-lg hidden-md">
-                              <i class="fa-solid fa-laptop-file fa-2x" aria-hidden="true"></i>
+                              <x-icon type="more-files" class="fa-2x" />
                           </span>
                             <span class="hidden-xs hidden-sm">
                             {{ trans('general.additional_files') }}
@@ -133,10 +133,15 @@
 
 
                     @can('update', \App\Models\Asset::class)
-                        <li class="pull-right hidden-print">
+                        <li class="pull-right">
                             <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-                                <i class="fas fa-paperclip" aria-hidden="true"></i>
-                                {{ trans('button.upload') }}
+                                <span class="hidden-lg hidden-xl hidden-md">
+                                    <x-icon type="paperclip" class="fa-2x" />
+                                </span>
+                                <span class="hidden-xs hidden-sm">
+                                    <x-icon type="paperclip" />
+                                    {{ trans('button.upload') }}
+                                </span>
                             </a>
                         </li>
                     @endcan
@@ -150,7 +155,7 @@
                             @if ($asset->deleted_at!='')
                                 <div class="col-md-12">
                                     <div class="callout callout-warning">
-                                        <i class="icon fas fa-exclamation-triangle"></i>
+                                        <x-icon type="warning" />
                                         {{ trans('admin/users/message.user_deleted_warning') }}
                                     </div>
                                 </div>
@@ -172,24 +177,36 @@
                                 </div>
 
 
+                                @if ($asset->deleted_at=='')
+                                    @can('update', $asset)
+                                        <div class="col-md-12 hidden-print" style="padding-top: 5px;">
+                                            <a href="{{ route('hardware.edit', $asset->id) }}" class="btn btn-sm btn-warning btn-social btn-block hidden-print">
+                                                <x-icon type="edit" />
+                                                {{ trans('admin/hardware/general.edit') }}
+                                            </a>
+                                        </div>
+                                    @endcan
+
 
                                 @if (($asset->assetstatus) && ($asset->assetstatus->deployable=='1'))
                                     @if (($asset->assigned_to != '') && ($asset->deleted_at==''))
                                         @can('checkin', \App\Models\Asset::class)
-                                            <div class="col-md-12 hidden-print">
+                                            <div class="col-md-12 hidden-print" style="padding-top: 5px;">
                                                     <span class="tooltip-wrapper"{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid_fix').'"' : '') !!}>
-                                                        <a role="button" href="{{ route('hardware.checkin.create', $asset->id) }}" class="btn btn-sm btn-primary btn-block hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
-                                                        {{ trans('admin/hardware/general.checkin') }}
-                                                    </a>
+                                                        <a role="button" href="{{ route('hardware.checkin.create', $asset->id) }}" class="btn btn-sm btn-primary bg-purple btn-social btn-block hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
+                                                            <x-icon type="checkin" />
+                                                            {{ trans('admin/hardware/general.checkin') }}
+                                                        </a>
                                                     </span>
                                             </div>
                                         @endcan
                                     @elseif (($asset->assigned_to == '') && ($asset->deleted_at==''))
-                                        @can('checkout', \App\Models\Asset::class)
+                                        @can('checkout', Asset::class)
                                             <div class="col-md-12 hidden-print" style="padding-top: 5px;">
                                                     <span class="tooltip-wrapper"{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid_fix').'"' : '') !!}>
-                                                        <a href="{{ route('hardware.checkout.create', $asset->id)  }}" class="btn btn-sm btn-primary btn-block hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
-                                                        {{ trans('admin/hardware/general.checkout') }}
+                                                        <a href="{{ route('hardware.checkout.create', $asset->id)  }}" class="btn btn-sm bg-maroon btn-social btn-block hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
+                                                             <x-icon type="checkout" />
+                                                            {{ trans('admin/hardware/general.checkout') }}
                                                     </a>
                                                     </span>
                                             </div>
@@ -197,19 +214,13 @@
                                     @endif
                                 @endif
 
-                                @if ($asset->deleted_at=='')
-                                    @can('update', $asset)
-                                        <div class="col-md-12 hidden-print" style="padding-top: 5px;">
-                                            <a href="{{ route('hardware.edit', $asset->id) }}" class="btn btn-sm btn-primary btn-block hidden-print">
-                                                {{ trans('admin/hardware/general.edit') }}
-                                            </a>
-                                        </div>
-                                    @endcan
+
 
                                     @can('audit', \App\Models\Asset::class)
                                         <div class="col-md-12 hidden-print" style="padding-top: 5px;">
                                         <span class="tooltip-wrapper"{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid_fix').'"' : '') !!}>
-                                            <a href="{{ route('asset.audit.create', $asset->id)  }}" class="btn btn-sm btn-primary btn-block hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
+                                            <a href="{{ route('asset.audit.create', $asset->id)  }}" class="btn btn-sm btn-primary btn-block btn-social hidden-print{{ (!$asset->model ? ' disabled' : '') }}">
+                                                 <x-icon type="audit" />
                                              {{ trans('general.audit') }}
                                             </a>
                                         </span>
@@ -219,7 +230,8 @@
 
                                 @can('create', $asset)
                                     <div class="col-md-12 hidden-print" style="padding-top: 5px;">
-                                        <a href="{{ route('clone/hardware', $asset->id) }}" class="btn btn-sm btn-primary btn-block hidden-print">
+                                        <a href="{{ route('clone/hardware', $asset->id) }}" class="btn btn-sm btn-info btn-block btn-social hidden-print">
+                                            <x-icon type="clone" />
                                             {{ trans('admin/hardware/general.clone') }}
                                         </a>
                                     </div>
@@ -228,13 +240,19 @@
                                 @can('delete', $asset)
                                     <div class="col-md-12 hidden-print" style="padding-top: 30px; padding-bottom: 30px;">
                                         @if ($asset->deleted_at=='')
-                                            <button class="btn btn-sm btn-block btn-danger delete-asset" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $asset->asset_tag]) }}" data-target="#dataConfirmModal">{{ trans('general.delete') }}
+                                            <button class="btn btn-sm btn-block btn-danger btn-social delete-asset" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $asset->asset_tag]) }}" data-target="#dataConfirmModal">
+
+                                                <x-icon type="delete" />
+                                                {{ trans('general.delete') }}
                                             </button>
                                             <span class="sr-only">{{ trans('general.delete') }}</span>
                                         @else
                                             <form method="POST" action="{{ route('restore/hardware', ['assetId' => $asset->id]) }}">
                                                 @csrf
-                                                <button class="btn btn-sm btn-warning btn-block">{{ trans('general.restore') }}</button>
+                                                <button class="btn btn-sm btn-block btn-warning btn-social delete-asset">
+                                                    <x-icon type="restore" />
+                                                    {{ trans('general.restore') }}
+                                                </button>
                                             </form>
                                         @endif
                                     </div>
@@ -256,14 +274,14 @@
                                         <ul class="list-unstyled" style="line-height: 25px;">
                                             @if ((isset($asset->assignedTo->email)) && ($asset->assignedTo->email!=''))
                                                 <li>
-                                                    <i class="far fa-envelope" aria-hidden="true"></i>
+                                                    <x-icon type="email" />
                                                     <a href="mailto:{{ $asset->assignedTo->email }}">{{ $asset->assignedTo->email }}</a>
                                                 </li>
                                             @endif
 
                                             @if ((isset($asset->assignedTo)) && ($asset->assignedTo->phone!=''))
                                                 <li>
-                                                    <i class="fas fa-phone" aria-hidden="true"></i>
+                                                    <x-icon type="phone" />
                                                     <a href="tel:{{ $asset->assignedTo->phone }}">{{ $asset->assignedTo->phone }}</a>
                                                 </li>
                                             @endif
@@ -273,7 +291,9 @@
                                             @endif
 
                                             @if (isset($asset->location))
-                                                <li><i class="fas fa-map-marker-alt" aria-hidden="true"></i> {{ $asset->location->name }}</li>
+                                                <li>
+                                                    <x-icon type="locations" />
+                                                     {{ $asset->location->name }}</li>
                                                 <li>{{ $asset->location->address }}
                                                     @if ($asset->location->address2!='')
                                                         {{ $asset->location->address2 }}
@@ -288,11 +308,13 @@
                                                 </li>
                                             @endif
                                             <li>
-                                                <i class="fas fa-calendar hidden-print"></i> {{ trans('admin/hardware/form.checkout_date') }}: {{ Helper::getFormattedDateObject($asset->last_checkout, 'date', false) }}
+                                                <x-icon type="calendar" />
+                                                {{ trans('admin/hardware/form.checkout_date') }}: {{ Helper::getFormattedDateObject($asset->last_checkout, 'date', false) }}
                                             </li>
                                             @if (isset($asset->expected_checkin))
                                                 <li>
-                                                    <i class="fas fa-calendar"></i> {{ trans('admin/hardware/form.expected_checkin') }}: {{ Helper::getFormattedDateObject($asset->expected_checkin, 'date', false) }}
+                                                    <x-icon type="calendar" />
+                                                    {{ trans('admin/hardware/form.expected_checkin') }}: {{ Helper::getFormattedDateObject($asset->expected_checkin, 'date', false) }}
                                                 </li>
                                             @endif
                                         </ul>
@@ -354,20 +376,22 @@
                                             </div>
                                             <div class="col-md-9">
                                                 @if (($asset->assignedTo) && ($asset->deleted_at==''))
-                                                    <i class="fas fa-circle text-blue"></i>
+                                                    <x-icon type="circle-solid" class="text-blue" />
                                                     {{ $asset->assetstatus->name }}
-                                                    <label class="label label-default">{{ trans('general.deployed') }}</label>
+                                                    <label class="label label-default">
+                                                        {{ trans('general.deployed') }}
+                                                    </label>
 
-                                                    <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i>
+                                                    <x-icon type="long-arrow-right" class="text-orange" />
                                                     {!!  $asset->assignedTo->present()->glyph()  !!}
                                                     {!!  $asset->assignedTo->present()->nameUrl() !!}
                                                 @else
                                                     @if (($asset->assetstatus) && ($asset->assetstatus->deployable=='1'))
-                                                        <i class="fas fa-circle text-green"></i>
+                                                        <x-icon type="circle-solid" class="text-green" />
                                                     @elseif (($asset->assetstatus) && ($asset->assetstatus->pending=='1'))
-                                                        <i class="fas fa-circle text-orange"></i>
+                                                        <x-icon type="circle-solid" class="text-orange" />
                                                     @else
-                                                        <i class="fas fa-times text-red"></i>
+                                                        <x-icon type="x" class="text-red" />
                                                     @endif
                                                     <a href="{{ route('statuslabels.show', $asset->assetstatus->id) }}">
                                                         {{ $asset->assetstatus->name }}</a>
@@ -484,38 +508,39 @@
 
                                                     @if (($asset->model) && ($asset->model->manufacturer) &&  ($asset->model->manufacturer->url!=''))
                                                         <li>
-                                                            <i class="fas fa-globe-americas" aria-hidden="true"></i>
+                                                            <x-icon type="globe-us" />
                                                             <a href="{{ $asset->present()->dynamicUrl($asset->model->manufacturer->url) }}" target="_blank">
                                                                 {{ $asset->present()->dynamicUrl($asset->model->manufacturer->url) }}
-                                                                <i class="fa fa-external-link" aria-hidden="true"></i>
+                                                                <x-icon type="external-link" />
                                                             </a>
                                                         </li>
                                                     @endif
 
                                                     @if (($asset->model) && ($asset->model->manufacturer) &&  ($asset->model->manufacturer->support_url!=''))
                                                         <li>
-                                                            <i class="far fa-life-ring" aria-hidden="true"></i>
+                                                            <x-icon type="more-info" />
                                                             <a href="{{ $asset->present()->dynamicUrl($asset->model->manufacturer->support_url) }}" target="_blank">
                                                                 {{ $asset->present()->dynamicUrl($asset->model->manufacturer->support_url) }}
-                                                                <i class="fa fa-external-link" aria-hidden="true"></i>
+                                                                <x-icon type="external-link" />
                                                             </a>
                                                         </li>
                                                     @endif
 
                                                     @if (($asset->model) && ($asset->model->manufacturer) &&  ($asset->model->manufacturer->warranty_lookup_url!=''))
                                                         <li>
-                                                            <i class="far fa-wrench" aria-hidden="true"></i>
+                                                            <x-icon type="maintenances" />
                                                             <a href="{{ $asset->present()->dynamicUrl($asset->model->manufacturer->warranty_lookup_url) }}" target="_blank">
                                                                 {{ $asset->present()->dynamicUrl($asset->model->manufacturer->warranty_lookup_url) }}
 
-                                                                <i class="fa fa-external-link" aria-hidden="true"><span class="sr-only">{{ trans('admin/hardware/general.mfg_warranty_lookup', ['manufacturer' => $asset->model->manufacturer->name]) }}</span></i>
+                                                                <x-icon type="external-link" />
+                                                                    <span class="sr-only">{{ trans('admin/hardware/general.mfg_warranty_lookup', ['manufacturer' => $asset->model->manufacturer->name]) }}</span></i>
                                                             </a>
                                                         </li>
                                                     @endif
 
                                                     @if (($asset->model) && ($asset->model->manufacturer->support_phone))
                                                         <li>
-                                                            <i class="fas fa-phone" aria-hidden="true"></i>
+                                                            <x-icon type="phone" />
                                                             <a href="tel:{{ $asset->model->manufacturer->support_phone }}">
                                                                 {{ $asset->model->manufacturer->support_phone }}
                                                             </a>
@@ -524,7 +549,7 @@
 
                                                     @if (($asset->model) && ($asset->model->manufacturer->support_email))
                                                         <li>
-                                                            <i class="far fa-envelope" aria-hidden="true"></i>
+                                                            <x-icon type="email" />
                                                             <a href="mailto:{{ $asset->model->manufacturer->support_email }}">
                                                                 {{ $asset->model->manufacturer->support_email }}
                                                             </a>
@@ -612,6 +637,7 @@
                                                 </div>
                                                 <div class="col-md-9{{ (($field->format=='URL') && ($asset->{$field->db_column_name()}!='')) ? ' ellipsis': '' }}">
                                                     @if (($field->field_encrypted=='1') && ($asset->{$field->db_column_name()}!=''))
+
                                                         <i class="fas fa-lock" data-tooltip="true" data-placement="top" title="{{ trans('admin/custom_fields/general.value_encrypted') }}" onclick="showHideEncValue(this)" id="text-{{ $field->id }}"></i>
                                                     @endif
 
@@ -783,7 +809,8 @@
 
                                                 @if (($asset->model) && ($asset->model->manufacturer) && ($asset->model->manufacturer->warranty_lookup_url!=''))
                                                     <a href="{{ $asset->present()->dynamicUrl($asset->model->manufacturer->warranty_lookup_url) }}" target="_blank">
-                                                        <i class="fa fa-external-link" aria-hidden="true"><span class="sr-only">{{ trans('admin/hardware/general.mfg_warranty_lookup', ['manufacturer' => $asset->model->manufacturer->name]) }}</span></i>
+                                                        <x-icon type="external-link" />
+                                                        <span class="sr-only">{{ trans('admin/hardware/general.mfg_warranty_lookup', ['manufacturer' => $asset->model->manufacturer->name]) }}</span></i>
                                                     </a>
                                                 @endif
                                             </div>
@@ -876,14 +903,13 @@
                                                 @else
                                                     {{ trans('general.na_no_purchase_date') }}
                                                 @endif
-                                                @if ($asset->eol_explicit)
-                                                    <i class="fas fa-exclamation-triangle text-orange"
-                                                       aria-hidden="true"
-                                                       data-tooltip="true"
-                                                       data-placement="top"
-                                                       data-title="Explicit EOL"
-                                                       title="Explicit EOL">
-                                                    </i>
+                                                @if ($asset->eol_explicit =='1')
+                                                        <span data-tooltip="true"
+                                                                data-placement="top"
+                                                                data-title="Explicit EOL"
+                                                                title="Explicit EOL">
+                                                                <x-icon type="warning" class="text-orange" />
+                                                        </span>
                                                 @endif
                                             </div>
                                         </div>
@@ -1041,7 +1067,9 @@
                                                        'id' => 'bulkForm']) }}
                                             <input type="hidden" name="bulk_actions" value="labels" />
                                             <input type="hidden" name="ids[{{$asset->id}}]" value="{{ $asset->id }}" />
-                                            <button class="btn btn-sm btn-default" id="bulkEdit"{{ (!$asset->model ? ' disabled' : '') }}{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid').'"' : '') !!}><i class="fas fa-barcode" aria-hidden="true"></i> {{ trans_choice('button.generate_labels', 1) }}</button>
+                                            <button class="btn btn-sm btn-default" id="bulkEdit"{{ (!$asset->model ? ' disabled' : '') }}{!! (!$asset->model ? ' data-tooltip="true" title="'.trans('admin/hardware/general.model_invalid').'"' : '') !!}>
+                                                <x-icon type="assets" />
+                                                {{ trans_choice('button.generate_labels', 1) }}</button>
 
                                             {{ Form::close() }}
 
@@ -1093,7 +1121,7 @@
                                 @else
 
                                     <div class="alert alert-info alert-block">
-                                        <i class="fas fa-info-circle"></i>
+                                        <x-icon type="info-circle" />
                                         {{ trans('general.no_results') }}
                                     </div>
                                 @endif
@@ -1148,7 +1176,7 @@
                                     </table>
                                 @else
                                     <div class="alert alert-info alert-block">
-                                        <i class="fas fa-info-circle"></i>
+                                        <x-icon type="info-circle" />
                                         {{ trans('general.no_results') }}
                                     </div>
                                 @endif
@@ -1212,7 +1240,7 @@
                                 @else
 
                                     <div class="alert alert-info alert-block">
-                                        <i class="fas fa-info-circle"></i>
+                                        <x-icon type="info-circle" />
                                         {{ trans('general.no_results') }}
                                     </div>
                                 @endif
@@ -1372,11 +1400,11 @@
                                                 <td>
                                                     @if (($file->filename) && (Storage::exists('private_uploads/assets/'.$file->filename)))
                                                         <a href="{{ route('show/assetfile', [$asset->id, $file->id, 'download'=>'true']) }}" class="btn btn-sm btn-default">
-                                                            <i class="fas fa-download" aria-hidden="true"></i>
+                                                            <x-icon type="download" />
                                                         </a>
 
                                                         <a href="{{ route('show/assetfile', [$asset->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>
                                                     @endif
                                                 </td>
@@ -1387,7 +1415,9 @@
                                                 </td>
                                                 <td>
                                                     @can('update', \App\Models\Asset::class)
-                                                        <a class="btn delete-asset btn-sm btn-danger btn-sm" href="{{ route('delete/assetfile', [$asset->id, $file->id]) }}" data-tooltip="true" data-title="Delete" data-content="{{ trans('general.delete_confirm', ['item' => $file->filename]) }}"><i class="fas fa-trash icon-white" aria-hidden="true"></i></a>
+                                                        <a class="btn delete-asset btn-sm btn-danger btn-sm" href="{{ route('delete/assetfile', [$asset->id, $file->id]) }}" data-tooltip="true" data-title="Delete" data-content="{{ trans('general.delete_confirm', ['item' => $file->filename]) }}">
+                                                            <x-icon type="delete" />
+                                                        </a>
                                                     @endcan
                                                 </td>
                                             </tr>
@@ -1398,7 +1428,7 @@
                                 @else
 
                                     <div class="alert alert-info alert-block">
-                                        <i class="fas fa-info-circle"></i>
+                                        <x-icon type="info-circle" />
                                         {{ trans('general.no_results') }}
                                     </div>
                                 @endif
@@ -1474,11 +1504,11 @@
                                                 <td>
                                                     @if (($file->filename) && (Storage::exists('private_uploads/assetmodels/'.$file->filename)))
                                                         <a href="{{ route('show/modelfile', [$asset->model->id, $file->id]) }}" class="btn btn-sm btn-default">
-                                                            <i class="fas fa-download" aria-hidden="true"></i>
+                                                            <x-icon type="download" />
                                                         </a>
 
                                                         <a href="{{ route('show/modelfile', [$asset->model->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>
 
                                                     @endif
@@ -1490,7 +1520,9 @@
                                                 </td>
                                                 <td>
                                                     @can('update', \App\Models\AssetModel::class)
-                                                        <a class="btn delete-asset btn-sm btn-danger btn-sm" href="{{ route('delete/modelfile', [$asset->model->id, $file->id]) }}" data-tooltip="true" data-title="Delete" data-content="{{ trans('general.delete_confirm', ['item' => $file->filename]) }}"><i class="fas fa-trash icon-white" aria-hidden="true"></i></a>
+                                                        <a class="btn delete-asset btn-sm btn-danger btn-sm" href="{{ route('delete/modelfile', [$asset->model->id, $file->id]) }}" data-tooltip="true" data-title="Delete" data-content="{{ trans('general.delete_confirm', ['item' => $file->filename]) }}">
+                                                            <x-icon type="delete" /></i>
+                                                        </a>
                                                     @endcan
                                                 </td>
                                             </tr>
@@ -1501,7 +1533,7 @@
                                 @else
 
                                     <div class="alert alert-info alert-block">
-                                        <i class="fas fa-info-circle"></i>
+                                        <x-icon type="info-circle" />
                                         {{ trans('general.no_results') }}
                                     </div>
                                 @endif
diff --git a/resources/views/kits/checkout.blade.php b/resources/views/kits/checkout.blade.php
index 265329259c..212f72c118 100644
--- a/resources/views/kits/checkout.blade.php
+++ b/resources/views/kits/checkout.blade.php
@@ -33,7 +33,7 @@
                   <div class="col-md-8">
                       <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-end-date="0d" data-date-clear-btn="true">
                           <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="checkout_at" id="checkout_at" value="{{ old('checkout_at') }}">
-                          <span class="input-group-addon"><i class="fas fa-calendar"></i></span>
+                          <span class="input-group-addon"><x-icon type="calendar" /></span>
                       </div>
                       {!! $errors->first('checkout_at', '<span class="alert-msg"><i class="fas fa-times"></i> :message</span>') !!}
                   </div>
@@ -47,7 +47,7 @@
                   <div class="col-md-8">
                       <div class="input-group date col-md-5" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-start-date="0d">
                           <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="expected_checkin" id="expected_checkin" value="{{ old('expected_checkin') }}">
-                          <span class="input-group-addon"><i class="fas fa-calendar"></i></span>
+                          <span class="input-group-addon"><x-icon type="calendar" /></span>
                       </div>
                       {!! $errors->first('expected_checkin', '<span class="alert-msg"><i class="fas fa-times"></i> :message</span>') !!}
                   </div>
@@ -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 2c38e59111..b303362ade 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" class="fa-fw" />
                                         <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" class="fa-fw" />
                                         <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" class="fa-fw" />
                                         <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" class="fa-fw" />
                                         <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" class="fa-fw" />
                                         <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 fa-fw"/>
                                 </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" class="fa-fw"/>
                                     <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" class="fa-fw" />
                                     <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" class="fa-fw" />
                                     <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" class="fa-fw" />
                                     <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="fa-fw"/>
                                 </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" class="fa-fw" />
                                     <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" class="fa-fw" />
                                     <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')
@@ -1010,16 +1014,25 @@ dir="{{ Helper::determineLanguageDirection() }}">
                 // Use element id to find the text element to hide / show
                 var targetElement = e.id+"-to-show";
                 var hiddenElement = e.id+"-to-hide";
+                var audio = new Audio('{{ config('app.url') }}/sounds/lock.mp3');
                 if($(e).hasClass('fa-lock')) {
+                    @if ((isset($user)) && ($user->enable_sounds))
+                        audio.play()
+                    @endif
                     $(e).removeClass('fa-lock').addClass('fa-unlock');
                     // Show the encrypted custom value and hide the element with asterisks
                     document.getElementById(targetElement).style.fontSize = "100%";
                     document.getElementById(hiddenElement).style.display = "none";
+
                 } else {
+                    @if ((isset($user)) && ($user->enable_sounds))
+                        audio.play()
+                    @endif
                     $(e).removeClass('fa-unlock').addClass('fa-lock');
                     // ClipboardJS can't copy display:none elements so use a trick to hide the value
                     document.getElementById(targetElement).style.fontSize = "0px";
                     document.getElementById(hiddenElement).style.display = "";
+
                  }
              }
 
diff --git a/resources/views/layouts/edit-form.blade.php b/resources/views/layouts/edit-form.blade.php
index 2c582ec4b5..dbe010ab3c 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/licenses/edit.blade.php b/resources/views/licenses/edit.blade.php
index b8429a2123..c092324a63 100755
--- a/resources/views/licenses/edit.blade.php
+++ b/resources/views/licenses/edit.blade.php
@@ -87,7 +87,7 @@
     <div class="input-group col-md-4">
         <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true" data-date-clear-btn="true">
             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="expiration_date" id="expiration_date" value="{{ old('expiration_date', ($item->expiration_date) ? $item->expiration_date->format('Y-m-d') : '') }}" maxlength="10">
-            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
         </div>
         {!! $errors->first('expiration_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
     </div>
@@ -101,7 +101,7 @@
     <div class="input-group col-md-4">
         <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-autoclose="true" data-date-clear-btn="true">
             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="termination_date" id="termination_date" value="{{ old('termination_date', ($item->termination_date) ? $item->termination_date->format('Y-m-d') : '') }}" maxlength="10">
-            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
         </div>
         {!! $errors->first('termination_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
     </div>
diff --git a/resources/views/licenses/view.blade.php b/resources/views/licenses/view.blade.php
index aabbdb2608..c20ef87b2d 100755
--- a/resources/views/licenses/view.blade.php
+++ b/resources/views/licenses/view.blade.php
@@ -20,7 +20,7 @@
         <li class="active">
           <a href="#details" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-info-circle fa-2x" aria-hidden="true"></i>
+            <x-icon type="info-circle" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
           </a>
@@ -29,7 +29,7 @@
         <li>
           <a href="#seats" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-              <i class="far fa-list-alt fa-2x" aria-hidden="true"></i>
+              <x-icon type="seats" class="fa-2x" />
               </span>
               <span class="hidden-xs hidden-sm">{{ trans('admin/licenses/form.seats') }}</span>
               <span class="badge badge-secondary">{{ number_format($license->availCount()->count()) }} / {{ number_format($license->seats) }}</span>
@@ -41,7 +41,8 @@
         <li>
           <a href="#files" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="far fa-file fa-2x" aria-hidden="true"></i></span>
+            <x-icon type="files" class="fa-2x" />
+            </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.file_uploads') }}
               {!! ($license->uploads->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($license->uploads->count()).'</badge>' : '' !!}
             </span>
@@ -52,14 +53,15 @@
         <li>
           <a href="#history" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-history fa-2x" aria-hidden="true"></i></span>
+            <x-icon type="history" class="fa-2x" />
+            </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.history') }}</span>
           </a>
         </li>
         
         @can('update', \App\Models\License::class)
           <li class="pull-right"><a href="#" data-toggle="modal" data-target="#uploadFileModal">
-              <i class="fas fa-paperclip" aria-hidden="true"></i> {{ trans('button.upload') }}</a>
+              <x-icon type="paperclip" /> {{ trans('button.upload') }}</a>
           </li>
         @endcan
       </ul>
@@ -97,21 +99,21 @@
                       @endcan
 
                       @if ($license->manufacturer->url)
-                        <br><i class="fas fa-globe-americas" aria-hidden="true"></i> <a href="{{ $license->manufacturer->url }}" rel="noopener">{{ $license->manufacturer->url }}</a>
+                        <br><x-icon type="globe-us" /> <a href="{{ $license->manufacturer->url }}" rel="noopener">{{ $license->manufacturer->url }}</a>
                       @endif
 
                       @if ($license->manufacturer->support_url)
-                        <br><i class="far fa-life-ring" aria-hidden="true"></i>
+                        <br><x-icon type="more-info" />
                         <a href="{{ $license->manufacturer->support_url }}"  rel="noopener">{{ $license->manufacturer->support_url }}</a>
                       @endif
 
                       @if ($license->manufacturer->support_phone)
-                        <br><i class="fas fa-phone" aria-hidden="true"></i>
+                        <br><x-icon type="phone" />
                         <a href="tel:{{ $license->manufacturer->support_phone }}">{{ $license->manufacturer->support_phone }}</a>
                       @endif
 
                       @if ($license->manufacturer->support_email)
-                        <br><i class="far fa-envelope" aria-hidden="true"></i> <a href="mailto:{{ $license->manufacturer->support_email }}">{{ $license->manufacturer->support_email }}</a>
+                        <br><x-icon type="email" /> <a href="mailto:{{ $license->manufacturer->support_email }}">{{ $license->manufacturer->support_email }}</a>
                       @endif
                     </div>
                   </div>
@@ -191,16 +193,16 @@
                         @endcan
 
                           @if ($license->supplier->url)
-                            <br><i class="fas fa-globe-americas" aria-hidden="true"></i> <a href="{{ $license->supplier->url }}" rel="noopener">{{ $license->supplier->url }}</a>
+                            <br><x-icon type="globe-us" /> <a href="{{ $license->supplier->url }}" rel="noopener">{{ $license->supplier->url }}</a>
                           @endif
 
                           @if ($license->supplier->phone)
-                            <br><i class="fas fa-phone" aria-hidden="true"></i>
+                            <br><x-icon type="phone" />
                             <a href="tel:{{ $license->supplier->phone }}">{{ $license->supplier->phone }}</a>
                           @endif
 
                           @if ($license->supplier->email)
-                            <br><i class="far fa-envelope" aria-hidden="true"></i> <a href="mailto:{{ $license->supplier->email }}">{{ $license->supplier->email }}</a>
+                            <br><x-icon type="email" /> <a href="mailto:{{ $license->supplier->email }}">{{ $license->supplier->email }}</a>
                           @endif
 
                           @if ($license->supplier->address)
@@ -529,12 +531,12 @@
                 <td>
                   @if ($file->filename)
                     <a href="{{ route('show.licensefile', [$license->id, $file->id]) }}" class="btn btn-sm btn-default">
-                      <i class="fas fa-download" aria-hidden="true"></i>
+                      <x-icon type="download"/>
                       <span class="sr-only">{{ trans('general.download') }}</span>
                     </a>
 
                     <a href="{{ route('show.licensefile', [$license->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>
 
                   @endif
@@ -542,7 +544,7 @@
                 <td>{{ $file->created_at }}</td>
                 <td>
                   <a class="btn delete-asset btn-danger btn-sm" href="{{ route('delete/licensefile', [$license->id, $file->id]) }}" data-content="{{ trans('general.delete_confirm', ['item' => $file->filename]) }}" data-title="{{ trans('general.delete') }}">
-                    <i class="fas fa-trash icon-white" aria-hidden="true"></i>
+                    <x-icon type="delete" />
                     <span class="sr-only">{{ trans('general.delete') }}</span>
                   </a>
                 </td>
@@ -610,48 +612,64 @@
   <div class="col-md-3">
 
     @can('update', $license)
-      <a href="{{ route('licenses.edit', $license->id) }}" class="btn btn-block btn-primary" style="margin-bottom: 10px;">{{ trans('admin/licenses/general.edit') }}</a>
-      <a href="{{ route('clone/license', $license->id) }}" class="btn btn-block btn-primary" style="margin-bottom: 10px;">{{ trans('admin/licenses/general.clone') }}</a>
+      <a href="{{ route('licenses.edit', $license->id) }}" class="btn btn-warning btn-sm btn-social btn-block hidden-print" style="margin-bottom: 5px;">
+        <x-icon type="edit" />
+        {{ trans('admin/licenses/general.edit') }}
+      </a>
+      <a href="{{ route('clone/license', $license->id) }}" class="btn btn-info btn-block btn-sm btn-social hidden-print" style="margin-bottom: 5px;">
+        <x-icon type="clone" />
+        {{ trans('admin/licenses/general.clone') }}</a>
     @endcan
 
     @can('checkout', $license)
 
       @if ($license->availCount()->count() > 0)
-        <a href="{{ route('licenses.checkout', $license->id) }}" class="btn-block btn bg-maroon" style="margin-bottom: 10px;">
+
+        <a href="{{ route('licenses.checkout', $license->id) }}" class="btn bg-maroon btn-sm btn-social btn-block hidden-print" style="margin-bottom: 5px;">
+          <x-icon type="checkout" />
           {{ trans('general.checkout') }}
         </a>
-        <a href="#" class="btn-block btn bg-maroon" style="margin-bottom: 10px;" data-toggle="modal" data-tooltip="true" title="{{ trans('admin/licenses/general.bulk.checkout_all.enabled_tooltip') }}" data-target="#checkoutFromAllModal">
+
+        <a href="#" class="btn bg-maroon btn-sm btn-social btn-block hidden-print" style="margin-bottom: 5px;" data-toggle="modal" data-tooltip="true" title="{{ trans('admin/licenses/general.bulk.checkout_all.enabled_tooltip') }}" data-target="#checkoutFromAllModal">
+          <x-icon type="checkout" />
           {{ trans('admin/licenses/general.bulk.checkout_all.button') }}
         </a>
 
       @else
-        <a href="{{ route('licenses.checkout', $license->id) }}" class="btn btn-block bg-maroon disabled" style="margin-bottom: 10px;">
-          {{ trans('general.checkout') }}
-        </a>
+          <span data-tooltip="true" title=" {{ trans('admin/licenses/general.bulk.checkout_all.disabled_tooltip') }}">
+          <a href="#" class="btn bg-maroon btn-sm btn-social btn-block hidden-print disabled" style="margin-bottom: 5px;" data-tooltip="true" title="{{ trans('general.checkout') }}">
+            <x-icon type="checkout" />
+            {{ trans('general.checkout') }}
+          </a>
+          </span>
         <span data-tooltip="true" title=" {{ trans('admin/licenses/general.bulk.checkout_all.disabled_tooltip') }}">
-                    <a href="#" class="btn btn-block bg-maroon disabled" style="margin-bottom: 10px;" data-tooltip="true" title="{{ trans('general.checkout') }}">
-                      {{ trans('admin/licenses/general.bulk.checkout_all.button') }}
-                    </a>
-                  </span>
+            <a href="#" class="btn bg-maroon btn-sm btn-social btn-block hidden-print disabled" style="margin-bottom: 5px;" data-tooltip="true" title="{{ trans('general.checkout') }}">
+              <x-icon type="checkout" />
+              {{ trans('admin/licenses/general.bulk.checkout_all.button') }}
+            </a>
+          </span>
       @endif
     @endcan
 
     @can('checkin', $license)
-  
+
       @if (($license->seats - $license->availCount()->count()) <= 0 )
         <span data-tooltip="true" title=" {{ trans('admin/licenses/general.bulk.checkin_all.disabled_tooltip') }}">
-            <a href="#" class="btn btn-block bg-purple disabled" style="margin-bottom: 25px;">
+            <a href="#"  class="btn btn-primary bg-purple btn-sm btn-social btn-block hidden-print disabled"  style="margin-bottom: 25px;">
+              <x-icon type="checkin" />
              {{ trans('admin/licenses/general.bulk.checkin_all.button') }}
             </a>
         </span>
       @elseif (! $license->reassignable)
         <span data-tooltip="true" title=" {{ trans('admin/licenses/general.bulk.checkin_all.disabled_tooltip_reassignable') }}">
-            <a href="#" class="btn btn-block bg-purple disabled" style="margin-bottom: 25px;">
+            <a href="#"  class="btn btn-primary bg-purple btn-sm btn-social btn-block hidden-print disabled"  style="margin-bottom: 25px;">
+              <x-icon type="checkin" />
              {{ trans('admin/licenses/general.bulk.checkin_all.button') }}
             </a>
         </span>
       @else
-        <a href="#" class="btn btn-block bg-purple" style="margin-bottom: 25px;" data-toggle="modal" data-tooltip="true"  data-target="#checkinFromAllModal" data-content="{{ trans('general.sure_to_delete') }} data-title="{{  trans('general.delete') }}" onClick="return false;">
+        <a href="#"  class="btn btn-primary bg-purple btn-sm btn-social btn-block hidden-print" style="margin-bottom: 25px;" data-toggle="modal" data-tooltip="true"  data-target="#checkinFromAllModal" data-content="{{ trans('general.sure_to_delete') }} data-title="{{  trans('general.delete') }}" onClick="return false;">
+          <x-icon type="checkin" />
           {{ trans('admin/licenses/general.bulk.checkin_all.button') }}
         </a>
       @endif
@@ -660,12 +678,14 @@
     @can('delete', $license)
 
       @if ($license->availCount()->count() == $license->seats)
-        <button class="btn btn-block btn-danger delete-asset" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.delete_confirm', ['item' => $license->name]) }}" data-target="#dataConfirmModal">
+        <button class="btn btn-block btn-danger btn-sm btn-social delete-license" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.delete_confirm', ['item' => $license->name]) }}" data-target="#dataConfirmModal">
+          <x-icon type="delete" />
           {{ trans('general.delete') }}
         </button>
       @else
           <span data-tooltip="true" title=" {{ trans('admin/licenses/general.delete_disabled') }}">
-            <a href="#" class="btn btn-block btn-danger disabled">
+            <a href="#" class="btn btn-block btn-danger btn-sm btn-social delete-license disabled">
+              <x-icon type="delete" />
               {{ trans('general.delete') }}
             </a>
           </span>
diff --git a/resources/views/livewire/custom-field-set-default-values-for-model.blade.php b/resources/views/livewire/custom-field-set-default-values-for-model.blade.php
index 7f61db8cea..d2118e5004 100644
--- a/resources/views/livewire/custom-field-set-default-values-for-model.blade.php
+++ b/resources/views/livewire/custom-field-set-default-values-for-model.blade.php
@@ -31,7 +31,7 @@
                                     <div class="input-group col-md-4" style="padding-left: 0px;">
                                         <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd"  data-autoclose="true">
                                             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="default_values[{{ $field->id }}]" id="default-value{{ $field->id }}" value="{{ $field->defaultValue($model_id) }}">
-                                            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                                            <span class="input-group-addon"><x-icon type="calendar" /></span>
                                         </div>
                                     </div>
 
diff --git a/resources/views/livewire/oauth-clients.blade.php b/resources/views/livewire/oauth-clients.blade.php
index 7caf5f6a2f..fdd3b800b6 100644
--- a/resources/views/livewire/oauth-clients.blade.php
+++ b/resources/views/livewire/oauth-clients.blade.php
@@ -3,6 +3,7 @@
 
         <div class="box-header">
                 <h2 class="box-title">
+                    <x-icon type="oauth"/>
                     {{ trans('admin/settings/general.oauth_clients') }}
                 </h2>
                 @if ($authorizationError)
diff --git a/resources/views/livewire/slack-settings-form.blade.php b/resources/views/livewire/slack-settings-form.blade.php
index a5de8585e3..069ddb49fd 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 deab1e7fbd..e75d5f5f73 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/locations/view.blade.php b/resources/views/locations/view.blade.php
index c6aa083bf5..a0d3b8c742 100644
--- a/resources/views/locations/view.blade.php
+++ b/resources/views/locations/view.blade.php
@@ -9,6 +9,10 @@
 @parent
 @stop
 
+@section('header_right')
+<a href="{{ route('locations.index') }}" class="btn btn-primary" style="margin-right: 10px;">
+    {{ trans('general.back') }}</a>
+@endsection
 {{-- Page content --}}
 @section('content')
 
@@ -21,7 +25,7 @@
               <li class="active">
                   <a href="#users" data-toggle="tab">
                         <span class="hidden-lg hidden-md">
-                            <i class="fas fa-users fa-2x"></i>
+                            <x-icon type="users" class="fa-2x" />
                         </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('general.users') }}
@@ -34,7 +38,7 @@
               <li>
                   <a href="#assets" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+                        <x-icon type="assets" class="fa-2x" />
                     </span>
                     <span class="hidden-xs hidden-sm">
                           {{ trans('admin/locations/message.current_location') }}
@@ -47,7 +51,8 @@
               <li>
                   <a href="#rtd_assets" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+
+                        <x-icon type="assets" class="fa-2x" />
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('admin/hardware/form.default_location') }}
@@ -59,7 +64,7 @@
               <li>
                   <a href="#assets_assigned" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+                        <x-icon type="assets" class="fa-2x" />
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('admin/locations/message.assigned_assets') }}
@@ -72,7 +77,7 @@
               <li>
                   <a href="#accessories" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-keyboard fa-2x" aria-hidden="true"></i>
+                        <x-icon type="accessories" class="fa-2x "/>
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('general.accessories') }}
@@ -84,7 +89,7 @@
               <li>
                   <a href="#consumables" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-tint fa-2x" aria-hidden="true"></i>
+                        <x-icon type="consumables" class="fa-2x "/>
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('general.consumables') }}
@@ -96,7 +101,7 @@
               <li>
                   <a href="#components" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-hdd fa-2x" aria-hidden="true"></i>
+                        <x-icon type="components" class="fa-2x "/>
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('general.components') }}
@@ -108,7 +113,7 @@
               <li>
                   <a href="#history" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-hdd fa-2x" aria-hidden="true"></i>
+                        <x-icon type="history" class="fa-2x "/>
                     </span>
                       <span class="hidden-xs hidden-sm">
                           {{ trans('general.history') }}
@@ -381,65 +386,129 @@
 
   <div class="col-md-3">
 
-      <div class="col-md-12">
-          <a href="{{ route('locations.edit', ['location' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-primary pull-left">{{ trans('admin/locations/table.update') }} </a>
-      </div>
-      <div class="col-md-12" style="padding-top: 5px;">
-          <a href="{{ route('locations.print_assigned', ['locationId' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-default pull-left">{{ trans('admin/locations/table.print_assigned') }} </a>
-      </div>
-      <div class="col-md-12" style="padding-top: 5px; padding-bottom: 20px;">
-          <a href="{{ route('locations.print_all_assigned', ['locationId' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-default pull-left">{{ trans('admin/locations/table.print_all_assigned') }} </a>
-      </div>
+      @if ($location->image!='')
+          <div class="col-md-12 text-center" style="padding-bottom: 20px;">
+              <img src="{{ Storage::disk('public')->url('locations/'.e($location->image)) }}" class="img-responsive img-thumbnail" style="width:100%" alt="{{ $location->name }}">
+          </div>
+      @endif
 
+      @if (($location->state!='') && ($location->country!='') && (config('services.google.maps_api_key')))
+          <div class="col-md-12 text-center" style="padding-bottom: 10px;">
+              <img src="https://maps.googleapis.com/maps/api/staticmap?markers={{ urlencode($location->address.','.$location->city.' '.$location->state.' '.$location->country.' '.$location->zip) }}&size=700x500&maptype=roadmap&key={{ config('services.google.maps_api_key') }}" class="img-thumbnail" style="width:100%" alt="Map">
+          </div>
+      @endif
 
-    @if ($location->image!='')
-      <div class="col-md-12 text-center" style="padding-bottom: 20px;">
-        <img src="{{ Storage::disk('public')->url('locations/'.e($location->image)) }}" class="img-responsive img-thumbnail" style="width:100%" alt="{{ $location->name }}">
-      </div>
-    @endif
       <div class="col-md-12">
-        <ul class="list-unstyled" style="line-height: 25px; padding-bottom: 20px;">
-          @if ($location->address!='')
-            <li>{{ $location->address }}</li>
-           @endif
-            @if ($location->address2!='')
-              <li>{{ $location->address2 }}</li>
-            @endif
-            @if (($location->city!='') || ($location->state!='') || ($location->zip!=''))
-              <li>{{ $location->city }} {{ $location->state }} {{ $location->zip }}</li>
-            @endif
-            @if ($location->manager)
-              <li>{{ trans('admin/users/table.manager') }}: {!! $location->manager->present()->nameUrl() !!}</li>
-            @endif
-            @if ($location->parent)
-              <li>{{ trans('admin/locations/table.parent') }}: {!! $location->parent->present()->nameUrl() !!}</li>
-            @endif
+          <ul class="list-unstyled" style="line-height: 20px; padding-bottom: 20px;">
+              @if ($location->address!='')
+                  <li>{{ $location->address }}</li>
+              @endif
+              @if ($location->address2!='')
+                  <li>{{ $location->address2 }}</li>
+              @endif
+              @if (($location->city!='') || ($location->state!='') || ($location->zip!=''))
+                  <li>{{ $location->city }} {{ $location->state }} {{ $location->zip }}</li>
+              @endif
+              @if ($location->manager)
+                  <li>{{ trans('admin/users/table.manager') }}: {!! $location->manager->present()->nameUrl() !!}</li>
+              @endif
+              @if ($location->parent)
+                  <li>{{ trans('admin/locations/table.parent') }}: {!! $location->parent->present()->nameUrl() !!}</li>
+              @endif
               @if ($location->ldap_ou)
                   <li>{{ trans('admin/locations/table.ldap_ou') }}: {{ $location->ldap_ou }}</li>
               @endif
-        </ul>
 
-        @if (($location->state!='') && ($location->country!='') && (config('services.google.maps_api_key')))
-          <div class="col-md-12 text-center">
-            <img src="https://maps.googleapis.com/maps/api/staticmap?markers={{ urlencode($location->address.','.$location->city.' '.$location->state.' '.$location->country.' '.$location->zip) }}&size=700x500&maptype=roadmap&key={{ config('services.google.maps_api_key') }}" class="img-thumbnail" style="width:100%" alt="Map">
-          </div>
-        @endif
+              @if ((($location->address!='') && ($location->city!='')) || ($location->state!='') || ($location->country!=''))
+                      <li>
+                        <a href="https://maps.google.com/?q={{ urlencode($location->address.','. $location->city.','.$location->state.','.$location->country.','.$location->zip) }}" target="_blank">
+                            {!! trans('admin/locations/message.open_map', ['map_provider_icon' => '<i class="fa-brands fa-google" aria-hidden="true"></i>']) !!}
+                            <x-icon type="external-link"/>
+                        </a>
+                      </li>
+                      <li>
+                        <a href="https://maps.apple.com/?q={{ urlencode($location->address.','. $location->city.','.$location->state.','.$location->country.','.$location->zip) }}" target="_blank">
+                            {!! trans('admin/locations/message.open_map', ['map_provider_icon' => '<i class="fa-brands fa-apple" aria-hidden="true" style="font-size: 18px"></i>']) !!}
+                            <x-icon type="external-link"/></a>
+                  </li>
+              @endif
 
+          </ul>
       </div>
 
+      @can('update', $location)
+      <div class="col-md-12">
+          <a href="{{ route('locations.edit', ['location' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-warning btn-social">
+              <x-icon type="edit" />
+              {{ trans('admin/locations/table.update') }}
+          </a>
+      </div>
+      @endcan
+
+      <div class="col-md-12" style="padding-top: 5px;">
+          <a href="{{ route('locations.print_assigned', ['locationId' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print">
+              <x-icon type="print" />
+              {{ trans('admin/locations/table.print_assigned') }}
+          </a>
+      </div>
+      <div class="col-md-12" style="padding-top: 5px;">
+          <a href="{{ route('locations.print_all_assigned', ['locationId' => $location->id]) }}" style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print">
+              <x-icon type="print" />
+              {{ trans('admin/locations/table.print_all_assigned') }}
+          </a>
+      </div>
+
+          @can('delete', $location)
+              <div class="col-md-12 hidden-print" style="padding-top: 10px;">
+
+            @if ($location->deleted_at=='')
+
+                @if ($location->isDeletable())
+                      <button class="btn btn-sm btn-block btn-danger btn-social delete-location" data-toggle="modal" data-title="{{ trans('general.delete') }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $location->name]) }}" data-target="#dataConfirmModal">
+                          <x-icon type="delete" />
+                          {{ trans('general.delete') }}
+                      </button>
+                @else
+                      <a href="#" class="btn btn-block btn-sm btn-danger btn-social hidden-print disabled" data-tooltip="true"  data-placement="top" data-title="{{ trans('general.cannot_be_deleted') }}">
+                          <x-icon type="delete" />
+                          {{ trans('general.delete') }}
+                      </a>
+                @endif
+
+            @else
+                  <form method="POST" action="{{ route('locations.restore', ['location' => $location->id]) }}">
+                      @csrf
+                      <button class="btn btn-sm btn-block btn-warning btn-social delete-asset">
+                          <x-icon type="restore" />
+                          {{ trans('general.restore') }}
+                      </button>
+                  </form>
+            @endif
+              </div>
+    @endcan
+
 
-		
-  </div>
 
-  </div>
 </div>
+</div>
+
 
 @stop
 
 @section('moar_scripts')
+
+    <script>
+        $('#dataConfirmModal').on('show.bs.modal', function (event) {
+            var content = $(event.relatedTarget).data('content');
+            var title = $(event.relatedTarget).data('title');
+            $(this).find(".modal-body").text(content);
+            $(this).find(".modal-header").text(title);
+        });
+    </script>
+
 @include ('partials.bootstrap-table', [
-    'exportFile' => 'locations-export',
-    'search' => true
- ])
+'exportFile' => 'locations-export',
+'search' => true
+])
 
 @stop
diff --git a/resources/views/manufacturers/view.blade.php b/resources/views/manufacturers/view.blade.php
index 5e7bccc633..49e151e459 100644
--- a/resources/views/manufacturers/view.blade.php
+++ b/resources/views/manufacturers/view.blade.php
@@ -35,7 +35,6 @@
         <li class="active">
 
           <a href="#assets" data-toggle="tab">
-
             <span class="hidden-lg hidden-md">
               <i class="fas fa-barcode fa-2x"></i>
             </span>
@@ -43,15 +42,13 @@
                 {{ trans('general.assets') }}
                 {!! ($manufacturer->assets()->AssetsForShow()->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($manufacturer->assets()->AssetsForShow()->count()).'</badge>' : '' !!}
             </span>
-
           </a>
 
         </li>
         <li>
           <a href="#licenses" data-toggle="tab">
-
             <span class="hidden-lg hidden-md">
-              <i class="far fa-save fa-2x"></i>
+               <x-icon type="licenses" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">
               {{ trans('general.licenses') }}
@@ -64,20 +61,19 @@
           <a href="#accessories" data-toggle="tab">
 
              <span class="hidden-lg hidden-md">
-              <i class="far fa-keyboard fa-2x"></i>
+              <x-icon type="accessories" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">
               {{ trans('general.accessories') }}
               {!! ($manufacturer->accessories->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($manufacturer->accessories->count()).'</badge>' : '' !!}
             </span>
-
           </a>
         </li>
         <li>
           <a href="#consumables" data-toggle="tab">
 
              <span class="hidden-lg hidden-md">
-              <i class="fas fa-tint fa-2x"></i>
+               <x-icon type="consumables" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">
               {{ trans('general.consumables') }}
diff --git a/resources/views/models/bulk-delete.blade.php b/resources/views/models/bulk-delete.blade.php
index 570be2bce8..79b41b2064 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 91b9e5f882..8a053b048f 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/models/custom_fields_form.blade.php b/resources/views/models/custom_fields_form.blade.php
index d3773f97c7..8d414f337d 100644
--- a/resources/views/models/custom_fields_form.blade.php
+++ b/resources/views/models/custom_fields_form.blade.php
@@ -47,7 +47,7 @@
                         <div class="input-group col-md-5" style="padding-left: 0px;">
                             <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-autoclose="true" data-date-clear-btn="true">
                                 <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="{{ $field->db_column_name() }}" id="{{ $field->db_column_name() }}" readonly value="{{ old($field->db_column_name(),(isset($item) ? Helper::gracefulDecrypt($field, $item->{$field->db_column_name()}) : $field->defaultValue($model->id))) }}"  style="background-color:inherit">
-                                <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                                <span class="input-group-addon"><x-icon type="calendar" /></span>
                             </div>
                         </div>
 
diff --git a/resources/views/models/custom_fields_form_bulk_edit.blade.php b/resources/views/models/custom_fields_form_bulk_edit.blade.php
index 251ec8478f..e048b38d09 100644
--- a/resources/views/models/custom_fields_form_bulk_edit.blade.php
+++ b/resources/views/models/custom_fields_form_bulk_edit.blade.php
@@ -63,7 +63,7 @@
             <div class="input-group col-md-5" style="padding-left: 0px;">
                 <div class="input-group date" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-autoclose="true" data-date-clear-btn="true">
                     <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="{{ $field->db_column_name() }}" id="{{ $field->db_column_name() }}" readonly value="{{ old($field->db_column_name(),(isset($item) ? Helper::gracefulDecrypt($field, $item->{$field->db_column_name()}) : $field->defaultValue($model->id))) }}"  style="background-color:inherit">
-                    <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+                    <span class="input-group-addon"><x-icon type="calendar" /></span>
                 </div>
             </div>
 
diff --git a/resources/views/models/view.blade.php b/resources/views/models/view.blade.php
index 7192e1edae..d38b63264e 100755
--- a/resources/views/models/view.blade.php
+++ b/resources/views/models/view.blade.php
@@ -41,9 +41,9 @@
                         <span class="hidden-lg hidden-md">
                           <i class="fas fa-barcode fa-2x"></i>
                         </span>
-                                    <span class="hidden-xs hidden-sm">
-                                        {{ trans('general.assets') }}
-                                        {!! ($model->assets()->AssetsForShow()->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($model->assets()->AssetsForShow()->count()).'</badge>' : '' !!}
+                        <span class="hidden-xs hidden-sm">
+                            {{ trans('general.assets') }}
+                            {!! ($model->assets()->AssetsForShow()->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($model->assets()->AssetsForShow()->count()).'</badge>' : '' !!}
                         </span>
                     </a>
                 </li>
@@ -62,7 +62,7 @@
                 </li>
                 <li class="pull-right">
                     <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-                        <i class="fas fa-paperclip" aria-hidden="true"></i>
+                        <x-icon type="paperclip" />
                         {{ trans('button.upload') }}
                     </a>
                 </li>
@@ -173,7 +173,7 @@
                                                     </a>
 
                                                     <a href="{{ route('show/modelfile', [$model->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>
 
                                                 @endif
@@ -268,7 +268,7 @@
 
                         @if ($model->manufacturer->support_url)
                             <li>
-                                <i class="far fa-life-ring"></i> <a href="{{ $model->manufacturer->support_url }}">{{ $model->manufacturer->support_url }}</a>
+                                <x-icon type="more-info" /> <a href="{{ $model->manufacturer->support_url }}">{{ $model->manufacturer->support_url }}</a>
                             </li>
                         @endif
 
@@ -332,39 +332,47 @@
         </div>
             @can('update', \App\Models\AssetModel::class)
             <div class="col-md-12" style="padding-bottom: 5px;">
-                <a href="{{ route('models.edit', $model->id) }}" style="width: 100%;" class="btn btn-sm btn-primary hidden-print">{{ trans('admin/models/table.edit') }}</a>
+                <a href="{{ route('models.edit', $model->id) }}" style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print">
+                    <x-icon type="edit" />
+                    {{ trans('admin/models/table.edit') }}
+                </a>
             </div>
             @endcan
 
             @can('create', \App\Models\AssetModel::class)
             <div class="col-md-12" style="padding-bottom: 5px;">
-                <a href="{{ route('models.clone.create', $model->id) }}" style="width: 100%;" class="btn btn-sm btn-primary hidden-print">{{ trans('admin/models/table.clone') }}</a>
+                <a href="{{ route('models.clone.create', $model->id) }}" style="width: 100%;" class="btn btn-sm btn-info btn-social hidden-print">
+                    <x-icon type="clone" />
+                    {{ trans('admin/models/table.clone') }}
+                </a>
             </div>
             @endcan
 
             @can('delete', \App\Models\AssetModel::class)
-                @if ($model->assets_count > 0)
-                    <div class="col-md-12" style="padding-bottom: 5px;">
-                        <button class="btn btn-block btn-sm btn-primary hidden-print disabled" data-tooltip="true"  data-placement="top" data-title="{{ trans('general.cannot_be_deleted') }}">{{ trans('general.delete') }}</button>
-                    </div>
-                @else
+                <div class="col-md-12" style="padding-top: 10px;">
 
+                    @if ($model->deleted_at!='')
+                        <form method="POST" action="{{ route('models.restore.store', $model->id) }}">
+                            @csrf
+                            <button style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print">
+                                <x-icon type="restore" />
+                                {{ trans('button.restore') }}
+                            </button>
+                        </form>
+                    @elseif ($model->assets()->count() > 0)
+                        <button class="btn btn-block btn-sm btn-danger btn-social hidden-print disabled" data-tooltip="true"  data-placement="top" data-title="{{ trans('general.cannot_be_deleted') }}">
+                            <x-icon type="delete" />
+                            {{ trans('general.delete') }}
+                        </button>
+                    @else
+                        <button class="btn btn-block btn-sm btn-danger btn-social delete-asset" data-toggle="modal" title="{{ trans('general.delete_what', ['item'=> trans('general.asset_model')]) }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $model->name]) }}" data-target="#dataConfirmModal" data-tooltip="true"  data-placement="top" data-title="{{ trans('general.delete_what', ['item'=> trans('general.asset_model')]) }}">
+                            <x-icon type="delete" />
+                            {{ trans('general.delete') }}
+                        </button>
+                </div>
                 @endif
-
-
-               <div class="text-center col-md-12" style="padding-top: 30px; padding-bottom: 30px;">
-                @if  ($model->deleted_at!='')
-                    <form method="POST" action="{{ route('models.restore.store', $model->id) }}">
-                        @csrf
-                        <button style="width: 100%;" class="btn btn-sm btn-warning hidden-print">{{ trans('button.restore') }}</button>
-                    </form>
-                @else
-                    <button class="btn btn-block btn-sm btn-danger delete-asset" data-toggle="modal" title="{{ trans('general.delete_what', ['item'=> trans('general.asset_model')]) }}" data-content="{{ trans('general.sure_to_delete_var', ['item' => $model->name]) }}" data-target="#dataConfirmModal" data-tooltip="true"  data-placement="top" data-title="{{ trans('general.delete_what', ['item'=> trans('general.asset_model')]) }}">{{ trans('general.delete') }} </button>
-                    <span class="sr-only">{{ trans('general.delete') }}</span>
-                @endif
-               </div>
-
            @endcan
+
         </div>
 </div> <!-- /.row -->
 
diff --git a/resources/views/partials/bootstrap-table.blade.php b/resources/views/partials/bootstrap-table.blade.php
index 837a95b3be..f24552d753 100644
--- a/resources/views/partials/bootstrap-table.blade.php
+++ b/resources/views/partials/bootstrap-table.blade.php
@@ -78,7 +78,7 @@
                 return newParams;
             },
             formatLoadingMessage: function () {
-                return '<h2><i class="fas fa-spinner fa-spin" aria-hidden="true"></i> {{ trans('general.loading') }} </h2>';
+                return '<h2><x-icon type="spinner" /> {{ trans('general.loading') }} </h2>';
             },
             icons: {
                 advancedSearchIcon: 'fas fa-search-plus',
@@ -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>';
@@ -556,7 +556,7 @@
                     } else if (row.custom_fields[field_column_plain].field_format=='BOOLEAN') {
                         return (row.custom_fields[field_column_plain].value == 1) ? "<span class='fas fa-check-circle' style='color:green'>" : "<span class='fas fa-times-circle' style='color:red' />";
                     } else if (row.custom_fields[field_column_plain].field_format=='EMAIL') {
-                        return '<a href="mailto:' + row.custom_fields[field_column_plain].value + '" style="white-space: nowrap" data-tooltip="true" title="{{ trans('general.send_email') }}"><i class="fa-regular fa-envelope" aria-hidden="true"></i> ' + row.custom_fields[field_column_plain].value + '</a>';
+                        return '<a href="mailto:' + row.custom_fields[field_column_plain].value + '" style="white-space: nowrap" data-tooltip="true" title="{{ trans('general.send_email') }}"><x-icon type="email" /> ' + row.custom_fields[field_column_plain].value + '</a>';
                     }
                 }
                 return row.custom_fields[field_column_plain].value;
@@ -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-right" /> ' + 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>';
         }
     }
 
@@ -664,7 +664,7 @@
     function assetTagLinkFormatter(value, row) {
         if ((row.asset) && (row.asset.id)) {
             if (row.asset.deleted_at!='') {
-                return '<span style="white-space: nowrap;"><i class="fas fa-times text-danger"></i><span class="sr-only">{{ trans('admin/hardware/general.deleted') }}</span> <del><a href="{{ config('app.url') }}/hardware/' + row.asset.id + '" data-tooltip="true" title="{{ trans('admin/hardware/general.deleted') }}">' + row.asset.asset_tag + '</a></del></span>';
+                return '<span style="white-space: nowrap;"><x-icon type="x" class="text-danger" /><span class="sr-only">{{ trans('admin/hardware/general.deleted') }}</span> <del><a href="{{ config('app.url') }}/hardware/' + row.asset.id + '" data-tooltip="true" title="{{ trans('admin/hardware/general.deleted') }}">' + row.asset.asset_tag + '</a></del></span>';
             }
             return '<a href="{{ config('app.url') }}/hardware/' + row.asset.id + '">' + row.asset.asset_tag + '</a>';
         }
@@ -689,7 +689,7 @@
 
         if ((row.asset) && (row.asset.serial)) {
             if (row.asset.deleted_at!='') {
-                return '<span style="white-space: nowrap;"><i class="fas fa-times text-danger"></i><span class="sr-only">deleted</span> <del><a href="{{ config('app.url') }}/hardware/' + row.asset.id + '" data-tooltip="true" title="{{ trans('admin/hardware/general.deleted') }}">' + row.asset.serial + '</a></del></span>';
+                return '<span style="white-space: nowrap;"><x-icon type="x" class="text-danger" /><span class="sr-only">deleted</span> <del><a href="{{ config('app.url') }}/hardware/' + row.asset.id + '" data-tooltip="true" title="{{ trans('admin/hardware/general.deleted') }}">' + row.asset.serial + '</a></del></span>';
             }
             return '<a href="{{ config('app.url') }}/hardware/' + row.asset.id + '">' + row.asset.serial + '</a>';
         }
@@ -698,9 +698,9 @@
 
     function trueFalseFormatter(value) {
         if ((value) && ((value == 'true') || (value == '1'))) {
-            return '<i class="fas fa-check text-success"></i><span class="sr-only">{{ trans('general.true') }}</span>';
+            return '<x-icon type="checkmark" class="text-success" /><span class="sr-only">{{ trans('general.true') }}</span>';
         } else {
-            return '<i class="fas fa-times text-danger"></i><span class="sr-only">{{ trans('general.false') }}</span>';
+            return '<x-icon type="x" class="text-danger" /><span class="sr-only">{{ trans('general.false') }}</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>';
         }
     }
 
@@ -787,7 +787,7 @@
     }
     function downloadFormatter(value) {
         if (value) {
-            return '<a href="' + value + '" target="_blank"><i class="fas fa-download"></i></a>';
+            return '<a href="' + value + '" target="_blank"><x-icon type="download" /></a>';
         }
     }
 
@@ -795,7 +795,7 @@
         if ((value) && (value.url) && (value.inlineable)) {
             return '<a href="' + value.url + '" data-toggle="lightbox" data-type="image"><img src="' + value.url + '" style="max-height: {{ $snipeSettings->thumbnail_max_h }}px; width: auto;" class="img-responsive"></a>';
         } else if ((value) && (value.url)) {
-            return '<a href="' + value.url + '" class="btn btn-default"><i class="fas fa-download"></i></a>';
+            return '<a href="' + value.url + '" class="btn btn-default"><x-icon type="download" /></a>';
         }
     }
 
diff --git a/resources/views/partials/forms/checkout-selector.blade.php b/resources/views/partials/forms/checkout-selector.blade.php
index c24c90d25e..268089a7d2 100644
--- a/resources/views/partials/forms/checkout-selector.blade.php
+++ b/resources/views/partials/forms/checkout-selector.blade.php
@@ -4,7 +4,7 @@
         <div class="btn-group" data-toggle="buttons">
             @if ((isset($user_select)) && ($user_select!='false'))
             <label class="btn btn-default active">
-                <input name="checkout_to_type" value="user" aria-label="checkout_to_type" type="radio" checked="checked"><i class="fas fa-user" aria-hidden="true"></i> {{ trans('general.user') }}
+                <input name="checkout_to_type" value="user" aria-label="checkout_to_type" type="radio" checked="checked"><x-icon type="user" /> {{ trans('general.user') }}
             </label>
             @endif
             @if ((isset($asset_select)) && ($asset_select!='false'))
diff --git a/resources/views/partials/forms/edit/datepicker.blade.php b/resources/views/partials/forms/edit/datepicker.blade.php
index 9d2a714bb7..3bd0200d0a 100644
--- a/resources/views/partials/forms/edit/datepicker.blade.php
+++ b/resources/views/partials/forms/edit/datepicker.blade.php
@@ -4,7 +4,7 @@
     <div class="input-group col-md-4">
         <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="{{ $fieldname }}" id="{{ $fieldname }}" value="{{ old($fieldname, ($item->{$fieldname}) ? date('Y-m-d', strtotime($item->{$fieldname})) : '') }}" readonly style="background-color:inherit" maxlength="10">
-            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
         </div>
         {!! $errors->first($fieldname, '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
     </div>
diff --git a/resources/views/partials/forms/edit/eol_date.blade.php b/resources/views/partials/forms/edit/eol_date.blade.php
index fb461cf44e..c6764a3f7c 100644
--- a/resources/views/partials/forms/edit/eol_date.blade.php
+++ b/resources/views/partials/forms/edit/eol_date.blade.php
@@ -4,7 +4,7 @@
     <div class="input-group col-md-4">
         <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="asset_eol_date" id="asset_eol_date" readonly value="{{  old('asset_eol_date', optional($item->asset_eol_date)->format('Y-m-d') ?? $item->asset_eol_date ?? '')  }}"  style="background-color:inherit" />
-            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
         </div>
         {!! $errors->first('asset_eol_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
     </div>
diff --git a/resources/views/partials/forms/edit/purchase_date.blade.php b/resources/views/partials/forms/edit/purchase_date.blade.php
index 97f81719be..f07387c309 100644
--- a/resources/views/partials/forms/edit/purchase_date.blade.php
+++ b/resources/views/partials/forms/edit/purchase_date.blade.php
@@ -4,7 +4,7 @@
    <div class="input-group col-md-4">
         <div class="input-group date" data-provide="datepicker" data-date-clear-btn="true" data-date-format="yyyy-mm-dd"  data-autoclose="true">
             <input type="text" class="form-control" placeholder="{{ trans('general.select_date') }}" name="purchase_date" id="purchase_date" readonly value="{{  old('purchase_date', ($item->purchase_date) ? $item->purchase_date->format('Y-m-d') : '') }}" style="background-color:inherit">
-            <span class="input-group-addon"><i class="fas fa-calendar" aria-hidden="true"></i></span>
+            <span class="input-group-addon"><x-icon type="calendar" /></span>
        </div>
        {!! $errors->first('purchase_date', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-times" aria-hidden="true"></i> :message</span>') !!}
    </div>
diff --git a/resources/views/partials/forms/edit/submit-button.blade.php b/resources/views/partials/forms/edit/submit-button.blade.php
index f0b18073d2..7f2a99bfa8 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 3d132b6e16..ba63f79581 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/partials/more-info.blade.php b/resources/views/partials/more-info.blade.php
index bc2e56a3ab..370eb350dc 100644
--- a/resources/views/partials/more-info.blade.php
+++ b/resources/views/partials/more-info.blade.php
@@ -1,3 +1,4 @@
 <a style="padding-left: 10px; font-size: 18px;" class="text-dark-gray hidden-print" data-trigger="focus" tabindex="0" role="button" data-toggle="popover" title="{{ trans('general.more_info') }}" data-placement="right" data-html="true" data-content="{{ (isset($helpText)) ? $helpText : 'Help Info Missing'  }}">
-    <i class="far fa-life-ring" aria-hidden="true"><span class="sr-only">{{ trans('general.moreinfo') }}</span></i>
+    <x-icon type="more-info" />
+    <span class="sr-only">{{ trans('general.moreinfo') }}</span>
 </a>
diff --git a/resources/views/reports/activity.blade.php b/resources/views/reports/activity.blade.php
index 6ed55dc163..d677386ac2 100644
--- a/resources/views/reports/activity.blade.php
+++ b/resources/views/reports/activity.blade.php
@@ -9,7 +9,10 @@
 @section('header_right')
     {{ Form::open(['method' => 'post', 'class' => 'form-horizontal']) }}
     {{csrf_field()}}
-    <button type="submit" class="btn btn-default"><i class="fas fa-download icon-white" aria-hidden="true"></i> {{ trans('general.download_all') }}</button>
+    <button type="submit" class="btn btn-default">
+        <x-icon type="download" />
+        {{ trans('general.download_all') }}
+    </button>
     {{ Form::close() }}
 @stop
 
diff --git a/resources/views/settings/alerts.blade.php b/resources/views/settings/alerts.blade.php
index 870692f1f5..edbf1be839 100644
--- a/resources/views/settings/alerts.blade.php
+++ b/resources/views/settings/alerts.blade.php
@@ -32,7 +32,7 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-bell"></i> {{ trans('admin/settings/general.alerts') }}
+                        <x-icon type="bell"/> {{ trans('admin/settings/general.alerts') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -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 858ad718cb..020d97a756 100644
--- a/resources/views/settings/asset_tags.blade.php
+++ b/resources/views/settings/asset_tags.blade.php
@@ -32,8 +32,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-list-ol"></i> {{ trans('general.asset_tags') }}
-                    </h4>
+                        <x-icon type="asset-tags"/> {{ trans('general.asset_tags') }}
+                    </h2>
                 </div>
                 <div class="box-body">
 
@@ -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/backups.blade.php b/resources/views/settings/backups.blade.php
index d090daf3bb..4d33552b8f 100644
--- a/resources/views/settings/backups.blade.php
+++ b/resources/views/settings/backups.blade.php
@@ -113,7 +113,7 @@
     <div class="box box-default">
       <div class="box-header with-border">
         <h2 class="box-title">
-          <i class="far fa-file-archive" aria-hidden="true"></i>
+            <x-icon type="backups"/>
           {{ trans('admin/settings/general.backups_upload') }}
         </h2>
         <div class="box-tools pull-right">
@@ -144,13 +144,16 @@
           
              <!-- displayed on screen -->
             <label class="btn btn-default col-md-12 col-xs-12" aria-hidden="true">
-              <i class="fas fa-paperclip" aria-hidden="true"></i>
+              <x-icon type="paperclip" />
                 {{ trans('button.select_file')  }}
                 <input type="file" name="file" class="js-uploadFile" id="uploadFile" data-maxsize="{{ Helper::file_upload_max_size() }}" accept="application/zip" style="display:none;" aria-label="file" aria-hidden="true">
             </label>
         </div>
         <div class="col-md-4 col-xs-4">
-            <button class="btn btn-primary col-md-12 col-xs-12" id="uploadButton" disabled>{{ trans('button.upload') }} <span id="uploadIcon"></span></button>
+            <button class="btn btn-primary col-md-12 col-xs-12" id="uploadButton" disabled>
+                {{ trans('button.upload') }}
+                <span id="uploadIcon"></span>
+            </button>
         </div>
         <div class="col-md-12">
           
@@ -170,7 +173,8 @@
     <div class="box box-warning">
       <div class="box-header with-border">
         <h2 class="box-title">
-          <i class="fas fa-exclamation-triangle text-orange" aria-hidden="true"></i> {{ trans('admin/settings/general.backups_restoring') }}</h2>
+            <x-icon type="warning" class="text-orange"/> {{ trans('admin/settings/general.backups_restoring') }}
+        </h2>
         <div class="box-tools pull-right">
         </div>
       </div><!-- /.box-header -->
diff --git a/resources/views/settings/barcodes.blade.php b/resources/views/settings/barcodes.blade.php
index 66e223f85f..970f1d4f99 100644
--- a/resources/views/settings/barcodes.blade.php
+++ b/resources/views/settings/barcodes.blade.php
@@ -32,7 +32,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-barcode" aria-hidden="true"></i> {{ trans('admin/settings/general.barcodes') }}
+                        <x-icon type="assets"/>
+                        {{ trans('admin/settings/general.barcodes') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -141,7 +142,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 4f984b4d4a..c586917ef5 100644
--- a/resources/views/settings/branding.blade.php
+++ b/resources/views/settings/branding.blade.php
@@ -32,7 +32,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-copyright"></i> {{ trans('admin/settings/general.brand') }}
+                        <x-icon type="branding"/>
+                         {{ trans('admin/settings/general.brand') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -310,7 +311,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 99ed0ddd44..c800b26ac9 100644
--- a/resources/views/settings/general.blade.php
+++ b/resources/views/settings/general.blade.php
@@ -29,7 +29,7 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-wrench" aria-hidden="true"></i>
+                        <x-icon type="general-settings"/>
                         {{ trans('admin/settings/general.general_settings') }}
                     </h2>
                 </div>
@@ -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 d9a4c4c622..83e88b936f 100644
--- a/resources/views/settings/google.blade.php
+++ b/resources/views/settings/google.blade.php
@@ -27,7 +27,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fa-brands fa-google"></i> {{ trans('admin/settings/general.google_login') }}
+                        <x-icon type="google"/>
+                        {{ trans('admin/settings/general.google_login') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -104,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-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/index.blade.php b/resources/views/settings/index.blade.php
index ac7095814b..5a4c91c446 100755
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -61,7 +61,7 @@
             <div class="box-body text-center">
               <h5>
               <a href="{{ route('settings.branding.index') }}" class="settings_button">
-                <i class="fas fa-copyright fa-4x" aria-hidden="true"></i>
+                <x-icon type="branding" class="fa-4x"/>
                 <br><br>
                 <span class="name">{{ trans('admin/settings/general.brand') }}</span>
                 <span class="keywords" aria-hidden="true" style="display:none">{{ trans('admin/settings/general.brand_keywords') }}</span>
@@ -78,7 +78,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.general.index') }}" class="settings_button">
-                  <i class="fas fa-wrench fa-4x" aria-hidden="true"></i>
+                  <x-icon type="general-settings" class="fa-4x"/>
                   <br><br>
                   <span class="name"> {{ trans('admin/settings/general.general_settings') }}</span>
                   <span class="keywords" aria-hidden="true" style="display:none">{{ trans('admin/settings/general.general_settings_keywords') }}</span>
@@ -95,7 +95,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.security.index') }}" class="settings_button">
-                  <i class="fas fa-lock fa-4x" aria-hidden="true"></i>
+                  <x-icon type="locked" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.security') }}</span>
                   <span class="keywords" aria-hidden="true" style="display:none">{{ trans('admin/settings/general.security_keywords') }}</span>
@@ -111,7 +111,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('groups.index') }}" class="settings_button">
-                  <i class="fas fa-user-friends fa-4x" aria-hidden="true"></i>
+                  <x-icon type="groups" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('general.groups') }}</span>
                   <span class="keywords" aria-hidden="true" style="display:none"> {{ trans('admin/settings/general.groups_keywords') }}</span>
@@ -128,7 +128,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.localization.index') }}" class="settings_button">
-                  <i class="fas fa-globe-americas fa-4x" aria-hidden="true"></i>
+                  <x-icon type="globe-us" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.localization') }}</span>
                   <span class="keywords" aria-hidden="true" style="display:none"> {{ trans('admin/settings/general.localization_keywords') }}</span>
@@ -146,7 +146,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.alerts.index') }}" class="settings_button">
-                  <i class="fas fa-bell fa-4x" aria-hidden="true"></i>
+                  <x-icon type="bell" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.notifications') }}</span>
 
@@ -162,7 +162,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.slack.index') }}" class="settings_button">
-                  <i class="fa-solid fa-hashtag fa-4x" aria-hidden="true"></i>
+                  <x-icon type="hashtag" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.integrations') }}</span>
                 </a>
@@ -177,7 +177,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.asset_tags.index') }}" class="settings_button">
-                  <i class="fas fa-list-ol fa-4x" aria-hidden="true"></i>
+                  <x-icon type="asset-tags" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('general.asset_tags') }}</span>
                 </a>
@@ -192,7 +192,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.barcodes.index') }}" class="settings_button">
-                  <i class="fas fa-barcode fa-4x" aria-hidden="true"></i>
+                  <x-icon type="assets" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.barcodes') }}</span>
                 </a>
@@ -207,7 +207,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.labels.index') }}" class="settings_button">
-                  <i class="fas fa-tags fa-4x" aria-hidden="true"></i>
+                  <x-icon type="labels" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.labels') }}</span>
                 </a>
@@ -223,7 +223,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.ldap.index') }}" class="settings_button">
-                  <i class="fas fa-sitemap fa-4x" aria-hidden="true"></i>
+                  <x-icon type="ldap" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.ldap') }}</span>
                 </a>
@@ -238,7 +238,7 @@
           <div class="box-body text-center">
             <h5>
               <a href="{{ route('settings.google.index') }}" class="settings_button">
-                <i class="fa-brands fa-google fa-4x" aria-hidden="true"></i>
+                <x-icon type="google" class="fa-4x"/>
                 <br><br>
                 <span class="name">Google</span>
               </a>
@@ -253,7 +253,7 @@
           <div class="box-body text-center">
             <h5>
               <a href="{{ route('settings.saml.index') }}" class="settings_button">
-                <i class="fas fa-sign-in-alt fa-4x" aria-hidden="true"></i>
+                <x-icon type="saml" class="fa-4x"/>
                 <br><br>
                 <span class="name">{{ trans('admin/settings/general.saml') }}</span>
               </a>
@@ -268,7 +268,7 @@
             <div class="box-body text-center">
               <h5>
                 <a href="{{ route('settings.backups.index') }}" class="settings_button">
-                  <i class="fas fa-file-archive fa-4x" aria-hidden="true"></i>
+                  <x-icon type="backups" class="fa-4x"/>
                   <br><br>
                   <span class="name">{{ trans('admin/settings/general.backups') }}</span>
                 </a>
@@ -284,7 +284,7 @@
           <div class="box-body text-center">
             <h5>
               <a href="{{ route('settings.logins.index') }}" class="settings_button">
-                <i class="fas fa-crosshairs fa-4x" aria-hidden="true"></i>
+                <x-icon type="logins" class="fa-4x"/>
                 <br><br>
                 <span class="name">{{ trans('admin/settings/general.login') }}</span>
               </a>
@@ -299,7 +299,7 @@
             <div class="box-body text-center">
               <h5>
               <a href="{{ route('settings.oauth.index') }}" class="settings_button">
-                <i class="fas fa-user-secret fa-4x" aria-hidden="true"></i>
+                <x-icon type="oauth" class="fa-4x"/>
                 <br><br>
                 <span class="name">{{  trans('admin/settings/general.oauth') }}</span>
               </a>
diff --git a/resources/views/settings/labels.blade.php b/resources/views/settings/labels.blade.php
index 058446e746..33640edbf2 100644
--- a/resources/views/settings/labels.blade.php
+++ b/resources/views/settings/labels.blade.php
@@ -27,11 +27,11 @@
     <div class="row">
         <div class="col-sm-10 col-sm-offset-1 col-md-10">
 
-
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-tags"></i> {{ trans('admin/settings/general.labels') }}
+                        <x-icon type="labels"/>
+                        {{ trans('admin/settings/general.labels') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -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 d7b703e54d..0c9faf8c2e 100644
--- a/resources/views/settings/ldap.blade.php
+++ b/resources/views/settings/ldap.blade.php
@@ -60,7 +60,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-sitemap"></i> {{ trans('admin/settings/general.ldap_ad') }}
+                        <x-icon type="ldap"/>
+                        {{ trans('admin/settings/general.ldap_ad') }}
                     </h4>
                 </div>
                 <div class="box-body">
@@ -594,7 +595,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 71067a80fa..d8f3e436e3 100644
--- a/resources/views/settings/localization.blade.php
+++ b/resources/views/settings/localization.blade.php
@@ -32,7 +32,7 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-globe-americas" aria-hidden="true"></i> {{ trans('admin/settings/general.localization') }}
+                        <x-icon type="globe-us" /> {{ trans('admin/settings/general.localization') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -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/purge-form.blade.php b/resources/views/settings/purge-form.blade.php
index d0667c0a57..86ad28fc50 100644
--- a/resources/views/settings/purge-form.blade.php
+++ b/resources/views/settings/purge-form.blade.php
@@ -18,7 +18,9 @@
         <div class="col-md-8 col-md-offset-2">
             <div class="box box-solid box-danger">
                 <div class="box-header with-border">
-                    <h2 class="box-title"><i class="fas fa-exclamation-triangle"></i> {{ trans('admin/settings/general.purge') }}</h2>
+                    <h2 class="box-title">
+                        <x-icon type="warning"/>
+                        {{ trans('admin/settings/general.purge') }}</h2>
                 </div>
             {{ Form::open(['method' => 'POST', 'files' => false, 'autocomplete' => 'off', 'class' => 'form-horizontal', 'role' => 'form' ]) }}
             <!-- CSRF Token -->
diff --git a/resources/views/settings/saml.blade.php b/resources/views/settings/saml.blade.php
index 020124af56..9349023fc8 100644
--- a/resources/views/settings/saml.blade.php
+++ b/resources/views/settings/saml.blade.php
@@ -38,7 +38,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-sign-in-alt"></i> {{ trans('admin/settings/general.saml') }}
+                        <x-icon type="saml"/>
+                         {{ trans('admin/settings/general.saml') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -177,7 +178,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 a071b9a0fb..1b04f7d58a 100644
--- a/resources/views/settings/security.blade.php
+++ b/resources/views/settings/security.blade.php
@@ -27,7 +27,8 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-lock" aria-hidden="true"></i> {{ trans('admin/settings/general.security') }}
+                        <x-icon type="locked"/>
+                        {{ trans('admin/settings/general.security') }}
                     </h2>
                 </div>
                 <div class="box-body">
@@ -180,7 +181,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/suppliers/view.blade.php b/resources/views/suppliers/view.blade.php
index a0dea958e6..08e0910a44 100755
--- a/resources/views/suppliers/view.blade.php
+++ b/resources/views/suppliers/view.blade.php
@@ -31,7 +31,7 @@
             <a href="#assets" data-toggle="tab">
 
                 <span class="hidden-lg hidden-md">
-                    <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+                    <x-icon type="assets" class="fa-2x" />
                 </span>
                 <span class="hidden-xs hidden-sm">
                     {{ trans('general.assets') }}
@@ -44,7 +44,7 @@
           <li>
             <a href="#accessories" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="far fa-keyboard fa-2x" aria-hidden="true"></i>
+                        <x-icon type="accessories" class="fa-2x" />
                     </span>
               <span class="hidden-xs hidden-sm">
                           {{ trans('general.accessories') }}
@@ -56,7 +56,7 @@
           <li>
             <a href="#licenses" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="far fa-save fa-2x" aria-hidden="true"></i>
+                        <x-icon type="licenses" class="fa-2x" />
                     </span>
               <span class="hidden-xs hidden-sm">
                           {{ trans('general.licenses') }}
@@ -68,7 +68,7 @@
             <li>
                 <a href="#components" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="far fa-save fa-2x" aria-hidden="true"></i>
+                        <x-icon type="components" class="fa-2x" />
                     </span>
                     <span class="hidden-xs hidden-sm">
                           {{ trans('general.components') }}
@@ -80,7 +80,7 @@
             <li>
                 <a href="#consumables" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="far fa-save fa-2x" aria-hidden="true"></i>
+                        <x-icon type="consumables" class="fa-2x" />
                     </span>
                     <span class="hidden-xs hidden-sm">
                           {{ trans('general.consumables') }}
@@ -92,7 +92,7 @@
           <li>
             <a href="#maintenances" data-toggle="tab">
                     <span class="hidden-lg hidden-md">
-                        <i class="fas fa-wrench fa-2x"></i>
+                        <x-icon type="maintenances" class="fa-2x" />
                     </span>
               <span class="hidden-xs hidden-sm">
                         {{ trans('admin/asset_maintenances/general.asset_maintenances') }}
@@ -295,7 +295,7 @@
 
           <ul class="list-unstyled" style="line-height: 25px; padding-bottom: 20px; padding-top: 20px;">
               @if ($supplier->contact!='')
-                  <li><i class="fas fa-user" aria-hidden="true"></i> {{ $supplier->contact }}</li>
+                  <li><x-icon type="user" /> {{ $supplier->contact }}</li>
               @endif
               @if ($supplier->phone!='')
                   <li><i class="fas fa-phone"></i>
diff --git a/resources/views/users/bulk-edit.blade.php b/resources/views/users/bulk-edit.blade.php
index b28eb602d2..e1d3b4201a 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 b20c904d99..74fbaf8307 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 f2658cbb68..8a26311344 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)
diff --git a/resources/views/users/edit.blade.php b/resources/views/users/edit.blade.php
index e3f691f158..5f0246d022 100755
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -131,7 +131,7 @@
                     @if (config('app.lock_passwords') && ($user->id))
                         <!-- disallow changing existing usernames on the demo -->
                         <div class="col-md-8 col-md-offset-3">
-                            <p class="text-warning"><i class="fas fa-lock"></i> {{ trans('general.feature_disabled') }}</p>
+                            <p class="text-warning"><x-icon type="lock" /> {{ trans('general.feature_disabled') }}</p>
                         </div>
                     @endif
 
@@ -215,7 +215,7 @@
                                       {{ trans('admin/users/general.activated_help_text') }}
 
                                   </label>
-                                  <p class="text-warning"><i class="fas fa-lock"></i> {{ trans('general.feature_disabled') }}</p>
+                                  <p class="text-warning"><x-icon type="lock" /> {{ trans('general.feature_disabled') }}</p>
 
                               @elseif ($user->id === Auth::user()->id)
                                   <!-- disallow the user from editing their own login status -->
diff --git a/resources/views/users/view.blade.php b/resources/views/users/view.blade.php
index 00bfc84df8..8fbed865ee 100755
--- a/resources/views/users/view.blade.php
+++ b/resources/views/users/view.blade.php
@@ -19,7 +19,7 @@
         <li class="active">
           <a href="#details" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-info-circle fa-2x"></i>
+                <x-icon type="info-circle" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('admin/users/general.info') }}</span>
           </a>
@@ -28,7 +28,7 @@
         <li>
           <a href="#asset" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="fas fa-barcode fa-2x" aria-hidden="true"></i>
+            <x-icon type="assets" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.assets') }}
               {!! ($user->assets()->AssetsForShow()->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->assets()->AssetsForShow()->count()).'</badge>' : '' !!}
@@ -39,7 +39,7 @@
         <li>
           <a href="#licenses" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="far fa-save fa-2x"></i>
+            <x-icon type="licenses" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.licenses') }}
               {!! ($user->licenses->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->licenses->count()).'</badge>' : '' !!}
@@ -50,7 +50,7 @@
         <li>
           <a href="#accessories" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-            <i class="far fa-keyboard fa-2x"></i>
+            <x-icon type="accessories" class="fa-2x" />
             </span> 
             <span class="hidden-xs hidden-sm">{{ trans('general.accessories') }}
               {!! ($user->accessories->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->accessories->count()).'</badge>' : '' !!}
@@ -61,7 +61,7 @@
         <li>
           <a href="#consumables" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-                <i class="fas fa-tint fa-2x"></i>
+                <x-icon type="consumables" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.consumables') }}
               {!! ($user->consumables->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->consumables->count()).'</badge>' : '' !!}
@@ -72,7 +72,7 @@
         <li>
           <a href="#files" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-                <i class="far fa-file fa-2x"></i>
+                <x-icon type="files" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.file_uploads') }}
               {!! ($user->uploads->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->uploads->count()).'</badge>' : '' !!}
@@ -83,7 +83,7 @@
         <li>
           <a href="#history" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-                <i class="fas fa-history fa-2x"></i>
+                <x-icon type="history" class="fa-2x" />
             </span>
             <span class="hidden-xs hidden-sm">{{ trans('general.history') }}</span>
           </a>
@@ -93,7 +93,8 @@
         <li>
           <a href="#managed-locations" data-toggle="tab">
             <span class="hidden-lg hidden-md">
-              <i class="fas fa-map-marker-alt fa-2x"></i></span>
+                <x-icon type="locations" class="fa-2x" />
+            </span>
             <span class="hidden-xs hidden-sm">{{ trans('admin/users/table.managed_locations') }}
               {!! ($user->managedLocations->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->managedLocations->count()).'</badge>' : '' !!}
           </a>
@@ -103,8 +104,9 @@
           @if ($user->managesUsers->count() >= 0 )
               <li>
                   <a href="#managed-users" data-toggle="tab">
-            <span class="hidden-lg hidden-md">
-              <i class="fa-solid fa-users fa-2x"></i></span>
+                    <span class="hidden-lg hidden-md">
+                      <x-icon type="users" class="fa-2x" />
+                    </span>
                       <span class="hidden-xs hidden-sm">{{ trans('admin/users/table.managed_users') }}
                       {!! ($user->managesUsers->count() > 0 ) ? '<badge class="badge badge-secondary">'.number_format($user->managesUsers->count()).'</badge>' : '' !!}
                   </a>
@@ -115,8 +117,8 @@
       @can('update', $user)
           <li class="dropdown pull-right">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-              <span class="hidden-xs"><i class="fas fa-cog" aria-hidden="true"></i></span>
-              <span class="hidden-lg hidden-md hidden-xl"><i class="fas fa-cog fa-2x" aria-hidden="true"></i></span>
+              <span class="hidden-xs"><x-icon type="cog" /></span>
+              <span class="hidden-lg hidden-md hidden-xl"><x-icon type="cog" class="fa-2x" /></span>
               
               <span class="hidden-xs hidden-sm">
                 {{ trans('button.actions') }}
@@ -136,8 +138,8 @@
         @can('update', \App\Models\User::class)
           <li class="pull-right">
               <a href="#" data-toggle="modal" data-target="#uploadFileModal">
-              <span class="hidden-xs"><i class="fas fa-paperclip" aria-hidden="true"></i></span>
-              <span class="hidden-lg hidden-md hidden-xl"><i class="fas fa-paperclip fa-2x" aria-hidden="true"></i></span>
+              <span class="hidden-xs"><x-icon type="paperclip" /></span>
+              <span class="hidden-lg hidden-md hidden-xl"><x-icon type="paperclip" class="fa-2x" /></span>
               <span class="hidden-xs hidden-sm">{{ trans('button.upload') }}</span>
               </a>
           </li>
@@ -152,7 +154,7 @@
             @if ($user->deleted_at!='')
               <div class="col-md-12">
                 <div class="callout callout-warning">
-                  <i class="icon fas fa-exclamation-triangle"></i>
+                    <x-icon type="warning" />
                   {{ trans('admin/users/message.user_deleted_warning') }}
                 </div>
               </div>
@@ -164,10 +166,10 @@
               
 
               <div class="col-md-12 text-center">
-                
+
                  @if (($user->isSuperUser()) || ($user->hasAccess('admin')))
-                    <i class="fas fa-crown fa-2x{{  ($user->isSuperUser()) ? ' text-danger' : ' text-orange'}}"></i>
-                    <div class="{{  ($user->isSuperUser()) ? 'text-danger' : ' text-orange'}}" style="font-weight: bold">{{  ($user->isSuperUser()) ? strtolower(trans('general.superuser')) : strtolower(trans('general.admin')) }}</div>
+                      <x-icon type="superadmin" class="fa-2x {{  ($user->isSuperUser()) ? 'text-danger' : 'text-orange'}}" />
+                        <div class="{{  ($user->isSuperUser()) ? 'text-danger' : ' text-orange'}}" style="font-weight: bold">{{  ($user->isSuperUser()) ? strtolower(trans('general.superuser')) : strtolower(trans('general.admin')) }}</div>
                   @endif
 
                 
@@ -180,20 +182,20 @@
 
               @can('update', $user)
                 <div class="col-md-12">
-                  <a href="{{ route('users.edit', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-primary hidden-print">{{ trans('admin/users/general.edit') }}</a>
+                  <a href="{{ route('users.edit', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print">
+                      <x-icon type="edit" />
+                      {{ trans('admin/users/general.edit') }}
+                  </a>
                 </div>
               @endcan
 
-              @can('create', $user)
-                <div class="col-md-12" style="padding-top: 5px;">
-                  <a href="{{ route('users.clone.show', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-primary hidden-print">{{ trans('admin/users/general.clone') }}</a>
-                </div>
-               @endcan
-
                 @can('view', $user)
                 <div class="col-md-12" style="padding-top: 5px;">
                 @if($user->allAssignedCount() != '0') 
-                  <a href="{{ route('users.print', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-primary hidden-print" target="_blank" rel="noopener">{{ trans('admin/users/general.print_assigned') }}</a>
+                  <a href="{{ route('users.print', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print" target="_blank" rel="noopener">
+                      <x-icon type="print" />
+                      {{ trans('admin/users/general.print_assigned') }}
+                  </a>
                   @else
                   <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_assets_assigned') }}">{{ trans('admin/users/general.print_assigned') }}</button>
                 @endif
@@ -205,12 +207,21 @@
                   @if(!empty($user->email) && ($user->allAssignedCount() != '0'))
                     <form action="{{ route('users.email',['userId'=> $user->id]) }}" method="POST">
                       {{ csrf_field() }}
-                      <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print" rel="noopener">{{ trans('admin/users/general.email_assigned') }}</button>
+                      <button style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print" rel="noopener">
+                          <x-icon type="email" />
+                          {{ trans('admin/users/general.email_assigned') }}
+                      </button>
                     </form>
                   @elseif(!empty($user->email) && ($user->allAssignedCount() == '0'))
-                      <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_assets_assigned') }}">{{ trans('admin/users/general.email_assigned') }}</button>
+                      <button style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_assets_assigned') }}">
+                          <x-icon type="email" />
+                          {{ trans('admin/users/general.email_assigned') }}
+                      </button>
                   @else
-                      <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_email') }}">{{ trans('admin/users/general.email_assigned') }}</button>
+                      <button style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_email') }}">
+                          <x-icon type="email" />
+                          {{ trans('admin/users/general.email_assigned') }}
+                      </button>
                   @endif
                   </div>
                 @endcan
@@ -221,26 +232,48 @@
                     @if($user->email != '')
                       <form action="{{ route('users.password',['userId'=> $user->id]) }}" method="POST">
                           {{ csrf_field() }}
-                      <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print">{{ trans('button.send_password_link') }}</button>
+                      <button style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print">
+                          <x-icon type="password" />
+                          {{ trans('button.send_password_link') }}
+                      </button>
                       </form>
                     @else
-                      <button style="width: 100%;" class="btn btn-sm btn-primary hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_email') }}">{{ trans('button.send_password_link') }}</button> 
+                      <button style="width: 100%;" class="btn btn-sm btn-primary btn-social hidden-print" rel="noopener" disabled title="{{ trans('admin/users/message.user_has_no_email') }}">
+                          <x-icon type="email" />
+                          {{ trans('button.send_password_link') }}
+                      </button>
                     @endif
                   </div>
                   @endif
                 @endcan
 
-                @can('delete', $user)
+                @can('create', $user)
+                    <div class="col-md-12" style="padding-top: 5px;">
+                        <a href="{{ route('users.clone.show', $user->id) }}" style="width: 100%;" class="btn btn-sm btn-info btn-social hidden-print">
+                            <x-icon type="clone" />
+                            {{ trans('admin/users/general.clone') }}
+                        </a>
+                    </div>
+                @endcan
+
+
+            @can('delete', $user)
                   @if ($user->deleted_at=='')
                     <div class="col-md-12" style="padding-top: 30px;">
                         @if ($user->isDeletable())
                           <form action="{{route('users.destroy',$user->id)}}" method="POST">
                             {{csrf_field()}}
                             {{ method_field("DELETE")}}
-                            <button style="width: 100%;" class="btn btn-sm btn-warning hidden-print">{{ trans('button.delete')}}</button>
+                            <button style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print">
+                                <x-icon type="delete" />
+                                {{ trans('button.delete')}}
+                            </button>
                           </form>
                             @else
-                            <button style="width: 100%;" class="btn btn-sm btn-warning hidden-print disabled">{{ trans('button.delete')}}</button>
+                            <button style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print disabled">
+                                <x-icon type="delete" />
+                                {{ trans('button.delete')}}
+                            </button>
                         @endif
                     </div>
                     <div class="col-md-12" style="padding-top: 5px;">
@@ -250,14 +283,20 @@
                         <input type="hidden" name="bulk_actions" value="delete" />
 
                         <input type="hidden" name="ids[{{ $user->id }}]" value="{{ $user->id }}" />
-                        <button style="width: 100%;" class="btn btn-sm btn-danger hidden-print">{{ trans('button.checkin_and_delete') }}</button>
+                        <button style="width: 100%;" class="btn btn-sm btn-danger btn-social hidden-print">
+                            <x-icon type="checkin-and-delete" />
+                            {{ trans('button.checkin_and_delete') }}
+                        </button>
                       </form>
                     </div>
                   @else
                     <div class="col-md-12" style="padding-top: 5px;">
                         <form method="POST" action="{{ route('users.restore.store', $user->id) }}">
                             @csrf
-                            <button style="width: 100%;" class="btn btn-sm btn-warning hidden-print">{{ trans('button.restore') }}</button>
+                            <button style="width: 100%;" class="btn btn-sm btn-warning btn-social hidden-print">
+                                <x-icon type="restore" />
+                                {{ trans('button.restore') }}
+                            </button>
                         </form>
                     </div>
                   @endif
@@ -309,9 +348,9 @@
                       <div class="col-md-9">
 
                         @if ($user->isSuperUser())
-                          <label class="label label-danger" data-tooltip="true" title="{{ trans('general.superuser_tooltip') }}"><i class="fas fa-crown" title="{{ trans('general.superuser') }}"></i></label>&nbsp;
+                          <span class="label label-danger" data-tooltip="true" title="{{ trans('general.superuser_tooltip') }}"><x-icon type="superadmin" title="{{ trans('general.superuser') }}" /></span>&nbsp;
                         @elseif ($user->hasAccess('admin'))
-                          <label class="label label-warning" data-tooltip="true" title="{{ trans('general.admin_tooltip') }}"><i class="fas fa-crown" title="{{ trans('general.admin') }}"></i></label>&nbsp;
+                          <span class="label label-warning" data-tooltip="true" title="{{ trans('general.admin_tooltip') }}"><x-icon type="superadmin" title="{{ trans('general.admin') }}" /></span>&nbsp;
                         @endif
                          {{ $user->username }}
 
@@ -447,7 +486,9 @@
                         {{ trans('admin/users/table.email') }}
                       </div>
                       <div class="col-md-9">
-                        <a href="mailto:{{ $user->email }}" data-tooltip="true" title="{{ trans('general.send_email') }}"><i class="fa-regular fa-envelope" aria-hidden="true"></i> {{ $user->email }}</a>
+                        <a href="mailto:{{ $user->email }}" data-tooltip="true" title="{{ trans('general.send_email') }}">
+                            <x-icon type="email" />
+                            {{ $user->email }}</a>
                       </div>
                     </div>
                     @endif
@@ -459,7 +500,7 @@
                         {{ trans('general.website') }}
                       </div>
                       <div class="col-md-9">
-                          <a href="{{ $user->website }}" target="_blank"><i class="fa fa-external-link" aria-hidden="true"></i> {{ $user->website }}</a>
+                          <a href="{{ $user->website }}" target="_blank"><x-icon type="external-link" /> {{ $user->website }}</a>
                       </div>
                     </div>
                     @endif
@@ -471,7 +512,9 @@
                           {{ trans('admin/users/table.phone') }}
                         </div>
                         <div class="col-md-9">
-                          <a href="tel:{{ $user->phone }}" data-tooltip="true" title="{{ trans('general.call') }}"><i class="fa-solid fa-phone" aria-hidden="true"></i> {{ $user->phone }}</a>
+                          <a href="tel:{{ $user->phone }}" data-tooltip="true" title="{{ trans('general.call') }}">
+                              <x-icon type="phone" />
+                              {{ $user->phone }}</a>
                         </div>
                       </div>
                     @endif
@@ -542,7 +585,13 @@
                         {{ trans('admin/users/general.vip_label') }}
                       </div>
                       <div class="col-md-9">
-                        {!! ($user->vip=='1') ? '<i class="fas fa-check fa-fw fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                          @if ($user->vip=='1')
+                              <x-icon type="checkmark" class="fa-fw text-success" />
+                              {{ trans('general.yes') }}
+                          @else
+                              <x-icon type="x" class="fa-fw text-danger" />
+                              {{ trans('general.no') }}
+                          @endif
                       </div>
                     </div> 
                     
@@ -552,7 +601,13 @@
                         {{ trans('admin/users/general.remote') }}
                       </div>
                       <div class="col-md-9">
-                        {!! ($user->remote=='1') ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                          @if ($user->remote == '1')
+                              <x-icon type="checkmark" class="fa-fw text-success" />
+                              {{ trans('general.yes') }}
+                          @else
+                              <x-icon type="x" class="fa-fw text-danger" />
+                              {{ trans('general.no') }}
+                          @endif
                       </div>
                     </div>
 
@@ -562,7 +617,13 @@
                         {{ trans('general.login_enabled') }}
                       </div>
                       <div class="col-md-9">
-                        {!! ($user->activated=='1') ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                          @if ($user->activated == '1')
+                              <x-icon type="checkmark" class="fa-fw text-success" />
+                              {{ trans('general.yes') }}
+                          @else
+                              <x-icon type="x" class="fa-fw text-danger" />
+                              {{ trans('general.no') }}
+                          @endif
                       </div>
                     </div>
 
@@ -572,7 +633,13 @@
                            {{ trans('general.autoassign_licenses') }}
                        </div>
                        <div class="col-md-9">
-                           {!! ($user->autoassign_licenses=='1') ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                           @if ($user->autoassign_licenses == '1')
+                               <x-icon type="checkmark" class="fa-fw text-success" />
+                               {{ trans('general.yes') }}
+                           @else
+                               <x-icon type="x" class="fa-fw text-danger" />
+                               {{ trans('general.no') }}
+                           @endif
                        </div>
                    </div>
 
@@ -583,7 +650,13 @@
                           LDAP
                       </div>
                       <div class="col-md-9">
-                        {!! ($user->ldap_import=='1') ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                          @if ($user->ldap_import == '1')
+                              <x-icon type="checkmark" class="fa-fw text-success" />
+                              {{ trans('general.yes') }}
+                          @else
+                              <x-icon type="x" class="fa-fw text-danger" />
+                              {{ trans('general.no') }}
+                          @endif
 
                       </div>
                     </div>
@@ -596,8 +669,13 @@
                               {{ trans('admin/users/general.two_factor_active') }}
                             </div>
                             <div class="col-md-9">
-                          
-                              {!! ($user->two_factor_active()) ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                                @if ($user->two_factor_active()) == '1')
+                                    <x-icon type="checkmark" class="fa-fw text-success" />
+                                    {{ trans('general.yes') }}
+                                @else
+                                    <x-icon type="x" class="fa-fw text-danger" />
+                                    {{ trans('general.no') }}
+                                @endif
                           
                             </div>
                           </div>
@@ -608,7 +686,13 @@
                               {{ trans('admin/users/general.two_factor_enrolled') }}
                             </div>
                             <div class="col-md-9" id="two_factor_reset_toggle">
-                              {!! ($user->two_factor_active_and_enrolled()) ? '<i class="fas fa-check fa-fw text-success" aria-hidden="true"></i> '.trans('general.yes') : '<i class="fas fa-times fa-fw text-danger" aria-hidden="true"></i> '.trans('general.no')  !!}
+                                @if ($user->two_factor_active_and_enrolled()) == '1')
+                                <x-icon type="checkmark" class="fa-fw text-success" />
+                                {{ trans('general.yes') }}
+                                @else
+                                    <x-icon type="x" class="fa-fw text-danger" />
+                                    {{ trans('general.no') }}
+                                @endif
 
                             </div>
                           </div>
@@ -632,7 +716,9 @@
                                 <span id="two_factor_resetstatus">
                                 </span>
                                 <br>
-                                <p class="help-block" style="line-height: 1.6;">{{ trans('admin/settings/general.two_factor_reset_help') }}</p>
+                                <p class="help-block" style="line-height: 1.6;">
+                                    {{ trans('admin/settings/general.two_factor_reset_help') }}
+                                </p>
                           
                                 
                               </div>
@@ -663,7 +749,7 @@
                            {{Helper::formatCurrencyOutput($user->getUserTotalCost()->total_user_cost)}}
 
                            <a id="optional_info" class="text-primary">
-                               <i class="fa fa-caret-right fa-2x" id="optional_info_icon"></i>
+                               <x-icon type="caret-right" id="optional_info_icon" /></i>
                                <strong>{{ trans('admin/hardware/form.optional_infos') }}</strong>
                            </a>
                        </div>
@@ -932,7 +1018,7 @@
                                         {{ trans('general.preview_not_available') }}
                                     @endif
                                 @else
-                                    <i class="fa fa-times text-danger" aria-hidden="true"></i>
+                                    <x-icon type="x" class="text-danger" />
                                         {{ trans('general.file_not_found') }}
                                 @endif
                             </td>
@@ -952,12 +1038,12 @@
                                 @if ($file->filename)
                                     @if (Storage::exists('private_uploads/users/'.$file->filename))
                                         <a href="{{ route('show/userfile', [$user->id, $file->id]) }}" class="btn btn-sm btn-default">
-                                            <i class="fas fa-download" aria-hidden="true"></i>
+                                            <x-icon type="download" />
                                             <span class="sr-only">{{ trans('general.download') }}</span>
                                         </a>
 
                                         <a href="{{ route('show/userfile', [$user->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>
                                     @endif
                                 @endif
@@ -965,14 +1051,13 @@
                             <td>{{ $file->created_at }}</td>
 
                             <td>
-                                <a class="btn delete-asset btn-danger btn-sm hidden-print" href="{{ route('userfile.destroy', [$user->id, $file->id]) }}" data-content="Are you sure you wish to delete this file?" data-title="Delete {{ $file->filename }}?">
-                                    <i class="fa fa-trash icon-white" aria-hidden="true"></i>
+                                <a class="btn delete-asset btn-danger btn-sm hidden-print" href="{{ route('userfile.destroy', [$user->id, $file->id]) }}" data-content="Are you sure you wish to delete this file?" data-title="{{ trans('general.delete') }} {{ $file->filename }}?">
+                                    <x-icon type="delete" />
                                     <span class="sr-only">{{ trans('general.delete') }}</span>
                                 </a>
                             </td>
 
 
-
                         </tr>
                     @endforeach
 
@@ -1117,7 +1202,7 @@ $(function () {
     $("#two_factor_resetrow").removeClass('success');
     $("#two_factor_resetrow").removeClass('danger');
     $("#two_factor_resetstatus").html('');
-    $("#two_factor_reseticon").html('<i class="fas fa-spinner spin"></i>');
+    $("#two_factor_reseticon").html('<x-icon type="spinner" />');
     $.ajax({
       url: '{{ route('api.users.two_factor_reset', ['id'=> $user->id]) }}',
       type: 'POST',
@@ -1129,15 +1214,15 @@ $(function () {
       dataType: 'json',
 
       success: function (data) {
-        $("#two_factor_reset_toggle").html('').html('<span class="text-danger"><i class="fas fa-times" aria-hidden="true"></i> {{ trans('general.no') }}</span>');
+        $("#two_factor_reset_toggle").html('').html('<span class="text-danger"><x-icon type="x" /> {{ trans('general.no') }}</span>');
         $("#two_factor_reseticon").html('');
-        $("#two_factor_resetstatus").html('<span class="text-success"><i class="fas fa-check"></i> ' + data.message + '</span>');
+        $("#two_factor_resetstatus").html('<span class="text-success"><x-icon type="checkmark" class="fa-2x" /> ' + data.message + '</span>');
 
       },
 
       error: function (data) {
         $("#two_factor_reseticon").html('');
-        $("#two_factor_reseticon").html('<i class="fas fa-exclamation-triangle text-danger"></i>');
+        $("#two_factor_reseticon").html('<x-icon type="warning" class="text-danger" />');
         $('#two_factor_resetstatus').text(data.message);
       }
 
@@ -1146,7 +1231,7 @@ $(function () {
   });
 
 
-    //binds to onchange event of your input field
+    // binds to onchange event of your input field
     var uploadedFileSize = 0;
     $('#fileupload').bind('change', function() {
       uploadedFileSize = this.files[0].size;
@@ -1179,15 +1264,15 @@ $(function () {
                 var errorMessage = data.jqXHR.responseJSON.messages["file.0"];
                 $('#progress-bar-text').html(errorMessage[0]);
                 $('.progress-bar').removeClass('progress-bar-warning').addClass('progress-bar-danger').css('width','100%');
-                $('.progress-checkmark').fadeIn('fast').html('<i class="fas fa-times fa-3x icon-white" style="color: #d9534f"></i>');
+                $('.progress-checkmark').fadeIn('fast').html('<x-icon type="xt" class="fa-3x text-danger" />');
             } else {
                 $('.progress-bar').removeClass('progress-bar-warning').addClass('progress-bar-success').css('width','100%');
                 $('.progress-checkmark').fadeIn('fast');
                 $('#progress-container').delay(950).css('visibility', 'visible');
                 $('.progress-bar-text').html('Finished!');
-                $('.progress-checkmark').fadeIn('fast').html('<i class="fas fa-check fa-3x icon-white" style="color: green"></i>');
+                $('.progress-checkmark').fadeIn('fast').html('<x-icon type="checkmark" class="fa-3x text-success" />');
                 $.each(data.result, function (index, file) {
-                    $('<tr><td>' + file.note + '</td><<td>' + file.filename + '</td></tr>').prependTo("#files-table > tbody");
+                    $('<tr><td>' + file.note + '</td><td>' + file.filename + '</td></tr>').prependTo("#files-table > tbody");
                 });
             }
             $('#progress').removeClass('active');
diff --git a/routes/web.php b/routes/web.php
index f2534c5062..f3ba8350f2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -66,6 +66,11 @@ Route::group(['middleware' => 'auth'], function () {
             [LocationsController::class, 'postBulkDeleteStore']
         )->name('locations.bulkdelete.store');
 
+        Route::post(
+            '{location}/restore',
+            [LocationsController::class, 'postRestore']
+        )->name('locations.restore');
+
 
         Route::get('{locationId}/clone',
             [LocationsController::class, 'getClone']
diff --git a/tests/Unit/AssetTest.php b/tests/Unit/AssetTest.php
index ef0da1a1b8..d0f3af6233 100644
--- a/tests/Unit/AssetTest.php
+++ b/tests/Unit/AssetTest.php
@@ -146,10 +146,8 @@ class AssetTest extends TestCase
 
         $this->assertTrue($a->save());
         $this->assertTrue($b->save());
-        \Log::error("A asset tag is: " . $a->asset_tag);
         $matches = [];
         preg_match('/\d+/', $a->asset_tag, $matches);
-        \Log::error("digits are: " . $matches[0]);
         $this->assertEquals(Setting::getSettings()->next_auto_tag_base, $matches[0] + 1, "Next auto increment number should be the last normally-saved one plus one, but isn't");
     }