diff --git a/jslib b/jslib
index cf1e483c..6b4ed5fc 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit cf1e483c7fa4c3ea16d1981eb833e286f034806d
+Subproject commit 6b4ed5fcce58c21a9977d94ebb65f954d6766548
diff --git a/src/app/accounts/apiKey.component.html b/src/app/accounts/apiKey.component.html
index 07c067ce..7d42525b 100644
--- a/src/app/accounts/apiKey.component.html
+++ b/src/app/accounts/apiKey.component.html
@@ -30,9 +30,9 @@
                       (click)="toggleSecret()"
                     >
                       <i
-                        class="fa fa-lg"
+                        class="bwi bwi-lg"
                         aria-hidden="true"
-                        [ngClass]="showSecret ? 'fa-eye-slash' : 'fa-eye'"
+                        [ngClass]="showSecret ? 'bwi-eye-slash' : 'bwi-eye'"
                       ></i>
                     </button>
                   </div>
@@ -42,8 +42,8 @@
             <div class="d-flex">
               <div>
                 <button type="submit" class="btn btn-primary" [disabled]="form.loading">
-                  <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!form.loading"></i>
-                  <i class="fa fa-sign-in fa-fw" [hidden]="form.loading"></i>
+                  <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!form.loading"></i>
+                  <i class="bwi bwi-sign-in bwi-fw" [hidden]="form.loading"></i>
                   {{ "logIn" | i18n }}
                 </button>
               </div>
diff --git a/src/app/accounts/environment.component.html b/src/app/accounts/environment.component.html
index 88d55646..eeff84e4 100644
--- a/src/app/accounts/environment.component.html
+++ b/src/app/accounts/environment.component.html
@@ -52,7 +52,7 @@
       </div>
       <div class="modal-footer justify-content-start">
         <button type="submit" class="btn btn-primary">
-          <i class="fa fa-save fa-fw"></i>
+          <i class="bwi bwi-save bwi-fw"></i>
           {{ "save" | i18n }}
         </button>
       </div>
diff --git a/src/app/tabs/dashboard.component.html b/src/app/tabs/dashboard.component.html
index 2a21c996..b0dc6cbe 100644
--- a/src/app/tabs/dashboard.component.html
+++ b/src/app/tabs/dashboard.component.html
@@ -17,18 +17,18 @@
     </p>
     <form #startForm [appApiAction]="startPromise" class="d-inline">
       <button (click)="start()" class="btn btn-primary" [disabled]="startForm.loading">
-        <i class="fa fa-play fa-fw" [hidden]="startForm.loading"></i>
-        <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!startForm.loading"></i>
+        <i class="bwi bwi-play bwi-fw" [hidden]="startForm.loading"></i>
+        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!startForm.loading"></i>
         {{ "startSync" | i18n }}
       </button>
     </form>
     <button (click)="stop()" class="btn btn-primary">
-      <i class="fa fa-stop fa-fw"></i>
+      <i class="bwi bwi-stop bwi-fw"></i>
       {{ "stopSync" | i18n }}
     </button>
     <form #syncForm [appApiAction]="syncPromise" class="d-inline">
       <button (click)="sync()" class="btn btn-primary" [disabled]="syncForm.loading">
-        <i class="fa fa-refresh fa-fw" [ngClass]="{ 'fa-spin': syncForm.loading }"></i>
+        <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': syncForm.loading }"></i>
         {{ "syncNow" | i18n }}
       </button>
     </form>
@@ -40,8 +40,8 @@
     <p>{{ "testingDesc" | i18n }}</p>
     <form #simForm [appApiAction]="simPromise" class="d-inline">
       <button (click)="simulate()" class="btn btn-primary" [disabled]="simForm.loading">
-        <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!simForm.loading"></i>
-        <i class="fa fa-bug fa-fw" [hidden]="simForm.loading"></i>
+        <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!simForm.loading"></i>
+        <i class="bwi bwi-bug bwi-fw" [hidden]="simForm.loading"></i>
         {{ "testNow" | i18n }}
       </button>
     </form>
