diff --git a/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html b/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
index 54e2e9348..558cde005 100644
--- a/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
+++ b/app/kubernetes/components/datatables/resource-pool-applications-datatable/resourcePoolApplicationsDatatable.html
@@ -2,13 +2,25 @@
   <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>
+        <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" class="searchIcon"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for an application"
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
         <div ng-if="$ctrl.refreshCallback" class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle> <i class="fa fa-cog" aria-hidden="true"></i> Table settings </span>
+            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -28,7 +40,7 @@
                         <option value="300">5min</option>
                       </select>
                       <span>
-                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
+                        <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
                       </span>
                     </div>
                   </div>
@@ -41,56 +53,54 @@
           </span>
         </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>
       <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>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('StackName')">
-                  Stack
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'StackName'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'StackName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('StackName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Image')">
-                  Image
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Image'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Image'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Image')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CPU')">
-                  CPU reservation
-                  <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'CPU'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CPU'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CPU' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CPU')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Memory')">
-                  Memory reservation
-                  <i class="fa fa-sort-numeric-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-numeric-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Memory'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Memory'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Memory')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/kubernetes/components/yaml-inspector/yamlInspector.html b/app/kubernetes/components/yaml-inspector/yamlInspector.html
index cade7d6e6..8002d14f1 100644
--- a/app/kubernetes/components/yaml-inspector/yamlInspector.html
+++ b/app/kubernetes/components/yaml-inspector/yamlInspector.html
@@ -1,6 +1,6 @@
 <div>
   <code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
-  <div class="py-5">
+  <div class="p-5">
     <span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
       <pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
       Copy to clipboard
diff --git a/app/kubernetes/views/resource-pools/create/createResourcePool.html b/app/kubernetes/views/resource-pools/create/createResourcePool.html
index 397aa9fdb..80b18f04b 100644
--- a/app/kubernetes/views/resource-pools/create/createResourcePool.html
+++ b/app/kubernetes/views/resource-pools/create/createResourcePool.html
@@ -269,7 +269,7 @@
                           />
                         </div>
                         <div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0">
-                          <button class="btn btn-md btn-light btn-only-icon !h-[30px]" type="button" ng-click="$ctrl.removeHostname(ic, $index)">
+                          <button class="btn btn-md btn-dangerlight btn-only-icon !h-[30px]" type="button" ng-click="$ctrl.removeHostname(ic, $index)">
                             <pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
                           </button>
                         </div>
@@ -376,7 +376,7 @@
                     </div>
                     <div class="input-group input-group-sm col-sm-1">
                       <button
-                        class="btn btn-sm btn-light btn-only-icon !h-[30px]"
+                        class="btn btn-sm btn-dangerlight btn-only-icon !h-[30px]"
                         type="button"
                         ng-click="$ctrl.removeAnnotation(ic, $index)"
                         data-cy="namespaceCreate-deleteAnnotationButton{{ ic.IngressClass.Name }}"
diff --git a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
index a3626e442..b454820be 100644
--- a/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
+++ b/app/kubernetes/views/resource-pools/edit/components/ingresses-datatable/template.html
@@ -2,10 +2,25 @@
   <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 class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true" class="searchIcon"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for an ingress..."
+            auto-focus
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
         <div class="settings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Table settings</span>
+            <span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
               <div class="tableMenu">
                 <div class="menuHeader"> Table settings </div>
@@ -25,7 +40,7 @@
                         <option value="300">5min</option>
                       </select>
                       <span>
-                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none"></i>
+                        <pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
                       </span>
                     </div>
                   </div>
@@ -38,31 +53,24 @@
           </span>
         </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>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
+              <th ng-if="$ctrl.hasExpandableItems()" class="datatable-wide dropdown">
+                <div class="cursor-pointer vertical-center" ng-click="$ctrl.expandAll()">
+                  <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'" feather="true"></pr-icon>
+                  <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'" feather="true"></pr-icon>
+                </div>
+              </th>
               <th>
