diff --git a/app/Helpers/IconHelper.php b/app/Helpers/IconHelper.php
index 92d7cdbea7..10e6441771 100644
--- a/app/Helpers/IconHelper.php
+++ b/app/Helpers/IconHelper.php
@@ -56,7 +56,7 @@ class IconHelper
             case 'admin-settings':
                 return 'fa fa-cogs';
             case 'settings':
-                return 'fa fa-sign-out';
+                return 'fa fa-cog';
             case 'angle-left':
                 return 'fa fa-angle-left';
             case 'warning':
@@ -90,7 +90,7 @@ class IconHelper
             case 'alerts':
                 return 'far fa-flag';
             case 'password':
-                return 'fa fa-key';
+                return 'fa-solid fa-key';
             case 'api-key':
                 return 'fa-solid fa-user-secret';
             case 'nav-toggle':
@@ -129,7 +129,12 @@ class IconHelper
                 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';
 
         }
     }
diff --git a/resources/views/accessories/view.blade.php b/resources/views/accessories/view.blade.php
index 039ffb5db9..9d0116ef5f 100644
--- a/resources/views/accessories/view.blade.php
+++ b/resources/views/accessories/view.blade.php
@@ -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">
-                                <x-icon type="paperclip" /> {{ trans('button.upload') }}
+                                <span class="hidden-lg hidden-xl hidden-md">
+                                    <x-icon type="paperclip" class="fa-2x" />
+                                </span>
+                                <span class="hidden-xs hidden-sm">
+                                    <x-icon type="paperclip" />
+                                    {{ trans('button.upload') }}
+                                </span>
                             </a>
                         </li>
                     @endcan
@@ -186,6 +194,7 @@
                                         @foreach ($accessory->uploads as $file)
                                             <tr>
                                                 <td>
+                                                    <x-icon type="paperclip" class="fa-2x" />
                                                     <i class="{{ Helper::filetype_icon($file->filename) }} icon-med" aria-hidden="true"></i>
                                                     <span class="sr-only">{{ Helper::filetype_icon($file->filename) }}</span>
 
@@ -217,7 +226,7 @@
                                                         </a>
 
                                                         <a href="{{ route('show.accessoryfile', [$accessory->id, $file->id, 'inline' => 'true']) }}" class="btn btn-sm btn-default" target="_blank">
-                                                            <i class="fa fa-external-link" aria-hidden="true"></i>
+                                                            <x-icon type="external-link" />
                                                         </a>
 
                                                     @endif
@@ -322,31 +331,41 @@
     <div class="col-md-3 pull-right">
         @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-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>
+                  <a href="{{ route('accessories.edit', $accessory->id) }}" style="margin-right:5px;" class="btn btn-warning btn-social btn-block hidden-print">
+                       <x-icon type="edit" />
+                      {{ 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-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-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-social delete-asset disabled">
+                            <x-icon type="delete" />
                         {{ trans('general.delete') }}
                         </a>
                     </span>
diff --git a/resources/views/blade/icon.blade.php b/resources/views/blade/icon.blade.php
index 2f7ca30744..7aa6fdd408 100644
--- a/resources/views/blade/icon.blade.php
+++ b/resources/views/blade/icon.blade.php
@@ -1,7 +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' => '',
-    'style' => '',
-    'id' => '',
+    'class' => false,
+    'style' => false,
+    'id' => false,
+    'title' => false,
 ])
-<i {{ $attributes->merge(['class' => Icon::icon($type).' '.$class]) }} {{ $attributes->merge(['style' => $style]) }} {{ $attributes->merge(['id' => $id]) }}  aria-hidden="true"></i>
\ No newline at end of file
+<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/consumables/view.blade.php b/resources/views/consumables/view.blade.php
index 7b1764f361..9479c1f651 100644
--- a/resources/views/consumables/view.blade.php
+++ b/resources/views/consumables/view.blade.php
@@ -487,7 +487,7 @@
                                 </a>
 
                                 <a href="{{ route('show.consumablefile', [$consumable->id, $file->id, 'inline' => 'true']) }}" class="btn btn-sm btn-default" target="_blank">
