diff --git a/bitwarden_license/src/app/organizations/manage/sso.component.html b/bitwarden_license/src/app/organizations/manage/sso.component.html
index ceaabc9716..7beb992351 100644
--- a/bitwarden_license/src/app/organizations/manage/sso.component.html
+++ b/bitwarden_license/src/app/organizations/manage/sso.component.html
@@ -3,7 +3,11 @@
 </div>
 
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -69,7 +73,7 @@
           appA11yTitle="{{ 'learnMore' | i18n }}"
           href="https://bitwarden.com/help/article/about-key-connector/"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
         <small>{{ "memberDecryptionKeyConnectorDesc" | i18n }}</small>
       </label>
@@ -98,7 +102,7 @@
             [disabled]="!enableTestKeyConnector"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="keyConnectorUrl.pending"
@@ -111,11 +115,11 @@
       </div>
       <ng-container *ngIf="keyConnectorUrl.pristine && !keyConnectorUrl.pending">
         <div class="text-danger" *ngIf="keyConnectorUrl.hasError('invalidUrl')" role="alert">
-          <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+          <i class="bwi bwi-exclamation-circle" aria-hidden="true"></i>
           {{ "keyConnectorTestFail" | i18n }}
         </div>
         <div class="text-success" *ngIf="!keyConnectorUrl.hasError('invalidUrl')" role="alert">
-          <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
           {{ "keyConnectorTestSuccess" | i18n }}
         </div>
       </ng-container>
@@ -146,7 +150,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(callbackPath)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -162,7 +166,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(signedOutCallbackPath)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -261,7 +265,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spEntityId)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -277,7 +281,7 @@
               appA11yTitle="{{ 'launch' | i18n }}"
               (click)="launchUri(spMetadataUrl)"
             >
-              <i class="fa fa-lg fa-external-link" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
             </button>
             <button
               type="button"
@@ -285,7 +289,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spMetadataUrl)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -301,7 +305,7 @@
               appA11yTitle="{{ 'copyValue' | i18n }}"
               (click)="copy(spAcsUrl)"
             >
-              <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+              <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
             </button>
           </div>
         </div>
@@ -482,7 +486,7 @@
   </div>
 
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
diff --git a/bitwarden_license/src/app/providers/clients/add-organization.component.html b/bitwarden_license/src/app/providers/clients/add-organization.component.html
index 56602e01a0..1b87269006 100644
--- a/bitwarden_license/src/app/providers/clients/add-organization.component.html
+++ b/bitwarden_license/src/app/providers/clients/add-organization.component.html
@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <ng-container *ngIf="!loading">
diff --git a/bitwarden_license/src/app/providers/clients/clients.component.html b/bitwarden_license/src/app/providers/clients/clients.component.html
index b60f8c721a..e5d048002e 100644
--- a/bitwarden_license/src/app/providers/clients/clients.component.html
+++ b/bitwarden_license/src/app/providers/clients/clients.component.html
@@ -13,7 +13,7 @@
       />
     </div>
     <a class="btn btn-sm btn-outline-primary ml-3" routerLink="create" *ngIf="manageOrganizations">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newClientOrganization" | i18n }}
     </a>
     <button
@@ -21,14 +21,18 @@
       (click)="addExistingOrganization()"
       *ngIf="manageOrganizations && showAddExisting"
     >
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "addExistingOrganization" | i18n }}
     </button>
   </div>
 </div>
 
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -67,11 +71,11 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(o)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>
diff --git a/bitwarden_license/src/app/providers/manage/accept-provider.component.html b/bitwarden_license/src/app/providers/manage/accept-provider.component.html
index cc7fe33adf..7f34664a68 100644
--- a/bitwarden_license/src/app/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/src/app/providers/manage/accept-provider.component.html
@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
diff --git a/bitwarden_license/src/app/providers/manage/events.component.html b/bitwarden_license/src/app/providers/manage/events.component.html
index 88c84a0fc0..d27b53e8d9 100644
--- a/bitwarden_license/src/app/providers/manage/events.component.html
+++ b/bitwarden_license/src/app/providers/manage/events.component.html
@@ -32,9 +32,9 @@
         [disabled]="loaded && refreshForm.loading"
       >
         <i
-          class="fa fa-refresh fa-fw"
+          class="bwi bwi-refresh bwi-fw"
           aria-hidden="true"
-          [ngClass]="{ 'fa-spin': loaded && refreshForm.loading }"
+          [ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
         ></i>
         {{ "refresh" | i18n }}
       </button>
@@ -47,14 +47,18 @@
         (click)="exportEvents()"
         [disabled]="(loaded && exportForm.loading) || dirtyDates"
       >
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
         <span>{{ "export" | i18n }}</span>
       </button>
     </form>
   </div>
 </div>
 <ng-container *ngIf="!loaded">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
@@ -75,7 +79,7 @@
         <td>{{ e.date | date: "medium" }}</td>
         <td>
           <i
-            class="text-muted fa fa-lg {{ e.appIcon }}"
+            class="text-muted bwi bwi-lg {{ e.appIcon }}"
             title="{{ e.appName }}, {{ e.ip }}"
             aria-hidden="true"
           ></i>
@@ -97,7 +101,7 @@
     [disabled]="loaded && moreBtn.loading"
     *ngIf="continuationToken"
   >
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "loadMore" | i18n }}</span>
   </button>
 </ng-container>
diff --git a/bitwarden_license/src/app/providers/manage/people.component.html b/bitwarden_license/src/app/providers/manage/people.component.html
index 04d0054abd..3049a27009 100644
--- a/bitwarden_license/src/app/providers/manage/people.component.html
+++ b/bitwarden_license/src/app/providers/manage/people.component.html
@@ -52,11 +52,11 @@
         aria-expanded="false"
         appA11yTitle="{{ 'options' | i18n }}"
       >
-        <i class="fa fa-cog" aria-hidden="true"></i>
+        <i class="bwi bwi-cog" aria-hidden="true"></i>
       </button>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
         <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
-          <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
           {{ "reinviteSelected" | i18n }}
         </button>
         <button
@@ -65,32 +65,36 @@
           (click)="bulkConfirm()"
           *ngIf="showBulkConfirmUsers"
         >
-          <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
           {{ "confirmSelected" | i18n }}
         </button>
         <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
-          <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
           {{ "remove" | i18n }}
         </button>
         <div class="dropdown-divider"></div>
         <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-          <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
           {{ "selectAll" | i18n }}
         </button>
         <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-          <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
           {{ "unselectAll" | i18n }}
         </button>
       </div>
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "inviteUser" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -104,7 +108,7 @@
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
-      icon="fa-check-circle"
+      icon="bwi bwi-check-circle"
       *ngIf="showConfirmUsers"
     >
       {{ "providerUsersNeedConfirmed" | i18n }}
@@ -128,7 +132,8 @@
               size="25"
               [circle]="true"
               [fontSize]="14"
-            ></app-avatar>
+            >
+            </app-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
@@ -142,7 +147,11 @@
           </td>
           <td>
             <ng-container *ngIf="u.twoFactorEnabled">
-              <i class="fa fa-lock" title="{{ 'userUsingTwoStep' | i18n }}" aria-hidden="true"></i>
+              <i
+                class="bwi bwi-lock"
+                title="{{ 'userUsingTwoStep' | i18n }}"
+                aria-hidden="true"
+              ></i>
               <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
             </ng-container>
           </td>
@@ -161,7 +170,7 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a
@@ -171,7 +180,7 @@
                   (click)="reinvite(u)"
                   *ngIf="u.status === userStatusType.Invited"
                 >
-                  <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                   {{ "resendInvitation" | i18n }}
                 </a>
                 <a
@@ -181,7 +190,7 @@
                   (click)="confirm(u)"
                   *ngIf="u.status === userStatusType.Accepted"
                 >
-                  <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                   {{ "confirm" | i18n }}
                 </a>
                 <a
@@ -191,7 +200,7 @@
                   (click)="groups(u)"
                   *ngIf="accessGroups"
                 >
-                  <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
                   {{ "groups" | i18n }}
                 </a>
                 <a
@@ -201,11 +210,11 @@
                   (click)="events(u)"
                   *ngIf="accessEvents && u.status === userStatusType.Confirmed"
                 >
-                  <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                   {{ "eventLogs" | i18n }}
                 </a>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-remove" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>
diff --git a/bitwarden_license/src/app/providers/manage/user-add-edit.component.html b/bitwarden_license/src/app/providers/manage/user-add-edit.component.html
index 234a17a59e..a7dee25220 100644
--- a/bitwarden_license/src/app/providers/manage/user-add-edit.component.html
+++ b/bitwarden_license/src/app/providers/manage/user-add-edit.component.html
@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -54,7 +54,7 @@
             appA11yTitle="{{ 'learnMore' | i18n }}"
             href="https://bitwarden.com/help/article/user-types-access-control/#user-types"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </h3>
         <div class="form-check mt-2 form-check-block">
@@ -88,7 +88,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -106,12 +106,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/bitwarden_license/src/app/providers/providers-layout.component.html b/bitwarden_license/src/app/providers/providers-layout.component.html
index 799722c202..f5546f909e 100644
--- a/bitwarden_license/src/app/providers/providers-layout.component.html
+++ b/bitwarden_license/src/app/providers/providers-layout.component.html
@@ -10,7 +10,7 @@
         </div>
         <div class="ml-3 card border-danger text-danger bg-transparent" *ngIf="!provider.enabled">
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "providerIsDisabled" | i18n }}
           </div>
         </div>
@@ -18,19 +18,19 @@
       <ul class="nav nav-tabs" *ngIf="showMenuBar">
         <li class="nav-item">
           <a class="nav-link" routerLink="clients" routerLinkActive="active">