-                <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()" style="margin-right: 5px">
-                  <i ng-class="{ 'fas fa-angle-down': $ctrl.state.expandAll, 'fas fa-angle-right': !$ctrl.state.expandAll }" aria-hidden="true"></i>
-                </a>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Ingress
-                  <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>
@@ -73,11 +81,14 @@
               ng-click="$ctrl.expandItem(item, !item.Expanded)"
               pagination-id="$ctrl.tableKey"
             >
-              <td colspan="3">
-                <a ng-if="$ctrl.itemCanExpand(item)" style="margin-right: 5px">
-                  <i ng-class="{ 'fas fa-angle-down': item.Expanded, 'fas fa-angle-right': !item.Expanded }" class="space-right" aria-hidden="true"></i> </a
-                >{{ item.Name }}
+              <td ng-if="$ctrl.hasExpandableItems()">
+                <div ng-if="$ctrl.itemCanExpand(item)" class="vertical-center">
+                  <pr-icon ng-if="item.Expanded" icon="'chevron-down'" feather="true"></pr-icon>
+                  <pr-icon ng-if="!item.Expanded" icon="'chevron-right'" feather="true"></pr-icon>
+                </div>
               </td>
+              <td>{{ item.Name }}</td>
+              <td>{{ item.Size }}</td>
             </tr>
             <tr
               dir-paginate-end
diff --git a/app/kubernetes/views/resource-pools/edit/resourcePool.html b/app/kubernetes/views/resource-pools/edit/resourcePool.html
index fc0d91e3e..68139901f 100644
--- a/app/kubernetes/views/resource-pools/edit/resourcePool.html
+++ b/app/kubernetes/views/resource-pools/edit/resourcePool.html
@@ -14,7 +14,7 @@
         <rd-widget-body classes="no-padding">
           <uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
             <uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
-              <uib-tab-heading> <i class="fa fa-layer-group space-right" aria-hidden="true"></i> Namespace </uib-tab-heading>
+              <uib-tab-heading class="vertical-center"> <pr-icon icon="'layers'" feather="true"></pr-icon> Namespace </uib-tab-heading>
               <form class="form-horizontal" autocomplete="off" name="resourcePoolEditForm" style="padding: 20px; margin-top: 10px">
                 <!-- name-input -->
                 <div class="form-group">
@@ -33,18 +33,30 @@
                   </div>
                 </div>
                 <!-- !name-input -->
-                <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">Quota</div>
+                <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="col-sm-12 form-section-title">Resource quota</div>
                 <!-- quotas-switch -->
                 <div ng-if="ctrl.isAdmin && ctrl.isEditable" class="form-group">
-                  <div class="col-sm-12">
-                    <label class="control-label text-left"> Resource assignment </label>
-                    <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ctrl.formValues.HasQuota" /><i></i> </label>
+                  <div class="col-sm-12 mt-2" ng-if="ctrl.state.resourceOverCommitEnabled">
+                    <div class="form-group">
+                      <div class="col-sm-3 col-lg-2">
+                        <label class="control-label text-left"> Resource assignment </label>
+                      </div>
+                      <div class="col-sm-9 pt-2">
+                        <label class="switch">
+                          <input type="checkbox" ng-model="ctrl.formValues.HasQuota" />
+                          <span class="slider round"></span>
+                        </label>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="form-group" ng-if="ctrl.formValues.HasQuota && ctrl.isAdmin && ctrl.isEditable && !ctrl.isQuotaValid()">
-                  <span class="col-sm-12 text-warning small">
-                    <p> <i class="fa fa-exclamation-triangle" aria-hidden="true" style="margin-right: 2px"></i> At least a single limit must be set for the quota to be valid. </p>
-                  </span>
+                  <div class="col-sm-12 small text-muted">
+                    <p class="vertical-center">
+                      <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+                      Not enough resources available in the cluster to apply a resource reservation.
+                    </p>
+                  </div>
                 </div>
                 <div ng-if="ctrl.formValues.HasQuota">
                   <kubernetes-resource-reservation
