diff --git a/app/assets/ico/vendor/internal.svg b/app/assets/ico/vendor/internal.svg
new file mode 100644
index 000000000..5766e1328
--- /dev/null
+++ b/app/assets/ico/vendor/internal.svg
@@ -0,0 +1 @@
+<svg width="auto" height="auto" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14.3817 5.28003C22.1592 5.28003 28.4649 11.5865 28.4649 19.365C28.4649 27.1435 22.1592 33.45 14.3817 33.45C6.60065 33.4535 0.294922 27.1435 0.294922 19.365C0.294922 11.5865 6.60065 5.28003 14.3817 5.28003Z" fill="#E0F2FE"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3805 14.085C11.3543 14.085 8.9012 16.5097 8.9012 19.5009C8.9012 22.492 11.3543 24.9168 14.3805 24.9168C17.4066 24.9168 19.8597 22.492 19.8597 19.5009C19.8597 16.5097 17.4066 14.085 14.3805 14.085ZM7.81738 19.5009C7.81738 15.9181 10.7558 13.0137 14.3805 13.0137C18.0052 13.0137 20.9436 15.9181 20.9436 19.5009C20.9436 23.0837 18.0052 25.9881 14.3805 25.9881C10.7558 25.9881 7.81738 23.0837 7.81738 19.5009ZM14.3805 16.5846C14.6798 16.5846 14.9224 16.8244 14.9224 17.1203V20.5884L16.4058 19.1221C16.6174 18.9129 16.9605 18.9129 17.1721 19.1221C17.3838 19.3313 17.3838 19.6705 17.1721 19.8796L14.7637 22.2603C14.552 22.4694 14.2089 22.4694 13.9973 22.2603L11.5888 19.8796C11.3772 19.6705 11.3772 19.3313 11.5888 19.1221C11.8004 18.9129 12.1436 18.9129 12.3552 19.1221L13.8386 20.5884V17.1203C13.8386 16.8244 14.0812 16.5846 14.3805 16.5846Z" fill="#0086C9"/> </svg>
\ No newline at end of file
diff --git a/app/portainer/oauth/components/oauth-settings/oauth-settings.html b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
index 92f574b69..40e29399e 100644
--- a/app/portainer/oauth/components/oauth-settings/oauth-settings.html
+++ b/app/portainer/oauth/components/oauth-settings/oauth-settings.html
@@ -54,12 +54,12 @@
 
       <div class="col-sm-9" ng-if="$ctrl.teams.length > 0">
         <div class="col-sm-12 small text-muted">
-          <p>
-            <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+          <p class="vertical-center">
+            <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
             The default team option will be disabled when automatic team membership is enabled
           </p>
         </div>
-        <div class="col-xs-11">
+        <div class="col-xs-12 vertical-center">
           <select
             class="form-control"
             ng-disabled="$ctrl.settings.OAuthAutoMapTeamMemberships"
@@ -68,16 +68,16 @@
           >
             <option value="">No team</option>
           </select>
+          <button
+            type="button"
+            class="btn btn-md btn-danger"
+            ng-click="$ctrl.settings.DefaultTeamID = null"
+            ng-disabled="!$ctrl.settings.DefaultTeamID || $ctrl.settings.OAuthAutoMapTeamMemberships"
+            ng-if="$ctrl.teams.length > 0"
+          >
+            <pr-icon icon="'x'" feather="true" size="'md'"></pr-icon>
+          </button>
         </div>
-        <button
-          type="button"
-          class="btn btn-sm btn-danger"
-          ng-click="$ctrl.settings.DefaultTeamID = null"
-          ng-disabled="!$ctrl.settings.DefaultTeamID || $ctrl.settings.OAuthAutoMapTeamMemberships"
-          ng-if="$ctrl.teams.length > 0"
-        >
-          <i class="fa fa-times" aria-hidden="true"> </i
-        ></button>
       </div>
     </div>
   </div>
@@ -114,8 +114,9 @@
     <div class="form-group">
       <label class="col-sm-3 col-lg-2 control-label text-left"> Statically assigned teams </label>
       <div class="col-sm-9 col-lg-10">
-        <span class="label label-default interactive" style="margin-left: 1.4em" ng-click="$ctrl.addTeamMembershipMapping()">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add team mapping
+        <span class="label label-default interactive vertical-center ml-4" ng-click="$ctrl.addTeamMembershipMapping()">
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add team mapping
         </span>
 
         <div class="col-sm-12 form-inline" ng-repeat="mapping in $ctrl.settings.TeamMemberships.OAuthClaimMappings" style="margin-top: 0.75em">