-            <i class="fa fa-university" aria-hidden="true"></i>
+            <i class="bwi bwi-bank" aria-hidden="true"></i>
             {{ "clients" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showManageTab">
           <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="fa fa-sliders" aria-hidden="true"></i>
+            <i class="bwi bwi-sliders" aria-hidden="true"></i>
             {{ "manage" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showSettingsTab">
           <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="fa fa-cogs" aria-hidden="true"></i>
+            <i class="bwi bwi-cogs" aria-hidden="true"></i>
             {{ "settings" | i18n }}
           </a>
         </li>
diff --git a/bitwarden_license/src/app/providers/settings/account.component.html b/bitwarden_license/src/app/providers/settings/account.component.html
index 64f36b7d45..f58e712ce3 100644
--- a/bitwarden_license/src/app/providers/settings/account.component.html
+++ b/bitwarden_license/src/app/providers/settings/account.component.html
@@ -2,7 +2,11 @@
   <h1>{{ "myProvider" | i18n }}</h1>
 </div>
 <div *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -42,7 +46,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
diff --git a/bitwarden_license/src/app/providers/setup/setup-provider.component.html b/bitwarden_license/src/app/providers/setup/setup-provider.component.html
index 9d5759f41d..085f46b2be 100644
--- a/bitwarden_license/src/app/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/src/app/providers/setup/setup-provider.component.html
@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
diff --git a/bitwarden_license/src/app/providers/setup/setup.component.html b/bitwarden_license/src/app/providers/setup/setup.component.html
index 0051f5c3e8..8bbbe41774 100644
--- a/bitwarden_license/src/app/providers/setup/setup.component.html
+++ b/bitwarden_license/src/app/providers/setup/setup.component.html
@@ -27,7 +27,7 @@
 
     <div class="mt-4">
       <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "submit" | i18n }}</span>
       </button>
       <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
diff --git a/bitwarden_license/src/app/providers/setup/setup.component.ts b/bitwarden_license/src/app/providers/setup/setup.component.ts
index 5a013431b0..20c33654d4 100644
--- a/bitwarden_license/src/app/providers/setup/setup.component.ts
+++ b/bitwarden_license/src/app/providers/setup/setup.component.ts
@@ -48,9 +48,7 @@ export class SetupComponent implements OnInit {
           "error",
           null,
           this.i18nService.t("emergencyInviteAcceptFailed"),
-          {
-            timeout: 10000,
-          }
+          { timeout: 10000 }
         );
         this.router.navigate(["/"]);
         return;
diff --git a/jslib b/jslib
index 54c6a4b3c3..6b4ed5fcce 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 54c6a4b3c3d34fe6adbbeba5d35a416a3fbc487d
+Subproject commit 6b4ed5fcce58c21a9977d94ebb65f954d6766548
diff --git a/src/404.html b/src/404.html
index 12c70a03ac..6cf5e363d5 100644
--- a/src/404.html
+++ b/src/404.html
@@ -9,13 +9,7 @@
       href="/404/bootstrap.min.css"
       rel="stylesheet"
       type="text/css"
-      integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
-    />
-    <link
-      href="/404/font-awesome.min.css"
-      rel="stylesheet"
-      type="text/css"
-      integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
+      integrity="sha384-hA/ESrxp2b05ywLtD9YwM6m+pNyLRY4+ruk6dWK00SM4k6SQs0bfrITJVSf6uZyH"
     />
     <link href="/404/styles.css" rel="stylesheet" type="text/css" />
 
@@ -33,7 +27,9 @@
     <div class="banner">
       <div class="container inner banner">
         <div class="row align-items-center">
-          <div class="col brand"><i class="fa fa-shield"></i>&nbsp; <strong>bit</strong>warden</div>
+          <div class="col brand">
+            <i class="bwi bwi-shield"></i>&nbsp; <strong>bit</strong>warden
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/404/font-awesome.min.css b/src/404/font-awesome.min.css
deleted file mode 100644
index 540440ce89..0000000000
--- a/src/404/font-awesome.min.css
+++ /dev/null
@@ -1,4 +0,0 @@
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
diff --git a/src/404/styles.css b/src/404/styles.css
index 8993dc2104..7dec3947a6 100644
--- a/src/404/styles.css
+++ b/src/404/styles.css
@@ -119,3 +119,33 @@ h2 {
   padding: 40px 0 40px 0;
   border-top: 1px solid #dee2e6;
 }
+
+/* Bitwarden icons, manually copied */
+
+@font-face {
+  font-family: "bwi-font";
+  src: url(../images/bwi-font.svg) format("svg"), url(../fonts/bwi-font.ttf) format("truetype"),
+    url(../fonts/bwi-font.woff) format("woff"), url(../fonts/bwi-font.woff2) format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.bwi {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: "bwi-font" !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  display: inline-block;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bwi-shield:before {
+  content: "\e932";
+}
diff --git a/src/app/accounts/accept-emergency.component.html b/src/app/accounts/accept-emergency.component.html
index 2a34be57d9..919b3f4ed0 100644
--- a/src/app/accounts/accept-emergency.component.html
+++ b/src/app/accounts/accept-emergency.component.html
@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
diff --git a/src/app/accounts/accept-organization.component.html b/src/app/accounts/accept-organization.component.html
index c9460297d1..ab45c2bc2b 100644
--- a/src/app/accounts/accept-organization.component.html
+++ b/src/app/accounts/accept-organization.component.html
@@ -3,7 +3,7 @@
     <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index f4fc94cec5..cc3d931720 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -28,7 +28,7 @@
             >
               <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 4442016184..a45ef0d5af 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -2,7 +2,7 @@
   <div class="row justify-content-md-center mt-5">
     <div class="col-5">
       <p class="text-center mb-4">
-        <i class="fa fa-lock fa-4x text-muted" aria-hidden="true"></i>
+        <i class="bwi bwi-lock bwi-4x text-muted" aria-hidden="true"></i>
       </p>
       <p class="lead text-center mx-4 mb-4">{{ "yourVaultIsLocked" | i18n }}</p>
       <div class="card d-block">
@@ -27,9 +27,9 @@
                 (click)="togglePassword()"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -44,11 +44,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span>
-                <i class="fa fa-unlock-alt" aria-hidden="true"></i> {{ "unlock" | i18n }}
-              </span>
+              <span> <i class="bwi bwi-unlock" aria-hidden="true"></i> {{ "unlock" | i18n }} </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 5f36d53463..3e6dab1281 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -44,9 +44,9 @@
                 (click)="togglePassword()"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -74,9 +74,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span> <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -86,12 +86,13 @@
               [queryParams]="{ email: email }"
               class="btn btn-outline-secondary btn-block ml-2 mt-0"
             >
-              <i class="fa fa-pencil-square-o" aria-hidden="true"></i> {{ "createAccount" | i18n }}
+              <i class="bwi bwi-pencil-square-o" aria-hidden="true"></i>
+              {{ "createAccount" | i18n }}
             </a>
           </div>
           <div class="d-flex">
             <a routerLink="/sso" class="btn btn-outline-secondary btn-block mt-2">
-              <i class="fa fa-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
+              <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
             </a>
           </div>
         </div>
diff --git a/src/app/accounts/recover-delete.component.html b/src/app/accounts/recover-delete.component.html
index 27d39dfcd0..a0678e8449 100644
--- a/src/app/accounts/recover-delete.component.html
+++ b/src/app/accounts/recover-delete.component.html
@@ -28,7 +28,7 @@
             >
               <span>{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/recover-two-factor.component.html b/src/app/accounts/recover-two-factor.component.html
index 4440deddb8..133a8b47a3 100644
--- a/src/app/accounts/recover-two-factor.component.html
+++ b/src/app/accounts/recover-two-factor.component.html
@@ -60,7 +60,7 @@
             >
               <span>{{ "submit" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index 22fb444ae0..436717d840 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -51,7 +51,7 @@
                 <app-callout
                   title="{{ 'createOrganizationStep1' | i18n }}"
                   type="info"
-                  icon="fa-thumb-tack"
+                  icon="bwi bwi-thumb-tack"
                   *ngIf="showCreateOrgMessage"
                 >
                   {{ "createOrganizationCreatePersonalAccount" | i18n }}
@@ -114,11 +114,11 @@
                         (click)="togglePassword(false)"
                       >
                         <i
-                          class="fa fa-lg"
+                          class="bwi bwi-lg"
                           aria-hidden="true"
                           [ngClass]="{
-                            'fa-eye': !showPassword,
-                            'fa-eye-slash': showPassword
+                            'bwi-eye': !showPassword,
+                            'bwi-eye-slash': showPassword
                           }"
                         ></i>
                       </button>
@@ -146,9 +146,9 @@
                       (click)="togglePassword(true)"
                     >
                       <i
-                        class="fa fa-lg"
+                        class="bwi bwi-lg"
                         aria-hidden="true"
-                        [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                        [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                       ></i>
                     </button>
                   </div>
@@ -197,7 +197,7 @@
                   >
                     <span>{{ "submit" | i18n }}</span>
                     <i
-                      class="fa fa-spinner fa-spin"
+                      class="bwi bwi-spinner bwi-spin"
                       title="{{ 'loading' | i18n }}"
                       aria-hidden="true"
                     ></i>
diff --git a/src/app/accounts/remove-password.component.html b/src/app/accounts/remove-password.component.html
index 9d93a832b0..19e0d63572 100644
--- a/src/app/accounts/remove-password.component.html
+++ b/src/app/accounts/remove-password.component.html
@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -27,7 +27,7 @@
             [disabled]="actionPromise"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="continuing"
@@ -41,7 +41,7 @@
             [disabled]="actionPromise"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
               *ngIf="leaving"
diff --git a/src/app/accounts/set-password.component.html b/src/app/accounts/set-password.component.html
index f80716781e..f02eee904b 100644
--- a/src/app/accounts/set-password.component.html
+++ b/src/app/accounts/set-password.component.html
@@ -4,7 +4,7 @@
       <p class="lead text-center mb-4">{{ "setMasterPassword" | i18n }}</p>
       <div class="card d-block">
         <div class="card-body text-center" *ngIf="syncLoading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <div class="card-body" *ngIf="!syncLoading">
@@ -47,9 +47,9 @@
                   (click)="togglePassword(false)"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <div class="progress-bar invisible"></div>
@@ -76,9 +76,9 @@
                 (click)="togglePassword(true)"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -96,7 +96,7 @@
               [disabled]="form.loading"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/sso.component.html b/src/app/accounts/sso.component.html
index 04b411f0cd..84ae47495f 100644
--- a/src/app/accounts/sso.component.html
+++ b/src/app/accounts/sso.component.html
@@ -10,7 +10,7 @@
       <img class="logo mb-2 logo-themed" alt="Bitwarden" />
       <div class="card d-block mt-4">
         <div class="card-body" *ngIf="loggingIn">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <div class="card-body" *ngIf="!loggingIn">
@@ -34,9 +34,9 @@
               class="btn btn-primary btn-block btn-submit"
               [disabled]="form.loading"
             >
-              <span> <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
+              <span> <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "logIn" | i18n }} </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index f7fb8f0dc1..fb51755a9d 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -94,7 +94,7 @@
             </div>
           </ng-container>
           <i
-            class="fa fa-spinner text-muted fa-spin pull-right"
+            class="bwi bwi-spinner text-muted bwi-spin pull-right"
             title="{{ 'loading' | i18n }}"
             *ngIf="form.loading && selectedProviderType === providerType.WebAuthn"
             aria-hidden="true"
@@ -127,10 +127,10 @@
               "
             >
               <span>
-                <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
               </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/update-temp-password.component.html b/src/app/accounts/update-temp-password.component.html
index 688056f125..27e8a4ec10 100644
--- a/src/app/accounts/update-temp-password.component.html
+++ b/src/app/accounts/update-temp-password.component.html
@@ -36,9 +36,9 @@
                   (click)="togglePassword(false)"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <div class="progress-bar invisible"></div>
@@ -64,9 +64,9 @@
                 (click)="togglePassword(true)"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 ></i>
               </button>
             </div>
@@ -84,7 +84,7 @@
               [disabled]="form.loading"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/accounts/verify-email-token.component.html b/src/app/accounts/verify-email-token.component.html
index 3d98291035..9e0aad8b38 100644
--- a/src/app/accounts/verify-email-token.component.html
+++ b/src/app/accounts/verify-email-token.component.html
@@ -3,7 +3,7 @@
     <img class="mb-4 logo logo-themed" alt="Bitwarden" />
     <p class="text-center">
       <i
-        class="fa fa-spinner fa-spin fa-2x text-muted"
+        class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
diff --git a/src/app/accounts/verify-recover-delete.component.html b/src/app/accounts/verify-recover-delete.component.html
index 348806a5a4..79fc2fcd78 100644
--- a/src/app/accounts/verify-recover-delete.component.html
+++ b/src/app/accounts/verify-recover-delete.component.html
@@ -18,7 +18,7 @@
             >
               <span>{{ "deleteAccount" | i18n }}</span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/common/base.accept.component.ts b/src/app/common/base.accept.component.ts
index 8630ebd033..5a441f92a8 100644
--- a/src/app/common/base.accept.component.ts
+++ b/src/app/common/base.accept.component.ts
@@ -60,9 +60,7 @@ export abstract class BaseAcceptComponent implements OnInit {
           errorMessage != null
             ? this.i18nService.t(this.failedShortMessage, errorMessage)
             : this.i18nService.t(this.failedMessage);
-        this.platformUtilService.showToast("error", null, message, {
-          timeout: 10000,
-        });
+        this.platformUtilService.showToast("error", null, message, { timeout: 10000 });
         this.router.navigate(["/"]);
       }
 
diff --git a/src/app/common/base.events.component.ts b/src/app/common/base.events.component.ts
index 8d17953917..a2b9b57c44 100644
--- a/src/app/common/base.events.component.ts
+++ b/src/app/common/base.events.component.ts
@@ -110,13 +110,7 @@ export abstract class BaseEventsComponent {
     endDate: string,
     continuationToken: string
   ): Promise<ListResponse<EventResponse>>;
-  protected abstract getUserName(
-    r: EventResponse,
-    userId: string
-  ): {
-    name: string;
-    email: string;
-  };
+  protected abstract getUserName(r: EventResponse, userId: string): { name: string; email: string };
 
   protected async loadAndParseEvents(
     startDate: string,
@@ -144,10 +138,7 @@ export abstract class BaseEventsComponent {
         });
       })
     );
-    return {
-      continuationToken: response.continuationToken,
-      events: events,
-    };
+    return { continuationToken: response.continuationToken, events: events };
   }
 
   protected parseDates() {
@@ -181,13 +172,6 @@ export abstract class BaseEventsComponent {
 
     const data = await this.exportService.getEventExport(events);
     const fileName = this.exportService.getFileName(this.exportFileName, "csv");
-    this.platformUtilsService.saveFile(
-      window,
-      data,
-      {
-        type: "text/plain",
-      },
-      fileName
-    );
+    this.platformUtilsService.saveFile(window, data, { type: "text/plain" }, fileName);
   }
 }
diff --git a/src/app/common/base.people.component.ts b/src/app/common/base.people.component.ts
index 3d898ad91c..a49de3b5cf 100644
--- a/src/app/common/base.people.component.ts
+++ b/src/app/common/base.people.component.ts
@@ -35,10 +35,7 @@ const MaxCheckedCount = 500;
 export abstract class BasePeopleComponent<
   UserType extends ProviderUserUserDetailsResponse | OrganizationUserUserDetailsResponse
 > {
-  @ViewChild("confirmTemplate", {
-    read: ViewContainerRef,
-    static: true,
-  })
+  @ViewChild("confirmTemplate", { read: ViewContainerRef, static: true })
   confirmModalRef: ViewContainerRef;
 
   get allCount() {
diff --git a/src/app/components/nested-checkbox.component.ts b/src/app/components/nested-checkbox.component.ts
index 5c874c9781..2cbd1425e1 100644
--- a/src/app/components/nested-checkbox.component.ts
+++ b/src/app/components/nested-checkbox.component.ts
@@ -6,18 +6,10 @@ import { Utils } from "jslib-common/misc/utils";
   templateUrl: "nested-checkbox.component.html",
 })
 export class NestedCheckboxComponent {
-  @Input()
-  parentId: string;
-  @Input()
-  checkboxes: {
-    id: string;
-    get: () => boolean;
-    set: (v: boolean) => void;
-  }[];
-  @Output()
-  onSavedUser = new EventEmitter();
-  @Output()
-  onDeletedUser = new EventEmitter();
+  @Input() parentId: string;
+  @Input() checkboxes: { id: string; get: () => boolean; set: (v: boolean) => void }[];
+  @Output() onSavedUser = new EventEmitter();
+  @Output() onDeletedUser = new EventEmitter();
 
   get parentIndeterminate() {
     return !this.parentChecked && this.checkboxes.some((c) => c.get());
diff --git a/src/app/components/password-reprompt.component.html b/src/app/components/password-reprompt.component.html
index 997afdf116..b2c068e902 100644
--- a/src/app/components/password-reprompt.component.html
+++ b/src/app/components/password-reprompt.component.html
@@ -32,12 +32,9 @@
               (click)="togglePassword()"
             >
               <i
-                class="fa fa-lg"
+                class="bwi bwi-lg"
                 aria-hidden="true"
-                [ngClass]="{
-                  'fa-eye': !showPassword,
-                  'fa-eye-slash': showPassword
-                }"
+                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
               ></i>
             </button>
           </div>
diff --git a/src/app/components/password-strength.component.html b/src/app/components/password-strength.component.html
index 3cf6b9a0ba..c9eec73899 100644
--- a/src/app/components/password-strength.component.html
+++ b/src/app/components/password-strength.component.html
@@ -2,9 +2,7 @@
   <div
     class="progress-bar {{ color }}"
     role="progressbar"
-    [ngStyle]="{
-      width: scoreWidth + '%'
-    }"
+    [ngStyle]="{ width: scoreWidth + '%' }"
     attr.aria-valuenow="{{ scoreWidth }}"
     aria-valuemin="0"
     aria-valuemax="100"
diff --git a/src/app/components/password-strength.component.ts b/src/app/components/password-strength.component.ts
index 4141c795e4..53233b90f6 100644
--- a/src/app/components/password-strength.component.ts
+++ b/src/app/components/password-strength.component.ts
@@ -7,10 +7,8 @@ import { I18nService } from "jslib-common/abstractions/i18n.service";
   templateUrl: "password-strength.component.html",
 })
 export class PasswordStrengthComponent implements OnChanges {
-  @Input()
-  score?: number;
-  @Input()
-  showText = false;
+  @Input() score?: number;
+  @Input() showText = false;
 
   scoreWidth = 0;
   color = "bg-danger";
diff --git a/src/app/layouts/footer.component.html b/src/app/layouts/footer.component.html
index 8d5aa277a7..8601e123a1 100644
--- a/src/app/layouts/footer.component.html
+++ b/src/app/layouts/footer.component.html
@@ -1,9 +1,6 @@
 <div class="container footer text-muted">
   <div class="row">
-    <div class="col">
-      &copy;
-      {{ year }}, Bitwarden Inc.
-    </div>
+    <div class="col">&copy; {{ year }}, Bitwarden Inc.</div>
     <div class="col text-center"></div>
     <div class="col text-right">
       {{ "versionNumber" | i18n: version }}
diff --git a/src/app/layouts/frontend-layout.component.html b/src/app/layouts/frontend-layout.component.html
index 5e2dc79a9d..479302d35d 100644
--- a/src/app/layouts/frontend-layout.component.html
+++ b/src/app/layouts/frontend-layout.component.html
@@ -1,7 +1,5 @@
 <router-outlet></router-outlet>
 <div class="container my-5 text-muted text-center">
-  &copy;
-  {{ year }}, Bitwarden Inc.
-  <br />
+  &copy; {{ year }}, Bitwarden Inc. <br />
   {{ "versionNumber" | i18n: version }}
 </div>
diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index 649b39a588..6ea3deedd6 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -1,12 +1,7 @@
-<nav
-  class="navbar navbar-expand navbar-dark"
-  [ngClass]="{
-    'nav-background-alt': selfHosted
-  }"
->
+<nav class="navbar navbar-expand navbar-dark" [ngClass]="{ 'nav-background-alt': selfHosted }">
   <div class="container">
     <a class="navbar-brand" routerLink="/" appA11yTitle="{{ 'pageTitle' | i18n: 'Bitwarden' }}">
-      <i class="fa fa-shield" aria-hidden="true"></i>
+      <i class="bwi bwi-shield" aria-hidden="true"></i>
     </a>
     <div class="collapse navbar-collapse">
       <ul class="navbar-nav">
@@ -44,7 +39,7 @@
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i>
+          <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
         </a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-profile">
           <div class="dropdown-item-text d-flex align-items-center" *ngIf="name" appStopProp>
@@ -62,11 +57,11 @@
           </div>
           <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#" routerLink="/settings/account">
-            <i class="fa fa-fw fa-user" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
             {{ "myAccount" | i18n }}
           </a>
           <a class="dropdown-item" href="https://help.bitwarden.com" target="_blank" rel="noopener">
-            <i class="fa fa-fw fa-question-circle" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
             {{ "getHelp" | i18n }}
           </a>
           <a
@@ -75,16 +70,16 @@
             target="_blank"
             rel="noopener"
           >
-            <i class="fa fa-fw fa-download" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
             {{ "getApps" | i18n }}
           </a>
           <div class="dropdown-divider"></div>
           <button type="button" class="dropdown-item" (click)="lock()">
-            <i class="fa fa-fw fa-lock" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
             {{ "lockNow" | i18n }}
           </button>
           <button type="button" class="dropdown-item" (click)="logOut()">
-            <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
             {{ "logOut" | i18n }}
           </button>
         </div>
diff --git a/src/app/layouts/organization-layout.component.html b/src/app/layouts/organization-layout.component.html
index 2992036c91..51fec6abd9 100644
--- a/src/app/layouts/organization-layout.component.html
+++ b/src/app/layouts/organization-layout.component.html
@@ -13,7 +13,7 @@
           *ngIf="!organization.enabled"
         >
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "organizationIsDisabled" | i18n }}
           </div>
         </div>
@@ -22,7 +22,7 @@
           *ngIf="organization.isProviderUser"
         >
           <div class="card-body py-2">
-            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
             {{ "accessingUsingProvider" | i18n: organization.providerName }}
           </div>
         </div>
@@ -30,25 +30,25 @@
       <ul class="nav nav-tabs" *ngIf="showMenuBar">
         <li class="nav-item">
           <a class="nav-link" routerLink="vault" routerLinkActive="active">
-            <i class="fa fa-lock" aria-hidden="true"></i>
+            <i class="bwi bwi-lock" aria-hidden="true"></i>
             {{ "vault" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showManageTab">
           <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="fa fa-sliders" aria-hidden="true"></i>
+            <i class="bwi bwi-sliders" aria-hidden="true"></i>
             {{ "manage" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="showToolsTab">
           <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
-            <i class="fa fa-wrench" aria-hidden="true"></i>
+            <i class="bwi bwi-wrench" aria-hidden="true"></i>
             {{ "tools" | i18n }}
           </a>
         </li>
         <li class="nav-item" *ngIf="organization.isOwner">
           <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="fa fa-cogs" aria-hidden="true"></i>
+            <i class="bwi bwi-cogs" aria-hidden="true"></i>
             {{ "settings" | i18n }}
           </a>
         </li>
diff --git a/src/app/organizations/manage/bulk/bulk-confirm.component.html b/src/app/organizations/manage/bulk/bulk-confirm.component.html
index 209fa447e1..a14d515c49 100644
--- a/src/app/organizations/manage/bulk/bulk-confirm.component.html
+++ b/src/app/organizations/manage/bulk/bulk-confirm.component.html
@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <app-callout type="danger" *ngIf="filteredUsers.length <= 0">
@@ -51,7 +51,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -69,7 +70,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -97,7 +99,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -121,7 +124,7 @@
           [disabled]="loading"
           (click)="submit()"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "confirm" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/bulk/bulk-remove.component.html b/src/app/organizations/manage/bulk/bulk-remove.component.html
index 5a5034b7b4..993d89533f 100644
--- a/src/app/organizations/manage/bulk/bulk-remove.component.html
+++ b/src/app/organizations/manage/bulk/bulk-remove.component.html
@@ -39,7 +39,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -64,7 +65,8 @@
                   size="25"
                   [circle]="true"
                   [fontSize]="14"
-                ></app-avatar>
+                >
+                </app-avatar>
               </td>
               <td>
                 {{ user.email }}
@@ -88,7 +90,7 @@
           [disabled]="loading"
           (click)="submit()"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "removeUsers" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/bulk/bulk-status.component.html b/src/app/organizations/manage/bulk/bulk-status.component.html
index 8eac94bc6f..8d9676781a 100644
--- a/src/app/organizations/manage/bulk/bulk-status.component.html
+++ b/src/app/organizations/manage/bulk/bulk-status.component.html
@@ -16,7 +16,7 @@
       </div>
       <div class="modal-body">
         <div class="card-body text-center" *ngIf="loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           {{ "loading" | i18n }}
         </div>
         <table class="table table-hover table-list" *ngIf="!loading">
diff --git a/src/app/organizations/manage/collection-add-edit.component.html b/src/app/organizations/manage/collection-add-edit.component.html
index 3870d5acaf..f699e802b5 100644
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -91,7 +91,7 @@
                   {{ g.name }}
                   <ng-container *ngIf="g.accessAll">
                     <i
-                      class="fa fa-th text-muted fa-fw"
+                      class="bwi bwi-filter text-muted bwi-fw"
                       title="{{ 'groupAccessAllItems' | i18n }}"
                       aria-hidden="true"
                     ></i>
@@ -126,7 +126,7 @@
           [disabled]="form.loading"
           *ngIf="this.canSave"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -144,12 +144,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/organizations/manage/collections.component.html b/src/app/organizations/manage/collections.component.html
index eb02b9920b..976a63fe6d 100644
--- a/src/app/organizations/manage/collections.component.html
+++ b/src/app/organizations/manage/collections.component.html
@@ -17,13 +17,17 @@
       class="btn btn-sm btn-outline-primary ml-3"
       (click)="add()"
     >
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newCollection" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -58,7 +62,7 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <a
@@ -68,7 +72,7 @@
                 *ngIf="this.canEdit(c)"
                 (click)="users(c)"
               >
-                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
                 {{ "users" | i18n }}
               </a>
               <a
@@ -78,7 +82,7 @@
                 *ngIf="this.canDelete(c)"
                 (click)="delete(c)"
               >
-                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ "delete" | i18n }}
               </a>
             </div>
diff --git a/src/app/organizations/manage/entity-events.component.html b/src/app/organizations/manage/entity-events.component.html
index 4f73bf986b..29f266cf04 100644
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -17,7 +17,7 @@
       </div>
       <div class="modal-body" *ngIf="!loaded">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -55,8 +55,8 @@
             [disabled]="loaded && refreshBtn.loading"
           >
             <i
-              class="fa fa-refresh fa-fw"
-              [ngClass]="{ 'fa-spin': loaded && refreshBtn.loading }"
+              class="bwi bwi-refresh bwi-fw"
+              [ngClass]="{ 'bwi-spin': loaded && refreshBtn.loading }"
               aria-hidden="true"
             ></i>
             {{ "refresh" | i18n }}
@@ -82,7 +82,7 @@
               <td>{{ e.date | date: "medium" }}</td>
               <td>
                 <i
-                  class="text-muted fa fa-lg {{ e.appIcon }}"
+                  class="text-muted bwi bwi-lg {{ e.appIcon }}"
                   title="{{ e.appName }}, {{ e.ip }}"
                   aria-hidden="true"
                 ></i>
@@ -104,7 +104,7 @@
           [disabled]="loaded && moreBtn.loading"
           *ngIf="continuationToken"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "loadMore" | i18n }}</span>
         </button>
       </div>
