diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index bb24fb800aa..dc07d025e60 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -40,7 +40,7 @@
     class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-text-main"
     [ngClass]="{ 'tw-invisible': !loading() }"
   >
-    <i class="bwi bwi-spinner bwi-lg bwi-spin" [attr.aria-label]="loadingText()"></i>
+    <bit-icon name="bwi-spinner" class="bwi-lg bwi-spin" [ariaLabel]="loadingText()"></bit-icon>
   </span>
 </main>
 <ng-content select="[slot=footer]"></ng-content>
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.ts b/apps/browser/src/platform/popup/layout/popup-page.component.ts
index 7d4b7decb7f..e661bf2ca00 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.ts
@@ -13,7 +13,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { filter, switchMap, fromEvent, startWith, map } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/components";
+import { IconModule, ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/components";
 
 @Component({
   selector: "popup-page",
@@ -21,7 +21,7 @@ import { ScrollLayoutHostDirective, ScrollLayoutService } from "@bitwarden/compo
   host: {
     class: "tw-h-full tw-flex tw-flex-col tw-overflow-y-hidden",
   },
-  imports: [CommonModule, ScrollLayoutHostDirective],
+  imports: [CommonModule, IconModule, ScrollLayoutHostDirective],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PopupPageComponent {
diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html
index d5042918d2f..90ff8f3a791 100644
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -16,16 +16,10 @@
                 [attr.aria-expanded]="showSecurity"
                 appAutofocus
               >
-                <i
-                  *ngIf="!showSecurity"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showSecurity"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showSecurity ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "security" | i18n }}
               </button>
             </h2>
@@ -147,16 +141,10 @@
                 (click)="showAccountPreferences = !showAccountPreferences"
                 [attr.aria-expanded]="showAccountPreferences"
               >
-                <i
-                  *ngIf="!showAccountPreferences"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showAccountPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showAccountPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "accountPreferences" | i18n }}
               </button>
             </h2>
@@ -222,16 +210,10 @@
                 (click)="showAppPreferences = !showAppPreferences"
                 [attr.aria-expanded]="showAppPreferences"
               >
-                <i
-                  *ngIf="!showAppPreferences"
-                  class="bwi bwi-angle-right bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
-                <i
-                  *ngIf="showAppPreferences"
-                  class="bwi bwi-angle-down bwi-sm icon"
-                  aria-hidden="true"
-                ></i>
+                <bit-icon
+                  [name]="showAppPreferences ? 'bwi-angle-down' : 'bwi-angle-right'"
+                  class="bwi-sm icon"
+                ></bit-icon>
                 {{ "appPreferences" | i18n }}
               </button>
             </h2>
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts
index f2e828b95ce..7bab7db3c29 100644
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -45,6 +45,7 @@ import {
   DialogService,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   ItemModule,
   LinkModule,
   SectionComponent,
@@ -89,6 +90,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
     FormsModule,
     ReactiveFormsModule,
     IconButtonModule,
+    IconModule,
     ItemModule,
     JslibModule,
     LinkModule,
diff --git a/apps/desktop/src/app/layout/account-switcher.component.html b/apps/desktop/src/app/layout/account-switcher.component.html
index ef177ea1bb6..7d0ee8fac83 100644
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@@ -31,11 +31,7 @@
     <ng-template #noActiveAccount>
       <span>{{ "switchAccount" | i18n }}</span>
     </ng-template>
-    <i
-      class="bwi"
-      aria-hidden="true"
-      [ngClass]="{ 'bwi-angle-down': !isOpen, 'bwi-angle-up': isOpen }"
-    ></i>
+    <bit-icon [name]="isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"></bit-icon>
   </button>
 
   <ng-template
@@ -86,20 +82,19 @@
               }}<span class="sr-only">)</span></span
             >
           </div>
-          <i
-            class="bwi bwi-2x text-muted"
-            [ngClass]="
+          <bit-icon
+            [name]="
               account.value.authenticationStatus === authStatus.Unlocked ? 'bwi-unlock' : 'bwi-lock'
             "
-            aria-hidden="true"
-          ></i>
+            class="bwi-2x text-muted"
+          ></bit-icon>
         </button>
       </div>
       <ng-container *ngIf="view.activeAccount">
         <div class="border" *ngIf="view.numberOfAccounts > 0"></div>
         <ng-container *ngIf="view.numberOfAccounts < 4">
           <button type="button" class="add" (click)="addAccount()">