@@ -135,10 +136,15 @@
               <option selected value="">Select a team</option>
             </select>
           </div>
-          <button type="button" class="btn btn-sm btn-danger" ng-click="$ctrl.removeTeamMembership($index)"> <i class="fa fa-trash" aria-hidden="true"> </i></button>
+          <button type="button" class="btn btn-md btn-danger" ng-click="$ctrl.removeTeamMembership($index)">
+            <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
+          </button>
 
-          <div class="small text-warning" ng-show="!mapping.ClaimValRegex" style="margin-top: 0.4em">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Claim value regex is required.
+          <div>
+            <div class="small text-warning vertical-center mt-1" ng-show="!mapping.ClaimValRegex">
+              <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+              Claim value regex is required.
+            </div>
           </div>
         </div>
       </div>
@@ -361,11 +367,13 @@
 
   <div class="form-group" ng-if="$ctrl.state.provider != 'custom'">
     <div class="col-sm-12">
-      <a class="small interactive" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
-        <i class="fa fa-wrench space-right" aria-hidden="true"></i> Override default configuration
+      <a class="small interactive vertical-center" ng-if="!$ctrl.state.overrideConfiguration" ng-click="$ctrl.state.overrideConfiguration = true;">
+        <pr-icon icon="'tool'" feather="true"></pr-icon>
+        Override default configuration
       </a>
-      <a class="small interactive" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
-        <i class="fa fa-cogs space-right" aria-hidden="true"></i> Use default configuration
+      <a class="small interactive vertical-center" ng-if="$ctrl.state.overrideConfiguration" ng-click="$ctrl.useDefaultProviderConfiguration($ctrl.state.provider)">
+        <pr-icon icon="'settings'" feather="true"></pr-icon>
+        Use default configuration
       </a>
     </div>
   </div>
diff --git a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
index 631690005..184ea9007 100644
--- a/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
+++ b/app/portainer/settings/authentication/auto-user-provision-toggle/auto-user-provision-toggle.html
@@ -3,8 +3,11 @@
   <span class="col-sm-12 text-muted small" ng-transclude="description"> </span>
 </div>
 <div class="form-group">
-  <div class="col-sm-12">
-    <label for="tls" class="control-label text-left"> Automatic user provisioning </label>
-    <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.ngModel" /><i></i> </label>
+  <div class="col-sm-12 vertical-center">
+    <label for="tls" class="control-label text-left !pt-0"> Automatic user provisioning </label>
+    <label class="switch ml-6 my-0">
+      <input type="checkbox" ng-model="$ctrl.ngModel" />
+      <span class="slider round"></span>
+    </label>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
index a0c80db03..1c8991d6d 100644
--- a/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
+++ b/app/portainer/settings/authentication/ldap/ad-settings/ad-settings.html
@@ -20,8 +20,8 @@
 
   <div class="form-group">
     <div class="col-sm-12 small text-muted">
-      <p>
-        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <p class="vertical-center">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         You can configure multiple AD Controllers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use
         the same certificates).
       </p>
@@ -33,13 +33,14 @@
       AD Controller
       <button
         type="button"
-        class="label label-default interactive"
+        class="label label-default interactive vertical-center"
         style="border: 0"
         ng-click="$ctrl.addLDAPUrl()"
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+        <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+        Add additional server
       </button>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -61,7 +62,7 @@
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-trash" aria-hidden="true"></i>
+          <pr-icon icon="'trash-2'" feather="true"></pr-icon>
         </button>
       </div>
     </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
index 4d32109a2..10211a7f7 100644
--- a/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
+++ b/app/portainer/settings/authentication/ldap/ldap-connectivity-check/ldap-connectivity-check.html
@@ -1,8 +1,8 @@
 <div class="form-group">
-  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left">
+  <label for="ldap_password" class="col-sm-3 col-lg-2 control-label text-left vertical-center">
     Connectivity check