-                                  <i class="fa fa-external-link" aria-hidden="true"></i>
+                                  <x-icon type="external-link" />
                                 </a>
                               @endif
                             </td>
diff --git a/resources/views/hardware/view.blade.php b/resources/views/hardware/view.blade.php
index 8e6eebf64b..dabe5cc2d4 100755
--- a/resources/views/hardware/view.blade.php
+++ b/resources/views/hardware/view.blade.php
@@ -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">
-                                <x-icon type="paperclip" />
-                                {{ 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
@@ -271,7 +276,7 @@
 
                                             @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
@@ -493,10 +498,10 @@
 
                                                     @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
@@ -506,25 +511,26 @@
                                                             <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>
+                                                                <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>
                                                             </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>
@@ -621,6 +627,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
 
@@ -792,7 +799,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>
@@ -886,12 +894,17 @@
                                                     {{ 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">
+
+                                                        <span data-tooltip="true"
+                                                                data-placement="top"
+                                                                data-title="Explicit EOL"
+                                                                title="Explicit EOL">
+                                                                <x-icon type="warning" class="text-orange" />
+                                                        </span>
+
+                                                        <i class="fas fa-exclamation-triangle text-orange"
+
+                                                       >
                                                     </i>
                                                 @endif
                                             </div>
@@ -1385,7 +1398,7 @@
                                                         </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>
@@ -1487,7 +1500,7 @@
                                                         </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
diff --git a/resources/views/layouts/default.blade.php b/resources/views/layouts/default.blade.php
index edeeb6bf6f..72d1249c31 100644
--- a/resources/views/layouts/default.blade.php
+++ b/resources/views/layouts/default.blade.php
@@ -1014,16 +1014,25 @@ dir="{{ Helper::determineLanguageDirection() }}">
                 // Use element id to find the text element to hide / show
                 var targetElement = e.id+"-to-show";
                 var hiddenElement = e.id+"-to-hide";
+                var audio = new Audio('{{ config('app.url') }}/sounds/lock.mp3');
                 if($(e).hasClass('fa-lock')) {
+                    @if ($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 ($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/licenses/view.blade.php b/resources/views/licenses/view.blade.php
index 9127b4cccc..676adf4151 100755
--- a/resources/views/licenses/view.blade.php
+++ b/resources/views/licenses/view.blade.php
@@ -99,7 +99,7 @@
                       @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)
@@ -108,7 +108,7 @@
                       @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
 
@@ -193,11 +193,11 @@
                         @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
 
@@ -536,7 +536,7 @@
                     </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
diff --git a/resources/views/models/view.blade.php b/resources/views/models/view.blade.php
index 829df0e9a2..f9b9cf632e 100755
--- a/resources/views/models/view.blade.php
+++ b/resources/views/models/view.blade.php
@@ -173,7 +173,7 @@
                                                     </a>
 
                                                     <a href="{{ route('show/modelfile', [$model->id, $file->id, 'inline'=>'true']) }}" class="btn btn-sm btn-default" target="_blank">
-                                                        <i class="fa fa-external-link" aria-hidden="true"></i>
+                                                        <x-icon type="external-link" />
                                                     </a>
 
                                                 @endif
diff --git a/resources/views/settings/localization.blade.php b/resources/views/settings/localization.blade.php
index 4fad2cadba..d8f3e436e3 100644
--- a/resources/views/settings/localization.blade.php
+++ b/resources/views/settings/localization.blade.php
@@ -32,7 +32,7 @@
             <div class="panel box box-default">
                 <div class="box-header with-border">
                     <h2 class="box-title">
-                        <i class="fas fa-globe-americas" aria-hidden="true"></i> {{ trans('admin/settings/general.localization') }}
+                        <x-icon type="globe-us" /> {{ trans('admin/settings/general.localization') }}
                     </h2>
                 </div>
                 <div class="box-body">
diff --git a/resources/views/users/view.blade.php b/resources/views/users/view.blade.php
index fc91f9e8b7..0fe528349a 100755
--- a/resources/views/users/view.blade.php
+++ b/resources/views/users/view.blade.php
@@ -459,7 +459,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
@@ -957,7 +957,7 @@
                                         </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