-            <i class="bwi bwi-plus" aria-hidden="true"></i> {{ "addAccount" | i18n }}
+            <bit-icon name="bwi-plus"></bit-icon> {{ "addAccount" | i18n }}
           </button>
         </ng-container>
         <ng-container *ngIf="view.numberOfAccounts === 4">
diff --git a/apps/desktop/src/app/layout/search/search.component.html b/apps/desktop/src/app/layout/search/search.component.html
index 515385c2076..b5bcd264897 100644
--- a/apps/desktop/src/app/layout/search/search.component.html
+++ b/apps/desktop/src/app/layout/search/search.component.html
@@ -7,5 +7,5 @@
     [formControl]="searchText"
     appAutofocus
   />
-  <i class="bwi bwi-search" aria-hidden="true"></i>
+  <bit-icon name="bwi-search"></bit-icon>
 </div>
diff --git a/apps/desktop/src/app/shared/shared.module.ts b/apps/desktop/src/app/shared/shared.module.ts
index 6eed4a197f3..85b3b800e83 100644
--- a/apps/desktop/src/app/shared/shared.module.ts
+++ b/apps/desktop/src/app/shared/shared.module.ts
@@ -7,6 +7,7 @@ import { NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { IconModule } from "@bitwarden/components";
 
 import { AvatarComponent } from "../components/avatar.component";
 import { ServicesModule } from "../services/services.module";
@@ -17,6 +18,7 @@ import { ServicesModule } from "../services/services.module";
     A11yModule,
     DragDropModule,
     FormsModule,
+    IconModule,
     JslibModule,
     OverlayModule,
     ReactiveFormsModule,
@@ -30,6 +32,7 @@ import { ServicesModule } from "../services/services.module";
     DatePipe,
     DragDropModule,
     FormsModule,
+    IconModule,
     JslibModule,
     OverlayModule,
     ReactiveFormsModule,
diff --git a/apps/desktop/src/index.html b/apps/desktop/src/index.html
index 37eb64adf35..044d7eb0e2f 100644
--- a/apps/desktop/src/index.html
+++ b/apps/desktop/src/index.html
@@ -13,6 +13,7 @@
   </head>
   <body>
     <app-root>
+      <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
       <div id="loading"><i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i></div>
     </app-root>
   </body>
diff --git a/apps/web/src/app/components/environment-selector/environment-selector.component.html b/apps/web/src/app/components/environment-selector/environment-selector.component.html
index 9862f62c2e2..44039bfe605 100644
--- a/apps/web/src/app/components/environment-selector/environment-selector.component.html
+++ b/apps/web/src/app/components/environment-selector/environment-selector.component.html
@@ -7,11 +7,11 @@
         region == currentRegion ? 'javascript:void(0)' : region.urls.webVault + routeAndParams
       "
     >
-      <i
-        class="bwi bwi-fw bwi-sm bwi-check"
-        aria-hidden="true"
+      <bit-icon
+        name="bwi-check"
+        class="bwi-fw bwi-sm"
         [style.visibility]="region == currentRegion ? 'visible' : 'hidden'"
-      ></i>
+      ></bit-icon>
       {{ region.domain }}
     </a>
   </bit-menu>
@@ -19,7 +19,7 @@
     {{ "accessing" | i18n }}:
     <a [routerLink]="[]" [bitMenuTriggerFor]="environmentOptions">
       <b class="tw-text-primary-600 tw-font-medium">{{ currentRegion?.domain }}</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>
     </a>
   </div>
 </div>
diff --git a/apps/web/src/app/layouts/header/web-header.component.html b/apps/web/src/app/layouts/header/web-header.component.html
index 995169e3dc1..9288c96237e 100644
--- a/apps/web/src/app/layouts/header/web-header.component.html
+++ b/apps/web/src/app/layouts/header/web-header.component.html
@@ -60,11 +60,11 @@
               <bit-menu-divider></bit-menu-divider>
 
               <a bitMenuItem routerLink="/settings/account">
-                <i class="bwi bwi-fw bwi-user" aria-hidden="true"></i>
+                <bit-icon name="bwi-user" class="bwi-fw"></bit-icon>
                 {{ "accountSettings" | i18n }}
               </a>
               <a bitMenuItem href="https://bitwarden.com/help/" target="_blank" rel="noreferrer">
-                <i class="bwi bwi-fw bwi-question-circle" aria-hidden="true"></i>
+                <bit-icon name="bwi-question-circle" class="bwi-fw"></bit-icon>
                 {{ "getHelp" | i18n }}
               </a>
               <a
@@ -73,18 +73,18 @@
                 target="_blank"
                 rel="noreferrer"
               >
-                <i class="bwi bwi-fw bwi-download" aria-hidden="true"></i>
+                <bit-icon name="bwi-download" class="bwi-fw"></bit-icon>
                 {{ "getApps" | i18n }}
               </a>
 
               <bit-menu-divider></bit-menu-divider>
 
               <button *ngIf="canLock$ | async" bitMenuItem type="button" (click)="lock()">
-                <i class="bwi bwi-fw bwi-lock" aria-hidden="true"></i>
+                <bit-icon name="bwi-lock" class="bwi-fw"></bit-icon>
                 {{ "lockNow" | i18n }}
               </button>
               <button bitMenuItem type="button" (click)="logout()">
-                <i class="bwi bwi-fw bwi-sign-out" aria-hidden="true"></i>
+                <bit-icon name="bwi-sign-out" class="bwi-fw"></bit-icon>
                 {{ "logOut" | i18n }}
               </button>
             </div>
diff --git a/apps/web/src/app/layouts/org-switcher/org-switcher.component.html b/apps/web/src/app/layouts/org-switcher/org-switcher.component.html
index a9acddeb0b8..b8f7c5ab0c0 100644
--- a/apps/web/src/app/layouts/org-switcher/org-switcher.component.html
+++ b/apps/web/src/app/layouts/org-switcher/org-switcher.component.html
@@ -7,13 +7,14 @@
   [routerLinkActiveOptions]="{ exact: true }"
   [(open)]="open"
 >
-  <i
+  <bit-icon
     slot="end"
     *ngIf="!activeOrganization.enabled"
-    class="bwi bwi-exclamation-triangle tw-my-auto"
-    [attr.aria-label]="'organizationIsDisabled' | i18n"
+    name="bwi-exclamation-triangle"
+    class="tw-my-auto"
+    [ariaLabel]="'organizationIsDisabled' | i18n"
     appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-  ></i>
+  ></bit-icon>
   <ng-container *ngIf="organizations$ | async as organizations">
     <bit-nav-item
       *ngFor="let org of organizations"
@@ -23,13 +24,13 @@
       (mainContentClicked)="toggle()"
       [routerLinkActiveOptions]="{ exact: true }"
     >
-      <i
+      <bit-icon
         slot="end"
         *ngIf="org.enabled == false"
-        class="bwi bwi-exclamation-triangle"
-        [attr.aria-label]="'organizationIsDisabled' | i18n"
+        name="bwi-exclamation-triangle"
+        [ariaLabel]="'organizationIsDisabled' | i18n"
         appA11yTitle="{{ 'organizationIsDisabled' | i18n }}"
-      ></i>
+      ></bit-icon>
     </bit-nav-item>
   </ng-container>
   <bit-nav-item
diff --git a/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html b/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
index bc7d9a64179..7e3c97f4838 100644
--- a/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
+++ b/apps/web/src/app/shared/components/account-fingerprint/account-fingerprint.component.html
@@ -8,7 +8,7 @@
       rel="noreferrer"
       appA11yTitle="{{ 'learnMoreAboutYourAccountFingerprintPhrase' | i18n }}"
     >
-      <i class="bwi bwi-question-circle" aria-hidden="true"></i
+      <bit-icon name="bwi-question-circle"></bit-icon
     ></a>
     <br />
     <code class="tw-text-code">{{ fingerprint }}</code>
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html
index f0c0b01e06e..e52771a282b 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html
+++ b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.html
@@ -1,10 +1,14 @@
 <ng-template #content>
-  <i class="bwi bwi-fw !tw-mr-4" [ngClass]="completed ? 'bwi-check tw-text-success' : icon"></i
+  <bit-icon
+    [name]="completed ? 'bwi-check' : icon"
+    class="bwi-fw !tw-mr-4"
+    [ngClass]="completed ? 'tw-text-success' : ''"
+  ></bit-icon
   ><span
     [ngClass]="{
       'tw-text-primary-700 tw-line-through tw-decoration-primary-700 tw-opacity-50': completed,
     }"