diff --git a/src/app/organizations/manage/entity-users.component.html b/src/app/organizations/manage/entity-users.component.html
index 10104d5571..beb9ff0acc 100644
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading || !users">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -109,7 +109,8 @@
                     size="25"
                     [circle]="true"
                     [fontSize]="14"
-                  ></app-avatar>
+                  >
+                  </app-avatar>
                 </td>
                 <td>
                   {{ u.email }}
@@ -128,7 +129,7 @@
                 <td *ngIf="entity === 'collection'">
                   <ng-container *ngIf="u.accessAll">
                     <i
-                      class="fa fa-th"
+                      class="bwi bwi-filter"
                       title="{{ 'userAccessAllItems' | i18n }}"
                       aria-hidden="true"
                     ></i>
@@ -167,7 +168,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/events.component.html b/src/app/organizations/manage/events.component.html
index 88c84a0fc0..d27b53e8d9 100644
--- a/src/app/organizations/manage/events.component.html
+++ b/src/app/organizations/manage/events.component.html
@@ -32,9 +32,9 @@
         [disabled]="loaded && refreshForm.loading"
       >
         <i
-          class="fa fa-refresh fa-fw"
+          class="bwi bwi-refresh bwi-fw"
           aria-hidden="true"
-          [ngClass]="{ 'fa-spin': loaded && refreshForm.loading }"
+          [ngClass]="{ 'bwi-spin': loaded && refreshForm.loading }"
         ></i>
         {{ "refresh" | i18n }}
       </button>
@@ -47,14 +47,18 @@
         (click)="exportEvents()"
         [disabled]="(loaded && exportForm.loading) || dirtyDates"
       >
-        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" aria-hidden="true"></i>
         <span>{{ "export" | i18n }}</span>
       </button>
     </form>
   </div>
 </div>
 <ng-container *ngIf="!loaded">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="loaded">
@@ -75,7 +79,7 @@
         <td>{{ e.date | date: "medium" }}</td>
         <td>
           <i
-            class="text-muted fa fa-lg {{ e.appIcon }}"
+            class="text-muted bwi bwi-lg {{ e.appIcon }}"
             title="{{ e.appName }}, {{ e.ip }}"
             aria-hidden="true"
           ></i>
@@ -97,7 +101,7 @@
     [disabled]="loaded && moreBtn.loading"
     *ngIf="continuationToken"
   >
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "loadMore" | i18n }}</span>
   </button>
 </ng-container>
diff --git a/src/app/organizations/manage/group-add-edit.component.html b/src/app/organizations/manage/group-add-edit.component.html
index 9ab6779a5b..536d01f1f2 100644
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -58,7 +58,7 @@
               appA11yTitle="{{ 'learnMore' | i18n }}"
               href="https://bitwarden.com/help/article/user-types-access-control/#access-control"
             >
-              <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </div>
           <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
@@ -150,7 +150,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -168,12 +168,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               aria-hidden="true"
               title="{{ 'loading' | i18n }}"
diff --git a/src/app/organizations/manage/groups.component.html b/src/app/organizations/manage/groups.component.html
index 4299bf335b..050307b853 100644
--- a/src/app/organizations/manage/groups.component.html
+++ b/src/app/organizations/manage/groups.component.html
@@ -12,13 +12,17 @@
       />
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newGroup" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -51,15 +55,15 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
-                <i class="fa fa-fw fa-users" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
                 {{ "users" | i18n }}
               </a>
               <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
-                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ "delete" | i18n }}
               </a>
             </div>
diff --git a/src/app/organizations/manage/people.component.html b/src/app/organizations/manage/people.component.html
index 243f08baae..49be829e5f 100644
--- a/src/app/organizations/manage/people.component.html
+++ b/src/app/organizations/manage/people.component.html
@@ -52,11 +52,11 @@
         aria-expanded="false"
         appA11yTitle="{{ 'options' | i18n }}"
       >
-        <i class="fa fa-cog" aria-hidden="true"></i>
+        <i class="bwi bwi-cog" aria-hidden="true"></i>
       </button>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
         <button class="dropdown-item" appStopClick (click)="bulkReinvite()">
-          <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
           {{ "reinviteSelected" | i18n }}
         </button>
         <button
@@ -65,32 +65,36 @@
           (click)="bulkConfirm()"
           *ngIf="showBulkConfirmUsers"
         >
-          <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
           {{ "confirmSelected" | i18n }}
         </button>
         <button class="dropdown-item text-danger" appStopClick (click)="bulkRemove()">
-          <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
           {{ "remove" | i18n }}
         </button>
         <div class="dropdown-divider"></div>
         <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-          <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
           {{ "selectAll" | i18n }}
         </button>
         <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-          <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+          <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
           {{ "unselectAll" | i18n }}
         </button>
       </div>
     </div>
     <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="invite()">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "inviteUser" | i18n }}
     </button>
   </div>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container
@@ -104,7 +108,7 @@
     <app-callout
       type="info"
       title="{{ 'confirmUsers' | i18n }}"
-      icon="fa-check-circle"
+      icon="bwi bwi-check-circle"
       *ngIf="showConfirmUsers"
     >
       {{ "usersNeedConfirmed" | i18n }}
@@ -128,7 +132,8 @@
               size="25"
               [circle]="true"
               [fontSize]="14"
-            ></app-avatar>
+            >
+            </app-avatar>
           </td>
           <td>
             <a href="#" appStopClick (click)="edit(u)">{{ u.email }}</a>
@@ -142,12 +147,16 @@
           </td>
           <td>
             <ng-container *ngIf="u.twoFactorEnabled">
-              <i class="fa fa-lock" title="{{ 'userUsingTwoStep' | i18n }}" aria-hidden="true"></i>
+              <i
+                class="bwi bwi-lock"
+                title="{{ 'userUsingTwoStep' | i18n }}"
+                aria-hidden="true"
+              ></i>
               <span class="sr-only">{{ "userUsingTwoStep" | i18n }}</span>
             </ng-container>
             <ng-container *ngIf="showEnrolledStatus(u)">
               <i
-                class="fa fa-key"
+                class="bwi bwi-key"
                 title="{{ 'enrolledPasswordReset' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -171,7 +180,7 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a
@@ -181,7 +190,7 @@
                   (click)="reinvite(u)"
                   *ngIf="u.status === userStatusType.Invited"
                 >
-                  <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
                   {{ "resendInvitation" | i18n }}
                 </a>
                 <a
@@ -191,7 +200,7 @@
                   (click)="confirm(u)"
                   *ngIf="u.status === userStatusType.Accepted"
                 >
-                  <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
                   {{ "confirm" | i18n }}
                 </a>
                 <a
@@ -201,7 +210,7 @@
                   (click)="groups(u)"
                   *ngIf="accessGroups"
                 >
-                  <i class="fa fa-fw fa-sitemap" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-sitemap" aria-hidden="true"></i>
                   {{ "groups" | i18n }}
                 </a>
                 <a
@@ -211,7 +220,7 @@
                   (click)="events(u)"
                   *ngIf="accessEvents && u.status === userStatusType.Confirmed"
                 >
-                  <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                   {{ "eventLogs" | i18n }}
                 </a>
                 <a
@@ -221,11 +230,11 @@
                   (click)="resetPassword(u)"
                   *ngIf="allowResetPassword(u)"
                 >
-                  <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
                   {{ "resetPassword" | i18n }}
                 </a>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(u)">
-                  <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                   {{ "remove" | i18n }}
                 </a>
               </div>
diff --git a/src/app/organizations/manage/policies.component.html b/src/app/organizations/manage/policies.component.html
index 2bb3036c3c..0f8b890c8f 100644
--- a/src/app/organizations/manage/policies.component.html
+++ b/src/app/organizations/manage/policies.component.html
@@ -2,7 +2,11 @@
   <h1>{{ "policies" | i18n }}</h1>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <table class="table table-hover table-list" *ngIf="!loading">
diff --git a/src/app/organizations/manage/policy-edit.component.html b/src/app/organizations/manage/policy-edit.component.html
index 49098dcc5f..90f1de8190 100644
--- a/src/app/organizations/manage/policy-edit.component.html
+++ b/src/app/organizations/manage/policy-edit.component.html
@@ -24,7 +24,7 @@
       <div class="modal-body">
         <div class="modal-body" *ngIf="loading">
           <i
-            class="fa fa-spinner fa-spin text-muted"
+            class="bwi bwi-spinner bwi-spin text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -37,7 +37,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/reset-password.component.html b/src/app/organizations/manage/reset-password.component.html
index 231e50bb35..137720dc72 100644
--- a/src/app/organizations/manage/reset-password.component.html
+++ b/src/app/organizations/manage/reset-password.component.html
@@ -33,12 +33,12 @@
               <div class="ml-auto d-flex">
                 <a
                   href="#"
-                  class="d-block mr-2 fa-icon-above-input"
+                  class="d-block mr-2 bwi-icon-above-input"
                   appStopClick
                   appA11yTitle="{{ 'generatePassword' | i18n }}"
                   (click)="generatePassword()"
                 >
-                  <i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
+                  <i class="bwi bwi-lg bwi-fw bwi-refresh" aria-hidden="true"></i>
                 </a>
               </div>
             </div>
@@ -63,9 +63,9 @@
                   (click)="togglePassword()"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                    [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   ></i>
                 </button>
                 <button
@@ -74,7 +74,7 @@
                   appA11yTitle="{{ 'copyPassword' | i18n }}"
                   (click)="copy(newPassword)"
                 >
-                  <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
@@ -85,7 +85,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/user-add-edit.component.html b/src/app/organizations/manage/user-add-edit.component.html
index 5b6aee419a..31a5f032b1 100644
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -23,7 +23,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -54,7 +54,7 @@
             appA11yTitle="{{ 'learnMore' | i18n }}"
             href="https://bitwarden.com/help/article/user-types-access-control/#user-types"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </h3>
         <div class="form-check mt-2 form-check-block">
@@ -279,7 +279,7 @@
               appA11yTitle="{{ 'learnMore' | i18n }}"
               href="https://bitwarden.com/help/article/user-types-access-control/#access-control"
             >
-              <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </div>
           <div class="ml-auto" *ngIf="access === 'selected' && collections && collections.length">
@@ -371,7 +371,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -389,12 +389,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/organizations/manage/user-confirm.component.html b/src/app/organizations/manage/user-confirm.component.html
index 83e85ad89f..4b51ce3d6a 100644
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -44,7 +44,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "confirm" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/manage/user-groups.component.html b/src/app/organizations/manage/user-groups.component.html
index 76c8d092fb..4853125b78 100644
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -17,7 +17,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -48,7 +48,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/settings/account.component.html b/src/app/organizations/settings/account.component.html
index c01c4c8959..8995d8aa0a 100644
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -2,7 +2,11 @@
   <h1>{{ "myOrganization" | i18n }}</h1>
 </div>
 <div *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -63,7 +67,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
@@ -89,7 +93,11 @@
 </div>
 <p>{{ "taxInformationDesc" | i18n }}</p>
 <div *ngIf="!org || loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -101,7 +109,7 @@
 >
   <app-tax-info></app-tax-info>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="formTax.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/organizations/settings/adjust-subscription.component.html b/src/app/organizations/settings/adjust-subscription.component.html
index 1f707e1c1b..bbe1e3cb51 100644
--- a/src/app/organizations/settings/adjust-subscription.component.html
+++ b/src/app/organizations/settings/adjust-subscription.component.html
@@ -57,7 +57,7 @@
       </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "save" | i18n }}</span>
     </button>
   </div>
diff --git a/src/app/organizations/settings/delete-organization.component.html b/src/app/organizations/settings/delete-organization.component.html
index 19e4610531..17af9539be 100644
--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -26,7 +26,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "deleteOrganization" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/organizations/settings/download-license.component.html b/src/app/organizations/settings/download-license.component.html
index dd27236c22..c93886c195 100644
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -15,7 +15,7 @@
             appA11yTitle="{{ 'learnMore' | i18n }}"
             href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <input
@@ -29,7 +29,7 @@
       </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/organizations/settings/organization-subscription.component.html b/src/app/organizations/settings/organization-subscription.component.html
index 72c9b64f98..239935fb74 100644
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/src/app/organizations/settings/organization-subscription.component.html
@@ -3,7 +3,7 @@
     {{ "subscription" | i18n }}
     <small *ngIf="firstLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -12,7 +12,7 @@
   </h1>
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}"></i>
+  <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 
@@ -38,7 +38,7 @@
       [appApiAction]="reinstatePromise"
       [disabled]="reinstateBtn.loading"
     >
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "reinstateSubscription" | i18n }}</span>
     </button>
   </app-callout>
@@ -138,7 +138,7 @@
       [disabled]="removeSponsorshipBtn.loading"
       *ngIf="isSponsoredSubscription"
     >
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "removeSponsorship" | i18n }}</span>
     </button>
     <h2 class="spaced-header">{{ "storage" | i18n }}</h2>
@@ -204,7 +204,7 @@
         [disabled]="cancelBtn.loading"
         *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
       >
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "cancelSubscription" | i18n }}</span>
       </button>
     </div>
@@ -224,7 +224,7 @@
       <dd *ngIf="sub.expiration">
         {{ sub.expiration | date: "mediumDate" }}
         <span *ngIf="isExpired" class="text-danger ml-2">
-          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+          <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
           {{ "licenseIsExpired" | i18n }}
         </span>
       </dd>
diff --git a/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html b/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
index a4d2199c2c..caa2260f52 100644
--- a/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
+++ b/src/app/organizations/sponsorships/families-for-enterprise-setup.component.html
@@ -4,7 +4,7 @@
   </div>
   <div *ngIf="loading" class="mt-5 d-flex justify-content-center">
     <i
-      class="fa fa-spinner fa-spin fa-2x text-muted"
+      class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -42,7 +42,7 @@
     </div>
     <div class="form-group col-6" *ngIf="!showNewOrganization">
       <button class="btn btn-primary mt-2 btn-submit" [disabled]="form.loading" type="submit">
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "acceptOffer" | i18n }}</span>
       </button>
     </div>
diff --git a/src/app/organizations/tools/tools.component.html b/src/app/organizations/tools/tools.component.html
index a38b3c72de..1cc93bff8c 100644
--- a/src/app/organizations/tools/tools.component.html
+++ b/src/app/organizations/tools/tools.component.html
@@ -1,7 +1,7 @@
 <div class="container page-content">
   <ng-container *ngIf="loading">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index d8e737152b..3362a20515 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -20,7 +20,7 @@
           <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
-                class="fa fa-spinner fa-spin text-muted"
+                class="bwi bwi-spinner bwi-spin text-muted"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -41,11 +41,11 @@
             (click)="addCipher()"
             *ngIf="!deleted"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
           </button>
         </div>
       </div>
-      <app-callout type="warning" *ngIf="deleted" icon="fa-warning">
+      <app-callout type="warning" *ngIf="deleted" icon="bwi bwi-exclamation-triangle">
         {{ trashCleanupWarning }}
       </app-callout>
       <app-org-vault-ciphers
diff --git a/src/app/providers/providers.component.html b/src/app/providers/providers.component.html
index 304b9d594b..de63e139b5 100644
--- a/src/app/providers/providers.component.html
+++ b/src/app/providers/providers.component.html
@@ -1,16 +1,16 @@
 <ng-container *ngIf="vault">
   <p *ngIf="!loaded" class="text-muted">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </p>
   <ng-container *ngIf="loaded">
-    <ul class="fa-ul card-ul carets" *ngIf="providers && providers.length">
+    <ul class="bwi-ul card-ul carets" *ngIf="providers && providers.length">
       <li *ngFor="let p of providers">
         <a [routerLink]="['/providers', p.id]" class="text-body">
-          <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{ p.name }}
+          <i class="bwi bwi-li bwi-caret-right" aria-hidden="true"></i> {{ p.name }}
           <ng-container *ngIf="!p.enabled">
             <i
-              class="fa fa-exclamation-triangle text-danger"
+              class="bwi bwi-exclamation-triangle text-danger"
               title="{{ 'providerIsDisabled' | i18n }}"
               aria-hidden="true"
             ></i>
@@ -28,7 +28,7 @@
       <h1>{{ "providers" | i18n }}</h1>
     </div>
     <p *ngIf="!loaded" class="text-muted">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </p>
     <ng-container *ngIf="loaded">
@@ -42,7 +42,7 @@
               <a href="#" [routerLink]="['/providers', p.id]">{{ p.name }}</a>
               <ng-container *ngIf="!p.enabled">
                 <i
-                  class="fa fa-exclamation-triangle text-danger"
+                  class="bwi bwi-exclamation-triangle text-danger"
                   title="{{ 'providerIsDisabled' | i18n }}"
                   aria-hidden="true"
                 ></i>
diff --git a/src/app/send/access.component.html b/src/app/send/access.component.html
index 176efaf70f..b97b53e083 100644
--- a/src/app/send/access.component.html
+++ b/src/app/send/access.component.html
@@ -21,7 +21,7 @@
       <div class="card d-block">
         <div class="card-body" *ngIf="loading" class="text-center">
           <i
-            class="fa fa-spinner fa-spin fa-2x text-muted"
+            class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -50,10 +50,10 @@
               [disabled]="form.loading"
             >
               <span>
-                <i class="fa fa-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
+                <i class="bwi bwi-sign-in" aria-hidden="true"></i> {{ "continue" | i18n }}
               </span>
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -93,14 +93,14 @@
               *ngIf="send.text.hidden"
             >
               <i
-                class="fa fa-lg"
+                class="bwi bwi-lg"
                 aria-hidden="true"
-                [ngClass]="{ 'fa-eye': !showText, 'fa-eye-slash': showText }"
+                [ngClass]="{ 'bwi-eye': !showText, 'bwi-eye-slash': showText }"
               ></i>
               {{ "toggleVisibility" | i18n }}
             </button>
             <button class="btn btn-block btn-link" type="button" (click)="copyText()">
-              <i class="fa fa-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
+              <i class="bwi bwi-copy" aria-hidden="true"></i> {{ "copyValue" | i18n }}
             </button>
           </ng-container>
           <!-- File -->
@@ -112,7 +112,7 @@
               (click)="download()"
               *ngIf="!downloading"
             >
-              <i class="fa fa-download" aria-hidden="true"></i>
+              <i class="bwi bwi-download" aria-hidden="true"></i>
               {{ "downloadFile" | i18n }} ({{ send.file.sizeName }})
             </button>
             <button