-    <i class="fa fa-check green-icon ml-2" ng-if="$ctrl.state.successfulConnectivityCheck"></i>
-    <i class="fa fa-times red-icon ml-2" ng-if="$ctrl.state.failedConnectivityCheck"></i>
+    <pr-icon icon="'check'" feather="true" mode="'success'" ng-if="$ctrl.state.successfulConnectivityCheck"></pr-icon>
+    <pr-icon icon="'x'" feather="true" mode="'danger'" ng-if="$ctrl.state.failedConnectivityCheck"></pr-icon>
   </label>
   <div class="col-sm-9 col-lg-10">
     <button
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
index 54b62f886..fc0a09f54 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-admin-group/ldap-custom-admin-group.html
@@ -50,7 +50,7 @@
         Group Filter
         <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input
           type="text"
           class="form-control"
@@ -62,10 +62,8 @@
           ng-disabled="{{ $ctrl.isLimitedFeatureSelfContained }}"
           limited-feature-tabindex="-1"
         />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -75,16 +73,17 @@
 <div class="form-group mt-3">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive no-border"
+      class="label label-default interactive no-border vertical-center"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
       limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
       limited-feature-disabled
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
-  <div class="col-sm-12 mt-3">
+  <div class="col-sm-12 vertical-center mt-2">
     <button
       class="btn btm-sm btn-primary"
       type="button"
@@ -96,15 +95,21 @@
     >
       Fetch Admin Group(s)
     </button>
-    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-5"> <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i> No groups found</span>
+    <span ng-if="$ctrl.groups && $ctrl.groups.length === 0" class="ml-6 vertical-center">
+      <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon>
+      No groups found
+    </span>
   </div>
 </div>
 
 <div class="form-group">
-  <div class="col-sm-12">
-    <label for="admin-auto-populate" class="control-label text-left text-muted" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }"> Assign admin rights to group(s) </label>
-    <label class="switch ml-7" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
-      <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" /><i></i>
+  <div class="col-sm-12 vertical-center">
+    <label for="admin-auto-populate" class="control-label text-left text-muted !pt-0" ng-class="{ 'text-muted': !$ctrl.enableAssignAdminGroup }">
+      Assign admin rights to group(s)
+    </label>
+    <label class="switch ml-7 my-0" ng-class="{ 'business limited': $ctrl.isLimitedFeatureSelfContained }">
+      <input id="admin-auto-populate" ng-disabled="!$ctrl.enableAssignAdminGroup" name="admin-auto-populate" type="checkbox" ng-model="$ctrl.settings.AdminAutoPopulate" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
index be0a729a5..5a9bfa32d 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-group-search/ldap-custom-group-search.html
@@ -28,12 +28,10 @@
         Group Filter
         <portainer-tooltip message="'The LDAP search filter used to select group elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input type="text" class="form-control" id="ldap_group_filter_{{ $index }}" ng-model="config.GroupFilter" placeholder="(objectClass=account)" />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -42,8 +40,9 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -63,7 +62,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="fa-users" table-key="ldapGroups"></ldap-groups-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="users" table-key="ldapGroups"></ldap-groups-datatable>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
index ba7445ebd..2cf0b15b6 100644
--- a/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-custom-user-search/ldap-custom-user-search.html
@@ -28,12 +28,10 @@
         Filter
         <portainer-tooltip message="'The LDAP search filter used to select user elements, optional.'"></portainer-tooltip>
       </label>
-      <div ng-class="{ 'col-sm-7 col-md-9': $index, 'col-sm-8 col-md-10': !$index }">
+      <div class="col-sm-8 col-md-10 vertical-center">
         <input type="text" class="form-control" id="ldap_filter_{{ $index }}" ng-model="config.Filter" placeholder="(objectClass=account)" />
-      </div>
-      <div class="col-sm-1" ng-if="$index > 0">
-        <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)">
-          <i class="fa fa-trash" aria-hidden="true"></i>
+        <button class="btn btn-md btn-danger" type="button" ng-click="$ctrl.onRemoveClick($index)" ng-if="$index > 0">
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -42,8 +40,9 @@
 
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
-    <button class="label label-default interactive" style="border: 0" ng-click="$ctrl.onAddClick()">
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+    <button class="label label-default interactive vertical-center" style="border: 0" ng-click="$ctrl.onAddClick()">
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -63,7 +62,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="fa-users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
index 9903406da..5d61ffb11 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search-item/ldap-group-search-item.html
@@ -9,7 +9,7 @@
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true"></pr-icon>
       </button>
     </div>
 
@@ -29,10 +29,11 @@
     </div>
 
     <div class="form-group">