@@ -93,12 +105,12 @@
                       </div>
                     </div>
                     <div class="form-group" ng-show="resourcePoolEditForm.memory_limit.$invalid">
-                      <div class="col-sm-12 small text-warning">
+                      <div class="col-sm-12 small text-muted">
                         <div ng-messages="resourcePoolEditForm.pool_name.$error">
-                          <p
-                            ><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
-                            {{ ctrl.state.sliderMaxMemory }}</p
-                          >
+                          <p class="vertical-center">
+                            <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> Value must be between {{ ctrl.ResourceQuotaDefaults.MemoryLimit }} and
+                            {{ ctrl.state.sliderMaxMemory }}.
+                          </p>
                         </div>
                       </div>
                     </div>
@@ -127,17 +139,20 @@
                 <div class="col-sm-12 form-section-title"> Load balancers </div>
 
                 <div class="form-group">
-                  <span class="col-sm-12 text-muted small">
-                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
-                    You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of
-                    load balancers in this namespace.
-                  </span>
+                  <div class="col-sm-12 small text-muted">
+                    <p class="vertical-center">
+                      <pr-icon icon="'info'" feather="true"></pr-icon>
+                      You can set a quota on the amount of external load balancers that can be created inside this namespace. Set this quota to 0 to effectively disable the use of
+                      load balancers in this namespace.
+                    </p>
+                  </div>
                 </div>
                 <div class="form-group">
                   <div class="col-sm-12">
                     <por-switch-field
                       data-cy="'k8sNamespaceCreate-loadBalancerQuotaToggle'"
                       label="'Load Balancer quota'"
+                      label-class="'col-sm-3 col-lg-2'"
                       name="'k8s-resourcepool-Lbquota'"
                       feature-id="ctrl.LBQuotaFeatureId"
                       checked="ctrl.formValues.UseLoadBalancersQuota"
@@ -158,8 +173,8 @@
 
                   <div class="form-group" ng-if="ctrl.formValues.IngressClasses.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"></pr-icon>
                         Enable and configure ingresses available to users when deploying applications.
                       </p>
                     </div>
@@ -167,14 +182,23 @@
 
                   <div class="form-group" ng-repeat-start="ic in ctrl.formValues.IngressClasses track by ic.IngressClass.Name">
                     <div class="text-muted col-sm-12" style="width: 100%">
-                      <div style="border-bottom: 1px solid #cdcdcd; padding-bottom: 5px">
-                        <i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i> {{ ic.IngressClass.Name }}
-                      </div>
+                      <pr-icon icon="'svg-route'" mode="'primary'"></pr-icon>
+                      {{ ic.IngressClass.Name }}
+                      <hr />
                     </div>
 
-                    <div class="col-sm-12" style="margin-top: 10px">
-                      <label class="control-label text-left"> Allow users to use this ingress </label>
-                      <label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="ic.Selected" /><i></i> </label>
+                    <div class="col-sm-12">
+                      <div class="form-group">
+                        <div class="col-sm-3 col-lg-2">
+                          <label class="control-label text-left"> Allow users to use this ingress </label>
+                        </div>
+                        <div class="col-sm-9 pt-2">
+                          <label class="switch">
+                            <input type="checkbox" ng-model="ic.Selected" />
+                            <span class="slider round"></span>
+                          </label>
+                        </div>
+                      </div>
                     </div>
                   </div>
 
@@ -188,8 +212,8 @@
                           >
                           </portainer-tooltip>
                         </label>
-                        <span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addHostname(ic)">
-                          <i class="fa fa-plus-circle" aria-hidden="true"></i> add hostname
+                        <span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addHostname(ic)">
+                          <pr-icon icon="'plus'" feather="true"></pr-icon> add hostname
                         </span>
                       </div>
                       <div class="col-sm-12" style="margin-top: 10px">