@@ -122,7 +122,7 @@
               disabled="true"
             >
               <i
-                class="fa fa-spinner fa-spin"
+                class="bwi bwi-spinner bwi-spin"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
diff --git a/src/app/send/add-edit.component.html b/src/app/send/add-edit.component.html
index 481148a75a..8d6c066bab 100644
--- a/src/app/send/add-edit.component.html
+++ b/src/app/send/add-edit.component.html
@@ -151,9 +151,9 @@
           <h3 class="mb-0 mr-2">{{ "options" | i18n }}</h3>
           <a class="mb-1" href="#" appStopClick role="button">
             <i
-              class="fa"
+              class="bwi"
               aria-hidden="true"
-              [ngClass]="{ 'fa-chevron-down': !showOptions, 'fa-chevron-up': showOptions }"
+              [ngClass]="{ 'bwi-angle-down': !showOptions, 'bwi-chevron-up': showOptions }"
             ></i>
           </a>
         </div>
@@ -213,9 +213,9 @@
                     (click)="togglePasswordVisible()"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                      [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                     ></i>
                   </button>
                 </div>
@@ -272,7 +272,7 @@
           [ngClass]="{ loading: form.loading }"
           [disabled]="form.loading || disableSend"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -290,12 +290,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/send/send.component.html b/src/app/send/send.component.html
index 2e325f034d..a27f7d02e5 100644
--- a/src/app/send/send.component.html
+++ b/src/app/send/send.component.html
@@ -19,23 +19,23 @@
             autocomplete="off"
             appAutofocus
           />
-          <ul class="fa-ul card-ul">
+          <ul class="bwi-ul card-ul">
             <li [ngClass]="{ active: selectedAll }">
               <a href="#" appStopClick (click)="selectAll()">
-                <i class="fa-li fa fa-fw fa-th"></i>{{ "allSends" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-filter"></i>{{ "allSends" | i18n }}
               </a>
             </li>
           </ul>
           <h3>{{ "types" | i18n }}</h3>
-          <ul class="fa-ul card-ul">
+          <ul class="bwi-ul card-ul">
             <li [ngClass]="{ active: selectedType === sendType.Text }">
               <a href="#" appStopClick (click)="selectType(sendType.Text)">
-                <i class="fa-li fa fa-fw fa-file-text-o"></i>{{ "sendTypeText" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-file-text"></i>{{ "sendTypeText" | i18n }}
               </a>
             </li>
             <li [ngClass]="{ active: selectedType === sendType.File }">
               <a href="#" appStopClick (click)="selectType(sendType.File)">
-                <i class="fa-li fa fa-fw fa-file-o"></i>{{ "sendTypeFile" | i18n }}
+                <i class="bwi bwi-li bwi-fw bwi-file"></i>{{ "sendTypeFile" | i18n }}
               </a>
             </li>
           </ul>
@@ -49,7 +49,7 @@
           <small #actionSpinner [appApiAction]="actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
-                class="fa fa-spinner fa-spin text-muted"
+                class="bwi bwi-spinner bwi-spin text-muted"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -64,7 +64,7 @@
             (click)="addSend()"
             [disabled]="disableSend"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{ "createSend" | i18n }}
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "createSend" | i18n }}
           </button>
         </div>
       </div>
@@ -74,15 +74,15 @@
           <tr *ngFor="let s of filteredSends">
             <td class="table-list-icon">
               <div class="icon" aria-hidden="true">
-                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type == sendType.File"></i>
-                <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type == sendType.Text"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type == sendType.File"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type == sendType.Text"></i>
               </div>
             </td>
             <td class="reduced-lh wrap">
               <a href="#" appStopClick appStopProp (click)="editSend(s)">{{ s.name }}</a>
               <ng-container *ngIf="s.disabled">
                 <i
-                  class="fa fa-warning"
+                  class="bwi bwi-exclamation-triangle"
                   appStopProp
                   title="{{ 'disabled' | i18n }}"
                   aria-hidden="true"
@@ -91,7 +91,7 @@
               </ng-container>
               <ng-container *ngIf="s.password">
                 <i
-                  class="fa fa-key"
+                  class="bwi bwi-key"
                   appStopProp
                   title="{{ 'password' | i18n }}"
                   aria-hidden="true"
@@ -100,7 +100,7 @@
               </ng-container>
               <ng-container *ngIf="s.maxAccessCountReached">
                 <i
-                  class="fa fa-ban"
+                  class="bwi bwi-ban"
                   appStopProp
                   title="{{ 'maxAccessCountReached' | i18n }}"
                   aria-hidden="true"
@@ -109,7 +109,7 @@
               </ng-container>
               <ng-container *ngIf="s.expired">
                 <i
-                  class="fa fa-clock-o"
+                  class="bwi bwi-clock"
                   appStopProp
                   title="{{ 'expired' | i18n }}"
                   aria-hidden="true"
@@ -118,7 +118,7 @@
               </ng-container>
               <ng-container *ngIf="s.pendingDelete">
                 <i
-                  class="fa fa-trash"
+                  class="bwi bwi-trash"
                   appStopProp
                   title="{{ 'pendingDeletion' | i18n }}"
                   aria-hidden="true"
@@ -139,11 +139,11 @@
                   aria-expanded="false"
                   appA11yTitle="{{ 'options' | i18n }}"
                 >
-                  <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                  <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
                 </button>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                   <a class="dropdown-item" href="#" appStopClick (click)="copy(s)">
-                    <i class="fa fa-fw fa-copy" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                     {{ "copySendLink" | i18n }}
                   </a>
                   <a
@@ -153,11 +153,11 @@
                     (click)="removePassword(s)"
                     *ngIf="s.password && !disableSend"
                   >
-                    <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                     {{ "removePassword" | i18n }}
                   </a>
                   <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(s)">
-                    <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                     {{ "delete" | i18n }}
                   </a>
                 </div>
@@ -169,7 +169,7 @@
       <div class="no-items" *ngIf="filteredSends && !filteredSends.length">
         <ng-container *ngIf="!loaded">
           <i
-            class="fa fa-spinner fa-spin text-muted"
+            class="bwi bwi-spinner bwi-spin text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -178,7 +178,7 @@
         <ng-container *ngIf="loaded">
           <p>{{ "noSendsInList" | i18n }}</p>
           <button (click)="addSend()" class="btn btn-outline-primary" [disabled]="disableSend">
-            <i class="fa fa-plus fa-fw"></i>{{ "createSend" | i18n }}
+            <i class="bwi bwi-plus bwi-fw"></i>{{ "createSend" | i18n }}
           </button>
         </ng-container>
       </div>
diff --git a/src/app/services/event.service.ts b/src/app/services/event.service.ts
index a604d25652..8be8b827d3 100644
--- a/src/app/services/event.service.ts
+++ b/src/app/services/event.service.ts
@@ -382,47 +382,50 @@ export class EventService {
   private getAppInfo(deviceType: DeviceType): [string, string] {
     switch (deviceType) {
       case DeviceType.Android:
-        return ["fa-android", this.i18nService.t("mobile") + " - Android"];
+        return ["bwi-android", this.i18nService.t("mobile") + " - Android"];
       case DeviceType.iOS:
-        return ["fa-apple", this.i18nService.t("mobile") + " - iOS"];
+        return ["bwi-apple", this.i18nService.t("mobile") + " - iOS"];
       case DeviceType.UWP:
-        return ["fa-windows", this.i18nService.t("mobile") + " - Windows"];
+        return ["bwi-windows", this.i18nService.t("mobile") + " - Windows"];
       case DeviceType.ChromeExtension:
-        return ["fa-chrome", this.i18nService.t("extension") + " - Chrome"];
+        return ["bwi-chrome", this.i18nService.t("extension") + " - Chrome"];
       case DeviceType.FirefoxExtension:
-        return ["fa-firefox", this.i18nService.t("extension") + " - Firefox"];
+        return ["bwi-firefox", this.i18nService.t("extension") + " - Firefox"];
       case DeviceType.OperaExtension:
-        return ["fa-opera", this.i18nService.t("extension") + " - Opera"];
+        return ["bwi-opera", this.i18nService.t("extension") + " - Opera"];
       case DeviceType.EdgeExtension:
-        return ["fa-edge", this.i18nService.t("extension") + " - Edge"];
+        return ["bwi-edge", this.i18nService.t("extension") + " - Edge"];
       case DeviceType.VivaldiExtension:
-        return ["fa-puzzle-piece", this.i18nService.t("extension") + " - Vivaldi"];
+        return ["bwi-puzzle", this.i18nService.t("extension") + " - Vivaldi"];
       case DeviceType.SafariExtension:
-        return ["fa-safari", this.i18nService.t("extension") + " - Safari"];
+        return ["bwi-safari", this.i18nService.t("extension") + " - Safari"];
       case DeviceType.WindowsDesktop:
-        return ["fa-windows", this.i18nService.t("desktop") + " - Windows"];
+        return ["bwi-windows", this.i18nService.t("desktop") + " - Windows"];
       case DeviceType.MacOsDesktop:
-        return ["fa-apple", this.i18nService.t("desktop") + " - macOS"];
+        return ["bwi-apple", this.i18nService.t("desktop") + " - macOS"];
       case DeviceType.LinuxDesktop:
-        return ["fa-linux", this.i18nService.t("desktop") + " - Linux"];
+        return ["bwi-linux", this.i18nService.t("desktop") + " - Linux"];
       case DeviceType.ChromeBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Chrome"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Chrome"];
       case DeviceType.FirefoxBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Firefox"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Firefox"];
       case DeviceType.OperaBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Opera"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Opera"];
       case DeviceType.SafariBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Safari"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Safari"];
       case DeviceType.VivaldiBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Vivaldi"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Vivaldi"];
       case DeviceType.EdgeBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - Edge"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - Edge"];
       case DeviceType.IEBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - IE"];
+        return ["bwi-globe", this.i18nService.t("webVault") + " - IE"];
       case DeviceType.UnknownBrowser:
-        return ["fa-globe", this.i18nService.t("webVault") + " - " + this.i18nService.t("unknown")];
+        return [
+          "bwi-globe",
+          this.i18nService.t("webVault") + " - " + this.i18nService.t("unknown"),
+        ];
       default:
-        return ["fa-globe", this.i18nService.t("unknown")];
+        return ["bwi-globe", this.i18nService.t("unknown")];
     }
   }
 
diff --git a/src/app/settings/add-credit.component.html b/src/app/settings/add-credit.component.html
index c1674fa376..73c71812be 100644
--- a/src/app/settings/add-credit.component.html
+++ b/src/app/settings/add-credit.component.html
@@ -15,7 +15,7 @@
           [(ngModel)]="method"
         />
         <label class="form-check-label" for="credit-method-paypal">
-          <i class="fa fa-fw fa-paypal" aria-hidden="true"></i> PayPal</label
+          <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</label
         >
       </div>
       <div class="form-check form-check-inline">
@@ -28,7 +28,7 @@
           [(ngModel)]="method"
         />
         <label class="form-check-label" for="credit-method-bitcoin">
-          <i class="fa fa-fw fa-bitcoin" aria-hidden="true"></i> Bitcoin</label
+          <i class="bwi bwi-fw bwi-bitcoin" aria-hidden="true"></i> Bitcoin</label
         >
       </div>
     </div>
@@ -53,7 +53,7 @@
       <small class="form-text text-muted">{{ "creditDelayed" | i18n }}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading || ppLoading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/adjust-payment.component.html b/src/app/settings/adjust-payment.component.html
index 57aa12f849..724e7a44c2 100644
--- a/src/app/settings/adjust-payment.component.html
+++ b/src/app/settings/adjust-payment.component.html
@@ -9,7 +9,7 @@
     <app-payment [hideBank]="!organizationId" [hideCredit]="true"></app-payment>
     <app-tax-info (onCountryChanged)="changeCountry()"></app-tax-info>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/adjust-storage.component.html b/src/app/settings/adjust-storage.component.html
index 7d7d112c1e..8e26cee3aa 100644
--- a/src/app/settings/adjust-storage.component.html
+++ b/src/app/settings/adjust-storage.component.html
@@ -29,7 +29,7 @@
       }}
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/api-key.component.html b/src/app/settings/api-key.component.html
index 58c6e8e615..9cbcb9b3f4 100644
--- a/src/app/settings/api-key.component.html
+++ b/src/app/settings/api-key.component.html
@@ -32,7 +32,7 @@
         <app-callout
           type="info"
           title="{{ 'oauth2ClientCredentials' | i18n }}"
-          icon="fa-key"
+          icon="bwi bwi-key"
           *ngIf="clientSecret"
         >
           <p class="mb-1">
@@ -60,7 +60,7 @@
           [disabled]="form.loading"
           *ngIf="!clientSecret"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ (isRotation ? "rotateApiKey" : "viewApiKey") | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index 1fbee1481f..21a2918260 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -55,7 +55,7 @@
     </div>
   </ng-container>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span *ngIf="!tokenSent">{{ "continue" | i18n }}</span>
     <span *ngIf="tokenSent">{{ "changeEmail" | i18n }}</span>
   </button>
diff --git a/src/app/settings/change-kdf.component.html b/src/app/settings/change-kdf.component.html
index 06c051274f..a289b30128 100644
--- a/src/app/settings/change-kdf.component.html
+++ b/src/app/settings/change-kdf.component.html
@@ -27,7 +27,7 @@
           rel="noopener"
           appA11yTitle="{{ 'learnMore' | i18n }}"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
         <select id="kdf" name="Kdf" [(ngModel)]="kdf" class="form-control" required>
           <option *ngFor="let o of kdfOptions" [ngValue]="o.value">{{ o.name }}</option>
@@ -44,7 +44,7 @@
           rel="noopener"
           appA11yTitle="{{ 'learnMore' | i18n }}"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
         <input
           id="kdfIterations"
@@ -69,7 +69,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "changeKdf" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index d364e91909..372669a024 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -79,12 +79,12 @@
         rel="noopener"
         appA11yTitle="{{ 'learnMore' | i18n }}"
       >
-        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
       </a>
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "changeMasterPassword" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index 661f8b0980..d15e7b40a6 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -26,7 +26,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "deauthorizeSessions" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index ea7054be57..2a6908b38b 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -26,7 +26,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "deleteAccount" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/domain-rules.component.html b/src/app/settings/domain-rules.component.html
index 3d83c8e531..ce9b103d20 100644
--- a/src/app/settings/domain-rules.component.html
+++ b/src/app/settings/domain-rules.component.html
@@ -6,7 +6,7 @@
   <h2>{{ "customEqDomains" | i18n }}</h2>
   <p *ngIf="loading">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -33,22 +33,22 @@
         (click)="remove(i)"
         appA11yTitle="{{ 'remove' | i18n }}"
       >
-        <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+        <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
       </button>
     </div>
     <button type="button" (click)="add()" class="btn btn-outline-secondary btn-sm mb-2">
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i> {{ "newCustomDomain" | i18n }}
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i> {{ "newCustomDomain" | i18n }}
     </button>
     <small class="text-muted d-block mb-3">{{ "newCustomDomainDesc" | i18n }}</small>
   </ng-container>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
   <h2 class="spaced-header">{{ "globalEqDomains" | i18n }}</h2>
   <p *ngIf="loading">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -68,7 +68,7 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right">
               <a
@@ -78,7 +78,7 @@
                 (click)="toggleExcluded(d)"
                 *ngIf="!d.excluded"
               >
-                <i class="fa fa-fw fa-close" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
                 {{ "exclude" | i18n }}
               </a>
               <a
@@ -88,11 +88,11 @@
                 (click)="toggleExcluded(d)"
                 *ngIf="d.excluded"
               >
-                <i class="fa fa-fw fa-plus" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-plus" aria-hidden="true"></i>
                 {{ "include" | i18n }}
               </a>
               <a class="dropdown-item" href="#" appStopClick (click)="customize(d)">
-                <i class="fa fa-fw fa-scissors" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-cut" aria-hidden="true"></i>
                 {{ "customize" | i18n }}
               </a>
             </div>
@@ -102,7 +102,7 @@
     </tbody>
   </table>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/settings/emergency-access-add-edit.component.html b/src/app/settings/emergency-access-add-edit.component.html
index a4edf894d3..a28ae3f75e 100644
--- a/src/app/settings/emergency-access-add-edit.component.html
+++ b/src/app/settings/emergency-access-add-edit.component.html
@@ -24,7 +24,7 @@
       </div>
       <div class="modal-body" *ngIf="loading">
         <i
-          class="fa fa-spinner fa-spin text-muted"
+          class="bwi bwi-spinner bwi-spin text-muted"
           title="{{ 'loading' | i18n }}"
           aria-hidden="true"
         ></i>
@@ -53,7 +53,7 @@
             appA11yTitle="{{ 'learnMore' | i18n }}"
             href="https://bitwarden.com/help/article/emergency-access/#user-access"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </h3>
         <div class="form-check mt-2 form-check-block">
@@ -107,7 +107,7 @@
           [disabled]="loading || submitBtn.loading || readOnly"
         >
           <i
-            class="fa fa-spinner fa-spin"
+            class="bwi bwi-spinner bwi-spin"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
             *ngIf="loading || submitBtn.loading"
@@ -128,12 +128,12 @@
             [disabled]="deleteBtn.loading"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/settings/emergency-access-confirm.component.html b/src/app/settings/emergency-access-confirm.component.html
index 83e85ad89f..4b51ce3d6a 100644
--- a/src/app/settings/emergency-access-confirm.component.html
+++ b/src/app/settings/emergency-access-confirm.component.html
@@ -44,7 +44,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "confirm" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/emergency-access-takeover.component.html b/src/app/settings/emergency-access-takeover.component.html
index 70ca992688..5bbd36df83 100644
--- a/src/app/settings/emergency-access-takeover.component.html
+++ b/src/app/settings/emergency-access-takeover.component.html
@@ -67,7 +67,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/emergency-access-view.component.html b/src/app/settings/emergency-access-view.component.html
index f57ce81b44..7687f37b38 100644
--- a/src/app/settings/emergency-access-view.component.html
+++ b/src/app/settings/emergency-access-view.component.html
@@ -15,7 +15,7 @@
             }}</a>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -24,7 +24,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
@@ -45,11 +45,11 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                 <a class="dropdown-item" href="#" appStopClick (click)="viewAttachments(c)">
-                  <i class="fa fa-fw fa-paperclip" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
                   {{ "attachments" | i18n }}
                 </a>
               </div>
@@ -61,7 +61,7 @@
   </ng-container>
   <ng-container *ngIf="!loaded">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
