From 3782e328e196003d1aa441aabf6790a74b544fb8 Mon Sep 17 00:00:00 2001
From: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:42:02 -0500
Subject: [PATCH] refactor(Auth-Font-Icons): [Auth/PM-31804] Migrate auth font
 icons to use bit-icon  (#18816)

* PM-31804 - WIP

* PM-31804 - Profile Component - fix missing translation

* PM-31804 - Web - Emergency Access Takeover Dialog Comp - remove screen reader only span as arialabel on spinner should be sufficient

* PM-31804 - Web - EmergencyAccessViewComp - remove redundant span as aria label handles accessibility.

* PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label

* PM-31804 - Web - EmergencyAccessViewComp - Remove redundant sr only span - replaced w/ aria label

* PM-31804 - EmergencyAccessComp - Replace redundant sr only span with aria label

* PM-31804 - two-factor-setup.component.html - Replace redundant sr only spans with aria labels

* PM-31804 - WebauthnLoginSettingsModule - remove unnecessary IconModule - it's imported via SharedModule

* PM-31804 - web - emergency-access.component.html - Replace redundant sr only span with aria label

* PM-31804 - LoginDecryptionOptionsComponent - Replace redundant sr only span with aria label

* PM-31804 - ChangePasswordComp - Replace redundant sr only span with aria label

* PM-31804 - AccountComponent - add BitwardenIcon type to satisfy template type requirements for name property.

* PM-31804 - Browser Account Security Component - replace nonexistent chevron icon with existing angle right icon.

* PM-31804 - Fix A11y issues with missing aria labels

* PM-31804 - Remove remaining redundant sr only spans since we now have aria labels
---
 .../account-switcher.component.html           |  6 +--
 .../account-switcher.component.ts             |  2 +
 .../account-switching/account.component.html  |  4 +-
 .../account-switching/account.component.ts    |  6 +--
 .../settings/account-security.component.html  |  6 +--
 .../settings/account-security.component.ts    |  2 +
 .../accept/accept-emergency.component.html    | 11 +++--
 .../accept-organization.component.html        | 11 +++--
 .../change-avatar-dialog.component.html       |  9 ++--
 .../settings/account/profile.component.html   | 17 ++++----
 .../emergency-access-add-edit.component.html  |  2 +-
 .../emergency-access.component.html           | 42 +++++++++----------
 ...ency-access-takeover-dialog.component.html | 11 +++--
 ...rgency-access-takeover-dialog.component.ts |  2 +
 .../view/emergency-access-view.component.html | 33 +++++++--------
 ...-factor-setup-authenticator.component.html |  2 +-
 ...wo-factor-setup-authenticator.component.ts |  2 +
 .../two-factor-setup-webauthn.component.html  | 28 ++++++++-----
 .../two-factor-setup-webauthn.component.ts    |  2 +
 .../two-factor-setup.component.html           | 22 +++++-----
 .../delete-credential-dialog.component.html   |  6 ++-
 .../enable-encryption-dialog.component.html   |  6 ++-
 .../webauthn-login-settings.component.html    |  6 +--
 .../user-verification.component.html          |  2 +-
 .../auth/verify-email-token.component.html    |  6 ++-
 .../app/auth/verify-email-token.component.ts  |  3 ++
 .../device-management-table.component.html    |  2 +-
 .../device-management-table.component.ts      | 11 ++++-
 .../device-management.component.html          |  8 +++-
 .../device-management.component.ts            |  3 +-
 .../environment-selector.component.html       | 18 ++++----
 .../environment-selector.component.ts         |  3 +-
 .../login-approval-dialog.component.html      |  6 ++-
 .../login-approval-dialog.component.ts        |  3 +-
 .../change-password.component.html            | 11 +++--
 .../change-password.component.ts              |  7 ++--
 .../set-initial-password.component.html       |  6 +--
 .../set-initial-password.component.ts         | 10 ++++-
 .../fingerprint-dialog.component.html         |  4 +-
 .../fingerprint-dialog.component.ts           |  3 +-
 .../input-password.component.html             |  2 +-
 .../input-password.component.ts               |  2 +
 .../login-decryption-options.component.html   | 11 +++--
 .../login-decryption-options.component.ts     |  2 +
 .../login-via-auth-request.component.html     |  2 +-
 .../login-via-auth-request.component.ts       |  4 +-
 .../src/angular/login/login.component.html    |  6 +--
 .../auth/src/angular/login/login.component.ts |  2 +
 .../registration-finish.component.html        |  2 +-
 .../registration-finish.component.ts          |  4 +-
 ...lf-hosted-env-config-dialog.component.html | 11 +++--
 ...self-hosted-env-config-dialog.component.ts |  2 +
 libs/auth/src/angular/sso/sso.component.html  |  2 +-
 libs/auth/src/angular/sso/sso.component.ts    |  2 +
 .../two-factor-auth-webauthn.component.html   |  2 +-
 .../two-factor-auth-webauthn.component.ts     |  2 +
 .../two-factor-auth.component.html            |  2 +-
 .../two-factor-auth.component.ts              |  2 +
 ...ser-verification-form-input.component.html |  6 +--
 .../user-verification-form-input.component.ts |  2 +
 60 files changed, 238 insertions(+), 176 deletions(-)

diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
index 0a9e2a1dd9d..2eeaaf35f53 100644
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.html
@@ -58,19 +58,19 @@
           [disabled]="currentAccount.status === lockedStatus || !activeUserCanLock"
           [title]="!activeUserCanLock ? ('unlockMethodNeeded' | i18n) : ''"
         >
-          <i slot="start" class="bwi bwi-lock tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-lock" class="tw-text-lg tw-text-main"></bit-icon>
           {{ "lockNow" | i18n }}
         </button>
       </bit-item>
       <bit-item>
         <button type="button" bit-item-content (click)="logOut(currentAccount.id)">
-          <i slot="start" class="bwi bwi-sign-out tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-sign-out" class="tw-text-lg tw-text-main"></bit-icon>
           {{ "logOut" | i18n }}
         </button>
       </bit-item>
       <bit-item *ngIf="showLockAll$ | async">
         <button type="button" bit-item-content (click)="lockAll()">
-          <i slot="start" class="bwi bwi-lock tw-text-lg tw-text-main" aria-hidden="true"></i>
+          <bit-icon slot="start" name="bwi-lock" class="tw-text-lg tw-text-main"></bit-icon>
           {{ "lockAll" | i18n }}
         </button>
       </bit-item>
diff --git a/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts b/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts
index ae7f66a9018..53d488192ba 100644
--- a/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts
+++ b/apps/browser/src/auth/popup/account-switching/account-switcher.component.ts
@@ -18,6 +18,7 @@ import {
   AvatarModule,
   ButtonModule,
   DialogService,
+  IconModule,
   ItemModule,
   SectionComponent,
   SectionHeaderComponent,
@@ -42,6 +43,7 @@ import { AccountSwitcherService } from "./services/account-switcher.service";
     ButtonModule,
     ItemModule,
     AvatarModule,
+    IconModule,
     PopupPageComponent,
     PopupHeaderComponent,
     PopOutComponent,
diff --git a/apps/browser/src/auth/popup/account-switching/account.component.html b/apps/browser/src/auth/popup/account-switching/account.component.html
index 90770bb8d9b..d756365cc5b 100644
--- a/apps/browser/src/auth/popup/account-switching/account.component.html
+++ b/apps/browser/src/auth/popup/account-switching/account.component.html
@@ -32,13 +32,13 @@
       </div>
     </ng-container>
 
-    <i slot="end" class="bwi tw-text-lg" [ngClass]="status.icon" aria-hidden="true"></i>
+    <bit-icon slot="end" [name]="status.icon" class="tw-text-lg"></bit-icon>
   </button>
 </bit-item>
 
 <bit-item *ngIf="account.id === specialAccountAddId">
   <button type="button" bit-item-content (click)="selectAccount(account.id)">
-    <i slot="start" class="bwi bwi-plus tw-text-lg tw-text-main" aria-hidden="true"></i>
+    <bit-icon slot="start" name="bwi-plus" class="tw-text-lg tw-text-main"></bit-icon>
     {{ account.name | i18n }}
   </button>
 </bit-item>
diff --git a/apps/browser/src/auth/popup/account-switching/account.component.ts b/apps/browser/src/auth/popup/account-switching/account.component.ts
index edfad2a54b3..dbc31a1f011 100644
--- a/apps/browser/src/auth/popup/account-switching/account.component.ts
+++ b/apps/browser/src/auth/popup/account-switching/account.component.ts
@@ -8,7 +8,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
-import { AvatarModule, ItemModule } from "@bitwarden/components";
+import { AvatarModule, IconModule, ItemModule, type BitwardenIcon } from "@bitwarden/components";
 import { BiometricsService } from "@bitwarden/key-management";
 
 import { AccountSwitcherService, AvailableAccount } from "./services/account-switcher.service";
@@ -18,7 +18,7 @@ import { AccountSwitcherService, AvailableAccount } from "./services/account-swi
 @Component({
   selector: "auth-account",
   templateUrl: "account.component.html",
-  imports: [CommonModule, JslibModule, AvatarModule, ItemModule],
+  imports: [CommonModule, JslibModule, AvatarModule, IconModule, ItemModule],
 })
 export class AccountComponent {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
@@ -60,7 +60,7 @@ export class AccountComponent {
     this.loading.emit(false);
   }
 
-  get status() {
+  get status(): { text: string; icon: BitwardenIcon } {
     if (this.account.isActive) {
       return { text: this.i18nService.t("active"), icon: "bwi-check-circle" };
     }
diff --git a/apps/browser/src/auth/popup/settings/account-security.component.html b/apps/browser/src/auth/popup/settings/account-security.component.html
index bb6b141c6c5..366f5b82790 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.html
+++ b/apps/browser/src/auth/popup/settings/account-security.component.html
@@ -123,7 +123,7 @@
       <bit-item>
         <button bit-item-content type="button" appStopClick routerLink="/device-management">
           {{ "devices" | i18n }}
-          <i slot="end" class="bwi bwi-chevron-right" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-angle-right" class="tw-text-lg"></bit-icon>
         </button>
       </bit-item>
     </bit-section>
@@ -154,13 +154,13 @@
       <bit-item>
         <button bit-item-content type="button" appStopClick (click)="twoStep()">
           {{ "twoStepLogin" | i18n }}
-          <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-external-link"></bit-icon>
         </button>
       </bit-item>
       <bit-item *ngIf="showChangeMasterPass">
         <button bit-item-content type="button" appStopClick (click)="changePassword()">
           {{ "changeMasterPassword" | i18n }}
-          <i slot="end" class="bwi bwi-external-link" aria-hidden="true"></i>
+          <bit-icon slot="end" name="bwi-external-link"></bit-icon>
         </button>
       </bit-item>
     </bit-section>
diff --git a/apps/browser/src/auth/popup/settings/account-security.component.ts b/apps/browser/src/auth/popup/settings/account-security.component.ts
index 1789feebe4e..b3bd9b842f7 100644
--- a/apps/browser/src/auth/popup/settings/account-security.component.ts
+++ b/apps/browser/src/auth/popup/settings/account-security.component.ts
@@ -56,6 +56,7 @@ import {
   DialogService,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   ItemModule,
   LinkModule,
   SectionComponent,
@@ -98,6 +99,7 @@ import { AwaitDesktopDialogComponent } from "./await-desktop-dialog.component";
     FormsModule,
     ReactiveFormsModule,
     IconButtonModule,
+    IconModule,
     ItemModule,
     JslibModule,
     LinkModule,
diff --git a/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html b/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
index 3fa795db157..bef7bfe0888 100644
--- a/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
+++ b/apps/web/src/app/auth/emergency-access/accept/accept-emergency.component.html
@@ -1,12 +1,11 @@
 <div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
   <div>
     <p class="tw-text-center">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-2x tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
     </p>
   </div>
 </div>
diff --git a/apps/web/src/app/auth/organization-invite/accept-organization.component.html b/apps/web/src/app/auth/organization-invite/accept-organization.component.html
index cc08b840c30..63bfbf3ef0b 100644
--- a/apps/web/src/app/auth/organization-invite/accept-organization.component.html
+++ b/apps/web/src/app/auth/organization-invite/accept-organization.component.html
@@ -2,12 +2,11 @@
   <div>
     <img src="../../images/logo-dark@2x.png" class="logo" alt="Bitwarden" />
     <p class="tw-text-center tw-my-4">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-2x tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
     </p>
   </div>
 </div>
diff --git a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
index 7e8b69a0c48..e9365fa41a4 100644
--- a/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
+++ b/apps/web/src/app/auth/settings/account/change-avatar-dialog.component.html
@@ -1,7 +1,7 @@
 <bit-dialog dialogSize="large" [title]="'customizeAvatar' | i18n">
   <ng-container bitDialogContent>
     <div class="tw-text-center" *ngIf="loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
       {{ "loading" | i18n }}
     </div>
     <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
@@ -31,10 +31,11 @@
           class="tw-relative tw-flex tw-size-24 tw-cursor-pointer tw-place-content-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-600 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-600"
           [style.background-color]="customColor$ | async"
         >
-          <i
+          <bit-icon
+            name="bwi-pencil"
             [style.color]="customTextColor$ | async"
-            class="bwi bwi-pencil !tw-text-muted tw-m-auto tw-text-3xl"
-          ></i>
+            class="!tw-text-muted tw-m-auto tw-text-3xl"
+          ></bit-icon>
           <input
             tabindex="-1"
             class="tw-absolute tw-bottom-0 tw-right-0 tw-size-px tw-border-none tw-bg-transparent tw-opacity-0"
diff --git a/apps/web/src/app/auth/settings/account/profile.component.html b/apps/web/src/app/auth/settings/account/profile.component.html
index b3972925598..1f30f109b36 100644
--- a/apps/web/src/app/auth/settings/account/profile.component.html
+++ b/apps/web/src/app/auth/settings/account/profile.component.html
@@ -1,10 +1,9 @@
 <div *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <bit-icon
+    name="bwi-spinner"
+    class="bwi-spin tw-text-muted"
+    [ariaLabel]="'loading' | i18n"
+  ></bit-icon>
 </div>
 <form *ngIf="profile && !loading" [formGroup]="formGroup" [bitSubmit]="submit">
   <div class="tw-grid tw-grid-cols-12 tw-gap-6">
@@ -32,8 +31,8 @@
           appStopProp
           [bitAction]="openChangeAvatar"
         >
-          <i class="bwi bwi-lg bwi-pencil-square" aria-hidden="true"></i>
-          Customize
+          <bit-icon name="bwi-pencil-square" class="bwi-lg"></bit-icon>
+          {{ "customize" | i18n }}
         </button>
       </div>
       <div *ngIf="managingOrganization$ | async as managingOrganization">
@@ -43,7 +42,7 @@
           rel="noopener noreferrer"
           href="https://bitwarden.com/help/claimed-accounts"
         >
-          <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+          <bit-icon name="bwi-question-circle"></bit-icon>
         </a>
       </div>
       @if (fingerprintMaterial && userPublicKey) {
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
index 1c04c03a8d2..0ba4b29690b 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access-add-edit.component.html
@@ -25,7 +25,7 @@
             href="https://bitwarden.com/help/emergency-access/#user-access"
             slot="end"
           >
-            <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+            <bit-icon name="bwi-question-circle"></bit-icon>
           </a>
         </bit-label>
         <bit-radio-button id="emergencyTypeView" [value]="emergencyAccessType.View">
diff --git a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
index 70165a94fc3..fe34a63d349 100644
--- a/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/emergency-access.component.html
@@ -30,7 +30,7 @@
           [bitAction]="invite"
           [disabled]="!(canAccessPremium$ | async)"
         >
-          <i aria-hidden="true" class="bwi bwi-plus bwi-fw"></i>
+          <bit-icon name="bwi-plus" class="bwi-fw"></bit-icon>
           {{ "addEmergencyContact" | i18n }}
         </button>
       </div>
@@ -100,7 +100,7 @@
                 *ngIf="c.status === emergencyAccessStatusType.Invited"
                 (click)="reinvite(c)"
               >
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                <bit-icon name="bwi-envelope" class="bwi-fw"></bit-icon>
                 {{ "resendInvitation" | i18n }}
               </button>
               <button
@@ -109,7 +109,7 @@
                 *ngIf="c.status === emergencyAccessStatusType.Accepted"
                 (click)="confirm(c)"
               >
-                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                <bit-icon name="bwi-check" class="bwi-fw"></bit-icon>
                 {{ "confirm" | i18n }}
               </button>
               <button
@@ -118,7 +118,7 @@
                 *ngIf="c.status === emergencyAccessStatusType.RecoveryInitiated"
                 (click)="approve(c)"
               >
-                <i class="bwi bwi-fw bwi-check" aria-hidden="true"></i>
+                <bit-icon name="bwi-check" class="bwi-fw"></bit-icon>
                 {{ "approve" | i18n }}
               </button>
               <button
@@ -130,11 +130,11 @@
                 "
                 (click)="reject(c)"
               >
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                 {{ "reject" | i18n }}
               </button>
               <button type="button" bitMenuItem (click)="remove(c)">
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                 {{ "remove" | i18n }}
               </button>
             </bit-menu>
@@ -145,12 +145,11 @@
     <ng-container *ngIf="!trustedContacts || !trustedContacts.length">
       <p bitTypography="body1" class="tw-mt-2" *ngIf="loaded">{{ "noTrustedContacts" | i18n }}</p>
       <ng-container *ngIf="!loaded">
-        <i
-          class="bwi bwi-spinner bwi-spin tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </ng-container>
     </ng-container>
   </bit-section>
@@ -223,7 +222,7 @@
                 *ngIf="c.status === emergencyAccessStatusType.Confirmed"
                 (click)="requestAccess(c)"
               >
-                <i class="bwi bwi-fw bwi-envelope" aria-hidden="true"></i>
+                <bit-icon name="bwi-envelope" class="bwi-fw"></bit-icon>
                 {{ "requestAccess" | i18n }}
               </button>
               <button
@@ -235,7 +234,7 @@
                 "
                 (click)="takeover(c)"
               >
-                <i class="bwi bwi-fw bwi-key" aria-hidden="true"></i>
+                <bit-icon name="bwi-key" class="bwi-fw"></bit-icon>
                 {{ "takeover" | i18n }}
               </button>
               <button
@@ -247,11 +246,11 @@
                 "
                 [routerLink]="c.id"
               >
-                <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
+                <bit-icon name="bwi-eye" class="bwi-fw"></bit-icon>
                 {{ "view" | i18n }}
               </button>
               <button type="button" bitMenuItem (click)="remove(c)">
-                <i class="bwi bwi-fw bwi-close" aria-hidden="true"></i>
+                <bit-icon name="bwi-close" class="bwi-fw"></bit-icon>
                 {{ "remove" | i18n }}
               </button>
             </bit-menu>
@@ -262,12 +261,11 @@
     <ng-container *ngIf="!grantedContacts || !grantedContacts.length">
       <p bitTypography="body1" *ngIf="loaded">{{ "noGrantedAccess" | i18n }}</p>
       <ng-container *ngIf="!loaded">
-        <i
-          class="bwi bwi-spinner bwi-spin tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </ng-container>
     </ng-container>
   </bit-section>
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
index 2e0a81da976..e5b81671d7f 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
@@ -7,12 +7,11 @@
   <div bitDialogContent>
     @if (initializing) {
       <div class="tw-flex tw-items-center tw-justify-center">
-        <i
-          class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-          title="{{ 'loading' | i18n }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin bwi-2x tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </div>
     } @else {
       <!-- TODO: PM-22237 -->
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
index 743f41537e9..09b6934d2d2 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
@@ -21,6 +21,7 @@ import {
   DialogModule,
   DialogRef,
   DialogService,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
@@ -59,6 +60,7 @@ export type EmergencyAccessTakeoverDialogResultType =
     CommonModule,
     DialogModule,
     I18nPipe,
+    IconModule,
     InputPasswordComponent,
   ],
 })
diff --git a/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html b/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
index 4aaac6aaa52..6c9637ab921 100644
--- a/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
+++ b/apps/web/src/app/auth/settings/emergency-access/view/emergency-access-view.component.html
@@ -18,22 +18,20 @@
               >{{ currentCipher.name }}</a
             >
             <ng-container *ngIf="currentCipher.organizationId">
-              <i
-                class="bwi bwi-collection-shared tw-ml-1"
+              <bit-icon
+                name="bwi-collection-shared"
+                class="tw-ml-1"
                 appStopProp
-                title="{{ 'shared' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "shared" | i18n }}</span>
+                [ariaLabel]="'shared' | i18n"
+              ></bit-icon>
             </ng-container>
             <ng-container *ngIf="currentCipher.hasAttachments">
-              <i
-                class="bwi bwi-paperclip tw-ml-1"
+              <bit-icon
+                name="bwi-paperclip"
+                class="tw-ml-1"
                 appStopProp
-                title="{{ 'attachments' | i18n }}"
-                aria-hidden="true"
-              ></i>
-              <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
+                [ariaLabel]="'attachments' | i18n"
+              ></bit-icon>
             </ng-container>
             <br />
             <small class="tw-text-xs">{{ currentCipher.subTitle }}</small>
@@ -43,11 +41,10 @@
     </bit-table>
   </ng-container>
   <ng-container *ngIf="!loaded">
-    <i
-      class="bwi bwi-spinner bwi-spin tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </ng-container>
 </div>
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
index 1595c0350d0..a2f39ea3c21 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.html
@@ -73,7 +73,7 @@
       <hr *ngIf="enabled" />
       <p class="tw-text-center tw-mb-0">
         <ng-container *ngIf="qrScriptError" class="tw-mt-2">
-          <i class="bwi bwi-error tw-text-3xl tw-text-danger" aria-hidden="true"></i>
+          <bit-icon name="bwi-error" class="tw-text-3xl tw-text-danger"></bit-icon>
           <p>
             {{ "twoStepAuthenticatorQRCanvasError" | i18n }}
           </p>
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts
index d27e8ffecce..0c512b7b99a 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts
@@ -29,6 +29,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
+  IconModule,
   SvgModule,
   InputModule,
   LinkModule,
@@ -63,6 +64,7 @@ declare global {
     ReactiveFormsModule,
     DialogModule,
     FormFieldModule,
+    IconModule,
     InputModule,
     LinkModule,
     TypographyModule,
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
index 8a538cb961c..31ac01fe1da 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.html
@@ -17,7 +17,7 @@
       <ul class="bwi-ul">
         <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
           <ng-container *ngIf="k.configured">
-            <i class="bwi bwi-li bwi-key"></i>
+            <bit-icon name="bwi-key" class="bwi-li"></bit-icon>
             <span *ngIf="k.configured" bitTypography="body1" class="tw-font-medium">
               {{ k.name || ("unnamedKey" | i18n) }}
             </span>
@@ -27,12 +27,12 @@
               </ng-container>
             </ng-container>
             <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
-              <i
-                class="bwi bwi-spin bwi-spinner tw-text-muted bwi-fw"
-                title="{{ 'loading' | i18n }}"
+              <bit-icon
+                name="bwi-spinner"
+                class="bwi-spin tw-text-muted bwi-fw"
+                [ariaLabel]="'loading' | i18n"
                 *ngIf="$any(removeKeyBtn).loading"
-                aria-hidden="true"
-              ></i>
+              ></bit-icon>
               -
               <a bitLink href="#" appStopClick (click)="remove(k)">{{ "remove" | i18n }}</a>
             </ng-container>
@@ -68,19 +68,27 @@
         {{ "readKey" | i18n }}
       </button>
       <ng-container *ngIf="$any(readKeyBtn).loading()">
-        <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-text-muted"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </ng-container>
       <ng-container *ngIf="!$any(readKeyBtn).loading()">
         <ng-container *ngIf="webAuthnListening">
-          <i class="bwi bwi-spinner bwi-spin tw-text-muted" aria-hidden="true"></i>
+          <bit-icon
+            name="bwi-spinner"
+            class="bwi-spin tw-text-muted"
+            [ariaLabel]="'loading' | i18n"
+          ></bit-icon>
           {{ "twoFactorU2fWaiting" | i18n }}...
         </ng-container>
         <ng-container *ngIf="webAuthnResponse">
-          <i class="bwi bwi-check-circle tw-text-success" aria-hidden="true"></i>
+          <bit-icon name="bwi-check-circle" class="tw-text-success"></bit-icon>
           {{ "twoFactorU2fClickSave" | i18n }}
         </ng-container>
         <ng-container *ngIf="webAuthnError">
-          <i class="bwi bwi-exclamation-triangle tw-text-danger" aria-hidden="true"></i>
+          <bit-icon name="bwi-exclamation-triangle" class="tw-text-danger"></bit-icon>
           {{ "twoFactorU2fProblemReadingTryAgain" | i18n }}
         </ng-container>
       </ng-container>
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts
index 57001acc4d2..22cc6e9d9b3 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-webauthn.component.ts
@@ -27,6 +27,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
+  IconModule,
   LinkModule,
   ToastService,
   TypographyModule,
@@ -56,6 +57,7 @@ interface Key {
     DialogModule,
     FormFieldModule,
     I18nPipe,
+    IconModule,
     JslibModule,
     LinkModule,
     ReactiveFormsModule,
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html
index 69a0dbf4145..77c410e8ec6 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup.component.html
@@ -34,12 +34,11 @@
   <h2 [ngClass]="{ 'mt-5': !organizationId }">
     {{ "providers" | i18n }}
     <small *ngIf="loading">
-      <i
-        class="bwi bwi-spinner bwi-spin bwi-fw tw-text-muted"
-        title="{{ 'loading' | i18n }}"
-        aria-hidden="true"
-      ></i>
-      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+      <bit-icon
+        name="bwi-spinner"
+        class="bwi-spin bwi-fw tw-text-muted"
+        [ariaLabel]="'loading' | i18n"
+      ></bit-icon>
     </small>
   </h2>
   <bit-callout type="warning" *ngIf="showPolicyWarning">
@@ -59,12 +58,11 @@
             {{ p.name }}
           </div>
           <ng-container *ngIf="p.enabled">
-            <i
-              class="bwi bwi-check tw-text-success-600 bwi-fw tw-ml-2"
-              title="{{ 'enabled' | i18n }}"
-              aria-hidden="true"
-            ></i>
-            <span class="tw-sr-only">{{ "enabled" | i18n }}</span>
+            <bit-icon
+              name="bwi-check"
+              class="tw-text-success-600 bwi-fw tw-ml-2"
+              [ariaLabel]="'enabled' | i18n"
+            ></bit-icon>
           </ng-container>
           <app-premium-badge class="tw-ml-2" *ngIf="p.premium"></app-premium-badge>
         </h3>
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html
index 147fc9874dd..910da970ff0 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/delete-credential-dialog/delete-credential-dialog.component.html
@@ -8,7 +8,11 @@
     </span>
     <ng-container bitDialogContent>
       <ng-container *ngIf="!credential">
-        <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-ml-1"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </ng-container>
 
       <ng-container *ngIf="credential">
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html
index 3fe6f43a052..85fa35ed4da 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/enable-encryption-dialog/enable-encryption-dialog.component.html
@@ -8,7 +8,11 @@
     </span>
     <ng-container bitDialogContent>
       <ng-container *ngIf="!credential">
-        <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin tw-ml-1"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </ng-container>
 
       <ng-container *ngIf="credential">
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
index 2ef177922a9..dd260848f52 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/webauthn-login-settings.component.html
@@ -21,7 +21,7 @@
     </ng-container>
   </span>
   <ng-container *ngIf="loading">
-    <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin tw-ml-1" [ariaLabel]="'loading' | i18n"></bit-icon>
   </ng-container>
 </h2>
 <p bitTypography="body1">
@@ -36,7 +36,7 @@
     <td class="tw-p-2 tw-pl-0 tw-font-medium">{{ credential.name }}</td>
     <td class="tw-p-2 tw-pr-10 tw-text-left">
       <ng-container *ngIf="credential.prfStatus === WebauthnLoginCredentialPrfStatus.Enabled">
-        <i class="bwi bwi-lock-encrypted"></i>
+        <bit-icon name="bwi-lock-encrypted"></bit-icon>
         <span bitTypography="body1" class="tw-text-muted">{{ "usedForEncryption" | i18n }}</span>
       </ng-container>
       <ng-container *ngIf="credential.prfStatus === WebauthnLoginCredentialPrfStatus.Supported">
@@ -47,7 +47,7 @@
           [attr.aria-label]="('enablePasskeyEncryption' | i18n) + ' ' + credential.name"
           (click)="enableEncryption(credential.id)"
         >
-          <i class="bwi bwi-lock-encrypted"></i>
+          <bit-icon name="bwi-lock-encrypted"></bit-icon>
           {{ "enablePasskeyEncryption" | i18n }}
         </button>
       </ng-container>
diff --git a/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html b/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
index 0770ea4dfe1..1f16fe817e1 100644
--- a/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
+++ b/apps/web/src/app/auth/shared/components/user-verification/user-verification.component.html
@@ -21,7 +21,7 @@
       {{ "sendCode" | i18n }}
     </button>
     <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
-      <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+      <bit-icon name="bwi-check-circle"></bit-icon>
       {{ "codeSent" | i18n }}
     </span>
   </div>
diff --git a/apps/web/src/app/auth/verify-email-token.component.html b/apps/web/src/app/auth/verify-email-token.component.html
index 63437352e19..47e0d0f1517 100644
--- a/apps/web/src/app/auth/verify-email-token.component.html
+++ b/apps/web/src/app/auth/verify-email-token.component.html
@@ -1,6 +1,10 @@
 <div class="tw-p-8 tw-flex">
   <img class="new-logo-themed" alt="Bitwarden" />
   <div class="spinner-container tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted" title="Loading" aria-hidden="true"></i>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin bwi-3x tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </div>
 </div>
diff --git a/apps/web/src/app/auth/verify-email-token.component.ts b/apps/web/src/app/auth/verify-email-token.component.ts
index fe70f876bc4..f05f9c08b76 100644
--- a/apps/web/src/app/auth/verify-email-token.component.ts
+++ b/apps/web/src/app/auth/verify-email-token.component.ts
@@ -12,11 +12,14 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ToastService } from "@bitwarden/components";
 
+import { SharedModule } from "../shared/shared.module";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "app-verify-email-token",
   templateUrl: "verify-email-token.component.html",
+  imports: [SharedModule],
 })
 export class VerifyEmailTokenComponent implements OnInit {
   constructor(
diff --git a/libs/angular/src/auth/device-management/device-management-table.component.html b/libs/angular/src/auth/device-management/device-management-table.component.html
index 72187b2a2fc..4c7e0bcb92d 100644
--- a/libs/angular/src/auth/device-management/device-management-table.component.html
+++ b/libs/angular/src/auth/device-management/device-management-table.component.html
@@ -18,7 +18,7 @@
     <!-- Column: Device Name -->
     <td bitCell class="tw-flex tw-gap-2 tw-items-center tw-h-16">
       <div class="tw-flex tw-items-center tw-justify-center tw-w-10">
-        <i [class]="device.icon" class="bwi-lg" aria-hidden="true"></i>
+        <bit-icon [name]="device.icon" class="bwi-lg"></bit-icon>
       </div>
 
       <div>
diff --git a/libs/angular/src/auth/device-management/device-management-table.component.ts b/libs/angular/src/auth/device-management/device-management-table.component.ts
index 36edf6dd336..3e3555cee13 100644
--- a/libs/angular/src/auth/device-management/device-management-table.component.ts
+++ b/libs/angular/src/auth/device-management/device-management-table.component.ts
@@ -7,6 +7,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import {
   BadgeModule,
   ButtonModule,
+  IconModule,
   LinkModule,
   TableDataSource,
   TableModule,
@@ -21,7 +22,15 @@ import { DeviceDisplayData } from "./device-management.component";
   standalone: true,
   selector: "auth-device-management-table",
   templateUrl: "./device-management-table.component.html",
-  imports: [BadgeModule, ButtonModule, CommonModule, JslibModule, LinkModule, TableModule],
+  imports: [
+    BadgeModule,
+    ButtonModule,
+    CommonModule,
+    IconModule,
+    JslibModule,
+    LinkModule,
+    TableModule,
+  ],
 })
 export class DeviceManagementTableComponent implements OnChanges {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
diff --git a/libs/angular/src/auth/device-management/device-management.component.html b/libs/angular/src/auth/device-management/device-management.component.html
index 2a91c2daae2..1b113082254 100644
--- a/libs/angular/src/auth/device-management/device-management.component.html
+++ b/libs/angular/src/auth/device-management/device-management.component.html
@@ -8,7 +8,7 @@
       [bitPopoverTriggerFor]="infoPopover"
       position="right-start"
     >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      <bit-icon name="bwi-question-circle"></bit-icon>
     </button>
 
     <bit-popover [title]="'whatIsADevice' | i18n" #infoPopover>
@@ -23,7 +23,11 @@
 
 @if (initializing) {
   <div class="tw-flex tw-justify-center tw-items-center tw-p-4">
-    <i class="bwi bwi-spinner bwi-spin tw-text-2xl" aria-hidden="true"></i>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin tw-text-2xl"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </div>
 } @else {
   <!-- Table View: displays on medium to large screens -->
diff --git a/libs/angular/src/auth/device-management/device-management.component.ts b/libs/angular/src/auth/device-management/device-management.component.ts
index d8f8cc10df4..c697ea44099 100644
--- a/libs/angular/src/auth/device-management/device-management.component.ts
+++ b/libs/angular/src/auth/device-management/device-management.component.ts
@@ -19,7 +19,7 @@ import { DeviceType, DeviceTypeMetadata } from "@bitwarden/common/enums";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 import { MessageListener } from "@bitwarden/common/platform/messaging";
-import { ButtonModule, DialogService, PopoverModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, IconModule, PopoverModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { LoginApprovalDialogComponent } from "../login-approval";
@@ -62,6 +62,7 @@ export interface DeviceDisplayData {
     DeviceManagementItemGroupComponent,
     DeviceManagementTableComponent,
     I18nPipe,
+    IconModule,
     PopoverModule,
   ],
 })
diff --git a/libs/angular/src/auth/environment-selector/environment-selector.component.html b/libs/angular/src/auth/environment-selector/environment-selector.component.html
index 72d7355c399..a1115d94712 100644
--- a/libs/angular/src/auth/environment-selector/environment-selector.component.html
+++ b/libs/angular/src/auth/environment-selector/environment-selector.component.html
@@ -12,12 +12,12 @@
         [attr.aria-pressed]="data.selectedRegion === region ? 'true' : 'false'"
         (click)="toggle(region.key)"
       >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
           style="padding-bottom: 1px"
-          aria-hidden="true"
           [style.visibility]="data.selectedRegion === region ? 'visible' : 'hidden'"
-        ></i>
+        ></bit-icon>
         <span>{{ region.domain }}</span>
       </button>
       <button
@@ -26,12 +26,12 @@
         [attr.aria-pressed]="data.selectedRegion ? 'false' : 'true'"
         (click)="toggle(ServerEnvironmentType.SelfHosted)"
       >
-        <i
-          class="bwi bwi-fw bwi-sm bwi-check"
+        <bit-icon
+          name="bwi-check"
+          class="bwi-fw bwi-sm"
           style="padding-bottom: 1px"
-          aria-hidden="true"
           [style.visibility]="data.selectedRegion ? 'hidden' : 'visible'"
-        ></i>
+        ></bit-icon>
         <span>{{ "selfHostedServer" | i18n }}</span>
       </button>
     </bit-menu>
@@ -41,7 +41,7 @@
         <b class="tw-text-primary-600 tw-font-medium">{{
           data.selectedRegion?.domain || ("selfHostedServer" | i18n)
         }}</b>
-        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+        <bit-icon name="bwi-angle-down" class="bwi-fw bwi-sm"></bit-icon>
       </button>
     </div>
   </div>
diff --git a/libs/angular/src/auth/environment-selector/environment-selector.component.ts b/libs/angular/src/auth/environment-selector/environment-selector.component.ts
index 89366f47b70..79df6a2d992 100644
--- a/libs/angular/src/auth/environment-selector/environment-selector.component.ts
+++ b/libs/angular/src/auth/environment-selector/environment-selector.component.ts
@@ -13,6 +13,7 @@ import {
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
   DialogService,
+  IconModule,
   LinkModule,
   MenuModule,
   ToastService,
@@ -26,7 +27,7 @@ import { I18nPipe } from "@bitwarden/ui-common";
   selector: "environment-selector",
   templateUrl: "environment-selector.component.html",
   standalone: true,
-  imports: [CommonModule, I18nPipe, MenuModule, LinkModule, TypographyModule],
+  imports: [CommonModule, I18nPipe, IconModule, LinkModule, MenuModule, TypographyModule],
 })
 export class EnvironmentSelectorComponent implements OnDestroy {
   protected ServerEnvironmentType = Region;
diff --git a/libs/angular/src/auth/login-approval/login-approval-dialog.component.html b/libs/angular/src/auth/login-approval/login-approval-dialog.component.html
index f2850406235..fdaf6584251 100644
--- a/libs/angular/src/auth/login-approval/login-approval-dialog.component.html
+++ b/libs/angular/src/auth/login-approval/login-approval-dialog.component.html
@@ -4,7 +4,11 @@
   <ng-container bitDialogContent>
     <ng-container *ngIf="loading">
       <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-        <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+        <bit-icon
+          name="bwi-spinner"
+          class="bwi-spin bwi-3x"
+          [ariaLabel]="'loading' | i18n"
+        ></bit-icon>
       </div>
     </ng-container>
 
diff --git a/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts b/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts
index 54906047535..36e553aa7d9 100644
--- a/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts
+++ b/libs/angular/src/auth/login-approval/login-approval-dialog.component.ts
@@ -20,6 +20,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 import { LogService } from "@bitwarden/logging";
@@ -35,7 +36,7 @@ export interface LoginApprovalDialogParams {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "login-approval-dialog.component.html",
-  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, JslibModule],
+  imports: [AsyncActionsModule, ButtonModule, CommonModule, DialogModule, IconModule, JslibModule],
 })
 export class LoginApprovalDialogComponent implements OnInit, OnDestroy {
   authRequestId: string;
diff --git a/libs/angular/src/auth/password-management/change-password/change-password.component.html b/libs/angular/src/auth/password-management/change-password/change-password.component.html
index 7604ffacea7..c147af329ce 100644
--- a/libs/angular/src/auth/password-management/change-password/change-password.component.html
+++ b/libs/angular/src/auth/password-management/change-password/change-password.component.html
@@ -1,10 +1,9 @@
 @if (initializing) {
-  <i
-    class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+  <bit-icon
+    name="bwi-spinner"
+    class="bwi-spin bwi-2x tw-text-muted"
+    [ariaLabel]="'loading' | i18n"
+  ></bit-icon>
 } @else {
   <bit-callout
     *ngIf="this.forceSetPasswordReason !== ForceSetPasswordReason.AdminForcePasswordReset"
diff --git a/libs/angular/src/auth/password-management/change-password/change-password.component.ts b/libs/angular/src/auth/password-management/change-password/change-password.component.ts
index 7f46ebfc9d4..2dc36c3d251 100644
--- a/libs/angular/src/auth/password-management/change-password/change-password.component.ts
+++ b/libs/angular/src/auth/password-management/change-password/change-password.component.ts
@@ -23,9 +23,10 @@ import { SyncService } from "@bitwarden/common/platform/sync";
 import { UserId } from "@bitwarden/common/types/guid";
 import {
   AnonLayoutWrapperDataService,
-  DialogService,
-  ToastService,
   CalloutComponent,
+  DialogService,
+  IconModule,
+  ToastService,
 } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
@@ -44,7 +45,7 @@ import { ChangePasswordService } from "./change-password.service.abstraction";
 @Component({
   selector: "auth-change-password",
   templateUrl: "change-password.component.html",
-  imports: [InputPasswordComponent, I18nPipe, CalloutComponent, CommonModule],
+  imports: [CalloutComponent, CommonModule, IconModule, InputPasswordComponent, I18nPipe],
 })
 export class ChangePasswordComponent implements OnInit {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
diff --git a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html
index 8033d2022f4..18c8c833066 100644
--- a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html
+++ b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html
@@ -1,10 +1,6 @@
 @if (initializing) {
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-3x"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 } @else {
   @if (userType === SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER_UNTRUSTED_DEVICE) {
diff --git a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts
index 3cafbdb8ff8..1680bf57720 100644
--- a/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts
+++ b/libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts
@@ -37,6 +37,7 @@ import {
   ButtonModule,
   CalloutComponent,
   DialogService,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 import { KeyService } from "@bitwarden/key-management";
@@ -56,7 +57,14 @@ import {
 @Component({
   standalone: true,
   templateUrl: "set-initial-password.component.html",
-  imports: [ButtonModule, CalloutComponent, CommonModule, InputPasswordComponent, I18nPipe],
+  imports: [
+    ButtonModule,
+    CalloutComponent,
+    CommonModule,
+    IconModule,
+    InputPasswordComponent,
+    I18nPipe,
+  ],
 })
 export class SetInitialPasswordComponent implements OnInit {
   protected inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAuthedUser;
diff --git a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html
index d66a3a77d93..ed43a32d38c 100644
--- a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html
+++ b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.html
@@ -1,5 +1,5 @@
 <bit-simple-dialog>
-  <i bitDialogIcon class="bwi bwi-info-circle tw-text-info tw-text-3xl" aria-hidden="true"></i>
+  <bit-icon bitDialogIcon name="bwi-info-circle" class="tw-text-info tw-text-3xl"></bit-icon>
   <span bitDialogTitle
     ><strong>{{ "yourAccountsFingerprint" | i18n }}:</strong></span
   >
@@ -16,7 +16,7 @@
       bitDialogClose
     >
       {{ "learnMore" | i18n }}
-      <i class="bwi bwi-external-link bwi-fw" aria-hidden="true"></i>
+      <bit-icon name="bwi-external-link" class="bwi-fw"></bit-icon>
     </a>
     <button bitButton type="button" buttonType="secondary" bitDialogClose>
       {{ "close" | i18n }}
diff --git a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts
index 5e4d1cbdb49..7ec45d905d9 100644
--- a/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts
+++ b/libs/auth/src/angular/fingerprint-dialog/fingerprint-dialog.component.ts
@@ -9,6 +9,7 @@ import {
   DialogModule,
   DialogService,
   CenterPositionStrategy,
+  IconModule,
 } from "@bitwarden/components";
 
 export type FingerprintDialogData = {
@@ -19,7 +20,7 @@ export type FingerprintDialogData = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "fingerprint-dialog.component.html",
-  imports: [JslibModule, ButtonModule, DialogModule],
+  imports: [JslibModule, ButtonModule, DialogModule, IconModule],
 })
 export class FingerprintDialogComponent {
   constructor(@Inject(DIALOG_DATA) protected data: FingerprintDialogData) {}
diff --git a/libs/auth/src/angular/input-password/input-password.component.html b/libs/auth/src/angular/input-password/input-password.component.html
index d114e92bce7..1979b99f96e 100644
--- a/libs/auth/src/angular/input-password/input-password.component.html
+++ b/libs/auth/src/angular/input-password/input-password.component.html
@@ -149,7 +149,7 @@
         rel="noreferrer"
         appA11yTitle="{{ 'impactOfRotatingYourEncryptionKey' | i18n }}"
       >
-        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+        <bit-icon name="bwi-question-circle"></bit-icon>
       </a>
     </bit-label>
   </bit-form-control>
diff --git a/libs/auth/src/angular/input-password/input-password.component.ts b/libs/auth/src/angular/input-password/input-password.component.ts
index b81e01156f1..48c938d34ca 100644
--- a/libs/auth/src/angular/input-password/input-password.component.ts
+++ b/libs/auth/src/angular/input-password/input-password.component.ts
@@ -29,6 +29,7 @@ import {
   DialogService,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   InputModule,
   LinkModule,
   ToastService,
@@ -112,6 +113,7 @@ interface InputPasswordForm {
     CheckboxModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     InputModule,
     JslibModule,
     PasswordCalloutComponent,
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
index bf37380dc39..45481438743 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.html
@@ -1,11 +1,10 @@
 <ng-container *ngIf="loading">
   <div class="tw-text-center">
-    <i
-      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
-      title="{{ 'loading' | i18n }}"
-      aria-hidden="true"
-    ></i>
-    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
+    <bit-icon
+      name="bwi-spinner"
+      class="bwi-spin bwi-2x tw-text-muted"
+      [ariaLabel]="'loading' | i18n"
+    ></bit-icon>
   </div>
 </ng-container>
 
diff --git a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
index 87117dba0fd..0be020124b5 100644
--- a/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
+++ b/libs/auth/src/angular/login-decryption-options/login-decryption-options.component.ts
@@ -53,6 +53,7 @@ import {
   AsyncActionsModule,
   ButtonModule,
   CheckboxModule,
+  IconModule,
   DialogService,
   FormFieldModule,
   ToastService,
@@ -79,6 +80,7 @@ enum State {
     ButtonModule,
     CheckboxModule,
     CommonModule,
+    IconModule,
     FormFieldModule,
     JslibModule,
     ReactiveFormsModule,
diff --git a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html
index 18a0db30904..727bac34b53 100644
--- a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html
+++ b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 </ng-container>
 
diff --git a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts
index c7046d39022..6beb6241980 100644
--- a/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts
+++ b/libs/auth/src/angular/login-via-auth-request/login-via-auth-request.component.ts
@@ -36,7 +36,7 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { UserId } from "@bitwarden/common/types/guid";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { ButtonModule, LinkModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, LinkModule, IconModule, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
 
 import { AuthRequestApiServiceAbstraction } from "../../common/abstractions/auth-request-api.service";
@@ -60,7 +60,7 @@ const matchOptions: IsActiveMatchOptions = {
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "./login-via-auth-request.component.html",
-  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule],
+  imports: [ButtonModule, CommonModule, JslibModule, LinkModule, RouterModule, IconModule],
   providers: [{ provide: LoginViaAuthRequestCacheService }],
 })
 export class LoginViaAuthRequestComponent implements OnInit, OnDestroy {
diff --git a/libs/auth/src/angular/login/login.component.html b/libs/auth/src/angular/login/login.component.html
index e33872829ad..7324c36468d 100644
--- a/libs/auth/src/angular/login/login.component.html
+++ b/libs/auth/src/angular/login/login.component.html
@@ -65,7 +65,7 @@
           [addTooltipToDescribedby]="ssoRequired"
           [disabled]="ssoRequired"
         >
-          <i class="bwi bwi-passkey tw-mr-1" aria-hidden="true"></i>
+          <bit-icon name="bwi-passkey" class="tw-mr-1"></bit-icon>
           {{ "logInWithPasskey" | i18n }}
         </button>
       </ng-container>
@@ -78,7 +78,7 @@
         [buttonType]="ssoRequired ? 'primary' : 'secondary'"
         (click)="handleSsoClick()"
       >
-        <i class="bwi bwi-provider tw-mr-1" aria-hidden="true"></i>
+        <bit-icon name="bwi-provider" class="tw-mr-1"></bit-icon>
         {{ "useSingleSignOn" | i18n }}
       </button>
     </div>
@@ -114,7 +114,7 @@
           buttonType="secondary"
           (click)="startAuthRequestLogin()"
         >
-          <i class="bwi bwi-mobile" aria-hidden="true"></i>
+          <bit-icon name="bwi-mobile"></bit-icon>
           {{ "loginWithDevice" | i18n }}
         </button>
       </ng-container>
diff --git a/libs/auth/src/angular/login/login.component.ts b/libs/auth/src/angular/login/login.component.ts
index 8e688f3f830..9957c77ffaf 100644
--- a/libs/auth/src/angular/login/login.component.ts
+++ b/libs/auth/src/angular/login/login.component.ts
@@ -52,6 +52,7 @@ import {
   CheckboxModule,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   LinkModule,
   ToastService,
   TooltipDirective,
@@ -79,6 +80,7 @@ export enum LoginUiState {
     CommonModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     LinkModule,
     JslibModule,
     ReactiveFormsModule,
diff --git a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html
index aa6b5c8edc3..031fec5c403 100644
--- a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html
+++ b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.html
@@ -1,5 +1,5 @@
 <div class="tw-flex tw-items-center tw-justify-center" *ngIf="loading">
-  <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+  <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
 </div>
 
 <auth-input-password
diff --git a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts
index 99eaa2404d9..888e9ce7bc2 100644
--- a/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts
+++ b/libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts
@@ -17,7 +17,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { AnonLayoutWrapperDataService, ToastService } from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ToastService, IconModule } from "@bitwarden/components";
 
 import {
   LoginStrategyServiceAbstraction,
@@ -43,7 +43,7 @@ type MarketingInitiative = (typeof MarketingInitiative)[keyof typeof MarketingIn
 @Component({
   selector: "auth-registration-finish",
   templateUrl: "./registration-finish.component.html",
-  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent],
+  imports: [CommonModule, JslibModule, RouterModule, InputPasswordComponent, IconModule],
 })
 export class RegistrationFinishComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
diff --git a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html
index 92c2f9f2f7a..bf40b15b5da 100644
--- a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html
+++ b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.html
@@ -16,11 +16,10 @@
       </bit-form-field>
 
       <button bitLink linkType="primary" type="button" (click)="showCustomEnv = !showCustomEnv">
-        <i
-          class="bwi bwi-fw bwi-sm"
-          [ngClass]="{ 'bwi-angle-right': !showCustomEnv, 'bwi-angle-down': showCustomEnv }"
-          aria-hidden="true"
-        ></i>
+        <bit-icon
+          [name]="showCustomEnv ? 'bwi-angle-down' : 'bwi-angle-right'"
+          class="bwi-fw bwi-sm"
+        ></bit-icon>
         {{ "customEnvironment" | i18n }}
       </button>
 
@@ -91,7 +90,7 @@
         aria-live="assertive"
         role="alert"
       >
-        <i class="bwi bwi-error"></i> {{ "selfHostedEnvFormInvalid" | i18n }}
+        <bit-icon name="bwi-error"></bit-icon> {{ "selfHostedEnvFormInvalid" | i18n }}
       </span>
     </ng-container>
     <ng-container bitDialogFooter>
diff --git a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts
index 6fb40179afa..6e093a423b3 100644
--- a/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts
+++ b/libs/auth/src/angular/self-hosted-env-config-dialog/self-hosted-env-config-dialog.component.ts
@@ -27,6 +27,7 @@ import {
   DialogModule,
   DialogService,
   FormFieldModule,
+  IconModule,
   LinkModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -85,6 +86,7 @@ function onlyHttpsValidator(): ValidatorFn {
     JslibModule,
     DialogModule,
     ButtonModule,
+    IconModule,
     LinkModule,
     TypographyModule,
     ReactiveFormsModule,
diff --git a/libs/auth/src/angular/sso/sso.component.html b/libs/auth/src/angular/sso/sso.component.html
index be38f63987e..9ab11b0d094 100644
--- a/libs/auth/src/angular/sso/sso.component.html
+++ b/libs/auth/src/angular/sso/sso.component.html
@@ -1,6 +1,6 @@
 <form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-container">
   <div *ngIf="loggingIn">
-    <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
     {{ "loading" | i18n }}
   </div>
   <div *ngIf="!loggingIn">
diff --git a/libs/auth/src/angular/sso/sso.component.ts b/libs/auth/src/angular/sso/sso.component.ts
index f5167cb84cc..df358e89107 100644
--- a/libs/auth/src/angular/sso/sso.component.ts
+++ b/libs/auth/src/angular/sso/sso.component.ts
@@ -42,6 +42,7 @@ import {
   CheckboxModule,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   LinkModule,
   ToastService,
 } from "@bitwarden/components";
@@ -73,6 +74,7 @@ interface QueryParams {
     CommonModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     LinkModule,
     JslibModule,
     ReactiveFormsModule,
diff --git a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
index 6f13b0a1fe2..4c23ab4af5c 100644
--- a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
+++ b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.html
@@ -1,6 +1,6 @@
 <div id="web-authn-frame" class="tw-mb-3" *ngIf="!webAuthnNewTab">
   <div *ngIf="!webAuthnReady" class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 
   <iframe
diff --git a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts
index 54d6f7c5f77..090cdc0e66c 100644
--- a/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/child-components/two-factor-auth-webauthn/two-factor-auth-webauthn.component.ts
@@ -22,6 +22,7 @@ import {
   TypographyModule,
   FormFieldModule,
   AsyncActionsModule,
+  IconModule,
   ToastService,
 } from "@bitwarden/components";
 
@@ -48,6 +49,7 @@ export interface WebAuthnResult {
     FormFieldModule,
     AsyncActionsModule,
     FormsModule,
+    IconModule,
   ],
   providers: [],
 })
diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
index 8ad35c7b5c6..853da1b3452 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="loading">
   <div class="tw-flex tw-items-center tw-justify-center">
-    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
+    <bit-icon name="bwi-spinner" class="bwi-spin bwi-3x" [ariaLabel]="'loading' | i18n"></bit-icon>
   </div>
 </ng-container>
 
diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
index 91d24532a70..cafba9dd508 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-auth.component.ts
@@ -55,6 +55,7 @@ import {
   DialogService,
   FormFieldModule,
   ToastService,
+  IconModule,
 } from "@bitwarden/components";
 
 import { TwoFactorAuthAuthenticatorComponent } from "./child-components/two-factor-auth-authenticator/two-factor-auth-authenticator.component";
@@ -88,6 +89,7 @@ import {
     AsyncActionsModule,
     CheckboxModule,
     ButtonModule,
+    IconModule,
     TwoFactorAuthAuthenticatorComponent,
     TwoFactorAuthEmailComponent,
     TwoFactorAuthDuoComponent,
diff --git a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
index 8e8f41c394d..8cc7b9d3d7e 100644
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
@@ -46,7 +46,7 @@
         </div>
         <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
         <div *ngIf="!biometricsVerificationFailed">
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
           {{ "awaitingConfirmation" | i18n }}
         </div>
       </div>
@@ -116,7 +116,7 @@
   </ng-container>
   <ng-container *ngIf="userVerificationOptions.server.otp">
     <div class="tw-mb-6" *ngIf="!sentInitialCode">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+      <bit-icon name="bwi-spinner" class="bwi-spin" [ariaLabel]="'loading' | i18n"></bit-icon>
     </div>
 
     <div class="tw-mb-6" *ngIf="sentInitialCode">
@@ -128,7 +128,7 @@
         </button>
 
         <span class="tw-ml-2 tw-text-success" role="alert" @sent *ngIf="sentCode">
-          <i class="bwi bwi-check-circle" aria-hidden="true"></i>
+          <bit-icon name="bwi-check-circle"></bit-icon>
           {{ "codeSent" | i18n }}
         </span>
       </p>
diff --git a/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts b/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
index af73cc3de99..370c1af9aa7 100644
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
@@ -29,6 +29,7 @@ import {
   FormFieldModule,
   IconButtonModule,
   SvgModule,
+  IconModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -64,6 +65,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
     FormFieldModule,
     AsyncActionsModule,
     IconButtonModule,
+    IconModule,
     SvgModule,
     LinkModule,
     ButtonModule,