From 33314869f08f7aaa1b2ee45aab1e97934c55cdaa Mon Sep 17 00:00:00 2001
From: Vincent Salucci <26154748+vincentsalucci@users.noreply.github.com>
Date: Fri, 28 Jan 2022 04:53:06 -0600
Subject: [PATCH] [Icons] Update Font Sheet (#2272)

* [Icons] Update Font Sheet

* Prettier updates

* Updated refresh -> generate

* Updated closed folder icon

* Reverted to using a base class

* Update jslib

* Removed unused import

* Updated eye/eye-slash icon references

* Update jslib

* Updating fallback image for cipher icon

* Update jslib

* Removed duplicate icon base class

* Update jslib

* Prettier

Co-authored-by: Hinton <oscar@oscarhinton.com>
---
 jslib                                         |   2 +-
 src/popup/accounts/environment.component.html |   2 +-
 src/popup/accounts/hint.component.html        |   2 +-
 src/popup/accounts/home.component.html        |   4 +-
 src/popup/accounts/lock.component.html        |   4 +-
 src/popup/accounts/login.component.html       |   6 +--
 src/popup/accounts/register.component.html    |  10 ++--
 .../accounts/remove-password.component.html   |   4 +-
 .../accounts/set-password.component.html      |  12 ++---
 src/popup/accounts/two-factor.component.html  |   2 +-
 .../update-temp-password.component.html       |  10 ++--
 src/popup/app.component.ts                    |  10 ++--
 .../components/action-buttons.component.html  |  16 +++---
 .../components/cipher-row.component.html      |   8 ++-
 .../password-reprompt.component.html          |   4 +-
 src/popup/components/pop-out.component.html   |   2 +-
 src/popup/components/send-list.component.html |  20 ++++----
 src/popup/components/set-pin.component.html   |   4 +-
 .../verify-master-password.component.html     |   2 +-
 .../password-generator-history.component.html |   4 +-
 .../password-generator.component.html         |   2 +-
 src/popup/images/bwi-globe.png                | Bin 0 -> 500 bytes
 src/popup/images/fa-globe.png                 | Bin 344 -> 0 bytes
 src/popup/index.html                          |   2 +-
 src/popup/scss/base.scss                      |   7 +--
 src/popup/scss/box.scss                       |   2 +-
 src/popup/scss/environment.scss               |   4 +-
 src/popup/scss/modal.scss                     |   2 +-
 src/popup/scss/plugins.scss                   |  12 ++---
 src/popup/scss/popup.scss                     |   5 +-
 src/popup/scss/variables.scss                 |   2 +
 src/popup/send/send-add-edit.component.html   |  16 +++---
 src/popup/send/send-groupings.component.html  |  14 +++---
 src/popup/send/send-type.component.html       |   8 +--
 .../settings/excluded-domains.component.html  |   6 +--
 src/popup/settings/export.component.html      |   2 +-
 .../settings/folder-add-edit.component.html   |   6 +--
 src/popup/settings/folders.component.html     |   4 +-
 src/popup/settings/options.component.html     |  14 +++---
 src/popup/settings/premium.component.html     |  18 +++----
 src/popup/settings/settings.component.html    |  39 +++++++--------
 src/popup/settings/settings.component.ts      |   4 +-
 src/popup/settings/sync.component.html        |   4 +-
 src/popup/tabs.component.html                 |  10 ++--
 .../add-edit-custom-fields.component.html     |  10 ++--
 src/popup/vault/add-edit.component.html       |  40 +++++++--------
 src/popup/vault/attachments.component.html    |   8 +--
 src/popup/vault/ciphers.component.html        |  20 ++++----
 src/popup/vault/collections.component.html    |   4 +-
 src/popup/vault/current-tab.component.html    |   8 +--
 src/popup/vault/groupings.component.html      |  45 +++++++++--------
 .../vault/password-history.component.html     |   2 +-
 src/popup/vault/share.component.html          |   2 +-
 .../vault/view-custom-fields.component.html   |  16 +++---
 src/popup/vault/view.component.html           |  46 +++++++++---------
 55 files changed, 263 insertions(+), 249 deletions(-)
 create mode 100644 src/popup/images/bwi-globe.png
 delete mode 100644 src/popup/images/fa-globe.png

diff --git a/jslib b/jslib
index 4722a287ec7..6b4ed5fcce5 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 4722a287ec7212b8e67d02ec7ea1a9be0990ee6e
+Subproject commit 6b4ed5fcce58c21a9977d94ebb65f954d6766548
diff --git a/src/popup/accounts/environment.component.html b/src/popup/accounts/environment.component.html
index 192b847aa3d..00637f7859b 100644
--- a/src/popup/accounts/environment.component.html
+++ b/src/popup/accounts/environment.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
diff --git a/src/popup/accounts/hint.component.html b/src/popup/accounts/hint.component.html
index 1c939f6c211..f228e7018f3 100644
--- a/src/popup/accounts/hint.component.html
+++ b/src/popup/accounts/hint.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
diff --git a/src/popup/accounts/home.component.html b/src/popup/accounts/home.component.html
index 1542ea506e1..2fb6907dccf 100644
--- a/src/popup/accounts/home.component.html
+++ b/src/popup/accounts/home.component.html
@@ -6,11 +6,11 @@
       ><b>{{ "login" | i18n }}</b></a
     >
     <button type="button" (click)="launchSsoBrowser()" class="btn block">
-      <i class="fa fa-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
+      <i class="bwi bwi-bank" aria-hidden="true"></i> {{ "enterpriseSingleSignOn" | i18n }}
     </button>
     <a class="btn block" routerLink="/register">{{ "createAccount" | i18n }}</a>
   </div>
 </div>
 <a routerLink="/environment" class="settings-icon">
-  <i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>&nbsp;{{ "settings" | i18n }}</span>
+  <i class="bwi bwi-cog-f bwi-lg" aria-hidden="true"></i><span>&nbsp;{{ "settings" | i18n }}</span>
 </a>
diff --git a/src/popup/accounts/lock.component.html b/src/popup/accounts/lock.component.html
index 96f859cffc0..0d41f2d7121 100644
--- a/src/popup/accounts/lock.component.html
+++ b/src/popup/accounts/lock.component.html
@@ -47,8 +47,8 @@
               [attr.aria-pressed]="showPassword"
             >
               <i
-                class="fa fa-lg"
-                [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                class="bwi bwi-lg"
+                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 aria-hidden="true"
               ></i>
             </button>
diff --git a/src/popup/accounts/login.component.html b/src/popup/accounts/login.component.html
index ee3381a26cc..1ae52bc2010 100644
--- a/src/popup/accounts/login.component.html
+++ b/src/popup/accounts/login.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "login" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -52,8 +52,8 @@
               [attr.aria-pressed]="showPassword"
             >
               <i
-                class="fa fa-lg"
-                [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                class="bwi bwi-lg"
+                [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                 aria-hidden="true"
               ></i>
             </button>
diff --git a/src/popup/accounts/register.component.html b/src/popup/accounts/register.component.html
index ae2b4562ee5..99f6137c517 100644
--- a/src/popup/accounts/register.component.html
+++ b/src/popup/accounts/register.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -64,9 +64,9 @@
                 [attr.aria-pressed]="showPassword"
               >
                 <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>
@@ -114,9 +114,9 @@
               [attr.aria-pressed]="showPassword"
             >
               <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/popup/accounts/remove-password.component.html b/src/popup/accounts/remove-password.component.html
index 8c3a1a72c82..dee21d74caf 100644
--- a/src/popup/accounts/remove-password.component.html
+++ b/src/popup/accounts/remove-password.component.html
@@ -20,7 +20,7 @@
           [disabled]="actionPromise"
         >
           <i
-            class="fa fa-spinner fa-spin"
+            class="bwi bwi-spinner bwi-spin"
             title="{{ 'loading' | i18n }}"
             aria-hidden="true"
             *ngIf="continuing"
@@ -36,7 +36,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/popup/accounts/set-password.component.html b/src/popup/accounts/set-password.component.html
index b892806734c..997f470c907 100644
--- a/src/popup/accounts/set-password.component.html
+++ b/src/popup/accounts/set-password.component.html
@@ -9,13 +9,13 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
   <content>
     <div class="full-loading-spinner" *ngIf="syncLoading">
-      <i class="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
     </div>
     <div *ngIf="!syncLoading">
       <div class="box">
@@ -71,9 +71,9 @@
                   [attr.aria-pressed]="showPassword"
                 >
                   <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>
@@ -124,9 +124,9 @@
                   [attr.aria-pressed]="showPassword"
                 >
                   <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/popup/accounts/two-factor.component.html b/src/popup/accounts/two-factor.component.html
index 820043293b9..699bb953952 100644
--- a/src/popup/accounts/two-factor.component.html
+++ b/src/popup/accounts/two-factor.component.html
@@ -19,7 +19,7 @@
         "
       >
         <span [hidden]="form.loading">{{ "continue" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
diff --git a/src/popup/accounts/update-temp-password.component.html b/src/popup/accounts/update-temp-password.component.html
index 9b55c4f3ab5..40d133df8dd 100644
--- a/src/popup/accounts/update-temp-password.component.html
+++ b/src/popup/accounts/update-temp-password.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "submit" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -59,9 +59,9 @@
                 [attr.aria-pressed]="showPassword"
               >
                 <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>
@@ -106,9 +106,9 @@
               [attr.aria-pressed]="showPassword"
             >
               <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/popup/app.component.ts b/src/popup/app.component.ts
index 9892e994023..66d152251ac 100644
--- a/src/popup/app.component.ts
+++ b/src/popup/app.component.ts
@@ -216,16 +216,16 @@ export class AppComponent implements OnInit {
       // 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;
@@ -239,7 +239,7 @@ export class AppComponent implements OnInit {
       buttonsStyling: false,
       icon: type as SweetAlertIcon, // required to be any of the SweetAlertIcons to output the iconHtml.
       iconHtml:
-        iconClasses != null ? `<i class="swal-custom-icon fa ${iconClasses}"></i>` : undefined,
+        iconClasses != null ? `<i class="swal-custom-icon bwi ${iconClasses}"></i>` : undefined,
       text: msg.text,
       html: msg.html,
       titleText: msg.title,
diff --git a/src/popup/components/action-buttons.component.html b/src/popup/components/action-buttons.component.html
index 20ebd350805..beea50c29f1 100644
--- a/src/popup/components/action-buttons.component.html
+++ b/src/popup/components/action-buttons.component.html
@@ -6,7 +6,7 @@
   appA11yTitle="{{ 'view' | i18n }}"
   *ngIf="showView"
 >
-  <i class="fa fa-lg fa-list-alt" aria-hidden="true"></i>
+  <i class="bwi bwi-lg bwi-list-alt" aria-hidden="true"></i>
 </span>
 <ng-container *ngIf="cipher.type === cipherType.Login">
   <span
@@ -18,7 +18,7 @@
     *ngIf="!showView"
     [ngClass]="{ disabled: !cipher.login.canLaunch }"
   >
-    <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
   </span>
   <span
     class="row-btn"
@@ -28,7 +28,7 @@
     (click)="copy(cipher, cipher.login.username, 'username', 'Username')"
     [ngClass]="{ disabled: !cipher.login.username }"
   >
-    <i class="fa fa-lg fa-user" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-user" aria-hidden="true"></i>
   </span>
   <span
     class="row-btn"
@@ -38,7 +38,7 @@
     (click)="copy(cipher, cipher.login.password, 'password', 'Password')"
     [ngClass]="{ disabled: !cipher.login.password || !cipher.viewPassword }"
   >
-    <i class="fa fa-lg fa-key" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-key" aria-hidden="true"></i>
   </span>
   <span
     class="row-btn"
@@ -48,7 +48,7 @@
     (click)="copy(cipher, cipher.login.totp, 'verificationCodeTotp', 'TOTP')"
     [ngClass]="{ disabled: !displayTotpCopyButton(cipher) }"
   >
-    <i class="fa fa-lg fa-clock-o" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-clock" aria-hidden="true"></i>
   </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.Card">
@@ -60,7 +60,7 @@
     (click)="copy(cipher, cipher.card.number, 'number', 'Card Number')"
     [ngClass]="{ disabled: !cipher.card.number }"
   >
-    <i class="fa fa-lg fa-hashtag" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-hashtag" aria-hidden="true"></i>
   </span>
   <span
     class="row-btn"
@@ -70,7 +70,7 @@
     (click)="copy(cipher, cipher.card.code, 'securityCode', 'Security Code')"
     [ngClass]="{ disabled: !cipher.card.code }"
   >
-    <i class="fa fa-lg fa-key" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-key" aria-hidden="true"></i>
   </span>
 </ng-container>
 <ng-container *ngIf="cipher.type === cipherType.SecureNote">
@@ -82,6 +82,6 @@
     (click)="copy(cipher, cipher.notes, 'note', 'Note')"
     [ngClass]="{ disabled: !cipher.notes }"
   >
-    <i class="fa fa-lg fa-clone" aria-hidden="true"></i>
+    <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
   </span>
 </ng-container>
diff --git a/src/popup/components/cipher-row.component.html b/src/popup/components/cipher-row.component.html
index 5953c31d886..ea0af83d86a 100644
--- a/src/popup/components/cipher-row.component.html
+++ b/src/popup/components/cipher-row.component.html
@@ -12,12 +12,16 @@
       <span class="text">
         {{ cipher.name }}
         <ng-container *ngIf="cipher.organizationId">
-          <i class="fa fa-cube text-muted" title="{{ 'shared' | i18n }}" aria-hidden="true"></i>
+          <i
+            class="bwi bwi-collection text-muted"
+            title="{{ 'shared' | i18n }}"
+            aria-hidden="true"
+          ></i>
           <span class="sr-only">{{ "shared" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="cipher.hasAttachments">
           <i
-            class="fa fa-paperclip text-muted"
+            class="bwi bwi-paperclip text-muted"
             title="{{ 'attachments' | i18n }}"
             aria-hidden="true"
           ></i>
diff --git a/src/popup/components/password-reprompt.component.html b/src/popup/components/password-reprompt.component.html
index faa383af39b..632c5a2df63 100644
--- a/src/popup/components/password-reprompt.component.html
+++ b/src/popup/components/password-reprompt.component.html
@@ -30,9 +30,9 @@
                   [attr.aria-pressed]="showPassword"
                 >
                   <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/popup/components/pop-out.component.html b/src/popup/components/pop-out.component.html
index fa289ca7529..08d8fb75e07 100644
--- a/src/popup/components/pop-out.component.html
+++ b/src/popup/components/pop-out.component.html
@@ -1,5 +1,5 @@
 <ng-container>
   <button type="button" (click)="expand()" appA11yTitle="{{ 'popOutNewWindow' | i18n }}">
-    <i class="fa fa-external-link fa-rotate-270 fa-lg fa-fw" aria-hidden="true"></i>
+    <i class="bwi bwi-external-link bwi-rotate-270 bwi-lg bwi-fw" aria-hidden="true"></i>
   </button>
 </ng-container>
diff --git a/src/popup/components/send-list.component.html b/src/popup/components/send-list.component.html
index 09c35990cc1..f4f445ce471 100644
--- a/src/popup/components/send-list.component.html
+++ b/src/popup/components/send-list.component.html
@@ -9,8 +9,8 @@
   <div class="row-main">
     <div class="app-vault-icon">
       <div class="icon" aria-hidden="true">
-        <i class="fa fa-fw fa-lg fa-file-text-o" *ngIf="s.type === sendType.Text"></i>
-        <i class="fa fa-fw fa-lg fa-file-o" *ngIf="s.type === sendType.File"></i>
+        <i class="bwi bwi-fw bwi-lg bwi-file-text" *ngIf="s.type === sendType.Text"></i>
+        <i class="bwi bwi-fw bwi-lg bwi-file" *ngIf="s.type === sendType.File"></i>
       </div>
     </div>
     <div class="row-main-content">
@@ -18,7 +18,7 @@
         {{ s.name }}
         <ng-container *ngIf="s.disabled">
           <i
-            class="fa fa-warning text-muted"
+            class="bwi bwi-exclamation-triangle text-muted"
             title="{{ 'disabled' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -26,7 +26,7 @@
         </ng-container>
         <ng-container *ngIf="s.password">
           <i
-            class="fa fa-key text-muted"
+            class="bwi bwi-key text-muted"
             title="{{ 'passwordProtected' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -34,19 +34,19 @@
         </ng-container>
         <ng-container *ngIf="s.maxAccessCountReached">
           <i
-            class="fa fa-ban text-muted"
+            class="bwi bwi-ban text-muted"
             title="{{ 'maxAccessCountReached' | i18n }}"
             aria-hidden="true"
           ></i>
           <span class="sr-only">{{ "maxAccessCountReached" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="s.expired">
-          <i class="fa fa-clock-o text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
+          <i class="bwi bwi-clock text-muted" title="{{ 'expired' | i18n }}" aria-hidden="true"></i>
           <span class="sr-only">{{ "expired" | i18n }}</span>
         </ng-container>
         <ng-container *ngIf="s.pendingDelete">
           <i
-            class="fa fa-trash text-muted"
+            class="bwi bwi-trash text-muted"
             title="{{ 'pendingDeletion' | i18n }}"
             aria-hidden="true"
           ></i>
@@ -64,7 +64,7 @@
       appA11yTitle="{{ 'copySendLink' | i18n }}"
       (click)="copySendLink(s)"
     >
-      <i class="fa fa-lg fa-copy" aria-hidden="true"></i>
+      <i class="bwi bwi-lg bwi-files" aria-hidden="true"></i>
     </span>
     <span
       class="row-btn"
@@ -75,7 +75,7 @@
       (click)="removePassword(s)"
       *ngIf="s.password"
     >
-      <i class="fa fa-lg fa-undo" aria-hidden="true"></i>
+      <i class="bwi bwi-lg bwi-undo" aria-hidden="true"></i>
     </span>
     <span
       class="row-btn"
@@ -84,7 +84,7 @@
       appA11yTitle="{{ 'delete' | i18n }}"
       (click)="delete(s)"
     >
-      <i class="fa fa-lg fa-trash-o" aria-hidden="true"></i>
+      <i class="bwi bwi-lg bwi-trash" aria-hidden="true"></i>
     </span>
   </div>
 </button>
diff --git a/src/popup/components/set-pin.component.html b/src/popup/components/set-pin.component.html
index c08a2a48e85..095b80fb8c1 100644
--- a/src/popup/components/set-pin.component.html
+++ b/src/popup/components/set-pin.component.html
@@ -31,9 +31,9 @@
                   [attr.aria-pressed]="showPin"
                 >
                   <i
-                    class="fa fa-lg"
+                    class="bwi bwi-lg"
                     aria-hidden="true"
-                    [ngClass]="{ 'fa-eye': !showPin, 'fa-eye-slash': showPin }"
+                    [ngClass]="{ 'bwi-eye': !showPin, 'bwi-eye-slash': showPin }"
                   ></i>
                 </button>
               </div>
diff --git a/src/popup/components/verify-master-password.component.html b/src/popup/components/verify-master-password.component.html
index a2745663f4c..2fd78bb907d 100644
--- a/src/popup/components/verify-master-password.component.html
+++ b/src/popup/components/verify-master-password.component.html
@@ -25,7 +25,7 @@
       {{ "sendCode" | i18n }}
     </button>
     <span class="ml-2 text-success" role="alert" @sent *ngIf="sentCode">
-      <i class="fa fa-check-circle-o" aria-hidden="true"></i>
+      <i class="bwi bwi-check-circle" aria-hidden="true"></i>
       {{ "codeSent" | i18n }}
     </span>
   </div>
diff --git a/src/popup/generator/password-generator-history.component.html b/src/popup/generator/password-generator-history.component.html
index 72b0a72854b..e24d7d2053f 100644
--- a/src/popup/generator/password-generator-history.component.html
+++ b/src/popup/generator/password-generator-history.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <button type="button" appBlurClick type="button" (click)="close()">
-      <span class="header-icon" aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
+      <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>
   </div>
@@ -36,7 +36,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>
       </div>
diff --git a/src/popup/generator/password-generator.component.html b/src/popup/generator/password-generator.component.html
index fc846e5ec6b..f2337ea015a 100644
--- a/src/popup/generator/password-generator.component.html
+++ b/src/popup/generator/password-generator.component.html
@@ -47,7 +47,7 @@
     <div class="box-content single-line">
       <a class="box-content-row box-content-row-flex" routerLink="/generator-history">
         <div class="row-main">{{ "passwordHistory" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </a>
     </div>
   </div>
diff --git a/src/popup/images/bwi-globe.png b/src/popup/images/bwi-globe.png
new file mode 100644
index 0000000000000000000000000000000000000000..cceeaefbcf8b9916d4afa6eac251be28eae9460c
GIT binary patch
literal 500
zcmV<Q0So?#P)<h;3K|Lk000e1NJLTq000vJ000vR1ONa4*jfHZ0005INkl<Zc-nQ+
zy=#+E6vy!&t<o2W^^G`aoSbwL%_Q2v6csx-SQHT*>f2H@ZF0UR25DS`ru_$8L><I}
zph2+Mp|M8WfZ)(UB7(T2gE$IFy69u_(3nC$<GqK&@7{CN#(ta<t2C%m!m}}Ll<Tz_
z>Xb;?kRS02{APuk<#WAiOGPR3C38$6u5eRI4^m+{6<zN{nKe!*klcB9kCfR((IS#X
zSg@tB9{po8eDee^En{=c@`QOW@R0$jSy*AJ6}(Q+$q#cT*B|!ZGSaP(oun2#2IrGD
zG16_%yudF<lz0^62>AhSb3NA;cAB(N$tPG8tNxhc#O@$|pFQ-acHWaVsQ`!UxdNV`
zDjFX5IIsLP^PFlX>-R$ITl|&+c9e#w+BqqGoK$wNn(V5Lw#u3H2a*l(Q<N}uU^;V9
zA%C6gYGrditAk(TvO>HF#`wYRDI24f9@Kv<5@ZWuIBT{~lI8iH+ok~HHpd&@a#0~J
z@rUVfrY!qA-;o}+ygJ<3&Vs*B_N{M-E%B8V20Ah(s8H@W8|z_;8f8y&*5m16r@1xv
qZ*0{@*_gv3RqFnOBIBuO`|dA}Gr^Z&<%3NC0000<MNUMnLSTYMi|oDt

literal 0
HcmV?d00001

diff --git a/src/popup/images/fa-globe.png b/src/popup/images/fa-globe.png
deleted file mode 100644
index 7ba709fd1ae2a7f467f948e9c3a9d69c2da3afef..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 344
zcmV-e0jK_nP)<h;3K|Lk000e1NJLTq000pH000pP1ONa4kz|i?0003WNkl<ZD9>e(
zze@u_5QX2JLgEilk#L|QLO>A_1jR~8Zy{(asnSHW{~8NRI}t2`h5taX3)l%_pGG7g
zB4Tj}M+&hB62e$yx$MPP&CGuL_RUI8gzQqIMa%=IL>d;$B((XYj?uv|t{L%xLyR&r
zjFV@TI}F2kAwO_1)?7V-(V;+{9>zUEKSRQa=Qzg=fy5TS7zdIlVZ5f6k_aWHsnW$r
z2*fRhksFF%ae0hL#2Cgx1~^LrV_R;;52oC4K!I-$DT!xSHdv9kq)W{MjCFCIHa~>y
zP|g6xq$qlAlYJr{y~$Jm^+x7aiz^mca*>ODBu|ooz9fk;VvYw(&hq9VRYFR%A^TOM
qT%<@$k9RioU*y>2hzfhm`}03sXXm+tt9(EJ0000<MNUMnLSTZve~bD6

diff --git a/src/popup/index.html b/src/popup/index.html
index aa4d8727fde..17f50e0a0eb 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <app-root>
-      <div id="loading"><i class="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i></div>
+      <div id="loading"><i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i></div>
     </app-root>
   </body>
 </html>
diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss
index 3598476485d..01e897771ca 100644
--- a/src/popup/scss/base.scss
+++ b/src/popup/scss/base.scss
@@ -232,7 +232,7 @@ header {
     position: relative;
     display: flex;
 
-    .fa {
+    .bwi {
       position: absolute;
       top: 15px;
       left: 20px;
@@ -274,7 +274,7 @@ header {
   .left + .search {
     padding-left: 0;
 
-    .fa {
+    .bwi {
       left: 10px;
     }
   }
@@ -444,7 +444,8 @@ content {
       content: url("../images/search-desktop" + themed("svgSuffix"));
     }
   }
-  .fa {
+
+  .bwi {
     margin-bottom: 10px;
 
     @include themify($themes) {
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index 2697b939289..0a43da8e56f 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -530,7 +530,7 @@
   }
 
   .row-sub-icon,
-  .row-sub-label + i.fa {
+  .row-sub-label + i.bwi {
     @include themify($themes) {
       color: themed("disabledIconColor");
     }
diff --git a/src/popup/scss/environment.scss b/src/popup/scss/environment.scss
index 4b70c95ca74..17e7c23d2e1 100644
--- a/src/popup/scss/environment.scss
+++ b/src/popup/scss/environment.scss
@@ -14,11 +14,11 @@ html.browser_safari {
   }
 
   header {
-    .search .fa {
+    .search .bwi {
       left: 20px;
     }
 
-    .left + .search .fa {
+    .left + .search .bwi {
       left: 10px;
     }
   }
diff --git a/src/popup/scss/modal.scss b/src/popup/scss/modal.scss
index 85c75ee766c..1d86b1e880a 100644
--- a/src/popup/scss/modal.scss
+++ b/src/popup/scss/modal.scss
@@ -222,7 +222,7 @@ $close-text-shadow: 0 1px 0 $white !default;
     display: flex;
     align-items: center;
 
-    .fa {
+    .bwi {
       margin-right: 5px;
     }
   }
diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss
index 4bb805ec90e..b75bf109b4e 100644
--- a/src/popup/scss/plugins.scss
+++ b/src/popup/scss/plugins.scss
@@ -1,5 +1,3 @@
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome.scss";
 @import "~ngx-toastr/toastr";
 @import "~sweetalert2/src/sweetalert2.scss";
 
@@ -41,7 +39,7 @@ $fa-font-path: "~font-awesome/fonts";
     .icon i::before {
       float: left;
       font-style: normal;
-      font-family: FontAwesome;
+      font-family: $icomoon-font-family;
       font-size: 25px;
       line-height: 20px;
       padding-right: 15px;
@@ -64,7 +62,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i::before {
-        content: "\f0e7";
+        content: map_get($icons, "error");
       }
     }
 
@@ -74,7 +72,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i::before {
-        content: "\f071";
+        content: map_get($icons, "exclamation-triangle");
       }
     }
 
@@ -84,7 +82,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i:before {
-        content: "\f05a";
+        content: map_get($icons, "info-circle");
       }
     }
 
@@ -94,7 +92,7 @@ $fa-font-path: "~font-awesome/fonts";
       }
 
       .icon i:before {
-        content: "\f00C";
+        content: map_get($icons, "check");
       }
     }
   }
diff --git a/src/popup/scss/popup.scss b/src/popup/scss/popup.scss
index d5f2bc30706..925ff977406 100644
--- a/src/popup/scss/popup.scss
+++ b/src/popup/scss/popup.scss
@@ -1,8 +1,7 @@
 @import "../../../jslib/angular/src/scss/webfonts.css";
-$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
-@import "../../../jslib/angular/src/scss/icons.scss";
-
+@import "../../../jslib/angular/src/scss/bwicons/styles/style.scss";
 @import "variables.scss";
+@import "../../../jslib/angular/src/scss/icons.scss";
 @import "base.scss";
 @import "grid.scss";
 @import "box.scss";
diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
index 1b6a3bab91b..049954bc335 100644
--- a/src/popup/scss/variables.scss
+++ b/src/popup/scss/variables.scss
@@ -1,5 +1,7 @@
 @import "~nord/src/sass/nord.scss";
 
+$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
+
 $font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
 $font-size-base: 14px;
diff --git a/src/popup/send/send-add-edit.component.html b/src/popup/send/send-add-edit.component.html
index 09d2705cafa..3754ed18b94 100644
--- a/src/popup/send/send-add-edit.component.html
+++ b/src/popup/send/send-add-edit.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading || disableSend">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -24,7 +24,7 @@
     <!-- File Warning -->
     <app-callout
       type="warning"
-      icon="fa fa-external-link fa-rotate-270 fa-fw"
+      icon="bwi-external-link bwi-rotate-270 bwi-fw"
       [clickable]="true"
       title="{{ 'sendFileCalloutHeader' | i18n }}"
       *ngIf="showFilePopoutMessage && send.type === sendType.File && !disableSend"
@@ -155,8 +155,8 @@
           [attr.aria-expanded]="showOptions"
         >
           {{ "options" | i18n }}
-          <i *ngIf="!showOptions" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
-          <i *ngIf="showOptions" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+          <i *ngIf="!showOptions" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
+          <i *ngIf="showOptions" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
         </button>
       </h2>
     </div>
@@ -232,8 +232,8 @@
                 [attr.aria-pressed]="showPassword"
               >
                 <i
-                  class="fa fa-lg"
-                  [ngClass]="{ 'fa-eye': !showPassword, 'fa-eye-slash': showPassword }"
+                  class="bwi bwi-lg"
+                  [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
                   aria-hidden="true"
                 ></i>
               </button>
@@ -307,8 +307,8 @@
         >
           <div class="row-main text-danger">
             <div class="icon text-danger" aria-hidden="true">
-              <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-              <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
+              <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="deleteBtn.loading"></i>
+              <i class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw" [hidden]="!deleteBtn.loading"></i>
             </div>
             <span>{{ "deleteSend" | i18n }}</span>
           </div>
diff --git a/src/popup/send/send-groupings.component.html b/src/popup/send/send-groupings.component.html
index 5e1e8c5d773..33d9fa1fbda 100644
--- a/src/popup/send/send-groupings.component.html
+++ b/src/popup/send/send-groupings.component.html
@@ -13,7 +13,7 @@
       autocomplete="off"
       appAutofocus
     />
-    <i class="fa fa-search"></i>
+    <i class="bwi bwi-search"></i>
   </div>
   <div class="right">
     <button
@@ -23,7 +23,7 @@
       appA11yTitle="{{ 'addSend' | i18n }}"
       [disabled]="disableSend"
     >
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
@@ -32,7 +32,7 @@
     {{ "sendDisabledWarning" | i18n }}
   </app-callout>
   <div class="no-items" *ngIf="(!sends || !sends.length) && !showSearching()">
-    <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded"></i>
     <ng-container *ngIf="loaded">
       <img class="no-items-image" aria-hidden="true" />
       <p>{{ "noItemsInList" | i18n }}</p>
@@ -60,11 +60,11 @@
           (click)="selectType(sendType.Text)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-file-text-o"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file-text"></i></div>
             <span class="text">{{ "sendTypeText" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(sendType.Text) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button
           type="button"
@@ -74,11 +74,11 @@
           (click)="selectType(sendType.File)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-file-o"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-file"></i></div>
             <span class="text">{{ "sendTypeFile" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(sendType.File) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>
     </div>
diff --git a/src/popup/send/send-type.component.html b/src/popup/send/send-type.component.html
index d6653c41dfc..7fc3932e466 100644
--- a/src/popup/send/send-type.component.html
+++ b/src/popup/send/send-type.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <button type="button" appBlurClick (click)="back()">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>
   </div>
@@ -16,7 +16,7 @@
       autocomplete="off"
       appAutofocus
     />
-    <i class="fa fa-search"></i>
+    <i class="bwi bwi-search"></i>
   </div>
   <div class="right">
     <button
@@ -26,7 +26,7 @@
       appA11yTitle="{{ 'addSend' | i18n }}"
       [disabled]="disableSend"
     >
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
@@ -35,7 +35,7 @@
     {{ "sendDisabledWarning" | i18n }}
   </app-callout>
   <div class="no-items" *ngIf="!filteredSends.length">
-    <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
     <ng-container *ngIf="loaded">
       <p>{{ "noItemsInList" | i18n }}</p>
       <button
diff --git a/src/popup/settings/excluded-domains.component.html b/src/popup/settings/excluded-domains.component.html
index 66d3193def5..19292f2029d 100644
--- a/src/popup/settings/excluded-domains.component.html
+++ b/src/popup/settings/excluded-domains.component.html
@@ -25,7 +25,7 @@
               (click)="removeUri(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 class="row-main">
               <label for="excludedDomain{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
@@ -62,7 +62,7 @@
                 appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
                 (click)="toggleUriInput(domain)"
               >
-                <i aria-hidden="true" class="fa fa-lg fa-list"></i>
+                <i aria-hidden="true" class="bwi bwi-lg bwi-list"></i>
               </button>
             </div>
           </div>
@@ -74,7 +74,7 @@
           (click)="addUri()"
           class="box-content-row box-content-row-newmulti"
         >
-          <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
+          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>
       </div>
       <div class="box-footer">
diff --git a/src/popup/settings/export.component.html b/src/popup/settings/export.component.html
index d78082281a7..88c7f65d8c9 100644
--- a/src/popup/settings/export.component.html
+++ b/src/popup/settings/export.component.html
@@ -2,7 +2,7 @@
   <header>
     <div class="left">
       <a routerLink="/tabs/settings">
-        <span class="header-icon" aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
+        <span class="header-icon" aria-hidden="true"><i class="bwi bwi-angle-left"></i></span>
         <span>{{ "back" | i18n }}</span>
       </a>
     </div>
diff --git a/src/popup/settings/folder-add-edit.component.html b/src/popup/settings/folder-add-edit.component.html
index 86d61724c9d..41392440030 100644
--- a/src/popup/settings/folder-add-edit.component.html
+++ b/src/popup/settings/folder-add-edit.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -41,8 +41,8 @@
         >
           <div class="row-main text-danger">
             <div class="icon text-danger" aria-hidden="true">
-              <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-              <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
+              <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="deleteBtn.loading"></i>
+              <i class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw" [hidden]="!deleteBtn.loading"></i>
             </div>
             <span>{{ "deleteFolder" | i18n }}</span>
           </div>
diff --git a/src/popup/settings/folders.component.html b/src/popup/settings/folders.component.html
index 787d2fa6bd3..e9c1394b9e6 100644
--- a/src/popup/settings/folders.component.html
+++ b/src/popup/settings/folders.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <a routerLink="/tabs/settings">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </a>
   </div>
@@ -15,7 +15,7 @@
       (click)="addFolder()"
       appA11yTitle="{{ 'addFolder' | i18n }}"
     >
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
diff --git a/src/popup/settings/options.component.html b/src/popup/settings/options.component.html
index fc139e1fca4..ccdc397785c 100644
--- a/src/popup/settings/options.component.html
+++ b/src/popup/settings/options.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <a routerLink="/tabs/settings">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </a>
   </div>
@@ -20,8 +20,8 @@
         [attr.aria-expanded]="showGeneral"
       >
         General
-        <i *ngIf="!showGeneral" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showGeneral" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+        <i *ngIf="!showGeneral" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showGeneral" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>
@@ -128,8 +128,8 @@
         [attr.aria-expanded]="showDisplay"
       >
         Display
-        <i *ngIf="!showDisplay" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showDisplay" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+        <i *ngIf="!showDisplay" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showDisplay" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>
@@ -211,8 +211,8 @@
         [attr.aria-expanded]="showAutofill"
       >
         Autofill
-        <i *ngIf="!showAutofill" class="fa fa-chevron-down fa-sm icon" aria-hidden="true"></i>
-        <i *ngIf="showAutofill" class="fa fa-chevron-up fa-sm icon" aria-hidden="true"></i>
+        <i *ngIf="!showAutofill" class="bwi bwi-angle-down bwi-sm icon" aria-hidden="true"></i>
+        <i *ngIf="showAutofill" class="bwi bwi-chevron-up bwi-sm icon" aria-hidden="true"></i>
       </button>
     </h2>
   </div>
diff --git a/src/popup/settings/premium.component.html b/src/popup/settings/premium.component.html
index 111aa439c4c..915f63f7fb5 100644
--- a/src/popup/settings/premium.component.html
+++ b/src/popup/settings/premium.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <a routerLink="/tabs/settings">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </a>
   </div>
@@ -15,29 +15,29 @@
     <ng-container *ngIf="!isPremium">
       <p class="text-center lead">{{ "premiumNotCurrentMember" | i18n }}</p>
       <p>{{ "premiumSignUpAndGet" | i18n }}</p>
-      <ul class="fa-ul">
+      <ul class="bwi-ul">
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpStorage" | i18n }}
         </li>
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpTwoStep" | i18n }}
         </li>
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpReports" | i18n }}
         </li>
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpTotp" | i18n }}
         </li>
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpSupport" | i18n }}
         </li>
         <li>
-          <i class="fa-li fa fa-check text-success" aria-hidden="true"></i>
+          <i class="bwi bwi-li bwi-check text-success" aria-hidden="true"></i>
           {{ "ppremiumSignUpFuture" | i18n }}
         </li>
       </ul>
@@ -56,7 +56,7 @@
       >
         <span [hidden]="refreshBtn.loading">{{ "premiumRefresh" | i18n }}</span>
         <i
-          class="fa fa-spinner fa-spin fa-lg fa-fw"
+          class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw"
           [hidden]="!refreshBtn.loading"
           aria-hidden="true"
         ></i>
diff --git a/src/popup/settings/settings.component.html b/src/popup/settings/settings.component.html
index d18a51019c1..5b3aefdea87 100644
--- a/src/popup/settings/settings.component.html
+++ b/src/popup/settings/settings.component.html
@@ -13,15 +13,15 @@
     <div class="box-content single-line">
       <a class="box-content-row box-content-row-flex text-default" routerLink="/folders">
         <div class="row-main">{{ "folders" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </a>
       <a class="box-content-row box-content-row-flex text-default" routerLink="/sync">
         <div class="row-main">{{ "sync" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </a>
       <a class="box-content-row box-content-row-flex text-default" routerLink="/excluded-domains">
         <div class="row-main">{{ "excludedDomains" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </a>
     </div>
   </div>
@@ -32,7 +32,8 @@
         [vaultTimeouts]="vaultTimeouts"
         [formControl]="vaultTimeout"
         ngDefaultControl
-      ></app-vault-timeout-input>
+      >
+      </app-vault-timeout-input>
       <div class="box-content-row display-block" appBoxRow>
         <label for="vaultTimeoutAction">{{ "vaultTimeoutAction" | i18n }}</label>
         <select
@@ -76,7 +77,7 @@
         (click)="lock()"
       >
         <div class="row-main">{{ "lockNow" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -86,7 +87,7 @@
         (click)="twoStep()"
       >
         <div class="row-main">{{ "twoStepLogin" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>
   </div>
@@ -96,13 +97,13 @@
       <a class="box-content-row" routerLink="/premium">
         <div class="row-main">
           <div class="icon text-primary">
-            <i class="fa fa-fw fa-lg fa-star" aria-hidden="true"></i>
+            <i class="bwi bwi-fw bwi-lg bwi-star-f" aria-hidden="true"></i>
           </div>
           <span class="text text-primary"
             ><b>{{ "premiumMembership" | i18n }}</b></span
           >
         </div>
-        <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
+        <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
       </a>
       <button
         type="button"
@@ -113,7 +114,7 @@
         *ngIf="showChangeMasterPass"
       >
         <div class="row-main">{{ "changeMasterPassword" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -123,7 +124,7 @@
         (click)="fingerprint()"
       >
         <div class="row-main">{{ "fingerprintPhrase" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -133,7 +134,7 @@
         (click)="logOut()"
       >
         <div class="row-main">{{ "logOut" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>
   </div>
@@ -148,7 +149,7 @@
         (click)="import()"
       >
         <div class="row-main">{{ "importItems" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -158,7 +159,7 @@
         (click)="export()"
       >
         <div class="row-main">{{ "exportVault" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -168,7 +169,7 @@
         (click)="webVault()"
       >
         <div class="row-main">{{ "bitWebVault" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>
   </div>
@@ -177,7 +178,7 @@
     <div class="box-content single-line">
       <a class="box-content-row box-content-row-flex text-default" routerLink="/options">
         <div class="row-main">{{ "options" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </a>
       <button
         type="button"
@@ -187,7 +188,7 @@
         (click)="about()"
       >
         <div class="row-main">{{ "about" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -197,7 +198,7 @@
         (click)="share()"
       >
         <div class="row-main">{{ "learnOrg" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -207,7 +208,7 @@
         (click)="help()"
       >
         <div class="row-main">{{ "helpFeedback" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
       <button
         type="button"
@@ -217,7 +218,7 @@
         (click)="rate()"
       >
         <div class="row-main">{{ "rateExtension" | i18n }}</div>
-        <i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i>
+        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
       </button>
     </div>
     <div class="box-footer">{{ "rateExtensionDesc" | i18n }}</div>
diff --git a/src/popup/settings/settings.component.ts b/src/popup/settings/settings.component.ts
index c3b6fdeacbc..40eff6abbd8 100644
--- a/src/popup/settings/settings.component.ts
+++ b/src/popup/settings/settings.component.ts
@@ -238,7 +238,7 @@ export class SettingsComponent implements OnInit {
         titleText: this.i18nService.t("awaitDesktop"),
         text: this.i18nService.t("awaitDesktopDesc"),
         icon: "info",
-        iconHtml: '<i class="swal-custom-icon fa fa-info-circle text-info"></i>',
+        iconHtml: '<i class="swal-custom-icon bwi bwi-info-circle text-info"></i>',
         showCancelButton: true,
         cancelButtonText: this.i18nService.t("cancel"),
         showConfirmButton: false,
@@ -360,7 +360,7 @@ export class SettingsComponent implements OnInit {
     );
     const div = document.createElement("div");
     div.innerHTML =
-      `<p class="text-center"><i class="fa fa-shield fa-3x" aria-hidden="true"></i></p>
+      `<p class="text-center"><i class="bwi bwi-shield bwi-3x" aria-hidden="true"></i></p>
             <p class="text-center"><b>Bitwarden</b><br>&copy; Bitwarden Inc. 2015-` +
       year +
       `</p>`;
diff --git a/src/popup/settings/sync.component.html b/src/popup/settings/sync.component.html
index c76e1f4c7dc..7e989decd89 100644
--- a/src/popup/settings/sync.component.html
+++ b/src/popup/settings/sync.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <a routerLink="/tabs/settings">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </a>
   </div>
@@ -21,7 +21,7 @@
       [appApiAction]="syncPromise"
     >
       <span [hidden]="syncBtn.loading">{{ "syncVaultNow" | i18n }}</span>
-      <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!syncBtn.loading" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!syncBtn.loading" aria-hidden="true"></i>
     </button>
     <p class="text-center text-muted small">{{ "lastSync" | i18n }} {{ lastSync }}</p>
   </div>
diff --git a/src/popup/tabs.component.html b/src/popup/tabs.component.html
index 75c6e75b913..c8f1094ef76 100644
--- a/src/popup/tabs.component.html
+++ b/src/popup/tabs.component.html
@@ -4,27 +4,27 @@
     <ul>
       <li routerLinkActive="active" *ngIf="showCurrentTab">
         <a routerLink="current" appA11yTitle="{{ 'currentTab' | i18n }}">
-          <i class="fa fa-folder fa-2x" aria-hidden="true"></i>{{ "tab" | i18n }}
+          <i class="bwi bwi-folder-closed-f bwi-2x" aria-hidden="true"></i>{{ "tab" | i18n }}
         </a>
       </li>
       <li routerLinkActive="active">
         <a routerLink="vault" appA11yTitle="{{ 'myVault' | i18n }}">
-          <i class="fa fa-lock fa-2x" aria-hidden="true"></i>{{ "myVault" | i18n }}
+          <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "myVault" | i18n }}
         </a>
       </li>
       <li routerLinkActive="active">
         <a routerLink="send" appA11yTitle="{{ 'send' | i18n }}">
-          <i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i>{{ "send" | i18n }}
+          <i class="bwi bwi-send-f bwi-2x" aria-hidden="true"></i>{{ "send" | i18n }}
         </a>
       </li>
       <li routerLinkActive="active">
         <a routerLink="generator" appA11yTitle="{{ 'passGen' | i18n }}">
-          <i class="fa fa-refresh fa-2x" aria-hidden="true"></i>{{ "generator" | i18n }}
+          <i class="bwi bwi-generate bwi-2x" aria-hidden="true"></i>{{ "generator" | i18n }}
         </a>
       </li>
       <li routerLinkActive="active">
         <a routerLink="settings" appA11yTitle="{{ 'settings' | i18n }}">
-          <i class="fa fa-cogs fa-2x" aria-hidden="true"></i>{{ "settings" | i18n }}
+          <i class="bwi bwi-cog-f bwi-2x" aria-hidden="true"></i>{{ "settings" | i18n }}
         </a>
       </li>
     </ul>
diff --git a/src/popup/vault/add-edit-custom-fields.component.html b/src/popup/vault/add-edit-custom-fields.component.html
index e6a9c6c9c4b..92b8bfe4536 100644
--- a/src/popup/vault/add-edit-custom-fields.component.html
+++ b/src/popup/vault/add-edit-custom-fields.component.html
@@ -18,7 +18,7 @@
           (click)="removeField(f)"
           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>
         <label for="fieldName{{ i }}" class="sr-only">{{ "name" | i18n }}</label>
         <label for="fieldValue{{ i }}" class="sr-only">{{ "value" | i18n }}</label>
@@ -89,21 +89,21 @@
             [attr.aria-pressed]="f.showValue"
           >
             <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>
         </div>
         <div class="drag-handle" appA11yTitle="{{ 'dragToSort' | i18n }}" cdkDragHandle>
-          <i class="fa fa-bars" aria-hidden="true"></i>
+          <i class="bwi bwi-hamburger" aria-hidden="true"></i>
         </div>
       </div>
     </div>
     <!-- Add new custom field -->
     <div class="box-content-row box-content-row-newmulti" appBoxRow>
       <button type="button" appStopClick (click)="addField()">
-        <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i>
+        <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i>
         {{ "newCustomField" | i18n }}
       </button>
       <label for="addFieldType" class="sr-only">{{ "type" | i18n }}</label>
diff --git a/src/popup/vault/add-edit.component.html b/src/popup/vault/add-edit.component.html
index e14db0f32ee..bc528e88166 100644
--- a/src/popup/vault/add-edit.component.html
+++ b/src/popup/vault/add-edit.component.html
@@ -9,7 +9,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -71,12 +71,12 @@
                 *ngIf="cipher.viewPassword"
               >
                 <i
-                  class="fa fa-lg fa-check-circle"
+                  class="bwi bwi-lg bwi-check-circle"
                   [hidden]="checkPasswordBtn.loading"
                   aria-hidden="true"
                 ></i>
                 <i
-                  class="fa fa-lg fa-spinner fa-spin"
+                  class="bwi bwi-lg bwi-spinner bwi-spin"
                   [hidden]="!checkPasswordBtn.loading"
                   aria-hidden="true"
                 ></i>
@@ -92,9 +92,9 @@
                 [attr.aria-pressed]="showPassword"
               >
                 <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
@@ -106,7 +106,7 @@
                 (click)="generatePassword()"
                 *ngIf="cipher.viewPassword"
               >
-                <i class="fa fa-lg fa-refresh" aria-hidden="true"></i>
+                <i class="bwi bwi-lg bwi-generate" aria-hidden="true"></i>
               </button>
             </div>
           </div>
@@ -157,9 +157,9 @@
                 [attr.aria-pressed]="showCardNumber"
               >
                 <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>
             </div>
@@ -211,9 +211,9 @@
                 [attr.aria-pressed]="showCardCode"
               >
                 <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>
             </div>
@@ -404,7 +404,7 @@
               (click)="removeUri(u)"
               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 class="row-main">
               <label for="loginUri{{ i }}">{{ "uriPosition" | i18n: i + 1 }}</label>
@@ -454,7 +454,7 @@
                 appA11yTitle="{{ 'toggleCurrentUris' | i18n }}"
                 (click)="toggleUriInput(u)"
               >
-                <i aria-hidden="true" class="fa fa-lg fa-list"></i>
+                <i aria-hidden="true" class="bwi bwi-lg bwi-list"></i>
               </button>
               <button
                 type="button"
@@ -464,7 +464,7 @@
                 appA11yTitle="{{ 'toggleOptions' | i18n }}"
                 (click)="toggleUriOptions(u)"
               >
-                <i class="fa fa-lg fa-cog" aria-hidden="true"></i>
+                <i class="bwi bwi-lg bwi-cog-f" aria-hidden="true"></i>
               </button>
             </div>
           </div>
@@ -476,7 +476,7 @@
           (click)="addUri()"
           class="box-content-row box-content-row-newmulti"
         >
-          <i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
+          <i class="bwi bwi-plus-circle bwi-fw bwi-lg" aria-hidden="true"></i> {{ "newUri" | i18n }}
         </button>
       </div>
     </div>
@@ -517,7 +517,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>
           </label>
           <input
@@ -538,12 +538,12 @@
         >
           <div class="row-main">{{ "attachments" | i18n }}</div>
           <i
-            class="fa fa-external-link fa-lg fa-fw"
+            class="bwi bwi-external-link bwi-lg bwi-fw"
             aria-hidden="true"
             *ngIf="openAttachmentsInPopup"
           ></i>
           <i
-            class="fa fa-chevron-right row-sub-icon"
+            class="bwi bwi-angle-right row-sub-icon"
             aria-hidden="true"
             *ngIf="!openAttachmentsInPopup"
           ></i>
@@ -557,7 +557,7 @@
           *ngIf="editMode && cipher.organizationId && !cloneMode"
         >
           <div class="row-main">{{ "collections" | i18n }}</div>
-          <i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
+          <i class="bwi bwi-angle-right row-sub-icon" aria-hidden="true"></i>
         </button>
       </div>
     </div>
@@ -634,8 +634,8 @@
         >
           <div class="row-main text-danger">
             <div class="icon text-danger" aria-hidden="true">
-              <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-              <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"></i>
+              <i class="bwi bwi-trash bwi-lg bwi-fw" [hidden]="deleteBtn.loading"></i>
+              <i class="bwi bwi-spinner bwi-spin bwi-lg bwi-fw" [hidden]="!deleteBtn.loading"></i>
             </div>
             <span>{{ "deleteItem" | i18n }}</span>
           </div>
diff --git a/src/popup/vault/attachments.component.html b/src/popup/vault/attachments.component.html
index 136e7119174..a662e407ed1 100644
--- a/src/popup/vault/attachments.component.html
+++ b/src/popup/vault/attachments.component.html
@@ -5,7 +5,7 @@
         {{ "close" | i18n }}
       </button>
       <button type="button" appBlurClick (click)="back()" *ngIf="!openedAttachmentsInPopup">
-        <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+        <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
         <span>{{ "back" | i18n }}</span>
       </button>
     </div>
@@ -15,7 +15,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
@@ -41,12 +41,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"
                 aria-hidden="true"
               ></i>
diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html
index 71e4742ae0c..3af1c9859b3 100644
--- a/src/popup/vault/ciphers.component.html
+++ b/src/popup/vault/ciphers.component.html
@@ -1,7 +1,7 @@
 <header>
   <div class="left">
     <button type="button" appBlurClick (click)="back()">
-      <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
       <span>{{ "back" | i18n }}</span>
     </button>
   </div>
@@ -16,11 +16,11 @@
       autocomplete="off"
       appAutofocus
     />
-    <i class="fa fa-search" aria-hidden="true"></i>
+    <i class="bwi bwi-search" aria-hidden="true"></i>
   </div>
   <div class="right">
     <button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
@@ -42,14 +42,14 @@
           <div class="row-main">
             <div class="icon">
               <i
-                class="fa fa-fw fa-lg"
+                class="bwi bwi-fw bwi-lg"
                 aria-hidden="true"
-                [ngClass]="{ 'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id }"
+                [ngClass]="{ 'bwi-bw-folder-open-f': f.node.id, 'bwi-folder-open': !f.node.id }"
               ></i>
             </div>
             <span class="text">{{ f.node.name }}</span>
           </div>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
         </button>
       </div>
     </div>
@@ -67,17 +67,19 @@
           (click)="selectCollection(c.node)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-cube" aria-hidden="true"></i></div>
+            <div class="icon">
+              <i class="bwi bwi-fw bwi-lg bwi-collection" aria-hidden="true"></i>
+            </div>
             <span class="text">{{ c.node.name }}</span>
           </div>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
         </button>
       </div>
     </div>
   </ng-container>
   <ng-container *ngIf="ciphers">
     <div class="no-items" *ngIf="!ciphers.length">
-      <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
+      <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded" aria-hidden="true"></i>
       <ng-container *ngIf="loaded">
         <p>{{ "noItemsInList" | i18n }}</p>
         <button type="button" (click)="addCipher()" class="btn block primary link">
diff --git a/src/popup/vault/collections.component.html b/src/popup/vault/collections.component.html
index 51f1a8880fa..6514c38230a 100644
--- a/src/popup/vault/collections.component.html
+++ b/src/popup/vault/collections.component.html
@@ -2,7 +2,7 @@
   <header>
     <div class="left">
       <button type="button" appBlurClick (click)="back()">
-        <span class="header-icon"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
+        <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
         <span>{{ "back" | i18n }}</span>
       </button>
     </div>
@@ -12,7 +12,7 @@
     <div class="right">
       <button type="submit" appBlurClick [disabled]="form.loading">
         <span [hidden]="form.loading">{{ "save" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
diff --git a/src/popup/vault/current-tab.component.html b/src/popup/vault/current-tab.component.html
index 7f3d961b96f..b4f9b9e05cf 100644
--- a/src/popup/vault/current-tab.component.html
+++ b/src/popup/vault/current-tab.component.html
@@ -9,7 +9,7 @@
       appA11yTitle="{{ 'refresh' | i18n }}"
       *ngIf="inSidebar"
     >
-      <i class="fa fa-retweet fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-refresh-tab bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
   <div class="search">
@@ -22,17 +22,17 @@
       autocomplete="off"
       (keydown)="closeOnEsc($event)"
     />
-    <i class="fa fa-search" aria-hidden="true"></i>
+    <i class="bwi bwi-search" aria-hidden="true"></i>
   </div>
   <div class="right">
     <button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
 <content>
   <div class="no-items" *ngIf="!loaded">
-    <i class="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
   </div>
   <ng-container *ngIf="loaded">
     <div class="box list" *ngIf="loginCiphers">
diff --git a/src/popup/vault/groupings.component.html b/src/popup/vault/groupings.component.html
index bd01c145527..754652bf316 100644
--- a/src/popup/vault/groupings.component.html
+++ b/src/popup/vault/groupings.component.html
@@ -14,17 +14,17 @@
       appAutofocus
       (keydown)="closeOnEsc($event)"
     />
-    <i class="fa fa-search"></i>
+    <i class="bwi bwi-search"></i>
   </div>
   <div class="right">
     <button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{ 'addItem' | i18n }}">
-      <i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
+      <i class="bwi bwi-plus bwi-lg bwi-fw" aria-hidden="true"></i>
     </button>
   </div>
 </header>
 <content>
   <div class="no-items" *ngIf="(!ciphers || !ciphers.length) && !showSearching()">
-    <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+    <i class="bwi bwi-spinner bwi-spin bwi-3x" *ngIf="!loaded"></i>
     <ng-container *ngIf="loaded">
       <img class="no-items-image" aria-hidden="true" />
       <p>{{ "noItemsInList" | i18n }}</p>
@@ -46,7 +46,8 @@
           title="{{ 'viewItem' | i18n }}"
           (onSelected)="selectCipher($event)"
           (launchEvent)="launchCipher($event)"
-        ></app-cipher-row>
+        >
+        </app-cipher-row>
       </div>
     </div>
     <div class="box list">
@@ -63,11 +64,11 @@
           (click)="selectType(cipherType.Login)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-globe"></i></div>
             <span class="text">{{ "typeLogin" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(cipherType.Login) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button
           type="button"
@@ -77,11 +78,11 @@
           (click)="selectType(cipherType.Card)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-credit-card"></i></div>
             <span class="text">{{ "typeCard" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(cipherType.Card) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button
           type="button"
@@ -91,11 +92,11 @@
           (click)="selectType(cipherType.Identity)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-id-card"></i></div>
             <span class="text">{{ "typeIdentity" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(cipherType.Identity) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
         <button
           type="button"
@@ -105,11 +106,11 @@
           (click)="selectType(cipherType.SecureNote)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-sticky-note"></i></div>
             <span class="text">{{ "typeSecureNote" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ typeCounts.get(cipherType.SecureNote) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>
     </div>
@@ -130,14 +131,14 @@
           <div class="row-main">
             <div class="icon">
               <i
-                class="fa fa-fw fa-lg"
-                [ngClass]="{ 'fa-folder-open': f.node.id, 'fa-folder-open-o': !f.node.id }"
+                class="bwi bwi-fw bwi-lg"
+                [ngClass]="{ 'bwi-bw-folder-open-f': f.node.id, 'bwi-folder-open': !f.node.id }"
               ></i>
             </div>
             <span class="text">{{ f.node.name }}</span>
           </div>
           <span class="row-sub-label">{{ folderCounts.get(f.node.id) || 0 }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>
     </div>
@@ -156,13 +157,13 @@
           (click)="selectCollection(nestedCollection.node)"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-collection"></i></div>
             <span class="text">{{ nestedCollection.node.name }}</span>
           </div>
           <span class="row-sub-label">{{
             collectionCounts.get(nestedCollection.node.id) || 0
           }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>
     </div>
@@ -178,7 +179,8 @@
           title="{{ 'viewItem' | i18n }}"
           (onSelected)="selectCipher($event)"
           (launchEvent)="launchCipher($event)"
-        ></app-cipher-row>
+        >
+        </app-cipher-row>
       </div>
     </div>
     <div class="box list" *ngIf="deletedCount">
@@ -195,11 +197,11 @@
           (click)="selectTrash()"
         >
           <div class="row-main">
-            <div class="icon"><i class="fa fa-fw fa-lg fa-trash-o"></i></div>
+            <div class="icon"><i class="bwi bwi-fw bwi-lg bwi-trash"></i></div>
             <span class="text">{{ "trash" | i18n }}</span>
           </div>
           <span class="row-sub-label">{{ deletedCount }}</span>
-          <span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
+          <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon"></i></span>
         </button>
       </div>
     </div>
@@ -222,7 +224,8 @@
             title="{{ 'viewItem' | i18n }}"
             (onSelected)="selectCipher($event)"
             (launchEvent)="launchCipher($event)"
-          ></app-cipher-row>
+          >
+          </app-cipher-row>
         </div>
       </div>
     </cdk-virtual-scroll-viewport>
diff --git a/src/popup/vault/password-history.component.html b/src/popup/vault/password-history.component.html
index 003d7bced23..350cc1e6b2a 100644
--- a/src/popup/vault/password-history.component.html
+++ b/src/popup/vault/password-history.component.html
@@ -27,7 +27,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>
       </div>
diff --git a/src/popup/vault/share.component.html b/src/popup/vault/share.component.html
index 0324761802b..40974631de1 100644
--- a/src/popup/vault/share.component.html
+++ b/src/popup/vault/share.component.html
@@ -14,7 +14,7 @@
         *ngIf="organizations && organizations.length"
       >
         <span [hidden]="form.loading">{{ "move" | i18n }}</span>
-        <i class="fa fa-spinner fa-lg fa-spin" [hidden]="!form.loading" aria-hidden="true"></i>
+        <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!form.loading" aria-hidden="true"></i>
       </button>
     </div>
   </header>
diff --git a/src/popup/vault/view-custom-fields.component.html b/src/popup/vault/view-custom-fields.component.html
index 731486afaa2..8f61ef9f5ea 100644
--- a/src/popup/vault/view-custom-fields.component.html
+++ b/src/popup/vault/view-custom-fields.component.html
@@ -16,13 +16,17 @@
           <span [hidden]="field.showValue" class="monospaced">{{ field.maskedValue }}</span>
         </div>
         <div *ngIf="field.type === fieldType.Boolean">
-          <i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
-          <i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
+          <i class="bwi bwi-check-square" *ngIf="field.value === 'true'" aria-hidden="true"></i>
+          <i class="bwi bwi-square" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
           <span class="sr-only">{{ field.value }}</span>
         </div>
         <div *ngIf="field.type === fieldType.Linked" class="box-content-row-flex">
           <div class="icon icon-small">
-            <i class="fa fa-link" aria-hidden="true" appA11yTitle="{{ 'linkedValue' | i18n }}"></i>
+            <i
+              class="bwi bwi-link"
+              aria-hidden="true"
+              appA11yTitle="{{ 'linkedValue' | i18n }}"
+            ></i>
             <span class="sr-only">{{ "linkedValue" | i18n }}</span>
           </div>
           <span>{{ cipher.linkedFieldI18nKey(field.linkedId) | i18n }}</span>
@@ -40,9 +44,9 @@
           [attr.aria-pressed]="field.showValue"
         >
           <i
-            class="fa fa-lg"
+            class="bwi bwi-lg"
             aria-hidden="true"
-            [ngClass]="{ 'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue }"
+            [ngClass]="{ 'bwi-eye': !field.showValue, 'bwi-eye-slash': field.showValue }"
           ></i>
         </button>
         <button
@@ -61,7 +65,7 @@
             copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : '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>
diff --git a/src/popup/vault/view.component.html b/src/popup/vault/view.component.html
index f54fa7ce962..46225aa2270 100644
--- a/src/popup/vault/view.component.html
+++ b/src/popup/vault/view.component.html
@@ -48,7 +48,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>
@@ -83,12 +83,12 @@
               *ngIf="cipher.viewPassword"
             >
               <i
-                class="fa fa-lg fa-check-circle"
+                class="bwi bwi-lg bwi-check-circle"
                 [hidden]="checkPasswordBtn.loading"
                 aria-hidden="true"
               ></i>
               <i
-                class="fa fa-lg fa-spinner fa-spin"
+                class="bwi bwi-lg bwi-spinner bwi-spin"
                 [hidden]="!checkPasswordBtn.loading"
                 aria-hidden="true"
               ></i>
@@ -104,9 +104,9 @@
               [attr.aria-pressed]="showPassword"
             >
               <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
@@ -117,7 +117,7 @@
               (click)="copy(cipher.login.password, 'password', 'Password')"
               *ngIf="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>
@@ -158,7 +158,7 @@
               appA11yTitle="{{ 'copyVerificationCode' | i18n }}"
               (click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')"
             >
-              <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>
@@ -186,9 +186,9 @@
               [attr.aria-pressed]="showCardNumber"
             >
               <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
@@ -198,7 +198,7 @@
               appA11yTitle="{{ 'copyNumber' | i18n }}"
               (click)="copy(cipher.card.number, 'number', 'Card 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>
@@ -227,9 +227,9 @@
               [attr.aria-pressed]="showCardCode"
             >
               <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
@@ -239,7 +239,7 @@
               appA11yTitle="{{ 'copySecurityCode' | 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>
@@ -325,7 +325,7 @@
             *ngIf="u.canLaunch"
             (click)="launch(u)"
           >
-            <i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
+            <i class="bwi bwi-lg bwi-share-square" aria-hidden="true"></i>
           </button>
           <button
             type="button"
@@ -335,7 +335,7 @@
             appA11yTitle="{{ 'copyUri' | i18n }}"
             (click)="copy(u.uri, u.isWebsite ? 'website' : '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>
@@ -383,12 +383,12 @@
         <span class="row-main">{{ attachment.fileName }}</span>
         <small class="row-sub-label">{{ attachment.sizeName }}</small>
         <i
-          class="fa fa-download fa-fw row-sub-icon"
+          class="bwi bwi-download bwi-fw row-sub-icon"
           *ngIf="!attachment.downloading"
           aria-hidden="true"
         ></i>
         <i
-          class="fa fa-spinner fa-fw fa-spin row-sub-icon"
+          class="bwi bwi-spinner bwi-fw bwi-spin row-sub-icon"
           *ngIf="attachment.downloading"
           aria-hidden="true"
         ></i>
@@ -407,7 +407,7 @@
       >
         <div class="row-main text-primary">
           <div class="icon text-primary" aria-hidden="true">
-            <i class="fa fa-pencil-square-o fa-lg fa-fw"></i>
+            <i class="bwi bwi-pencil-square bwi-lg bwi-fw"></i>
           </div>
           <span>{{ "autoFill" | i18n }}</span>
         </div>
@@ -422,7 +422,7 @@
       >
         <div class="row-main text-primary">
           <div class="icon text-primary" aria-hidden="true">
-            <i class="fa fa-bookmark fa-lg fa-fw"></i>
+            <i class="bwi bwi-bookmark bwi-lg bwi-fw"></i>
           </div>
           <span>{{ "autoFillAndSave" | i18n }}</span>
         </div>
@@ -437,7 +437,7 @@
       >
         <div class="row-main text-primary">
           <div class="icon text-primary" aria-hidden="true">
-            <i class="fa fa-files-o fa-lg fa-fw"></i>
+            <i class="bwi bwi-files bwi-lg bwi-fw"></i>
           </div>
           <span>{{ "cloneItem" | i18n }}</span>
         </div>
@@ -452,7 +452,7 @@
       >
         <div class="row-main text-primary">
           <div class="icon text-primary" aria-hidden="true">
-            <i class="fa fa-arrow-circle-o-right fa-lg fa-fw"></i>
+            <i class="bwi bwi-arrow-circle-right bwi-lg bwi-fw"></i>
           </div>
           <span>{{ "moveToOrganization" | i18n }}</span>
         </div>
@@ -467,7 +467,7 @@
       >
         <div class="row-main text-primary">
           <div class="icon text-primary" aria-hidden="true">
-            <i class="fa fa-undo fa-lg fa-fw"></i>
+            <i class="bwi bwi-undo bwi-lg bwi-fw"></i>
           </div>
           <span>{{ "restoreItem" | i18n }}</span>
         </div>
@@ -475,7 +475,7 @@
       <button type="button" class="box-content-row" appStopClick appBlurClick (click)="delete()">
         <div class="row-main text-danger">
           <div class="icon text-danger" aria-hidden="true">
-            <i class="fa fa-trash-o fa-lg fa-fw"></i>
+            <i class="bwi bwi-trash bwi-lg bwi-fw"></i>
           </div>
           <span>{{ (cipher.isDeleted ? "permanentlyDeleteItem" : "deleteItem") | i18n }}</span>
         </div>