diff --git a/src/app/settings/emergency-access.component.html b/src/app/settings/emergency-access.component.html
index 91cdcbbbe5..8d3ebae1c7 100644
--- a/src/app/settings/emergency-access.component.html
+++ b/src/app/settings/emergency-access.component.html
@@ -32,7 +32,7 @@
       (click)="invite()"
       [disabled]="!canAccessPremium"
     >
-      <i aria-hidden="true" class="fa fa-plus fa-fw"></i>
+      <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
       {{ "addEmergencyContact" | i18n }}
     </button>
   </div>
@@ -48,7 +48,8 @@
           size="25"
           [circle]="true"
           [fontSize]="14"
-        ></app-avatar>
+        >
+        </app-avatar>
       </td>
       <td>
         <a href="#" appStopClick (click)="edit(c)">{{ c.email }}</a>
@@ -90,7 +91,7 @@
             aria-expanded="false"
             appA11yTitle="{{ 'options' | i18n }}"
           >
-            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+            <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
           </button>
           <div class="dropdown-menu dropdown-menu-right">
             <a
@@ -100,7 +101,7 @@
               (click)="reinvite(c)"
               *ngIf="c.status === emergencyAccessStatusType.Invited"
             >
-              <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
               {{ "resendInvitation" | i18n }}
             </a>
             <a
@@ -110,7 +111,7 @@
               (click)="confirm(c)"
               *ngIf="c.status === emergencyAccessStatusType.Accepted"
             >
-              <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
               {{ "confirm" | i18n }}
             </a>
             <a
@@ -120,7 +121,7 @@
               (click)="approve(c)"
               *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
             >
-              <i class="fa fa-fw fa-check" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
               {{ "approve" | i18n }}
             </a>
             <a
@@ -133,11 +134,11 @@
                 c.status === emergencyAccessStatusType.RecoveryApproved
               "
             >
-              <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
               {{ "reject" | i18n }}
             </a>
             <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(c)">
-              <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-remove" aria-hidden="true"></i>
               {{ "remove" | i18n }}
             </a>
           </div>
@@ -163,7 +164,8 @@
           size="25"
           [circle]="true"
           [fontSize]="14"
-        ></app-avatar>
+        >
+        </app-avatar>
       </td>
       <td>
         <span>{{ c.email }}</span>
@@ -205,7 +207,7 @@
             aria-expanded="false"
             appA11yTitle="{{ 'options' | i18n }}"
           >
-            <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+            <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
           </button>
           <div class="dropdown-menu dropdown-menu-right">
             <a
@@ -215,7 +217,7 @@
               (click)="requestAccess(c)"
               *ngIf="c.status === emergencyAccessStatusType.Confirmed"
             >
-              <i class="fa fa-fw fa-envelope-o" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
               {{ "requestAccess" | i18n }}
             </a>
             <a
@@ -228,7 +230,7 @@
                 c.type === emergencyAccessType.Takeover
               "
             >
-              <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
               {{ "takeover" | i18n }}
             </a>
             <a
@@ -239,11 +241,11 @@
                 c.type === emergencyAccessType.View
               "
             >
-              <i class="fa fa-fw fa-eye" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
               {{ "view" | i18n }}
             </a>
             <a class="dropdown-item text-danger" href="#" appStopClick (click)="remove(c)">
-              <i class="fa fa-fw fa-remove" aria-hidden="true"></i>
+              <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
               {{ "remove" | i18n }}
             </a>
           </div>
diff --git a/src/app/settings/link-sso.component.html b/src/app/settings/link-sso.component.html
index fd559c2966..c76d205597 100644
--- a/src/app/settings/link-sso.component.html
+++ b/src/app/settings/link-sso.component.html
@@ -1,4 +1,4 @@
 <a class="dropdown-item" href="#" appStopClick (click)="submit(returnUri, true)">
-  <i class="fa fa-fw fa-link" aria-hidden="true"></i>
+  <i class="bwi bwi-fw bwi-link" aria-hidden="true"></i>
   {{ "linkSso" | i18n }}
 </a>
diff --git a/src/app/settings/options.component.html b/src/app/settings/options.component.html
index 5a71f198e9..4558d1df7b 100644
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -57,7 +57,7 @@
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <select id="locale" name="Locale" [(ngModel)]="locale" class="form-control">
@@ -85,7 +85,7 @@
         rel="noopener"
         appA11yTitle="{{ 'learnMore' | i18n }}"
       >
-        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
       </a>
     </div>
     <small class="form-text text-muted">{{ "disableIconsDesc" | i18n }}</small>
@@ -108,7 +108,7 @@
         rel="noopener"
         appA11yTitle="{{ 'learnMore' | i18n }}"
       >
-        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
       </a>
     </div>
     <small class="form-text text-muted">{{ "enableGravatarsDesc" | i18n }}</small>
diff --git a/src/app/settings/organization-plans.component.html b/src/app/settings/organization-plans.component.html
index 5e4c0fcd4b..7b827ce7c7 100644
--- a/src/app/settings/organization-plans.component.html
+++ b/src/app/settings/organization-plans.component.html
@@ -1,5 +1,9 @@
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="createOrganization && selfHosted">
@@ -13,7 +17,7 @@
       }}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
   </form>
@@ -363,7 +367,7 @@
   </div>
   <div class="mt-4">
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
diff --git a/src/app/settings/organizations.component.html b/src/app/settings/organizations.component.html
index d167dbe8fb..d0d8881bc7 100644
--- a/src/app/settings/organizations.component.html
+++ b/src/app/settings/organizations.component.html
@@ -1,16 +1,16 @@
 <ng-container *ngIf="vault">
   <p *ngIf="!loaded" class="text-muted">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span class="sr-only">{{ "loading" | i18n }}</span>
   </p>
   <ng-container *ngIf="loaded">
-    <ul class="fa-ul card-ul carets" *ngIf="organizations && organizations.length">
+    <ul class="bwi-ul card-ul carets" *ngIf="organizations && organizations.length">
       <li *ngFor="let o of organizations">
         <a [routerLink]="['/organizations', o.id]" class="text-body">
-          <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{ o.name }}
+          <i class="bwi bwi-li bwi-caret-right" aria-hidden="true"></i> {{ o.name }}
           <ng-container *ngIf="!o.enabled">
             <i
-              class="fa fa-exclamation-triangle text-danger"
+              class="bwi bwi-exclamation-triangle text-danger"
               title="{{ 'organizationIsDisabled' | i18n }}"
               aria-hidden="true"
             ></i>
@@ -22,7 +22,7 @@
     <p *ngIf="!organizations || !organizations.length">{{ "noOrganizationsList" | i18n }}</p>
   </ng-container>
   <a href="#" routerLink="/settings/create-organization" class="btn btn-block btn-outline-primary">
-    <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+    <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
     {{ "newOrganization" | i18n }}
   </a>
 </ng-container>
@@ -33,7 +33,7 @@
       <small [appApiAction]="actionPromise" #action>
         <ng-container *ngIf="action.loading">
           <i
-            class="fa fa-spinner fa-spin text-muted"
+            class="bwi bwi-spinner bwi-spin text-muted"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -47,13 +47,13 @@
       class="btn btn-sm btn-outline-primary ml-auto"
       *ngIf="!loaded || (organizations && organizations.length)"
     >
-      <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
       {{ "newOrganization" | i18n }}
     </a>
   </div>
   <ng-container *ngIf="!loaded">
     <i
-      class="fa fa-spinner fa-spin text-muted"
+      class="bwi bwi-spinner bwi-spin text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -63,7 +63,7 @@
     <ng-container *ngIf="!organizations || !organizations.length">
       <p>{{ "noOrganizationsList" | i18n }}</p>
       <a href="#" routerLink="/settings/create-organization" class="btn btn-outline-primary">
-        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
         {{ "newOrganization" | i18n }}
       </a>
     </ng-container>
@@ -77,7 +77,7 @@
             <a href="#" [routerLink]="['/organizations', o.id]">{{ o.name }}</a>
             <ng-container *ngIf="!o.enabled">
               <i
-                class="fa fa-exclamation-triangle text-danger"
+                class="bwi bwi-exclamation-triangle text-danger"
                 title="{{ 'organizationIsDisabled' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -85,7 +85,7 @@
             </ng-container>
             <ng-container *ngIf="showEnrolledStatus(o)">
               <i
-                class="fa fa-key"
+                class="bwi bwi-key"
                 appStopProp
                 title="{{ 'enrolledPasswordReset' | i18n }}"
                 aria-hidden="true"
@@ -103,7 +103,7 @@
                 aria-expanded="false"
                 appA11yTitle="{{ 'options' | i18n }}"
               >
-                <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-right">
                 <a
@@ -113,7 +113,7 @@
                   appStopClick
                   (click)="toggleResetPasswordEnrollment(o)"
                 >
-                  <i class="fa fa-fw fa-key" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
                   {{ "enrollPasswordReset" | i18n }}
                 </a>
                 <a
@@ -123,7 +123,7 @@
                   appStopClick
                   (click)="toggleResetPasswordEnrollment(o)"
                 >
-                  <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                   {{ "withdrawPasswordReset" | i18n }}
                 </a>
                 <ng-container *ngIf="o.useSso && o.identifier">
@@ -134,7 +134,7 @@
                     appStopClick
                     (click)="unlinkSso(o)"
                   >
-                    <i class="fa fa-fw fa-chain-broken" aria-hidden="true"></i>
+                    <i class="bwi bwi-fw bwi-chain-broken" aria-hidden="true"></i>
                     {{ "unlinkSso" | i18n }}
                   </a>
                   <ng-template #linkSso>
@@ -142,7 +142,7 @@
                   </ng-template>
                 </ng-container>
                 <a class="dropdown-item text-danger" href="#" appStopClick (click)="leave(o)">
-                  <i class="fa fa-fw fa-sign-out" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
                   {{ "leave" | i18n }}
                 </a>
               </div>
diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html
index 5a1aa205a2..66135e0b9a 100644
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -10,7 +10,7 @@
       (change)="changeMethod()"
     />
     <label class="form-check-label" for="method-card">
-      <i class="fa fa-fw fa-credit-card" aria-hidden="true"></i> {{ "creditCard" | i18n }}</label
+      <i class="bwi bwi-fw bwi-credit-card" aria-hidden="true"></i> {{ "creditCard" | i18n }}</label
     >
   </div>
   <div class="form-check form-check-inline mr-4" *ngIf="!hideBank">
@@ -24,7 +24,7 @@
       (change)="changeMethod()"
     />
     <label class="form-check-label" for="method-bank">
-      <i class="fa fa-fw fa-university" aria-hidden="true"></i> {{ "bankAccount" | i18n }}</label
+      <i class="bwi bwi-fw bwi-bank" aria-hidden="true"></i> {{ "bankAccount" | i18n }}</label
     >
   </div>
   <div class="form-check form-check-inline" *ngIf="!hidePaypal">
@@ -38,7 +38,7 @@
       (change)="changeMethod()"
     />
     <label class="form-check-label" for="method-paypal">
-      <i class="fa fa-fw fa-paypal" aria-hidden="true"></i> PayPal</label
+      <i class="bwi bwi-fw bwi-paypal" aria-hidden="true"></i> PayPal</label
     >
   </div>
   <div class="form-check form-check-inline" *ngIf="!hideCredit">
@@ -52,7 +52,7 @@
       (change)="changeMethod()"
     />
     <label class="form-check-label" for="method-credit">
-      <i class="fa fa-fw fa-dollar" aria-hidden="true"></i> {{ "accountCredit" | i18n }}</label
+      <i class="bwi bwi-fw bwi-dollar" aria-hidden="true"></i> {{ "accountCredit" | i18n }}</label
     >
   </div>
 </div>
@@ -87,7 +87,7 @@
           class="ml-auto"
           appA11yTitle="{{ 'learnMore' | i18n }}"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
         </a>
       </div>
       <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
diff --git a/src/app/settings/premium.component.html b/src/app/settings/premium.component.html
index 55bcf0aa94..2c01e4b69a 100644
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -5,39 +5,39 @@
   type="info"
   *ngIf="canAccessPremium"
   title="{{ 'youHavePremiumAccess' | i18n }}"
-  icon="fa-star"
+  icon="bwi bwi-star-f"
 >
   {{ "alreadyPremiumFromOrg" | i18n }}
 </app-callout>
 <app-callout type="success">
   <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
-  <ul class="fa-ul">
+  <ul class="bwi-ul">
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpStorage" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpTwoStep" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpEmergency" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpReports" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpTotp" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpSupport" | i18n }}
     </li>
     <li>
-      <i class="fa fa-check text-success fa-li" aria-hidden="true"></i>
+      <i class="bwi bwi-check text-success bwi-li" aria-hidden="true"></i>
       {{ "premiumSignUpFuture" | i18n }}
     </li>
   </ul>
@@ -65,7 +65,7 @@
       }}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "submit" | i18n }}</span>
     </button>
   </form>
@@ -116,7 +116,7 @@
   </div>
   <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "submit" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/settings/profile.component.html b/src/app/settings/profile.component.html
index 83b7e016f4..d3cc803bbd 100644
--- a/src/app/settings/profile.component.html
+++ b/src/app/settings/profile.component.html
@@ -1,5 +1,9 @@
 <div *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <form
@@ -45,7 +49,8 @@
           dynamic="true"
           size="75"
           fontSize="35"
-        ></app-avatar>
+        >
+        </app-avatar>
       </div>
       <hr />
       <p *ngIf="fingerprint">
@@ -56,14 +61,14 @@
           rel="noopener"
           appA11yTitle="{{ 'learnMore' | i18n }}"
         >
-          <i class="fa fa-question-circle-o" aria-hidden="true"></i></a
+          <i class="bwi bwi-question-circle" aria-hidden="true"></i></a
         ><br />
         <code>{{ fingerprint }}</code>
       </p>
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "save" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index 574539beb3..152ee8b073 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -26,7 +26,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "purgeVault" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/sponsored-families.component.html b/src/app/settings/sponsored-families.component.html
index dd24e612bf..6eb2cc718a 100644
--- a/src/app/settings/sponsored-families.component.html
+++ b/src/app/settings/sponsored-families.component.html
@@ -2,7 +2,7 @@
   <h1>{{ "sponsoredFamilies" | i18n }}</h1>
 </div>
 <ng-container *ngIf="loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}"></i>
+  <i class="bwi bwi-spinner bwi-spin text-muted" title="{{ 'loading' | i18n }}"></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="!loading">
@@ -47,7 +47,7 @@
         required
       />
       <button class="btn btn-primary btn-submit mt-4" type="submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "redeem" | i18n }}</span>
       </button>
     </div>
diff --git a/src/app/settings/sponsoring-org-row.component.html b/src/app/settings/sponsoring-org-row.component.html
index 4491e46477..233fe83ed8 100644
--- a/src/app/settings/sponsoring-org-row.component.html
+++ b/src/app/settings/sponsoring-org-row.component.html
@@ -13,7 +13,7 @@
       aria-expanded="false"
       appA11yTitle="{{ 'options' | i18n }}"
     >
-      <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+      <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
     </button>
     <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
       <button
@@ -24,7 +24,7 @@
         (click)="resendEmail()"
         [attr.aria-label]="'resendEmailLabel' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
       >
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "resendEmail" | i18n }}</span>
       </button>
       <button
@@ -35,7 +35,7 @@
         (click)="revokeSponsorship()"
         [attr.aria-label]="'revokeAccount' | i18n: sponsoringOrg.familySponsorshipFriendlyName"
       >
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "remove" | i18n }}</span>
       </button>
     </div>
diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html
index e5f84ab56e..e46c7b0703 100644
--- a/src/app/settings/two-factor-authenticator.component.html
+++ b/src/app/settings/two-factor-authenticator.component.html
@@ -38,16 +38,16 @@
             </p>
           </ng-container>
           <ng-container *ngIf="enabled">
-            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="fa-check-circle">
+            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
               <p>{{ "twoStepLoginProviderEnabled" | i18n }}</p>
               {{ "twoStepAuthenticatorReaddDesc" | i18n }}
             </app-callout>
             <img class="float-right mfaType0" alt="Authenticator app logo" />
             <p>{{ "twoStepAuthenticatorNeedApp" | i18n }}</p>
           </ng-container>
-          <ul class="fa-ul">
+          <ul class="bwi-ul">
             <li>
-              <i class="fa-li fa fa-apple"></i>{{ "iosDevices" | i18n }}:
+              <i class="bwi bwi-li bwi-apple"></i>{{ "iosDevices" | i18n }}:
               <a
                 href="https://itunes.apple.com/us/app/authy/id494168017?mt=8"
                 target="_blank"
@@ -56,7 +56,7 @@
               >
             </li>
             <li>
-              <i class="fa-li fa fa-android"></i>{{ "androidDevices" | i18n }}:
+              <i class="bwi bwi-li bwi-android"></i>{{ "androidDevices" | i18n }}:
               <a
                 href="https://play.google.com/store/apps/details?id=com.authy.authy"
                 target="_blank"
@@ -65,7 +65,7 @@
               >
             </li>
             <li>
-              <i class="fa-li fa fa-windows"></i>{{ "windowsDevices" | i18n }}:
+              <i class="bwi bwi-li bwi-windows"></i>{{ "windowsDevices" | i18n }}:
               <a
                 href="https://www.microsoft.com/p/authenticator/9wzdncrfj3rj"
                 target="_blank"
@@ -98,7 +98,11 @@
         </div>
         <div class="modal-footer">
           <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span *ngIf="!enabled">{{ "enable" | i18n }}</span>
             <span *ngIf="enabled">{{ "disable" | i18n }}</span>
           </button>
diff --git a/src/app/settings/two-factor-duo.component.html b/src/app/settings/two-factor-duo.component.html
index 2e7a24080a..220c6997b7 100644
--- a/src/app/settings/two-factor-duo.component.html
+++ b/src/app/settings/two-factor-duo.component.html
@@ -32,7 +32,7 @@
       >
         <div class="modal-body">
           <ng-container *ngIf="enabled">
-            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="fa-check-circle">
+            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
               {{ "twoStepLoginProviderEnabled" | i18n }}
             </app-callout>
             <img class="float-right ml-3 mfaType2" alt="Duo logo" />
@@ -87,7 +87,11 @@
         </div>
         <div class="modal-footer">
           <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span *ngIf="!enabled">{{ "enable" | i18n }}</span>
             <span *ngIf="enabled">{{ "disable" | i18n }}</span>
           </button>
diff --git a/src/app/settings/two-factor-email.component.html b/src/app/settings/two-factor-email.component.html
index 0c9afd1ad9..f189a27504 100644
--- a/src/app/settings/two-factor-email.component.html
+++ b/src/app/settings/two-factor-email.component.html
@@ -31,7 +31,7 @@
       >
         <div class="modal-body">
           <ng-container *ngIf="enabled">