@@ -59,9 +59,9 @@
       <div class="row">
         <div class="col-lg">
           <h4>{{ "users" | i18n }}</h4>
-          <ul class="fa-ul testing-list" *ngIf="simEnabledUsers && simEnabledUsers.length">
+          <ul class="bwi-ul testing-list" *ngIf="simEnabledUsers && simEnabledUsers.length">
             <li *ngFor="let u of simEnabledUsers" title="{{ u.referenceId }}">
-              <i class="fa-li fa fa-user"></i>
+              <i class="bwi bwi-li bwi-user"></i>
               {{ u.displayName }}
             </li>
           </ul>
@@ -69,9 +69,9 @@
             {{ "noUsers" | i18n }}
           </p>
           <h4>{{ "disabledUsers" | i18n }}</h4>
-          <ul class="fa-ul testing-list" *ngIf="simDisabledUsers && simDisabledUsers.length">
+          <ul class="bwi-ul testing-list" *ngIf="simDisabledUsers && simDisabledUsers.length">
             <li *ngFor="let u of simDisabledUsers" title="{{ u.referenceId }}">
-              <i class="fa-li fa fa-user"></i>
+              <i class="bwi bwi-li bwi-user"></i>
               {{ u.displayName }}
             </li>
           </ul>
@@ -79,9 +79,9 @@
             {{ "noUsers" | i18n }}
           </p>
           <h4>{{ "deletedUsers" | i18n }}</h4>
-          <ul class="fa-ul testing-list" *ngIf="simDeletedUsers && simDeletedUsers.length">
+          <ul class="bwi-ul testing-list" *ngIf="simDeletedUsers && simDeletedUsers.length">
             <li *ngFor="let u of simDeletedUsers" title="{{ u.referenceId }}">
-              <i class="fa-li fa fa-user"></i>
+              <i class="bwi bwi-li bwi-user"></i>
               {{ u.displayName }}
             </li>
           </ul>
@@ -91,9 +91,9 @@
         </div>
         <div class="col-lg">
           <h4>{{ "groups" | i18n }}</h4>
-          <ul class="fa-ul testing-list" *ngIf="simGroups && simGroups.length">
+          <ul class="bwi-ul testing-list" *ngIf="simGroups && simGroups.length">
             <li *ngFor="let g of simGroups" title="{{ g.referenceId }}">
-              <i class="fa-li fa fa-sitemap"></i>
+              <i class="bwi bwi-li bwi-sitemap"></i>
               {{ g.displayName }}
               <ul class="small" *ngIf="g.users && g.users.length">
                 <li *ngFor="let u of g.users" title="{{ u.referenceId }}">
diff --git a/src/app/tabs/more.component.html b/src/app/tabs/more.component.html
index 14508c02..a1d80ed2 100644
--- a/src/app/tabs/more.component.html
+++ b/src/app/tabs/more.component.html
@@ -15,8 +15,8 @@
           (click)="update()"
           [disabled]="checkingForUpdate"
         >
-          <i class="fa fa-download fa-fw" [hidden]="checkingForUpdate"></i>
-          <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!checkingForUpdate"></i>
+          <i class="bwi bwi-download bwi-fw" [hidden]="checkingForUpdate"></i>
+          <i class="bwi bwi-spinner bwi-fw bwi-spin" [hidden]="!checkingForUpdate"></i>
           {{ "checkForUpdates" | i18n }}
         </button>
       </div>
diff --git a/src/app/tabs/settings.component.html b/src/app/tabs/settings.component.html
index 89021038..621450fb 100644
--- a/src/app/tabs/settings.component.html
+++ b/src/app/tabs/settings.component.html
@@ -236,9 +236,9 @@
                     (click)="toggleLdapPassword()"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="showLdapPassword ? 'fa-eye-slash' : 'fa-eye'"
+                      [ngClass]="showLdapPassword ? 'bwi-eye-slash' : 'bwi-eye'"
                     ></i>
                   </button>
                 </div>