-      <div class="col-sm-12" style="margin-bottom: 5px">
-        <label class="control-label text-left">Groups</label>
-        <span class="label label-default interactive" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add another group
+      <div class="col-sm-12 vertical-center" style="margin-bottom: 5px">
+        <label class="control-label text-left !pt-0">Groups</label>
+        <span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="$ctrl.addGroup()">
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add another group
         </span>
       </div>
       <div class="col-sm-12" ng-if="$ctrl.groups.length">
@@ -62,13 +63,13 @@
               </div>
               <div class="col-sm-3 text-right">
                 <button
-                  class="btn btn-sm btn-danger"
+                  class="btn btn-md btn-danger"
                   type="button"
                   ng-click="$ctrl.removeGroup($index)"
                   limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
                   limited-feature-tabindex="-1"
                 >
-                  <i class="fa fa-trash-alt" aria-hidden="true"></i>
+                  <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
                 </button>
               </div>
             </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
index 6df82d984..bec29fc95 100644
--- a/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-group-search/ldap-group-search.html
@@ -14,13 +14,14 @@
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="border: 0"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add group search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add group search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -31,7 +32,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="fa-users" table-key="ldapGroups"></ldap-groups-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-groups-datatable dataset="$ctrl.groups" title-text="Groups" title-icon="users" table-key="ldapGroups"></ldap-groups-datatable>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
index ab2d0e9b0..5df30ed49 100644
--- a/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
+++ b/app/portainer/settings/authentication/ldap/ldap-groups-datatable/ldap-groups-datatable.html
@@ -2,32 +2,39 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  User Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'User Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
+              </th>
+              <th>
+                <table-column-header col-title="'Groups'" can-sort="false"></table-column-header>
               </th>
-              <th> Groups </th>
             </tr>
           </thead>
           <tbody>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
index e56a70bb1..b6fc0360d 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-custom/ldap-settings-custom.html
@@ -9,8 +9,8 @@
 
 <div class="form-group">
   <div class="col-sm-12 small text-muted">
-    <p>
-      <i class="fa fa-info-circle blue-icon mr-1" aria-hidden="true"></i>
+    <p class="vertical-center">
+      <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
       You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the
       same certificates).
     </p>
@@ -22,20 +22,21 @@
     LDAP Server
     <button
       type="button"
-      class="label label-default interactive no-border"
+      class="label label-default interactive no-border vertical-center"
       ng-click="$ctrl.addLDAPUrl()"
       limited-feature-dir="{{ $ctrl.limitedFeatureId }}"
       limited-feature-disabled
       limited-feature-class="limited-be"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      Add additional server
     </button>
   </label>
   <div class="col-sm-9 col-lg-10">
     <div class="mb-3 flex" ng-repeat="url in $ctrl.settings.URLs track by $index">
       <input type="text" class="form-control" id="ldap_url" ng-model="$ctrl.settings.URLs[$index]" placeholder="e.g. 10.0.0.10:389 or myldap.domain.tld:389" required />
       <button ng-if="$index > 0" class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLDAPUrl($index)">
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
       </button>
     </div>
   </div>
@@ -48,7 +49,8 @@
   </label>
   <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
index d72a48c58..b5e968afe 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-dn-builder/ldap-settings-dn-builder.html
@@ -3,13 +3,14 @@
     <label class="control-label text-left">{{ $ctrl.label || 'DN entries' }}</label>
     <button
       type="button"
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="margin-left: 10px; border: 0"
       ng-click="$ctrl.addEntry()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add another entry
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add another entry
     </button>
   </div>
   <div class="col-sm-12" ng-if="$ctrl.entries.length">
@@ -33,33 +34,33 @@
           </div>
           <div class="col-sm-3 text-right">
             <button
-              class="btn btn-sm btn-primary"
+              class="btn btn-md btn-primary"
               type="button"
               ng-disabled="$first"
               ng-click="$ctrl.moveUp($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-arrow-up" aria-hidden="true"></i>
+              <pr-icon icon="'arrow-up'" feather="true" size="'md'"></pr-icon>
             </button>
             <button
-              class="btn btn-sm btn-primary"
+              class="btn btn-md btn-primary"
               type="button"
               ng-disabled="$last"
               ng-click="$ctrl.moveDown($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-arrow-down" aria-hidden="true"></i>
+              <pr-icon icon="'arrow-down'" feather="true" size="'md'"></pr-icon>
             </button>
             <button