-            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="fa-check-circle">
+            <app-callout type="success" title="{{ 'enabled' | i18n }}" icon="bwi bwi-check-circle">
               {{ "twoStepLoginProviderEnabled" | i18n }}
             </app-callout>
             <strong>{{ "email" | i18n }}:</strong> {{ email }}
@@ -64,7 +64,7 @@
                 [disabled]="sendBtn.loading"
               >
                 <i
-                  class="fa fa-spinner fa-spin"
+                  class="bwi bwi-spinner bwi-spin"
                   title="{{ 'loading' | i18n }}"
                   aria-hidden="true"
                 ></i>
@@ -90,7 +90,11 @@
         </div>
         <div class="modal-footer">
           <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span *ngIf="!enabled">{{ "enable" | i18n }}</span>
             <span *ngIf="enabled">{{ "disable" | i18n }}</span>
           </button>
diff --git a/src/app/settings/two-factor-setup.component.html b/src/app/settings/two-factor-setup.component.html
index c9cc1155e0..e5edf0f6fc 100644
--- a/src/app/settings/two-factor-setup.component.html
+++ b/src/app/settings/two-factor-setup.component.html
@@ -13,7 +13,7 @@
   {{ "providers" | i18n }}
   <small *ngIf="loading">
     <i
-      class="fa fa-spinner fa-spin fa-fw text-muted"
+      class="bwi bwi-spinner bwi-spin bwi-fw text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
@@ -33,7 +33,7 @@
         {{ p.name }}
         <ng-container *ngIf="p.enabled">
           <i
-            class="fa fa-check text-success fa-fw"
+            class="bwi bwi-check text-success bwi-fw"
             title="{{ 'enabled' | i18n }}"
             aria-hidden="true"
           ></i>
diff --git a/src/app/settings/two-factor-verify.component.html b/src/app/settings/two-factor-verify.component.html
index 8201c45daa..4bec1feffc 100644
--- a/src/app/settings/two-factor-verify.component.html
+++ b/src/app/settings/two-factor-verify.component.html
@@ -6,7 +6,7 @@
   </div>
   <div class="modal-footer">
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "continue" | i18n }}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/two-factor-webauthn.component.html b/src/app/settings/two-factor-webauthn.component.html
index 1bac287951..2c91dbc5ae 100644
--- a/src/app/settings/two-factor-webauthn.component.html
+++ b/src/app/settings/two-factor-webauthn.component.html
@@ -33,7 +33,7 @@
           <app-callout
             type="success"
             title="{{ 'enabled' | i18n }}"
-            icon="fa-check-circle"
+            icon="bwi bwi-check-circle"
             *ngIf="enabled"
           >
             {{ "twoStepLoginProviderEnabled" | i18n }}
@@ -45,13 +45,13 @@
             </ul>
           </app-callout>
           <img class="float-right ml-5 mfaType7" alt="FIDO2 WebAuthn logo'" />
-          <ul class="fa-ul">
+          <ul class="bwi-ul">
             <li
               *ngFor="let k of keys; let i = index"
               #removeKeyBtn
               [appApiAction]="k.removePromise"
             >
-              <i class="fa-li fa fa-key"></i>
+              <i class="bwi bwi-li bwi-key"></i>
               <strong *ngIf="!k.configured || !k.name">{{ "webAuthnkeyX" | i18n: i + 1 }}</strong>
               <strong *ngIf="k.configured && k.name">{{ k.name }}</strong>
               <ng-container *ngIf="k.configured && !removeKeyBtn.loading">
@@ -61,7 +61,7 @@
               </ng-container>
               <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
                 <i
-                  class="fa fa-spin fa-spinner text-muted fa-fw"
+                  class="bwi bwi-spin bwi-spinner text-muted bwi-fw"
                   title="{{ 'loading' | i18n }}"
                   *ngIf="removeKeyBtn.loading"
                   aria-hidden="true"
@@ -103,19 +103,19 @@
             {{ "readKey" | i18n }}
           </button>
           <ng-container *ngIf="readKeyBtn.loading">
-            <i class="fa fa-spinner fa-spin text-muted" aria-hidden="true"></i>
+            <i class="bwi bwi-spinner bwi-spin text-muted" aria-hidden="true"></i>
           </ng-container>
           <ng-container *ngIf="!readKeyBtn.loading">
             <ng-container *ngIf="webAuthnListening">
-              <i class="fa fa-spinner fa-spin text-muted" aria-hidden="true"></i>
+              <i class="bwi bwi-spinner bwi-spin text-muted" aria-hidden="true"></i>
               {{ "twoFactorU2fWaiting" | i18n }}...
             </ng-container>
             <ng-container *ngIf="webAuthnResponse">
-              <i class="fa fa-check-circle text-success" aria-hidden="true"></i>
+              <i class="bwi bwi-check-circle text-success" aria-hidden="true"></i>
               {{ "twoFactorU2fClickSave" | i18n }}
             </ng-container>
             <ng-container *ngIf="webAuthnError">
-              <i class="fa fa-warning text-danger" aria-hidden="true"></i>
+              <i class="bwi bwi-exclamation-triangle text-danger" aria-hidden="true"></i>
               {{ "twoFactorU2fProblemReadingTryAgain" | i18n }}
             </ng-container>
           </ng-container>
@@ -127,7 +127,7 @@
             [disabled]="form.loading || !webAuthnResponse"
           >
             <i
-              class="fa fa-spinner fa-spin"
+              class="bwi bwi-spinner bwi-spin"
               *ngIf="form.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
@@ -143,7 +143,11 @@
             (click)="disable()"
             *ngIf="enabled"
           >
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span>{{ "disableAllKeys" | i18n }}</span>
           </button>
           <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html
index 93b91497e9..96eff9b3a4 100644
--- a/src/app/settings/two-factor-yubikey.component.html
+++ b/src/app/settings/two-factor-yubikey.component.html
@@ -34,7 +34,7 @@
           <app-callout
             type="success"
             title="{{ 'enabled' | i18n }}"
-            icon="fa-check-circle"
+            icon="bwi bwi-check-circle"
             *ngIf="enabled"
           >
             {{ "twoStepLoginProviderEnabled" | i18n }}
@@ -76,7 +76,7 @@
                   (click)="remove(k)"
                   appA11yTitle="{{ 'remove' | i18n }}"
                 >
-                  <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+                  <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
@@ -92,7 +92,11 @@
         </div>
         <div class="modal-footer">
           <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span>{{ "save" | i18n }}</span>
           </button>
           <button
@@ -104,7 +108,11 @@
             (click)="disable()"
             *ngIf="enabled"
           >
-            <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-spinner bwi-spin"
+              title="{{ 'loading' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span>{{ "disableAllKeys" | i18n }}</span>
           </button>
           <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/update-key.component.html b/src/app/settings/update-key.component.html
index 49f263b50b..4be0be2c6d 100644
--- a/src/app/settings/update-key.component.html
+++ b/src/app/settings/update-key.component.html
@@ -43,7 +43,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "updateEncryptionKey" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/settings/update-license.component.html b/src/app/settings/update-license.component.html
index 5f622d3ec3..3884f56935 100644
--- a/src/app/settings/update-license.component.html
+++ b/src/app/settings/update-license.component.html
@@ -11,7 +11,7 @@
     }}</small>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "submit" | i18n }}</span>
   </button>
   <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/user-billing.component.html b/src/app/settings/user-billing.component.html
index 33769521b0..ce13772296 100644
--- a/src/app/settings/user-billing.component.html
+++ b/src/app/settings/user-billing.component.html
@@ -8,12 +8,16 @@
     *ngIf="firstLoaded"
     [disabled]="loading"
   >
-    <i class="fa fa-refresh fa-fw" [ngClass]="{ 'fa-spin': loading }" aria-hidden="true"></i>
+    <i class="bwi bwi-refresh bwi-fw" [ngClass]="{ 'bwi-spin': loading }" aria-hidden="true"></i>
     {{ "refresh" | i18n }}
   </button>
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="billing">
@@ -96,21 +100,21 @@
           class="btn btn-outline-primary btn-submit"
           [disabled]="verifyForm.loading"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "verifyBankAccount" | i18n }}</span>
         </button>
       </form>
     </app-callout>
     <p>
       <i
-        class="fa fa-fw"
+        class="bwi bwi-fw"
         [ngClass]="{
-          'fa-credit-card': paymentSource.type === paymentMethodType.Card,
-          'fa-university': paymentSource.type === paymentMethodType.BankAccount,
-          'fa-money': paymentSource.type === paymentMethodType.Check,
-          'fa-paypal text-primary': paymentSource.type === paymentMethodType.PayPal,
-          'fa-apple text-muted': paymentSource.type === paymentMethodType.AppleInApp,
-          'fa-google text-muted': paymentSource.type === paymentMethodType.GoogleInApp
+          'bwi-credit-card': paymentSource.type === paymentMethodType.Card,
+          'bwi-bank': paymentSource.type === paymentMethodType.BankAccount,
+          'bwi-money': paymentSource.type === paymentMethodType.Check,
+          'bwi-paypal text-primary': paymentSource.type === paymentMethodType.PayPal,
+          'bwi-apple text-muted': paymentSource.type === paymentMethodType.AppleInApp,
+          'bwi-google text-muted': paymentSource.type === paymentMethodType.GoogleInApp
         }"
       ></i>
       <span *ngIf="paymentSourceInApp">{{ "inAppPurchase" | i18n }}</span>
@@ -147,7 +151,7 @@
             class="mr-2"
             appA11yTitle="{{ 'downloadInvoice' | i18n }}"
           >
-            <i class="fa fa-file-pdf-o" aria-hidden="true"></i
+            <i class="bwi bwi-file-pdf" aria-hidden="true"></i
           ></a>
           <a href="{{ i.url }}" target="_blank" rel="noopener" title="{{ 'viewInvoice' | i18n }}">
             {{ "invoiceNumber" | i18n: i.number }}</a
@@ -156,11 +160,11 @@
         <td>{{ i.amount | currency: "$" }}</td>
         <td>
           <span *ngIf="i.paid">
-            <i class="fa fa-check text-success" aria-hidden="true"></i>
+            <i class="bwi bwi-check text-success" aria-hidden="true"></i>
             {{ "paid" | i18n }}
           </span>
           <span *ngIf="!i.paid">
-            <i class="fa fa-exclamation-circle text-muted" aria-hidden="true"></i>
+            <i class="bwi bwi-exclamation-circle text-muted" aria-hidden="true"></i>
             {{ "unpaid" | i18n }}
           </span>
         </td>
@@ -181,16 +185,16 @@
         </td>
         <td>
           <i
-            class="fa fa-fw"
+            class="bwi bwi-fw"
             *ngIf="t.paymentMethodType"
             aria-hidden="true"
             [ngClass]="{
-              'fa-credit-card': t.paymentMethodType === paymentMethodType.Card,
-              'fa-university':
+              'bwi-credit-card': t.paymentMethodType === paymentMethodType.Card,
+              'bwi-bank':
                 t.paymentMethodType === paymentMethodType.BankAccount ||
                 t.paymentMethodType === paymentMethodType.WireTransfer,
-              'fa-bitcoin text-warning': t.paymentMethodType === paymentMethodType.BitPay,
-              'fa-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal
+              'bwi-bitcoin text-warning': t.paymentMethodType === paymentMethodType.BitPay,
+              'bwi-paypal text-primary': t.paymentMethodType === paymentMethodType.PayPal
             }"
           ></i>
           {{ t.details }}
diff --git a/src/app/settings/user-subscription.component.html b/src/app/settings/user-subscription.component.html
index 899d6c8f44..6ce6639ccd 100644
--- a/src/app/settings/user-subscription.component.html
+++ b/src/app/settings/user-subscription.component.html
@@ -3,7 +3,7 @@
     {{ "premiumMembership" | i18n }}
     <small *ngIf="firstLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -12,7 +12,11 @@
   </h1>
 </div>
 <ng-container *ngIf="!firstLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </ng-container>
 <ng-container *ngIf="sub">
@@ -37,7 +41,7 @@
       [appApiAction]="reinstatePromise"
       [disabled]="reinstateBtn.loading"
     >
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>{{ "reinstateSubscription" | i18n }}</span>
     </button>
   </app-callout>
@@ -135,7 +139,7 @@
         [disabled]="cancelBtn.loading"
         *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel"
       >
-        <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
         <span>{{ "cancelSubscription" | i18n }}</span>
       </button>
     </div>
diff --git a/src/app/settings/verify-email.component.html b/src/app/settings/verify-email.component.html
index a5926b5d40..c599fdad4c 100644
--- a/src/app/settings/verify-email.component.html
+++ b/src/app/settings/verify-email.component.html
@@ -1,6 +1,6 @@
 <div class="card border-warning">
   <div class="card-header bg-warning text-white">
-    <i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i> {{ "verifyEmail" | i18n }}
+    <i class="bwi bwi-envelope bwi-fw" aria-hidden="true"></i> {{ "verifyEmail" | i18n }}
   </div>
   <div class="card-body">
     <p>{{ "verifyEmailDesc" | i18n }}</p>
@@ -12,7 +12,7 @@
       [disabled]="sendBtn.loading"
       (click)="send()"
     >
-      <i class="fa fa-spin fa-spinner" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spin bwi-spinner" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span>
         {{ "sendEmail" | i18n }}
       </span>
diff --git a/src/app/tools/breach-report.component.html b/src/app/tools/breach-report.component.html
index c2ac9e52ac..edecda17a8 100644
--- a/src/app/tools/breach-report.component.html
+++ b/src/app/tools/breach-report.component.html
@@ -18,7 +18,7 @@
     </div>
   </div>
   <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "checkBreaches" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index 746dadac13..c18db826d9 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -29,7 +29,7 @@
   </div>
   <button type="submit" class="btn btn-primary" [disabled]="form.loading || exportForm.disabled">
     <i
-      class="fa fa-spinner fa-spin"
+      class="bwi bwi-spinner bwi-spin"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
       *ngIf="form.loading"
diff --git a/src/app/tools/exposed-passwords-report.component.html b/src/app/tools/exposed-passwords-report.component.html
index 345fc6f8b5..15368122ef 100644
--- a/src/app/tools/exposed-passwords-report.component.html
+++ b/src/app/tools/exposed-passwords-report.component.html
@@ -3,7 +3,7 @@
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
 <button type="button" class="btn btn-primary btn-submit" [disabled]="loading" (click)="load()">
-  <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
   <span>{{ "checkExposedPasswords" | i18n }}</span>
 </button>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -31,7 +31,7 @@
             </ng-template>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -40,7 +40,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index d564910a38..2ed431e675 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -323,7 +323,7 @@
     [disabled]="loading || importBlockedByPolicy"
     [ngClass]="{ manual: importBlockedByPolicy }"
   >
-    <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
     <span>{{ "importData" | i18n }}</span>
   </button>
 </form>
diff --git a/src/app/tools/import.component.ts b/src/app/tools/import.component.ts
index cd66faa9eb..1bc7211de9 100644
--- a/src/app/tools/import.component.ts
+++ b/src/app/tools/import.component.ts
@@ -166,7 +166,7 @@ export class ImportComponent implements OnInit {
       heightAuto: false,
       buttonsStyling: false,
       icon: "error" as SweetAlertIcon,
-      iconHtml: `<i class="swal-custom-icon fa fa-bolt text-danger"></i>`,
+      iconHtml: `<i class="swal-custom-icon bwi bwi-error text-danger"></i>`,
       input: "textarea",
       inputValue: error.message,
       inputAttributes: {
diff --git a/src/app/tools/inactive-two-factor-report.component.html b/src/app/tools/inactive-two-factor-report.component.html
index decfc247cb..b472498093 100644
--- a/src/app/tools/inactive-two-factor-report.component.html
+++ b/src/app/tools/inactive-two-factor-report.component.html
@@ -3,7 +3,7 @@
     {{ "inactive2faReport" | i18n }}
     <small *ngIf="hasLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -13,7 +13,11 @@
 </div>
 <p>{{ "inactive2faReportDesc" | i18n }}</p>
 <div *ngIf="!hasLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -36,7 +40,7 @@
             }}</a>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -45,7 +49,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
diff --git a/src/app/tools/password-generator-history.component.html b/src/app/tools/password-generator-history.component.html
index c7707ddd80..a5b35df5c3 100644
--- a/src/app/tools/password-generator-history.component.html
+++ b/src/app/tools/password-generator-history.component.html
@@ -29,7 +29,7 @@
                 appA11yTitle="{{ 'copyPassword' | i18n }}"
                 (click)="copy(h.password)"
               >
-                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
               </button>
             </div>
           </li>
@@ -49,7 +49,7 @@
             class="btn btn-outline-danger"
             appA11yTitle="{{ 'clear' | i18n }}"
           >
-            <i class="fa fa-trash-o fa-lg fa-fw" aria-hidden="true"></i>
+            <i class="bwi bwi-trash bwi-lg bwi-fw" aria-hidden="true"></i>
           </button>
         </div>
       </div>
diff --git a/src/app/tools/password-generator.component.html b/src/app/tools/password-generator.component.html
index 8f6aeb3c55..4bd129fcd6 100644
--- a/src/app/tools/password-generator.component.html
+++ b/src/app/tools/password-generator.component.html
@@ -192,7 +192,7 @@
       (click)="history()"
       appA11yTitle="{{ 'passwordHistory' | i18n }}"
     >
-      <i class="fa fa-clock-o fa-lg" aria-hidden="true"></i>
+      <i class="bwi bwi-clock bwi-lg" aria-hidden="true"></i>
     </button>
   </div>
 </div>
diff --git a/src/app/tools/reused-passwords-report.component.html b/src/app/tools/reused-passwords-report.component.html
index 23ca3e6fee..e4e1c41bd4 100644
--- a/src/app/tools/reused-passwords-report.component.html
+++ b/src/app/tools/reused-passwords-report.component.html
@@ -3,7 +3,7 @@
     {{ "reusedPasswordsReport" | i18n }}
     <small *ngIf="hasLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -13,7 +13,11 @@
 </div>
 <p>{{ "reusedPasswordsReportDesc" | i18n }}</p>
 <div *ngIf="!hasLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -41,7 +45,7 @@
             </ng-template>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -50,7 +54,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
diff --git a/src/app/tools/unsecured-websites-report.component.html b/src/app/tools/unsecured-websites-report.component.html
index 6bd3d1b60b..775d36d434 100644
--- a/src/app/tools/unsecured-websites-report.component.html
+++ b/src/app/tools/unsecured-websites-report.component.html
@@ -3,7 +3,7 @@
     {{ "unsecuredWebsitesReport" | i18n }}
     <small *ngIf="hasLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -13,7 +13,11 @@
 </div>
 <p>{{ "unsecuredWebsitesReportDesc" | i18n }}</p>
 <div *ngIf="!hasLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -36,7 +40,7 @@
             }}</a>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -45,7 +49,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