@@ -298,9 +298,9 @@
                   (click)="toggleAzureKey()"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="showAzureKey ? 'fa-eye-slash' : 'fa-eye'"
+                    [ngClass]="showAzureKey ? 'bwi-eye-slash' : 'bwi-eye'"
                   ></i>
                 </button>
               </div>
@@ -339,9 +339,9 @@
                   (click)="toggleOktaKey()"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="showOktaKey ? 'fa-eye-slash' : 'fa-eye'"
+                    [ngClass]="showOktaKey ? 'bwi-eye-slash' : 'bwi-eye'"
                   ></i>
                 </button>
               </div>
@@ -377,9 +377,9 @@
                   (click)="toggleOneLoginSecret()"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="showOneLoginSecret ? 'fa-eye-slash' : 'fa-eye'"
+                    [ngClass]="showOneLoginSecret ? 'bwi-eye-slash' : 'bwi-eye'"
                   ></i>
                 </button>
               </div>
diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html
index aef2dcc2..a34ad65c 100644
--- a/src/app/tabs/tabs.component.html
+++ b/src/app/tabs/tabs.component.html
@@ -2,19 +2,19 @@
   <ul class="nav nav-tabs mb-3">
     <li class="nav-item">
       <a class="nav-link" routerLink="dashboard" routerLinkActive="active">
-        <i class="fa fa-dashboard"></i>
+        <i class="bwi bwi-dashboard"></i>
         {{ "dashboard" | i18n }}
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="settings" routerLinkActive="active">
-        <i class="fa fa-cogs"></i>
+        <i class="bwi bwi-cogs"></i>
         {{ "settings" | i18n }}
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" routerLink="more" routerLinkActive="active">
-        <i class="fa fa-sliders"></i>
+        <i class="bwi bwi-sliders"></i>
         {{ "more" | i18n }}
       </a>
     </li>
diff --git a/src/index.html b/src/index.html
index 2ec2d77c..b7f4881d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,7 @@
   </head>
   <body>
     <app-root>
-      <div id="loading"><i class="fa fa-spinner fa-spin fa-3x"></i></div>
+      <div id="loading"><i class="bwi bwi-spinner bwi-spin bwi-3x"></i></div>
     </app-root>
   </body>
 </html>
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index 5add8c62..3574f6c3 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -1,5 +1,3 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome.scss";
 @import "~ngx-toastr/toastr";
 
 @import "~bootstrap/scss/_variables.scss";
@@ -31,7 +29,7 @@ $fa-font-path: "~font-awesome/fonts";
     .icon i::before {
       float: left;
       font-style: normal;
-      font-family: FontAwesome;
+      font-family: $icomoon-font-family;
       font-size: 25px;
       line-height: 20px;
       padding-right: 15px;
@@ -52,7 +50,7 @@ $fa-font-path: "~font-awesome/fonts";
       background-color: $danger;
 
       .icon i::before {
-        content: "\f0e7";
+        content: map_get($icons, "error");
       }
     }
 
@@ -60,7 +58,7 @@ $fa-font-path: "~font-awesome/fonts";
       background-color: $warning;
 
       .icon i::before {
-        content: "\f071";
+        content: map_get($icons, "exclamation-triangle");
       }
     }
 
@@ -68,7 +66,7 @@ $fa-font-path: "~font-awesome/fonts";
       background-color: $info;
 
       .icon i:before {
-        content: "\f05a";
+        content: map_get($icons, "info-circle");
       }
     }
 
@@ -76,7 +74,7 @@ $fa-font-path: "~font-awesome/fonts";
       background-color: $success;
 
       .icon i:before {
-        content: "\f00C";
+        content: map_get($icons, "check");
       }
     }
   }
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 0e95e0f1..16c9fba9 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,4 +1,5 @@
 @import "../../jslib/angular/src/scss/webfonts.css";
+@import "../../jslib/angular/src/scss/bwicons/styles/style.scss";
 @import "bootstrap.scss";
 @import "pages.scss";
 @import "misc.scss";