-              class="btn btn-sm btn-danger"
+              class="btn btn-md btn-danger"
               type="button"
               ng-click="$ctrl.removeEntry($index)"
               limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
               limited-feature-tabindex="-1"
             >
-              <i class="fa fa-trash" aria-hidden="true"></i>
+              <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
             </button>
           </div>
         </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
index 632b8a9c0..237bab8ee 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-group-dn-builder/ldap-settings-group-dn-builder.html
@@ -14,13 +14,13 @@
   <div class="col-sm-1">
     <button
       type="button"
-      class="btn btn-danger btn-sm"
+      class="btn btn-danger btn-md vertical-center"
       ng-if="$ctrl.onRemoveClick"
       ng-click="$ctrl.onRemoveClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-trash" aria-hidden="true"></i>
+      <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
     </button>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
index 169bd6760..d4e0ab59e 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-openldap/ldap-settings-openldap.html
@@ -12,8 +12,8 @@
 
   <div class="form-group">
     <div class="col-sm-12 small text-muted">
-      <p>
-        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
+      <p class="vertical-center">
+        <pr-icon icon="'info'" feather="true" mode="'primary'"></pr-icon>
         You can configure multiple LDAP Servers for authentication fallback. Make sure all servers are using the same configuration (i.e. if TLS is enabled, they should all use the
         same certificates).
       </p>
@@ -25,13 +25,14 @@
       LDAP Server
       <button
         type="button"
-        class="label label-default interactive"
+        class="label label-default interactive vertical-center"
         style="border: 0"
         ng-click="$ctrl.addLDAPUrl()"
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-plus-circle" aria-hidden="true"></i> Add additional server
+        <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+        Add additional server
       </button>
     </label>
     <div class="col-sm-9 col-lg-10">
@@ -53,7 +54,7 @@
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-trash" aria-hidden="true"></i>
+          <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
         </button>
       </div>
     </div>
@@ -61,20 +62,15 @@
 
   <!-- Anonymous mode-->
   <div class="form-group">
-    <div class="col-sm-12">
-      <label for="anonymous_mode" class="control-label text-left">
-        Anonymous mode
-        <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
-      </label>
+    <label for="anonymous_mode" class="control-label text-left col-sm-3 col-lg-2">
+      Anonymous mode
+      <portainer-tooltip message="'Enable this option if the server is configured for Anonymous access.'"></portainer-tooltip>
+    </label>
 
-      <label class="switch" style="margin-left: 20px">
-        <input
-          type="checkbox"
-          id="anonymous_mode"
-          ng-model="$ctrl.settings.AnonymousMode"
-          limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-          limited-feature-tabindex="-1"
-        /><i></i>
+    <div class="col-sm-9 col-lg-10">
+      <label class="switch">
+        <input type="checkbox" id="anonymous_mode" ng-model="$ctrl.settings.AnonymousMode" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+        <span class="slider round"></span>
       </label>
     </div>
   </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
index bf58b4f03..f30bc547f 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-security/ldap-settings-security.html
@@ -4,13 +4,14 @@
 
 <!-- starttls -->
 <div class="form-group" ng-if="!$ctrl.settings.TLSConfig.TLS">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Use StartTLS
     <portainer-tooltip message="'Enable this option if want to use StartTLS to secure the connection to the server. Ignored if Use TLS is selected.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.StartTLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -18,13 +19,14 @@
 
 <!-- tls-checkbox -->
 <div class="form-group" ng-if="!$ctrl.settings.StartTLS">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Use TLS
     <portainer-tooltip message="'Enable this option if you need to specify TLS certificates to connect to the LDAP server.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLS" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -32,13 +34,14 @@
 
 <!-- tls-skip-verify -->
 <div class="form-group">
-  <label for="tls" class="control-label col-sm-3 text-left" style="padding-top: 0">
+  <label for="tls" class="control-label col-sm-3 col-lg-2 text-left" style="padding-top: 0">
     Skip verification of server certificate
     <portainer-tooltip message="'Skip the verification of the server TLS certificate. Not recommended on unsecured networks.'"></portainer-tooltip>
   </label>
-  <div class="col-sm-9">
+  <div class="col-sm-9 col-lg-10">
     <label class="switch">
-      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" /><i></i>
+      <input type="checkbox" ng-model="$ctrl.settings.TLSConfig.TLSSkipVerify" limited-feature-dir="{{::$ctrl.limitedFeatureId}}" limited-feature-tabindex="-1" />
+      <span class="slider round"></span>
     </label>
   </div>
 </div>