diff --git a/src/app/tools/weak-passwords-report.component.html b/src/app/tools/weak-passwords-report.component.html
index 2f48a9e6ee..15315b5c2d 100644
--- a/src/app/tools/weak-passwords-report.component.html
+++ b/src/app/tools/weak-passwords-report.component.html
@@ -3,7 +3,7 @@
     {{ "weakPasswordsReport" | i18n }}
     <small *ngIf="hasLoaded && loading">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -13,7 +13,11 @@
 </div>
 <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
 <div *ngIf="!hasLoaded && loading">
-  <i class="fa fa-spinner fa-spin text-muted" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+  <i
+    class="bwi bwi-spinner bwi-spin text-muted"
+    title="{{ 'loading' | i18n }}"
+    aria-hidden="true"
+  ></i>
   <span class="sr-only">{{ "loading" | i18n }}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -41,7 +45,7 @@
             </ng-template>
             <ng-container *ngIf="!organization && c.organizationId">
               <i
-                class="fa fa-cube"
+                class="bwi bwi-collection"
                 appStopProp
                 title="{{ 'shared' | i18n }}"
                 aria-hidden="true"
@@ -50,7 +54,7 @@
             </ng-container>
             <ng-container *ngIf="c.hasAttachments">
               <i
-                class="fa fa-paperclip"
+                class="bwi bwi-paperclip"
                 appStopProp
                 title="{{ 'attachments' | i18n }}"
                 aria-hidden="true"
diff --git a/src/app/vault/add-edit-custom-fields.component.html b/src/app/vault/add-edit-custom-fields.component.html
index 246da4e70c..fed9d54589 100644
--- a/src/app/vault/add-edit-custom-fields.component.html
+++ b/src/app/vault/add-edit-custom-fields.component.html
@@ -16,7 +16,7 @@
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <input
@@ -50,7 +50,7 @@
                 appA11yTitle="{{ 'copyValue' | i18n }}"
                 (click)="copy(f.value, 'value', 'Field')"
               >
-                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
               </button>
             </div>
           </div>
@@ -75,9 +75,9 @@
                 [disabled]="!cipher.viewPassword && !f.newField"
               >
                 <i
-                  class="fa fa-lg"
+                  class="bwi bwi-lg"
                   aria-hidden="true"
-                  [ngClass]="{ 'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue }"
+                  [ngClass]="{ 'bwi-eye': !f.showValue, 'bwi-eye-slash': f.showValue }"
                 >
                 </i>
               </button>
@@ -88,7 +88,7 @@
                 (click)="copy(f.value, 'value', f.type === fieldType.Hidden ? 'H_Field' : 'Field')"
                 [disabled]="!cipher.viewPassword && !f.newField"
               >
-                <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
               </button>
             </div>
           </div>
@@ -126,7 +126,7 @@
             appA11yTitle="{{ 'remove' | i18n }}"
             *ngIf="!cipher.isDeleted && !viewOnly"
           >
-            <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+            <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
           </button>
           <button
             type="button"
@@ -134,7 +134,7 @@
             appA11yTitle="{{ 'dragToSort' | i18n }}"
             *ngIf="!cipher.isDeleted && !viewOnly"
           >
-            <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
+            <i class="bwi bwi-hamburger bwi-lg" aria-hidden="true"></i>
           </button>
         </div>
       </div>
@@ -148,7 +148,7 @@
     class="d-inline-block mb-2"
     *ngIf="!cipher.isDeleted && !viewOnly"
   >
-    <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> {{ "newCustomField" | i18n }}
+    <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "newCustomField" | i18n }}
   </a>
   <div class="row" *ngIf="!cipher.isDeleted && !viewOnly">
     <div class="col-5">
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 51f2bde269..e0bf6f8c53 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -86,7 +86,7 @@
                     appA11yTitle="{{ 'copyUsername' | i18n }}"
                     (click)="copy(cipher.login.username, 'username', 'Username')"
                   >
-                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
@@ -97,17 +97,17 @@
                 <div class="ml-auto d-flex" *ngIf="!cipher.isDeleted && !viewOnly">
                   <a
                     href="#"
-                    class="d-block mr-2 fa-icon-above-input"
+                    class="d-block mr-2 bwi-icon-above-input"
                     appStopClick
                     appA11yTitle="{{ 'generatePassword' | i18n }}"
                     (click)="generatePassword()"
                     *ngIf="cipher.viewPassword"
                   >
-                    <i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
+                    <i class="bwi bwi-lg bwi-fw bwi-refresh" aria-hidden="true"></i>
                   </a>
                   <a
                     href="#"
-                    class="d-block fa-icon-above-input"
+                    class="d-block bwi-icon-above-input"
                     #checkPasswordBtn
                     appStopClick
                     appA11yTitle="{{ 'checkPassword' | i18n }}"
@@ -115,12 +115,12 @@
                     [appApiAction]="checkPasswordPromise"
                   >
                     <i
-                      class="fa fa-lg fa-fw fa-check-circle"
+                      class="bwi bwi-lg bwi-fw bwi-check-circle"
                       [hidden]="checkPasswordBtn.loading"
                       aria-hidden="true"
                     ></i>
                     <i
-                      class="fa fa-lg fa-fw fa-spinner fa-spin"
+                      class="bwi bwi-lg bwi-fw bwi-spinner bwi-spin"
                       aria-hidden="true"
                       [hidden]="!checkPasswordBtn.loading"
                       title="{{ 'loading' | i18n }}"