@@ -209,29 +233,32 @@
                               />
                             </div>
                             <div class="col-sm-1 input-group input-group-sm" ng-if="$index > 0">
-                              <button ng-if="!item.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeHostname(ic, $index)">
-                                <i class="fa fa-trash-alt" aria-hidden="true"></i>
+                              <button ng-if="!item.NeedsDeletion" class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeHostname(ic, $index)">
+                                <pr-icon icon="'trash-2'" feather="true"></pr-icon>
                               </button>
                               <button ng-if="item.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreHostname(item)">
-                                <i class="fa fa-trash-restore" aria-hidden="true"></i>
+                                <pr-icon icon="'svg-restore'"></pr-icon>
                               </button>
                             </div>
                           </div>
                           <div
-                            class="small text-warning"
+                            class="small text-muted"
                             style="margin-top: 5px"
                             ng-show="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$invalid || item.Duplicate"
                           >
                             <ng-messages for="resourcePoolEditForm['hostname_' + ic.IngressClass.Name + '_' + $index].$error">
-                              <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Hostname is required.</p>
-                              <p ng-message="pattern">
-                                <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                              <p ng-message="required" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
+                                Hostname is required.
+                              </p>
+                              <p ng-message="pattern" class="vertical-center">
+                                <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                                 This field must consist of lower case alphanumeric characters, '-' or '.', and must start and end with an alphanumeric character (e.g.
                                 'example.com').
                               </p>
                             </ng-messages>
                             <p ng-if="item.Duplicate">
-                              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+                              <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
                               This hostname is already used.
                             </p>
                           </div>
@@ -241,28 +268,28 @@
                   </div>
                   <div ng-repeat-end class="form-group" ng-if="ic.Selected" style="margin-bottom: 20px">
                     <div class="col-sm-12 small text-muted" style="margin-top: 5px">
-                      <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"></pr-icon>
                         You can specify a list of annotations that will be associated to the ingress.
                       </p>
                     </div>
 
                     <div class="col-sm-12">
                       <label class="control-label text-left">Annotations</label>
-                      <span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)">
-                        <i class="fa fa-plus-circle" aria-hidden="true"></i> add annotation
+                      <span class="vertical-center label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addAnnotation(ic)">
+                        <pr-icon icon="'plus'" feather="true"></pr-icon> add annotation
                       </span>
                       <portainer-tooltip
                         message="'Use annotations to configure options for an ingress. Review Nginx or Traefik documentation to find the annotations supported by your choice of ingress type.'"
                       >
                       </portainer-tooltip>
                       <span
-                        class="label label-default interactive"
+                        class="vertical-center label label-default interactive"
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
                         style="margin-left: 10px"
                         ng-click="ctrl.addRewriteAnnotation(ic)"
                       >
-                        <i class="fa fa-plus-circle" aria-hidden="true"></i> add rewrite annotation
+                        <pr-icon icon="'plus'" feather="true"></pr-icon> add rewrite annotation
                       </span>
                       <portainer-tooltip
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
@@ -270,12 +297,12 @@
                       >
                       </portainer-tooltip>
                       <span
-                        class="label label-default interactive"
+                        class="vertical-center label label-default interactive"
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
                         style="margin-left: 10px"
                         ng-click="ctrl.addUseregexAnnotation(ic)"
                       >
-                        <i class="fa fa-plus-circle" aria-hidden="true"></i> add regular expression annotation
+                        <pr-icon icon="'plus'" feather="true"></pr-icon> add regular expression annotation
                       </span>
                       <portainer-tooltip
                         ng-if="ic.IngressClass.Type === ctrl.IngressClassTypes.NGINX"
@@ -311,8 +338,8 @@
                           />
                         </div>
                         <div class="col-sm-1 input-group input-group-sm">