@@ -46,8 +49,8 @@
 
 <!-- ca-input -->
 <div class="form-group" ng-if="$ctrl.settings.TLSConfig.TLS || ($ctrl.settings.StartTLS && !$ctrl.settings.TLSConfig.TLSSkipVerify)">
-  <label class="col-sm-3 control-label text-left">TLS CA certificate</label>
-  <div class="col-sm-9">
+  <label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
+  <div class="col-sm-9 col-lg-10 vertical-center">
     <button
       type="button"
       class="btn btn-sm btn-primary"
@@ -58,11 +61,11 @@
     >
       Select file
     </button>
-    <span style="margin-left: 5px">
+    <span class="vertical-center">
       {{ $ctrl.tlscaCert.name }}
-      <i class="fa fa-check green-icon" ng-if="$ctrl.tlscaCert && $ctrl.tlscaCert === $ctrl.settings.TLSConfig.TLSCACert" aria-hidden="true"></i>
-      <i class="fa fa-times red-icon" ng-if="!$ctrl.tlscaCert" aria-hidden="true"></i>
-      <i class="fa fa-circle-notch fa-spin" ng-if="$ctrl.uploadInProgress"></i>
+      <pr-icon icon="'check'" feather="true" class="icon-success" ng-if="$ctrl.tlscaCert && $ctrl.tlscaCert === $ctrl.settings.TLSConfig.TLSCACert"></pr-icon>
+      <pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="!$ctrl.tlscaCert"></pr-icon>
+      <pr-icon icon="'fa fa-circle-notch fa-spin'" ng-if="$ctrl.uploadInProgress"></pr-icon>
     </span>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
index c31bb4cc2..0cf25391c 100644
--- a/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
+++ b/app/portainer/settings/authentication/ldap/ldap-settings-test-login/ldap-settings-test-login.html
@@ -37,20 +37,22 @@
     />
   </div>
 
-  <div class="form-group no-margin">
-    <button
-      type="submit"
-      class="btn btn-primary"
-      ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
-      ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
-      limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
-      limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
-      limited-feature-tabindex="-1"
-    >
-      <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
-      <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
-    </button>
-    <i ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS" class="fa fa-check green-icon"></i>
-    <i ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE" class="fa fa-times red-icon"></i>
+  <div class="form-group !ml-0">
+    <div class="vertical-center">
+      <button
+        type="submit"
+        class="btn btn-primary"
+        ng-disabled="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING || !$ctrl.username || !$ctrl.password"
+        ng-click="$ctrl.testLogin($ctrl.username, $ctrl.password)"
+        limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
+        limited-feature-class=" {{ $ctrl.isLimitedFeatureSelfContained && 'limited-be' }}"
+        limited-feature-tabindex="-1"
+      >
+        <span ng-if="$ctrl.state.testStatus !== $ctrl.TEST_STATUS.LOADING">Test</span>
+        <span ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.LOADING">Testing...</span>
+      </button>
+      <pr-icon icon="'check'" feather="true" class="icon-success" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.SUCCESS"></pr-icon>
+      <pr-icon icon="'x'" feather="true" class="icon-danger" ng-if="$ctrl.state.testStatus === $ctrl.TEST_STATUS.FAILURE"></pr-icon>
+    </div>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
index 4dc862490..29078a41d 100644
--- a/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search-item/ldap-user-search-item.html
@@ -10,7 +10,7 @@
         limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
         limited-feature-tabindex="-1"
       >
-        <i class="fa fa-trash" aria-hidden="true"></i>
+        <pr-icon icon="'trash-2'" feather="true"></pr-icon>
       </button>
     </div>
 
@@ -63,13 +63,14 @@
         <label class="control-label text-left">Allowed Groups (optional)</label>
         <button
           type="button"
-          class="label label-default interactive"
+          class="label label-default interactive vertical-center"
           style="margin-left: 10px; border: 0"
           ng-click="$ctrl.addGroup()"
           limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
           limited-feature-tabindex="-1"
         >
-          <i class="fa fa-plus-circle" aria-hidden="true"></i> add another group
+          <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+          add another group
         </button>
       </div>
       <div class="col-sm-12">