@@ -148,9 +148,9 @@
                     [disabled]="!cipher.viewPassword"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                      [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                     ></i>
                   </button>
                   <button
@@ -160,7 +160,7 @@
                     (click)="copy(cipher.login.password, 'password', 'Password')"
                     [disabled]="!cipher.viewPassword"
                   >
-                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
@@ -237,7 +237,7 @@
                   appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
                   (click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
                 >
-                  <i class="fa fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-clone" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
@@ -268,7 +268,7 @@
                       (click)="launch(u)"
                       [disabled]="!u.canLaunch"
                     >
-                      <i class="fa fa-lg fa-share" aria-hidden="true"></i>
+                      <i class="bwi bwi-lg bwi-share" aria-hidden="true"></i>
                     </button>
                     <button
                       type="button"
@@ -276,7 +276,7 @@
                       appA11yTitle="{{ 'copyUri' | i18n }}"
                       (click)="copy(u.uri, 'uri', 'URI')"
                     >
-                      <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                      <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                     </button>
                   </div>
                 </div>
@@ -293,7 +293,7 @@
                     rel="noopener"
                     appA11yTitle="{{ 'learnMore' | i18n }}"
                   >
-                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+                    <i class="bwi bwi-question-circle" aria-hidden="true"></i>
                   </a>
                 </div>
                 <div class="d-flex">
@@ -316,7 +316,7 @@
                     appA11yTitle="{{ 'remove' | i18n }}"
                     *ngIf="!cipher.isDeleted && !viewOnly"
                   >
-                    <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
+                    <i class="bwi bwi-minus-circle bwi-lg" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
@@ -329,7 +329,7 @@
             class="d-inline-block mb-3"
             *ngIf="!cipher.isDeleted && !viewOnly"
           >
-            <i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i> {{ "newUri" | i18n }}
+            <i class="bwi bwi-plus-circle bwi-fw" aria-hidden="true"></i> {{ "newUri" | i18n }}
           </a>
         </ng-container>
         <!-- Card -->
@@ -381,9 +381,12 @@
                     (click)="toggleCardNumber()"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="{ 'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber }"
+                      [ngClass]="{
+                        'bwi-eye': !showCardNumber,
+                        'bwi-eye-slash': showCardNumber
+                      }"
                     ></i>
                   </button>
                   <button
@@ -392,7 +395,7 @@
                     appA11yTitle="{{ 'copyNumber' | i18n }}"
                     (click)="copy(cipher.card.number, 'number', 'Number')"
                   >
-                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
@@ -446,9 +449,9 @@
                     (click)="toggleCardCode()"
                   >
                     <i
-                      class="fa fa-lg"
+                      class="bwi bwi-lg"
                       aria-hidden="true"
-                      [ngClass]="{ 'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode }"
+                      [ngClass]="{ 'bwi-eye': !showCardCode, 'bwi-eye-slash': showCardCode }"
                     ></i>
                   </button>
                   <button
@@ -457,7 +460,7 @@
                     appA11yTitle="{{ 'securityCode' | i18n }}"
                     (click)="copy(cipher.card.code, 'securityCode', 'Security Code')"
                   >
-                    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+                    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
@@ -792,7 +795,7 @@
               appA11yTitle="{{ 'learnMore' | i18n }}"
               href="https://bitwarden.com/help/article/managing-items/#protect-individual-items"
             >
-              <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+              <i class="bwi bwi-question-circle" aria-hidden="true"></i>
             </a>
           </div>
         </ng-container>
@@ -804,7 +807,7 @@
           [disabled]="form.loading"
           *ngIf="!viewOnly"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ (cipher?.isDeleted ? "restore" : "save") | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -819,8 +822,8 @@
             appA11yTitle="{{ (cipher.favorite ? 'unfavorite' : 'favorite') | i18n }}"
           >
             <i
-              class="fa fa-lg"
-              [ngClass]="{ 'fa-star': cipher.favorite, 'fa-star-o': !cipher.favorite }"
+              class="bwi bwi-lg"
+              [ngClass]="{ 'bwi-star-f': cipher.favorite, 'bwi-star': !cipher.favorite }"
               aria-hidden="true"
             ></i>
           </button>
@@ -835,12 +838,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index 3b4fce42c9..3c4fc22953 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -26,9 +26,9 @@
           <tbody>
             <tr *ngFor="let a of cipher.attachments">
               <td class="table-list-icon">
-                <i class="fa fa-fw fa-lg fa-file-o" *ngIf="!a.downloading" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="!a.downloading" aria-hidden="true"></i>
                 <i
-                  class="fa fa-spinner fa-lg fa-fw fa-spin"
+                  class="bwi bwi-spinner bwi-lg bwi-fw bwi-spin"
                   *ngIf="a.downloading"
                   aria-hidden="true"
                 ></i>
@@ -43,7 +43,7 @@
                       rel="noopener"
                     >
                       <i
-                        class="fa fa-exclamation-triangle text-warning"
+                        class="bwi bwi-exclamation-triangle text-warning"
                         title="{{ 'attachmentFixDesc' | i18n }}"
                         aria-hidden="true"
                       ></i>
@@ -75,12 +75,12 @@
                   [disabled]="deleteBtn.loading"
                 >
                   <i
-                    class="fa fa-trash-o fa-lg fa-fw"
+                    class="bwi bwi-trash bwi-lg bwi-fw"
                     [hidden]="deleteBtn.loading"
                     aria-hidden="true"
                   ></i>
                   <i
-                    class="fa fa-spinner fa-spin fa-lg fa-fw"
+                    class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
                     [hidden]="!deleteBtn.loading"
                     title="{{ 'loading' | i18n }}"
                     aria-hidden="true"
@@ -104,7 +104,7 @@
           [disabled]="form.loading"
           *ngIf="!viewOnly"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/bulk-actions.component.html b/src/app/vault/bulk-actions.component.html
index ba11769015..7de4b16adc 100644
--- a/src/app/vault/bulk-actions.component.html
+++ b/src/app/vault/bulk-actions.component.html
@@ -8,7 +8,7 @@
     aria-expanded="false"
     appA11yTitle="{{ 'options' | i18n }}"
   >
-    <i class="fa fa-cog" aria-hidden="true"></i>
+    <i class="bwi bwi-cog" aria-hidden="true"></i>
   </button>
   <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bulkActionsButton">
     <button
@@ -17,7 +17,7 @@
       (click)="bulkMove()"
       *ngIf="!deleted && !organization"
     >
-      <i class="fa fa-fw fa-share" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-share" aria-hidden="true"></i>
       {{ "moveSelected" | i18n }}
     </button>
     <button
@@ -26,24 +26,24 @@
       (click)="bulkShare()"
       *ngIf="!deleted && !organization"
     >
-      <i class="fa fa-fw fa-arrow-circle-o-right" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
       {{ "moveSelectedToOrg" | i18n }}
     </button>
     <button class="dropdown-item" (click)="bulkRestore()" *ngIf="deleted && !organization">
-      <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
       {{ "restoreSelected" | i18n }}
     </button>
     <button class="dropdown-item text-danger" (click)="bulkDelete()">
-      <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
       {{ (deleted ? "permanentlyDeleteSelected" : "deleteSelected") | i18n }}
     </button>
     <div class="dropdown-divider"></div>
     <button class="dropdown-item" appStopClick (click)="selectAll(true)">
-      <i class="fa fa-fw fa-check-square-o" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-check-square" aria-hidden="true"></i>
       {{ "selectAll" | i18n }}
     </button>
     <button class="dropdown-item" appStopClick (click)="selectAll(false)">
-      <i class="fa fa-fw fa-minus-square-o" aria-hidden="true"></i>
+      <i class="bwi bwi-fw bwi-minus-square" aria-hidden="true"></i>
       {{ "unselectAll" | i18n }}
     </button>
   </div>
diff --git a/src/app/vault/bulk-delete.component.html b/src/app/vault/bulk-delete.component.html
index fa83e79f99..154786960a 100644
--- a/src/app/vault/bulk-delete.component.html
+++ b/src/app/vault/bulk-delete.component.html
@@ -27,7 +27,7 @@
           class="btn btn-danger btn-submit"
           [disabled]="form.loading"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ (permanent ? "permanentlyDelete" : "delete") | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/bulk-move.component.html b/src/app/vault/bulk-move.component.html
index d028b0086a..866cc49c2c 100644
--- a/src/app/vault/bulk-move.component.html
+++ b/src/app/vault/bulk-move.component.html
@@ -25,7 +25,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/bulk-restore.component.html b/src/app/vault/bulk-restore.component.html
index 68d6dfa493..5331b25fcc 100644
--- a/src/app/vault/bulk-restore.component.html
+++ b/src/app/vault/bulk-restore.component.html
@@ -24,7 +24,7 @@
           class="btn btn-primary btn-submit"
           [disabled]="form.loading"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "restore" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/bulk-share.component.html b/src/app/vault/bulk-share.component.html
index 47be98e5a7..5a7a38e8f5 100644
--- a/src/app/vault/bulk-share.component.html
+++ b/src/app/vault/bulk-share.component.html
@@ -73,7 +73,7 @@
           [disabled]="form.loading || !canSave"
           [ngClass]="{ loading: form.loading }"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index 7a9d43a83b..f36366b5a2 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -25,12 +25,17 @@
             >{{ c.name }}</a
           >
           <ng-container *ngIf="!organization && c.organizationId">
-            <i class="fa fa-cube" appStopProp title="{{ 'shared' | i18n }}" aria-hidden="true"></i>
+            <i
+              class="bwi bwi-collection"
+              appStopProp
+              title="{{ 'shared' | i18n }}"
+              aria-hidden="true"
+            ></i>
             <span class="sr-only">{{ "shared" | i18n }}</span>
           </ng-container>
           <ng-container *ngIf="c.hasAttachments">
             <i
-              class="fa fa-paperclip"
+              class="bwi bwi-paperclip"
               appStopProp
               title="{{ 'attachments' | i18n }}"
               aria-hidden="true"
@@ -38,7 +43,7 @@
             <span class="sr-only">{{ "attachments" | i18n }}</span>
             <ng-container *ngIf="showFixOldAttachments(c)">
               <i
-                class="fa fa-exclamation-triangle text-warning"
+                class="bwi bwi-exclamation-triangle text-warning"
                 appStopProp
                 title="{{ 'attachmentsNeedFix' | i18n }}"
                 aria-hidden="true"
@@ -60,7 +65,7 @@
               aria-expanded="false"
               appA11yTitle="{{ 'options' | i18n }}"
             >
-              <i class="fa fa-cog fa-lg" aria-hidden="true"></i>
+              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
             </button>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
               <ng-container *ngIf="c.type === cipherType.Login && !c.isDeleted">
@@ -70,7 +75,7 @@
                   appStopClick
                   (click)="copy(c, c.login.username, 'username', 'Username')"
                 >
-                  <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                   {{ "copyUsername" | i18n }}
                 </a>
                 <a
@@ -80,7 +85,7 @@
                   (click)="copy(c, c.login.password, 'password', 'Password')"
                   *ngIf="c.viewPassword"
                 >
-                  <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                   {{ "copyPassword" | i18n }}
                 </a>
                 <a
@@ -90,7 +95,7 @@
                   (click)="copy(c, c.login.totp, 'verificationCodeTotp', 'TOTP')"
                   *ngIf="displayTotpCopyButton(c)"
                 >
-                  <i class="fa fa-fw fa-clone" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-clone" aria-hidden="true"></i>
                   {{ "copyVerificationCode" | i18n }}
                 </a>
                 <a
@@ -100,12 +105,12 @@
                   *ngIf="c.login.canLaunch"
                   (click)="launch(c.login.launchUri)"
                 >
-                  <i class="fa fa-fw fa-share-square-o" aria-hidden="true"></i>
+                  <i class="bwi bwi-fw bwi-share-square" aria-hidden="true"></i>
                   {{ "launch" | i18n }}
                 </a>
               </ng-container>
               <a class="dropdown-item" href="#" appStopClick (click)="attachments(c)">
-                <i class="fa fa-fw fa-paperclip" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-paperclip" aria-hidden="true"></i>
                 {{ "attachments" | i18n }}
               </a>
               <a
@@ -115,7 +120,7 @@
                 *ngIf="((!organization && !c.organizationId) || organization) && !c.isDeleted"
                 (click)="clone(c)"
               >
-                <i class="fa fa-fw fa-files-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-files" aria-hidden="true"></i>
                 {{ "clone" | i18n }}
               </a>
               <a
@@ -125,7 +130,7 @@
                 *ngIf="!organization && !c.organizationId && !c.isDeleted"
                 (click)="share(c)"
               >
-                <i class="fa fa-fw fa-arrow-circle-o-right" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-arrow-circle-right" aria-hidden="true"></i>
                 {{ "moveToOrganization" | i18n }}
               </a>
               <a
@@ -135,7 +140,7 @@
                 *ngIf="c.organizationId && !c.isDeleted"
                 (click)="collections(c)"
               >
-                <i class="fa fa-fw fa-cubes" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-collection" aria-hidden="true"></i>
                 {{ "collections" | i18n }}
               </a>
               <a
@@ -145,7 +150,7 @@
                 *ngIf="c.organizationId && accessEvents"
                 (click)="events(c)"
               >
-                <i class="fa fa-fw fa-file-text-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-file-text" aria-hidden="true"></i>
                 {{ "eventLogs" | i18n }}
               </a>
               <a
@@ -155,11 +160,11 @@
                 (click)="restore(c)"
                 *ngIf="c.isDeleted"
               >
-                <i class="fa fa-fw fa-undo" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                 {{ "restore" | i18n }}
               </a>
               <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(c)">
-                <i class="fa fa-fw fa-trash-o" aria-hidden="true"></i>
+                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                 {{ (c.isDeleted ? "permanentlyDelete" : "delete") | i18n }}
               </a>
             </div>
@@ -171,7 +176,7 @@
   <div class="no-items" *ngIf="!filteredCiphers.length">
     <ng-container *ngIf="!loaded">
       <i
-        class="fa fa-spinner fa-spin text-muted"
+        class="bwi bwi-spinner bwi-spin text-muted"
         title="{{ 'loading' | i18n }}"
         aria-hidden="true"
       ></i>
@@ -180,7 +185,7 @@
     <ng-container *ngIf="loaded">
       <p>{{ "noItemsInList" | i18n }}</p>
       <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
-        <i class="fa fa-plus fa-fw"></i>{{ "addItem" | i18n }}
+        <i class="bwi bwi-plus bwi-fw"></i>{{ "addItem" | i18n }}
       </button>
     </ng-container>
   </div>
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index b75ad4ca41..486ed03e32 100644
--- a/src/app/vault/collections.component.html
+++ b/src/app/vault/collections.component.html
@@ -51,7 +51,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index 36dc1be8cd..fe59530f68 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -32,7 +32,7 @@
       </div>
       <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -50,12 +50,12 @@
             [appApiAction]="deletePromise"
           >
             <i
-              class="fa fa-trash-o fa-lg fa-fw"
+              class="bwi bwi-trash bwi-lg bwi-fw"
               [hidden]="deleteBtn.loading"
               aria-hidden="true"
             ></i>
             <i
-              class="fa fa-spinner fa-spin fa-lg fa-fw"
+              class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
               [hidden]="!deleteBtn.loading"
               title="{{ 'loading' | i18n }}"
               aria-hidden="true"
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index c290095f86..b8921f42e1 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -8,7 +8,7 @@
       rel="noopener"
       appA11yTitle="{{ 'learnMore' | i18n }}"
     >
-      <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
     </a>
   </div>
   <div class="card-body">
@@ -22,48 +22,48 @@
       autocomplete="off"
       appAutofocus
     />
-    <ul class="fa-ul card-ul">
+    <ul class="bwi-ul card-ul">
       <li [ngClass]="{ active: selectedAll }">
         <a href="#" appStopClick (click)="selectAll()">
-          <i class="fa-li fa fa-fw fa-th"></i>{{ "allItems" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-filter"></i>{{ "allItems" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedFavorites }" *ngIf="showFavorites">
         <a href="#" appStopClick (click)="selectFavorites()">
-          <i class="fa-li fa fa-fw fa-star"></i>{{ "favorites" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-star-f"></i>{{ "favorites" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedTrash }" *ngIf="showTrash">
         <a href="#" appStopClick (click)="selectTrash()">
-          <i class="fa-li fa fa-fw fa-trash-o"></i>{{ "trash" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-trash"></i>{{ "trash" | i18n }}
         </a>
       </li>
     </ul>
     <h3>{{ "types" | i18n }}</h3>
-    <ul class="fa-ul card-ul">
+    <ul class="bwi-ul card-ul">
       <li [ngClass]="{ active: selectedType === cipherType.Login }">
         <a href="#" appStopClick (click)="selectType(cipherType.Login)">
-          <i class="fa-li fa fa-fw fa-globe"></i>{{ "typeLogin" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-globe"></i>{{ "typeLogin" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Card }">
         <a href="#" appStopClick (click)="selectType(cipherType.Card)">
-          <i class="fa-li fa fa-fw fa-credit-card"></i>{{ "typeCard" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-credit-card"></i>{{ "typeCard" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.Identity }">
         <a href="#" appStopClick (click)="selectType(cipherType.Identity)">
-          <i class="fa-li fa fa-fw fa-id-card-o"></i>{{ "typeIdentity" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-id-card"></i>{{ "typeIdentity" | i18n }}
         </a>
       </li>
       <li [ngClass]="{ active: selectedType === cipherType.SecureNote }">
         <a href="#" appStopClick (click)="selectType(cipherType.SecureNote)">
-          <i class="fa-li fa fa-fw fa-sticky-note-o"></i>{{ "typeSecureNote" | i18n }}
+          <i class="bwi bwi-li bwi-fw bwi-sticky-note"></i>{{ "typeSecureNote" | i18n }}
         </a>
       </li>
     </ul>
     <p *ngIf="!loaded" class="text-muted">
-      <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
       <span class="sr-only">{{ "loading" | i18n }}</span>
     </p>
     <ng-container *ngIf="loaded">
@@ -77,10 +77,10 @@
             (click)="addFolder()"
             appA11yTitle="{{ 'addFolder' | i18n }}"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
           </a>
         </h3>
-        <ul class="fa-ul card-ul">
+        <ul class="bwi-ul card-ul">
           <ng-template #recursiveFolders let-folders>
             <li
               *ngFor="let f of folders"
@@ -89,18 +89,18 @@
               <div class="d-flex">
                 <i
                   *ngIf="f.children.length"
-                  class="fa-li fa"
+                  class="bwi-li bwi"
                   title="{{ 'toggleCollapse' | i18n }}"
                   [ngClass]="{
-                    'fa-caret-right': isCollapsed(f.node),
-                    'fa-caret-down': !isCollapsed(f.node)
+                    'bwi-caret-right': isCollapsed(f.node),
+                    'bwi-caret-down': !isCollapsed(f.node)
                   }"
                   (click)="collapse(f.node)"
                 ></i>
                 <a href="#" class="text-break" appStopClick (click)="selectFolder(f.node)">
                   <i
                     *ngIf="f.children.length === 0"
-                    class="fa-li fa fa-folder-o"
+                    class="bwi bwi-li bwi-folder"
                     aria-hidden="true"
                   ></i
                   >{{ f.node.name }}
@@ -113,10 +113,10 @@
                   appA11yTitle="{{ 'editFolder' | i18n }}"
                   *ngIf="f.node.id"
                 >
-                  <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
+                  <i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
                 </a>
               </div>
-              <ul class="fa-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
+              <ul class="bwi-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
                 <ng-container
                   *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }"
                 >
@@ -130,7 +130,7 @@
       </ng-container>
       <ng-container *ngIf="showCollections && collections && collections.length">
         <h3>{{ "collections" | i18n }}</h3>
-        <ul class="fa-ul card-ul">
+        <ul class="bwi-ul card-ul">
           <ng-template #recursiveCollections let-collections>
             <li
               *ngFor="let c of collections"
@@ -138,19 +138,23 @@
             >
               <i
                 *ngIf="c.children.length"
-                class="fa-li fa"
+                class="bwi-li bwi"
                 title="{{ 'toggleCollapse' | i18n }}"
                 [ngClass]="{
-                  'fa-caret-right': isCollapsed(c.node),
-                  'fa-caret-down': !isCollapsed(c.node)
+                  'bwi-caret-right': isCollapsed(c.node),
+                  'bwi-caret-down': !isCollapsed(c.node)
                 }"
                 (click)="collapse(c.node)"
               ></i>
               <a href="#" class="text-break" appStopClick (click)="selectCollection(c.node)">
-                <i *ngIf="c.children.length === 0" class="fa-li fa fa-cube" aria-hidden="true"></i
+                <i
+                  *ngIf="c.children.length === 0"
+                  class="bwi bwi-li bwi-collection"
+                  aria-hidden="true"
+                ></i
                 >{{ c.node.name }}
               </a>
-              <ul class="fa-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
+              <ul class="bwi-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
                 <ng-container
                   *ngTemplateOutlet="recursiveCollections; context: { $implicit: c.children }"
                 >
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index 642148c01a..a5771d1603 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -72,7 +72,7 @@
           [ngClass]="{ loading: form.loading }"
           *ngIf="organizations && organizations.length"
         >
-          <i class="fa fa-spinner fa-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
           <span>{{ "save" | i18n }}</span>
         </button>
         <a
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index ce33bab54c..2cf98ede79 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -21,7 +21,7 @@
           <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
             <ng-container *ngIf="actionSpinner.loading">
               <i
-                class="fa fa-spinner fa-spin text-muted"
+                class="bwi bwi-spinner bwi-spin text-muted"
                 title="{{ 'loading' | i18n }}"
                 aria-hidden="true"
               ></i>
@@ -38,11 +38,11 @@
             (click)="addCipher()"
             *ngIf="!deleted"
           >
-            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
+            <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>{{ "addItem" | i18n }}
           </button>
         </div>
       </div>
-      <app-callout type="warning" *ngIf="deleted" icon="fa-warning">
+      <app-callout type="warning" *ngIf="deleted" icon="bwi-exclamation-triangle">
         {{ trashCleanupWarning }}
       </app-callout>
       <app-vault-ciphers
@@ -58,7 +58,8 @@
     <div class="col-3">
       <div class="card border-warning mb-4" *ngIf="showUpdateKey">
         <div class="card-header bg-warning text-white">
-          <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{ "updateKeyTitle" | i18n }}
+          <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
+          {{ "updateKeyTitle" | i18n }}
         </div>
         <div class="card-body">
           <p>{{ "updateEncryptionKeyShortDesc" | i18n }}</p>
@@ -70,7 +71,8 @@
       <app-verify-email *ngIf="showVerifyEmail" class="d-block mb-4"></app-verify-email>
       <div class="card border-warning mb-4" *ngIf="showBrowserOutdated">
         <div class="card-header bg-warning text-white">
-          <i class="fa fa-warning fa-fw" aria-hidden="true"></i> {{ "updateBrowser" | i18n }}
+          <i class="bwi bwi-exclamation-triangle bwi-fw" aria-hidden="true"></i>
+          {{ "updateBrowser" | i18n }}
         </div>
         <div class="card-body">
           <p>{{ "updateBrowserDesc" | i18n }}</p>
@@ -86,7 +88,7 @@
       </div>
       <div class="card border-success mb-4" *ngIf="showPremiumCallout">
         <div class="card-header bg-success text-white">
-          <i class="fa fa-star fa-fw" aria-hidden="true"></i> {{ "goPremium" | i18n }}
+          <i class="bwi bwi-star-f bwi-fw" aria-hidden="true"></i> {{ "goPremium" | i18n }}
         </div>
         <div class="card-body">
           <p>{{ "premiumUpgradeUnlockFeatures" | i18n }}</p>
@@ -105,7 +107,7 @@
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <div class="card-body">
@@ -133,7 +135,7 @@
             rel="noopener"
             appA11yTitle="{{ 'learnMore' | i18n }}"
           >
-            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
           </a>
         </div>
         <div class="card-body">
diff --git a/src/connectors/sso.html b/src/connectors/sso.html
index a4429ce7f3..b2ebc78265 100644
--- a/src/connectors/sso.html
+++ b/src/connectors/sso.html
@@ -21,7 +21,7 @@
         <div id="content">
           <p class="text-center">
             <i
-              class="fa fa-spinner fa-spin fa-2x text-muted"
+              class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
               title="Loading"
               aria-hidden="true"
             ></i>
diff --git a/src/connectors/webauthn-fallback.html b/src/connectors/webauthn-fallback.html
index 05db9a8e6b..4c532885ec 100644
--- a/src/connectors/webauthn-fallback.html
+++ b/src/connectors/webauthn-fallback.html
@@ -13,7 +13,7 @@
           <div id="spinner">
             <p class="text-center">
               <i
-                class="fa fa-spinner fa-spin fa-2x text-muted"
+                class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
                 title="Loading"
                 aria-hidden="true"
               ></i>
diff --git a/src/images/bwi-globe.png b/src/images/bwi-globe.png
new file mode 100644
index 0000000000..cceeaefbcf
Binary files /dev/null and b/src/images/bwi-globe.png differ
diff --git a/src/images/fa-globe.png b/src/images/fa-globe.png
deleted file mode 100644
index 7ba709fd1a..0000000000
Binary files a/src/images/fa-globe.png and /dev/null differ
diff --git a/src/index.html b/src/index.html
index 3f476dc4b9..63d4e72c09 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,7 +13,6 @@
     <link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#175DDC" />
     <link rel="manifest" href="manifest.json" />
   </head>
-
   <body class="layout_frontend">
     <app-root>
       <div class="mt-5 d-flex justify-content-center">
@@ -21,7 +20,7 @@
           <img class="mb-4 logo logo-themed" alt="Bitwarden" />
           <p class="text-center">
             <i
-              class="fa fa-spinner fa-spin fa-2x text-muted"
+              class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
               title="Loading"
               aria-hidden="true"
             ></i>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index c88aa317a5..c817bbf10e 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -147,7 +147,7 @@ code {
   }
 }
 
-.fa-icon-above-input {
+.bwi-icon-above-input {
   height: 1.5em;
 }
 
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
index 96b3bd8484..f5a1290fa1 100644
--- a/src/scss/buttons.scss
+++ b/src/scss/buttons.scss
@@ -163,7 +163,7 @@
 .btn-submit {
   position: relative;
 
-  .fa-spinner {
+  .bwi-spinner {
     align-items: center;
     bottom: 0;
     display: none;
@@ -176,7 +176,7 @@
 
   &:disabled:not(.manual),
   &.loading {
-    .fa-spinner {
+    .bwi-spinner {
       display: flex;
     }
 
diff --git a/src/scss/cards.scss b/src/scss/cards.scss
index ef83b07d7d..146d0403e7 100644
--- a/src/scss/cards.scss
+++ b/src/scss/cards.scss
@@ -46,21 +46,21 @@
   @extend .mb-4;
 }
 
-.card ul.fa-ul.card-ul {
+.card ul.bwi-ul.card-ul {
   margin-left: 1.9em;
 
   li {
     word-break: break-all;
   }
 
-  .fa-li {
+  .bwi-li {
     top: 4px;
   }
 
   &.carets {
     margin-left: 1.1em;
 
-    .fa-li {
+    .bwi-li {
       left: -17px;
       width: 1.1em;
     }
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index 70aab9852a..287c1e851b 100644
--- a/src/scss/pages.scss
+++ b/src/scss/pages.scss
@@ -77,8 +77,8 @@ app-org-vault-groupings,
     }
 
     li {
-      > .fa,
-      > div > .fa {
+      > .bwi,
+      > div > .bwi {
         cursor: pointer;
       }
     }
@@ -99,8 +99,8 @@ app-org-vault-groupings,
         }
       }
 
-      > .fa,
-      > div > .fa {
+      > .bwi,
+      > div > .bwi {
         @include themify($themes) {
           color: themed("linkColor");
         }
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index a2bbe04623..f914b51412 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -1,5 +1,7 @@
 @import "../../jslib/angular/src/scss/webfonts.css";
 @import "./variables";
+@import "../../jslib/angular/src/scss/bwicons/styles/style.scss";
+@import "../../jslib/angular/src/scss/icons.scss";
 
 //@import "~bootstrap/scss/bootstrap";
 @import "~bootstrap/scss/_functions";
@@ -41,7 +43,6 @@
 @import "~bootstrap/scss/_print";
 
 @import "~ngx-toastr/toastr";
-@import "~font-awesome/scss/font-awesome.scss";
 @import "~sweetalert2/src/sweetalert2.scss";
 
 @import "./base";
@@ -55,5 +56,3 @@
 @import "./plugins";
 @import "./tables";
 @import "./toasts";
-
-@import "../../jslib/angular/src/scss/icons.scss"; // Needs to be after font-awesome
diff --git a/src/scss/tables.scss b/src/scss/tables.scss
index 458ba3e2af..a4d662d1d9 100644
--- a/src/scss/tables.scss
+++ b/src/scss/tables.scss
@@ -31,14 +31,14 @@
     }
 
     small,
-    > .fa,
+    > .bwi,
     .icon {
       @include themify($themes) {
         color: themed("textMuted");
       }
     }
 
-    .fa-globe {
+    .bwi-globe {
       @include themify($themes) {
         color: themed("iconColor");
       }
diff --git a/src/scss/toasts.scss b/src/scss/toasts.scss
index 075d002f32..6685de6449 100644
--- a/src/scss/toasts.scss
+++ b/src/scss/toasts.scss
@@ -25,7 +25,7 @@
     .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;
@@ -56,7 +56,7 @@
       }
 
       .icon i::before {
-        content: "\f0e7";
+        content: map_get($icons, "error");
       }
     }
 
@@ -74,7 +74,7 @@
       }
 
       .icon i::before {
-        content: "\f071";
+        content: map_get($icons, "exclamation-triangle");
       }
     }
 
@@ -92,7 +92,7 @@
       }
 
       .icon i:before {
-        content: "\f05a";
+        content: map_get($icons, "info-circle");
       }
     }
 
@@ -110,7 +110,7 @@
       }
 
       .icon i:before {
-        content: "\f00C";
+        content: map_get($icons, "check");
       }
     }
   }
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index c0df4f41be..a0bc2d8852 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -78,10 +78,6 @@ $grid-breakpoints: (
 
 $border-color: $secondary;
 
-// Font Awesome webfonts path
-
-$fa-font-path: "~font-awesome/fonts";
-
 // MFA Types for logo styling with no dark theme alternative
 
 $mfaTypes: 0, 2, 3, 4, 6;
diff --git a/src/services/webPlatformUtils.service.ts b/src/services/webPlatformUtils.service.ts
index 0177c8343b..e5958aa498 100644
--- a/src/services/webPlatformUtils.service.ts
+++ b/src/services/webPlatformUtils.service.ts
@@ -198,16 +198,16 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
       // If you add custom types to this part, the type to SweetAlertIcon cast below needs to be changed.
       switch (type) {
         case "success":
-          iconClasses = "fa-check text-success";
+          iconClasses = "bwi-check text-success";
           break;
         case "warning":
-          iconClasses = "fa-warning text-warning";
+          iconClasses = "bwi-exclamation-triangle text-warning";
           break;
         case "error":
-          iconClasses = "fa-bolt text-danger";
+          iconClasses = "bwi-error text-danger";
           break;
         case "info":
-          iconClasses = "fa-info-circle text-info";
+          iconClasses = "bwi-info-circle text-info";
           break;
         default:
           break;
@@ -220,7 +220,7 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
     }
 
     const iconHtmlStr =
-      iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined;
+      iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined;
     const confirmed = await Swal.fire({
       heightAuto: false,
       buttonsStyling: false,