diff --git a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
index c0a7ed9b3..8535d8188 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer-datatable/access-viewer-datatable.html
@@ -1,25 +1,36 @@
 <div class="datatable">
   <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..." ng-model-options="{ debounce: 300 }" />
+    <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
+    <input
+      type="text"
+      class="searchInput ml-1"
+      ng-model="$ctrl.state.textFilter"
+      ng-change="$ctrl.onTextFilterChange()"
+      placeholder="Search..."
+      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('EndpointName')">
-              Environment
-              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && !$ctrl.state.reverseOrder"></i>
-              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"></i>
-            </a>
+            <table-column-header
+              col-title="'Environment'"
+              can-sort="true"
+              is-sorted="$ctrl.state.orderBy === 'EndpointName'"
+              is-sorted-desc="$ctrl.state.orderBy === 'EndpointName' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('EndpointName')"
+            ></table-column-header>
           </th>
           <th>
-            <a ng-click="$ctrl.changeOrderBy('RoleName')">
-              Role
-              <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && !$ctrl.state.reverseOrder"></i>
-              <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"></i>
-            </a>
+            <table-column-header
+              col-title="'Role'"
+              can-sort="true"
+              is-sorted="$ctrl.state.orderBy === 'RoleName'"
+              is-sorted-desc="$ctrl.state.orderBy === 'RoleName' && $ctrl.state.reverseOrder"
+              ng-click="$ctrl.changeOrderBy('RoleName')"
+            ></table-column-header>
           </th>
           <th>Access origin</th>
         </tr>
diff --git a/app/portainer/rbac/components/access-viewer/access-viewer.html b/app/portainer/rbac/components/access-viewer/access-viewer.html
index 2f5a6cc84..e56182bea 100644
--- a/app/portainer/rbac/components/access-viewer/access-viewer.html
+++ b/app/portainer/rbac/components/access-viewer/access-viewer.html
@@ -1,6 +1,6 @@
 <div class="col-sm-12" style="margin-bottom: 0px">
   <rd-widget>
-    <rd-widget-header icon="fa-user-lock">
+    <rd-widget-header icon="svg-userlock" feather-icon="true">
       <header-title>
         Effective access viewer
         <be-feature-indicator feature="$ctrl.limitedFeature" class="space-left"></be-feature-indicator>
@@ -25,8 +25,8 @@
 
         <div class="col-sm-12 form-section-title"> Access </div>
         <div>
-          <div class="small text-muted" style="margin-bottom: 15px">
-            <i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>
+          <div class="small text-muted vertical-center" style="margin-bottom: 15px">
+            <pr-icon icon="'info'" mode="'primary'" feather="true" size="'sm'" class="vertical-center"></pr-icon>
             Effective role for each environment will be displayed for the selected user
           </div>
         </div>
diff --git a/app/portainer/rbac/components/roles-datatable/roles-datatable.html b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
index 73399ade4..eca8b8a22 100644
--- a/app/portainer/rbac/components/roles-datatable/roles-datatable.html
+++ b/app/portainer/rbac/components/roles-datatable/roles-datatable.html
@@ -2,13 +2,15 @@
   <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="vertical-center" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>{{ $ctrl.titleText }}
+        </div>
       </div>
       <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+        <pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>
         <input
           type="text"
-          class="searchInput"
+          class="searchInput ml-1"
           ng-model="$ctrl.state.textFilter"
           ng-change="$ctrl.onTextFilterChange()"
           placeholder="Search..."
@@ -21,18 +23,22 @@
           <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('Description')">
-                  Description
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Description' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Description' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Description'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Description'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Description' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Description')"
+                ></table-column-header>
               </th>
               <th class="be-visual-indicator-col"></th>
             </tr>
diff --git a/app/portainer/rbac/views/roles/roles.html b/app/portainer/rbac/views/roles/roles.html
index f7eb0adae..181a28798 100644
--- a/app/portainer/rbac/views/roles/roles.html
+++ b/app/portainer/rbac/views/roles/roles.html
@@ -2,7 +2,7 @@
 
 <div class="row">
   <div class="col-sm-12">
-    <roles-datatable title-text="Roles" title-icon="fa-file-code" dataset="$ctrl.roles" table-key="roles"></roles-datatable>
+    <roles-datatable title-text="Roles" title-icon="svg-filecode" dataset="$ctrl.roles" table-key="roles"></roles-datatable>
   </div>
 </div>