diff --git a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
index e78170eb4..60045886b 100644
--- a/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
+++ b/app/portainer/settings/authentication/ldap/ldap-user-search/ldap-user-search.html
@@ -15,13 +15,14 @@
 <div class="form-group" style="margin-top: 10px">
   <div class="col-sm-12">
     <button
-      class="label label-default interactive"
+      class="label label-default interactive vertical-center"
       style="border: 0"
       ng-click="$ctrl.onAddClick()"
       limited-feature-dir="{{::$ctrl.limitedFeatureId}}"
       limited-feature-tabindex="-1"
     >
-      <i class="fa fa-plus-circle" aria-hidden="true"></i> add user search configuration
+      <pr-icon icon="'plus-circle'" feather="true"></pr-icon>
+      add user search configuration
     </button>
   </div>
   <div class="col-sm-12" style="margin-top: 10px">
@@ -32,7 +33,7 @@
 </div>
 
 <div ng-if="$ctrl.showTable">
-  <div class="form-group">
-    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="fa-users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
+  <div class="form-group col-sm-12">
+    <ldap-users-datatable dataset="$ctrl.users" title-text="Users" title-icon="users" table-key="ldapUsers" order-by="" reverse-order=""></ldap-users-datatable>
   </div>
 </div>
diff --git a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
index 3d6d4a449..9b8ebdbd9 100644
--- a/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
+++ b/app/portainer/settings/authentication/ldap/ldap-users-datatable/ldap-users-datatable.html
@@ -2,30 +2,35 @@
   <rd-widget>
     <rd-widget-body classes="no-padding">
       <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px"></i> {{ $ctrl.titleText }} </div>
-      </div>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Name'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Name')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/portainer/views/settings/authentication/options.tsx b/app/portainer/views/settings/authentication/options.tsx
index 496955c85..90d671e08 100644
--- a/app/portainer/views/settings/authentication/options.tsx
+++ b/app/portainer/views/settings/authentication/options.tsx
@@ -6,8 +6,7 @@ import Oauth from '@/assets/ico/oauth.svg?c';
 export const options = [
   {
     id: 'auth_internal',
-    icon: 'user',
-    featherIcon: true,
+    icon: 'svg-internal',
     label: 'Internal',
     description: 'Internal authentication mechanism',
     value: 1,
diff --git a/app/portainer/views/settings/authentication/settingsAuthentication.html b/app/portainer/views/settings/authentication/settingsAuthentication.html
index bf281d601..bc8319d14 100644
--- a/app/portainer/views/settings/authentication/settingsAuthentication.html
+++ b/app/portainer/views/settings/authentication/settingsAuthentication.html
@@ -3,7 +3,7 @@
 <div class="row">
   <div class="col-sm-12">
     <rd-widget>
-      <rd-widget-header icon="fa-users" title-text="Authentication"></rd-widget-header>
+      <rd-widget-header icon="users" feather-icon="true" title-text="Authentication"></rd-widget-header>
       <rd-widget-body>
         <form class="form-horizontal" name="authSettingsForm">
           <div class="col-sm-12 form-section-title"> Configuration </div>
@@ -22,9 +22,9 @@
             </div>
           </div>
           <div class="form-group">
-            <span class="col-sm-12 text-muted small vertical-center"
-              ><pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon> Changing from default is only recommended if you have additional layers
-              of authentication in front of Portainer.
+            <span class="col-sm-12 text-muted small vertical-center">
+              <pr-icon icon="'alert-triangle'" feather="true" class-name="'icon-sm icon-yellow'"></pr-icon>
+              Changing from default is only recommended if you have additional layers of authentication in front of Portainer.
             </span>
           </div>
 
diff --git a/app/react/components/Svg.tsx b/app/react/components/Svg.tsx
index 5f0138a1e..e96d8d9f3 100644
--- a/app/react/components/Svg.tsx
+++ b/app/react/components/Svg.tsx
@@ -66,6 +66,7 @@ import nomad from '@/assets/ico/vendor/nomad.svg?c';
 import openldap from '@/assets/ico/vendor/openldap.svg?c';
 import proget from '@/assets/ico/vendor/proget.svg?c';
 import quay from '@/assets/ico/vendor/quay.svg?c';
+import internal from '@/assets/ico/vendor/internal.svg?c';
 
 const placeholder = Placeholder;
 
@@ -135,6 +136,7 @@ export const SvgIcons = {
   openldap,
   proget,
   quay,
+  internal,
 };
 
 interface SvgProps {