-                          <button class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeAnnotation(ic, $index)">
-                            <i class="fa fa-trash-alt" aria-hidden="true"></i>
+                          <button class="btn btn-sm btn-dangerlight" type="button" ng-click="ctrl.removeAnnotation(ic, $index)">
+                            <pr-icon icon="'trash-2'" feather="true"></pr-icon>
                           </button>
                         </div>
                       </div>
@@ -335,9 +362,9 @@
                   <div ng-if="ctrl.isAdmin && !ctrl.isSystem">
                     <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>
-                          Define which registry can be used by users who have access to this namespace.
+                        <p class="vertical-center">
+                          <pr-icon icon="'info'" feather="true"></pr-icon>
+                          Define which registries can be used by users who have access to this namespace.
                         </p>
                       </div>
                     </div>
@@ -360,7 +387,7 @@
                           tick-property="Checked"
                           helper-elements="filter"
                           search-property="Name"
-                          translation="{nothingSelected: 'Select one or more registry', search: 'Search...'}"
+                          translation="{nothingSelected: 'Select one or more registries', search: 'Search...'}"
                         >
                         </span>
                       </div>
@@ -374,17 +401,20 @@
 
                 <div class="form-group">
                   <span class="col-sm-12 text-muted small">
-                    <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
-                    Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to
-                    effectively prevent the usage of a specific storage option inside this namespace.
+                    <p class="vertical-center">
+                      <pr-icon icon="'info'" feather="true" mode="primary"></pr-icon>
+                      Quotas can be set on each storage option to prevent users from exceeding a specific threshold when deploying applications. You can set a quota to 0 to
+                      effectively prevent the usage of a specific storage option inside this namespace.
+                    </p>
                   </span>
                 </div>
-                <div class="col-sm-12 form-section-title">
-                  <i class="fa fa-route" aria-hidden="true" style="margin-right: 2px"></i>
-                  standard
+
+                <div class="form-section-title text-muted col-sm-12" style="width: 100%">
+                  <div class="vertical-center"> <pr-icon icon="'svg-route'"></pr-icon>standard </div>
+                  <hr />
                 </div>
 
-                <storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"></storage-class-switch>
+                <storage-class-switch value="sc.Selected" name="sc.Name" on-change="(ctrl.onToggleStorageQuota)" authorization="K8sResourcePoolDetailsW"> </storage-class-switch>
 
                 <!-- #endregion -->
 
@@ -428,8 +458,8 @@
               </form>
             </uib-tab>
             <uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
-              <uib-tab-heading>
-                <i class="fa fa-history space-right" aria-hidden="true"></i> Events
+              <uib-tab-heading class="vertical-center">
+                <pr-icon icon="'file-text'" feather="true"></pr-icon> Events
                 <div ng-if="ctrl.hasEventWarnings()">
                   <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
                   {{ ctrl.state.eventWarningCount }} warning(s)
@@ -447,7 +477,7 @@
               ></kubernetes-events-datatable>
             </uib-tab>
             <uib-tab index="2" ng-if="ctrl.pool.Yaml" select="ctrl.showEditor()" classes="btn-sm">
-              <uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
+              <uib-tab-heading class="vertical-center"><pr-icon icon="'code'" feather="true"></pr-icon> YAML </uib-tab-heading>
               <div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
                 <kubernetes-yaml-inspector key="resource-pool-yaml" data="ctrl.pool.Yaml"></kubernetes-yaml-inspector>
               </div>
@@ -467,7 +497,7 @@
         refresh-callback="ctrl.getApplications"
         loading="ctrl.state.applicationsLoading"
         title-text="Applications running in this namespace"
-        title-icon="fa-laptop-code"
+        title-icon="code"
       >
       </kubernetes-resource-pool-applications-datatable>
     </div>
@@ -482,7 +512,7 @@
         refresh-callback="ctrl.getIngresses"
         loading="ctrl.state.ingressesLoading"
         title-text="Ingress routes and applications"
-        title-icon="fa-route"
+        title-icon="svg-route"
       >
       </kubernetes-resource-pool-ingresses-datatable>
     </div>