diff --git a/app/Helpers/IconHelper.php b/app/Helpers/IconHelper.php
new file mode 100644
index 000000000000..fec951791385
--- /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 4421829f489e..b6bb34738d70 100755
--- a/app/Http/Controllers/AssetModelsController.php
+++ b/app/Http/Controllers/AssetModelsController.php
@@ -233,7 +233,7 @@ public function getRestore($id) : RedirectResponse
 
             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 c498f0992602..f32e6b8489d5 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 @@ public function destroy($locationId) : RedirectResponse
      */
     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 @@ public function getClone($locationId = null) : View | RedirectResponse
     }
 
 
+    /**
+     * 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 b86135f33b8d..e55cb00c2e26 100644
--- a/app/Presenters/AssetPresenter.php
+++ b/app/Presenters/AssetPresenter.php
@@ -579,6 +579,6 @@ public function viewUrl()
 
     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 7603191fc15e..bcb77c7eba8f 100644
--- a/app/Presenters/CompanyPresenter.php
+++ b/app/Presenters/CompanyPresenter.php
@@ -65,40 +65,46 @@ public static function dataTableLayout()
                 '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 50a8b73b541f..6905385615ad 100644
--- a/app/Presenters/DepreciationReportPresenter.php
+++ b/app/Presenters/DepreciationReportPresenter.php
@@ -394,6 +394,6 @@ public function viewUrl()
 
     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 56d710ac969e..d6bbe0db11db 100644
--- a/app/Presenters/LocationPresenter.php
+++ b/app/Presenters/LocationPresenter.php
@@ -235,7 +235,7 @@ public function viewUrl()
 
     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 3e36cbcde030..07a22c9ea483 100644
--- a/app/Presenters/ManufacturerPresenter.php
+++ b/app/Presenters/ManufacturerPresenter.php
@@ -94,36 +94,36 @@ public static function dataTableLayout()
                 '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 7054676a9373..635eaa86aa3f 100644
--- a/app/Presenters/UserPresenter.php
+++ b/app/Presenters/UserPresenter.php
@@ -492,6 +492,6 @@ public function viewUrl()
 
     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 060d82d5254f..bc74b4dd0547 100755
--- a/config/app.php
+++ b/config/app.php
@@ -372,7 +372,9 @@
         '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 f70346905038..7f575c30ea68 100644
--- a/public/css/build/app.css
+++ b/public/css/build/app.css
@@ -1006,6 +1006,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;
   line-height: 0.75 !important;
@@ -1021,6 +1022,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 {
   display: inline-block;
   font-size: 20px;
@@ -1074,6 +1076,11 @@ th.css-location > .th-inner::before {
   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;
   padding-right: 15px;
diff --git a/public/css/build/overrides.css b/public/css/build/overrides.css
index d8169245b62e..8062628551e1 100644
--- a/public/css/build/overrides.css
+++ b/public/css/build/overrides.css
@@ -639,6 +639,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;
   line-height: 0.75 !important;
@@ -654,6 +655,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 {
   display: inline-block;
   font-size: 20px;
@@ -707,6 +709,11 @@ th.css-location > .th-inner::before {
   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;
   padding-right: 15px;
diff --git a/public/css/dist/all.css b/public/css/dist/all.css
index 8957c009958b..9b24bf7bb849 100644
--- a/public/css/dist/all.css
+++ b/public/css/dist/all.css
@@ -21978,6 +21978,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;
   line-height: 0.75 !important;
@@ -21993,6 +21994,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 {
   display: inline-block;
   font-size: 20px;
@@ -22046,6 +22048,11 @@ th.css-location > .th-inner::before {
   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;
   padding-right: 15px;
@@ -23406,6 +23413,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;
   line-height: 0.75 !important;
@@ -23421,6 +23429,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 {
   display: inline-block;
   font-size: 20px;
@@ -23474,6 +23483,11 @@ th.css-location > .th-inner::before {
   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;
   padding-right: 15px;
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 547cbd7f5c2f..3ccb348cbbfc 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 000000000000..8628f2fd3c5c
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 a6a2347d418a..3358e556321b 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 6226c71ab61a..488ec9c6702e 100644
--- a/resources/lang/en-US/admin/locations/message.php
+++ b/resources/lang/en-US/admin/locations/message.php
@@ -8,6 +8,7 @@
     '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 @@
         '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 f3add91d405d..41e8d1c41bd9 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 @@ class="table table-striped snipe-table"
                                         @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 @@ class="table table-striped snipe-table"
                                                         </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 @@ class="table table-striped snipe-table"
 </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 9899a9734e65..57509e5fab5a 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 aecd8a4c12b2..d27367192a6b 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 a4ffa16ec70e..b973ad2bd0ab 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 5c2cd1fa2dd2..c3aa8e148304 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 298d55f4ec97..0a3c93333f6e 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 5077b36f9a57..032805818406 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 1be653fe0ae8..0e529d3f52ce 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 000000000000..7aa6fdd4081c
--- /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 a6b0c7fc8814..eb0619b520fb 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 0b94446b2bef..d5911c13604c 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 bbb9b6709758..287b0b23a878 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 @@ class="table table-striped snipe-table"
                       </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 @@ class="table table-striped snipe-table"
     </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 f6ea14042e4f..7cfbef244592 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 @@ class="table table-striped snipe-table"
                                 </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 0ffc6f5d4310..12c3a3fb735e 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 2339122072eb..39a5d8b751fb 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 @@ class="table table-striped snipe-table"
                 </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 @@ class="table table-striped snipe-table"
 					<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 @@ class="table table-striped snipe-table"
 								<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 @@ class="table table-striped snipe-table"
 					<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 @@ class="table table-striped snipe-table"
 									<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 @@ class="table table-striped snipe-table"
 										{{ 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 @@ class="table table-striped snipe-table"
                 <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 @@ class="table table-striped snipe-table"
                                     {{ 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 e2a8642ca6fc..1196f699943b 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 77d7c3252148..021897922e07 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 4adb020d4e93..c3af4644a264 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 49d7d768b979..5f96551d3161 100755
--- a/resources/views/groups/index.blade.php
+++ b/resources/views/groups/index.blade.php
@@ -43,7 +43,7 @@ class="table table-striped snipe-table"
               <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 965937107159..2a88e171bc43 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 562a27154e2a..465336563d9c 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 df988f5ad2b8..f72e7e4d1bbe 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 e4bfb6e4dddc..a998642685a8 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 f621d88fa86d..d36513e889b8 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 12a0627aecd7..5686e74dd40e 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 17b971a5baa1..a067a5a11d82 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 f31326cc4d29..bdbc3c3c2e73 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 @@ function user_add(status_id) {
                         $("#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 @@ function user_add(status_id) {
                 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 ec6ef5719f71..de892399cc3a 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 e4f6c8a55ec2..867eeaa2b098 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 4961cfce2597..2da403834073 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 @@ class="table table-striped snipe-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
@@ -1372,11 +1400,11 @@ class="table table-striped snipe-table"
                                                 <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 @@ class="table table-striped snipe-table"
                                                 </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 @@ class="table table-striped snipe-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
@@ -1474,11 +1504,11 @@ class="table table-striped snipe-table"
                                                 <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 @@ class="table table-striped snipe-table"
                                                 </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 @@ class="table table-striped snipe-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
diff --git a/resources/views/kits/checkout.blade.php b/resources/views/kits/checkout.blade.php
index 265329259c83..212f72c11854 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 2c38e59111c3..b303362ade81 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -145,7 +145,7 @@
                             @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 @@
                             @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 @@
                             @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 @@
                             @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 @@
                             @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 @@
                                             </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 @@
                                         @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 @@
                                         @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 @@
                                         @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 @@
                                         @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 @@
                                         @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 @@
                                         @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 @@
 
                                     <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 @@
                                             <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 @@ class="caret"></strong></span>
                                         @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 @@ class="caret"></strong></span>
 
                                         <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 @@ class="caret"></strong></span>
                                         @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 @@ class="caret"></strong></span>
 
                                             <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 @@ class="caret"></strong></span>
                             @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 @@ class="caret"></strong></span>
                 <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 @@ class="caret"></strong></span>
                         @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 @@ class="caret"></strong></span>
 
                                     <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 @@ class="fas fa-check text-blue fa-fw"></i>
                                     @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 @@ class="fas fa-check text-blue fa-fw"></i>
                                     @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                         @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 @@ class="fas fa-check text-blue fa-fw"></i>
                     <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 @@ class="fas fa-check text-blue fa-fw"></i>
 
                 <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 @@ function showHideEncValue(e) {
                 // 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 2c582ec4b52c..dbe010ab3c24 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 b8429a21236a..c092324a635d 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 aabbdb260882..c20ef87b2dd3 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 @@ class="table table-striped snipe-table"
                 <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 @@ class="table table-striped snipe-table"
                 <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 @@ class="table table-striped snipe-table"
   <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 @@ class="table table-striped snipe-table"
     @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 7f61db8cea23..d2118e500409 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 7caf5f6a2fe6..fdd3b800b683 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 a5de8585e3dc..069ddb49fda8 100644
--- a/resources/views/livewire/slack-settings-form.blade.php
+++ b/resources/views/livewire/slack-settings-form.blade.php
@@ -153,7 +153,7 @@ class="btn btn-default btn-sm pull-left">
 
 
                         <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 deab1e7fbd29..e75d5f5f730a 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 c6aa083bf587..a0d3b8c742f7 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 @@ class="table table-striped snipe-table"
 
   <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 5e7bccc63337..49e151e459c1 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 570be2bce878..79b41b20643e 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 91b9e5f882c6..8a053b048fbf 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 d3773f97c78d..8d414f337d09 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 251ec8478fcd..e048b38d0962 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 7192e1edaed9..d38b63264ec2 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 @@ class="table table-striped snipe-table"
                                                     </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 @@ class="table table-striped snipe-table"
 
                         @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 @@ class="table table-striped snipe-table"
         </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
-
-                @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>
+                <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>
-
            @endcan
+
         </div>
 </div> <!-- /.row -->
 
diff --git a/resources/views/partials/bootstrap-table.blade.php b/resources/views/partials/bootstrap-table.blade.php
index 837a95b3be4a..f24552d75366 100644
--- a/resources/views/partials/bootstrap-table.blade.php
+++ b/resources/views/partials/bootstrap-table.blade.php
@@ -78,7 +78,7 @@ classes: 'table table-responsive table-no-bordered',
                 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 @@ function genericActionsFormatter(owner_name, element_name) {
             }
 
             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 @@ function genericActionsFormatter(owner_name, element_name) {
                     + ' 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 @@ function genericActionsFormatter(owner_name, element_name) {
             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 @@ function customFieldsFormatter(value, row) {
                     } 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 @@ function externalLinkFormatter(value) {
 
         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 @@ function changeLogFormatter(value) {
 
                 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 @@ function minAmtFormatter(row, value) {
     // 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 groupsAdminLinkFormatter(value, row) {
     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 @@ function assetSerialLinkFormatter(value, row) {
 
         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 assetSerialLinkFormatter(value, row) {
 
     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 iconFormatter(value) {
 
     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 imageFormatter(value, row) {
     }
     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 @@ function fileUploadFormatter(value) {
         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 c24c90d25e64..268089a7d2bc 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 9d2a714bb734..3bd0200d0acc 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 fb461cf44eda..c6764a3f7c48 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 97f81719bed7..f07387c3093c 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 f0b18073d2d3..7f2a99bfa89f 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 3d132b6e16d0..ba63f795811a 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 bc2e56a3ab86..370eb350dc9e 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 6ed55dc1630d..d677386ac2e6 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 870692f1f52b..edbf1be839c8 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 858ad718cb5b..020d97a7561a 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 d090daf3bb2a..4d33552b8faa 100644
--- a/resources/views/settings/backups.blade.php
+++ b/resources/views/settings/backups.blade.php
@@ -113,7 +113,7 @@ class="btn btn-warning btn-sm restore-asset {{ (config('app.lock_passwords')) ?
     <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 @@ class="btn btn-warning btn-sm restore-asset {{ (config('app.lock_passwords')) ?
           
              <!-- 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 @@ class="btn btn-warning btn-sm restore-asset {{ (config('app.lock_passwords')) ?
     <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 66e223f85f4e..970f1d4f9964 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 4f984b4d4a25..c586917ef534 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 99ed0ddd4409..c800b26ac9d3 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 d9a4c4c622ed..83e88b936f13 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 ac7095814b0d..5a4c91c4469b 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 058446e746cb..33640edbf28a 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 @@ class="table table-striped snipe-table"
                         <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 d7b703e54dcd..0c9faf8c2e4a 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 71067a80fa92..d8f3e436e30e 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 d0667c0a57f2..86ad28fc5068 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 020124af56f2..9349023fc814 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 a071b9a0fb50..1b04f7d58af8 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 a0dea958e66d..08e0910a44ba 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 @@ class="table table-striped snipe-table"
 
           <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 b28eb602d2a0..e1d3b4201aa2 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 b20c904d994a..74fbaf83075b 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 f2658cbb6856..8a26311344f7 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 e3f691f15852..5f0246d02292 100755
--- a/resources/views/users/edit.blade.php
+++ b/resources/views/users/edit.blade.php
@@ -131,7 +131,7 @@ class="form-control"
                     @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 @@ class="form-control"
                                       {{ 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 00bfc84df848..8fbed865eec4 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 @@ class="table table-striped snipe-table"
                                         {{ 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 @@ class="table table-striped snipe-table"
                                 @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 @@ class="table table-striped snipe-table"
                             <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 @@ class="table table-striped snipe-table"
     $("#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 @@ class="table table-striped snipe-table"
       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 @@ class="table table-striped snipe-table"
   });
 
 
-    //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 @@ class="table table-striped snipe-table"
                 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 f2534c506228..f3ba8350f2e4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -66,6 +66,11 @@
             [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 ef0da1a1b8a9..d0f3af623373 100644
--- a/tests/Unit/AssetTest.php
+++ b/tests/Unit/AssetTest.php
@@ -146,10 +146,8 @@ public function testAutoIncrementBIG()
 
         $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");
     }