-    >{{ title }}<i class="bwi bwi-angle-right tw-ml-1"></i
+    >{{ title }}<bit-icon name="bwi-angle-right" class="tw-ml-1"></bit-icon
   ></span>
 </ng-template>
 
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts
index 277a4d2d26e..47a618a1269 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts
+++ b/apps/web/src/app/shared/components/onboarding/onboarding-task.component.ts
@@ -2,6 +2,8 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 
+import { BitwardenIcon } from "@bitwarden/components";
+
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
@@ -21,7 +23,7 @@ export class OnboardingTaskComponent {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input()
-  icon = "bwi-info-circle";
+  icon: BitwardenIcon = "bwi-info-circle";
 
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.component.html b/apps/web/src/app/shared/components/onboarding/onboarding.component.html
index 2433ec51fcc..ca98ceb8fbf 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.component.html
+++ b/apps/web/src/app/shared/components/onboarding/onboarding.component.html
@@ -6,11 +6,7 @@
       <span *ngIf="tasks.length > 0; else spinner">
         {{ "complete" | i18n: amountCompleted : tasks.length }}
       </span>
-      <i
-        class="bwi tw-my-auto"
-        [ngClass]="open ? 'bwi-angle-down' : 'bwi-angle-up'"
-        aria-hidden="true"
-      ></i>
+      <bit-icon [name]="open ? 'bwi-angle-down' : 'bwi-angle-up'" class="tw-my-auto"></bit-icon>
     </div>
   </summary>
   <ul class="tw-mb-0 tw-ml-6 tw-flex tw-flex-col tw-gap-4">
@@ -24,5 +20,5 @@
 </details>
 
 <ng-template #spinner>
-  <i class="bwi bwi-spinner bwi-spin"></i>
+  <bit-icon name="bwi-spinner" class="bwi-spin"></bit-icon>
 </ng-template>
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
index 6873700e2bc..26c951fb11f 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
@@ -4,7 +4,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 import { delay, of, startWith } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { LinkModule, SvgModule, ProgressModule } from "@bitwarden/components";
+import { LinkModule, SvgModule, ProgressModule, IconModule } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../core/tests";
 
@@ -16,7 +16,7 @@ export default {
   component: OnboardingComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, RouterModule, LinkModule, SvgModule, ProgressModule],
+      imports: [JslibModule, RouterModule, LinkModule, IconModule, SvgModule, ProgressModule],
       declarations: [OnboardingTaskComponent],
     }),
     applicationConfig({
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index b83555fd84e..729238e0b0d 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -18,6 +18,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
+  IconModule,
   SvgModule,
   LinkModule,
   MenuModule,
@@ -63,6 +64,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     SvgModule,
     LinkModule,
     MenuModule,
@@ -99,6 +101,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
+    IconModule,
     SvgModule,
     LinkModule,
     MenuModule,
diff --git a/apps/web/src/connectors/platform/proxy-cookie-redirect.html b/apps/web/src/connectors/platform/proxy-cookie-redirect.html
index 1daa6d2e412..1918fcd771c 100644
--- a/apps/web/src/connectors/platform/proxy-cookie-redirect.html
+++ b/apps/web/src/connectors/platform/proxy-cookie-redirect.html
@@ -18,6 +18,7 @@
     <div class="tw-p-8 tw-flex">
       <img class="new-logo-themed" alt="Bitwarden" />
       <div class="spinner-container tw-justify-center">
+        <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
         <i
           class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
           title="Loading"
diff --git a/apps/web/src/index.html b/apps/web/src/index.html
index 5e56df553fc..712ed699a5e 100644
--- a/apps/web/src/index.html
+++ b/apps/web/src/index.html
@@ -21,6 +21,7 @@
           <img class="new-logo-themed !tw-w-[200px]" alt="Bitwarden" />
         </div>
         <div class="spinner-container tw-justify-center">
+          <!-- eslint-disable-next-line @bitwarden/components/no-bwi-class-usage -->
           <i
             class="bwi bwi-spinner bwi-spin bwi-3x tw-text-muted"
             title="Loading"