From 15b72c6b7c00bc285a7cd8a734451641926d4c86 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Mon, 26 Jan 2026 18:48:09 -0500
Subject: [PATCH] find and replace current usage

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 .../popup/phishing-warning.component.ts       |  4 ++--
 .../popup-tab-navigation.component.html       |  4 ++--
 .../layout/popup-tab-navigation.component.ts  |  4 ++--
 ...tension-anon-layout-wrapper.component.html |  2 +-
 ...extension-anon-layout-wrapper.component.ts |  4 ++--
 .../send-created/send-created.component.html  |  2 +-
 .../send-created.component.spec.ts            |  4 ++--
 .../send-created/send-created.component.ts    |  4 ++--
 .../intro-carousel.component.html             |  8 +++----
 .../intro-carousel.component.ts               |  4 ++--
 .../credentials/fido2-create.component.html   |  4 ++--
 .../credentials/fido2-create.component.ts     |  4 ++--
 .../fido2-excluded-ciphers.component.html     |  4 ++--
 .../fido2-excluded-ciphers.component.ts       |  4 ++--
 .../credentials/fido2-vault.component.html    |  2 +-
 .../credentials/fido2-vault.component.ts      |  4 ++--
 .../layouts/organization-layout.component.ts  |  4 ++--
 .../auto-confirm-policy.component.html        |  2 +-
 .../accept-family-sponsorship.component.html  |  4 ++--
 .../accept-family-sponsorship.component.ts    |  4 ++--
 ...wo-factor-setup-authenticator.component.ts |  4 ++--
 .../two-factor-setup-duo.component.ts         |  4 ++--
 .../two-factor-setup-email.component.ts       |  4 ++--
 .../create-credential-dialog.component.html   |  4 ++--
 ...nization-subscription-cloud.component.html |  2 +-
 .../subscription-hidden.component.ts          |  2 +-
 .../shared/sm-subscribe.component.html        |  2 +-
 .../report-card/report-card.component.html    |  2 +-
 .../shared/report-card/report-card.stories.ts |  4 ++--
 .../shared/report-list/report-list.stories.ts |  4 ++--
 .../app/layouts/header/web-header.stories.ts  |  4 ++--
 .../src/app/layouts/user-layout.component.ts  |  4 ++--
 .../onboarding/onboarding.stories.ts          |  4 ++--
 apps/web/src/app/shared/shared.module.ts      |  6 ++---
 .../send-success-drawer-dialog.component.html |  2 +-
 .../browser-extension-prompt.component.ts     |  4 ++--
 .../manually-open-extension.component.html    |  4 ++--
 .../manually-open-extension.component.ts      |  4 ++--
 .../setup-extension.component.html            |  2 +-
 .../setup-extension.component.ts              |  4 ++--
 .../manage/accept-provider.component.html     |  4 ++--
 .../providers/providers-layout.component.ts   |  4 ++--
 .../setup/setup-provider.component.html       |  4 ++--
 .../setup/setup-business-unit.component.html  |  4 ++--
 .../empty-state-card.component.html           |  8 +++----
 .../empty-state-card.component.ts             |  4 ++--
 .../components/two-factor-icon.component.html |  2 +-
 .../login-via-webauthn.component.ts           |  4 ++--
 libs/angular/src/jslib.module.ts              |  6 ++---
 .../registration-link-expired.component.ts    |  4 ++--
 .../registration-start.component.ts           |  4 ++--
 .../two-factor-options.component.html         | 24 +++++++++----------
 .../two-factor-options.component.ts           |  4 ++--
 ...ser-verification-form-input.component.html |  2 +-
 .../user-verification-form-input.component.ts |  4 ++--
 .../src/anon-layout/anon-layout.component.ts  |  4 ++--
 .../components/src/callout/callout.stories.ts |  4 ++--
 libs/components/src/header/header.stories.ts  |  4 ++--
 .../landing-header.component.html             |  2 +-
 .../landing-header.component.ts               |  4 ++--
 .../landing-hero.component.html               |  2 +-
 .../landing-layout/landing-hero.component.ts  |  4 ++--
 .../landing-layout.component.html             |  4 ++--
 .../landing-layout.component.ts               |  4 ++--
 .../src/navigation/nav-logo.component.html    |  2 +-
 .../src/no-items/no-items.component.html      |  2 +-
 .../kitchen-sink-shared.module.ts             |  6 ++---
 .../pricing-card.component.spec.ts            | 10 ++------
 .../pricing-card/pricing-card.component.ts    |  4 ++--
 .../carousel-button.component.html            |  2 +-
 .../carousel-button.component.ts              |  4 ++--
 71 files changed, 142 insertions(+), 148 deletions(-)

diff --git a/apps/browser/src/dirt/phishing-detection/popup/phishing-warning.component.ts b/apps/browser/src/dirt/phishing-detection/popup/phishing-warning.component.ts
index d8e9895237c..419de04d9f4 100644
--- a/apps/browser/src/dirt/phishing-detection/popup/phishing-warning.component.ts
+++ b/apps/browser/src/dirt/phishing-detection/popup/phishing-warning.component.ts
@@ -10,7 +10,7 @@ import {
   ButtonModule,
   CheckboxModule,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   IconTileComponent,
   LinkModule,
   CalloutComponent,
@@ -31,7 +31,7 @@ import {
   templateUrl: "phishing-warning.component.html",
   imports: [
     CommonModule,
-    IconModule,
+    SvgModule,
     JslibModule,
     LinkModule,
     FormFieldModule,
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
index bce2b5033ae..f18214ccdfb 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html
@@ -18,11 +18,11 @@
             type="button"
             role="link"
           >
-            <bit-icon
+            <bit-svg
               [icon]="rla.isActive ? button.iconActive : button.icon"
               aria-hidden="true"
               class="tw-leading-3"
-            ></bit-icon>
+            ></bit-svg>
             <span class="tw-text-sm tw-truncate tw-max-w-full">
               {{ button.label | i18n }}
             </span>
diff --git a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
index 26138d57954..6fef9efacd0 100644
--- a/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
+++ b/apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts
@@ -5,7 +5,7 @@ import { RouterModule } from "@angular/router";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { Icon } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { IconModule, LinkModule } from "@bitwarden/components";
+import { SvgModule, LinkModule } from "@bitwarden/components";
 
 export type NavButton = {
   label: string;
@@ -20,7 +20,7 @@ export type NavButton = {
 @Component({
   selector: "popup-tab-navigation",
   templateUrl: "popup-tab-navigation.component.html",
-  imports: [CommonModule, LinkModule, RouterModule, JslibModule, IconModule],
+  imports: [CommonModule, LinkModule, RouterModule, JslibModule, SvgModule],
   host: {
     class: "tw-block tw-size-full tw-flex tw-flex-col",
   },
diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
index 484f9680519..84abd02deb7 100644
--- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
+++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html
@@ -6,7 +6,7 @@
     [pageTitle]="''"
   >
     <div class="tw-w-32">
-      <bit-icon *ngIf="showLogo" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
+      <bit-svg *ngIf="showLogo" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
     </div>
 
     <ng-container slot="end">
diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
index 3a50f03e982..7ce9ef41817 100644
--- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
+++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
@@ -8,7 +8,7 @@ import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
 import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
-  IconModule,
+  SvgModule,
   Translation,
   AnonLayoutComponent,
   AnonLayoutWrapperData,
@@ -38,7 +38,7 @@ export interface ExtensionAnonLayoutWrapperData extends AnonLayoutWrapperData {
     CommonModule,
     CurrentAccountComponent,
     I18nPipe,
-    IconModule,
+    SvgModule,
     PopOutComponent,
     PopupPageComponent,
     PopupHeaderComponent,
diff --git a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.html b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.html
index 828c1667c57..4e2db2a036f 100644
--- a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.html
+++ b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.html
@@ -14,7 +14,7 @@
     class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-center tw-items-center tw-gap-2 tw-h-full tw-px-5"
   >
     <div class="tw-size-[95px] tw-content-center">
-      <bit-icon [icon]="sendCreatedIcon"></bit-icon>
+      <bit-svg [icon]="sendCreatedIcon"></bit-svg>
     </div>
     <h3 tabindex="0" appAutofocus class="tw-font-medium">
       {{ "createdSendSuccessfully" | i18n }}
diff --git a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
index 521d72bba0c..a19897b6bbc 100644
--- a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
@@ -14,7 +14,7 @@ import { SelfHostedEnvironment } from "@bitwarden/common/platform/services/defau
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 import { SendType } from "@bitwarden/common/tools/send/types/send-type";
-import { ButtonModule, I18nMockService, IconModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, I18nMockService, SvgModule, ToastService } from "@bitwarden/components";
 
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
@@ -76,7 +76,7 @@ describe("SendCreatedComponent", () => {
         RouterTestingModule,
         JslibModule,
         ButtonModule,
-        IconModule,
+        SvgModule,
         PopOutComponent,
         PopupHeaderComponent,
         PopupPageComponent,
diff --git a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
index e9109ec6c21..e3717075e24 100644
--- a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
@@ -13,7 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
-import { ButtonModule, IconModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, SvgModule, ToastService } from "@bitwarden/components";
 
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
@@ -34,7 +34,7 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
     PopupPageComponent,
     RouterModule,
     PopupFooterComponent,
-    IconModule,
+    SvgModule,
   ],
 })
 export class SendCreatedComponent {
diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
index 5f19092d6b0..614e0da3426 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
@@ -2,7 +2,7 @@
   <vault-carousel-slide [label]="'securityPrioritized' | i18n" [disablePadding]="true">
     <div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
       <div class="tw-size-32 tw-content-center tw-my-4">
-        <bit-icon [icon]="itemTypes"></bit-icon>
+        <bit-svg [icon]="itemTypes"></bit-svg>
       </div>
       <h2 bitTypography="h2" class="tw-text-center">{{ "securityPrioritized" | i18n }}</h2>
       <p bitTypography="body1" class="tw-text-center">{{ "securityPrioritizedBody" | i18n }}</p>
@@ -11,7 +11,7 @@
   <vault-carousel-slide [label]="'quickLogin' | i18n" [disablePadding]="true">
     <div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
       <div class="tw-size-32 tw-content-center tw-my-4">
-        <bit-icon [icon]="loginCards"></bit-icon>
+        <bit-svg [icon]="loginCards"></bit-svg>
       </div>
       <h2 bitTypography="h2" class="tw-text-center">{{ "quickLogin" | i18n }}</h2>
       <p bitTypography="body1" class="tw-text-center">{{ "quickLoginBody" | i18n }}</p>
@@ -20,7 +20,7 @@
   <vault-carousel-slide [label]="'secureUser' | i18n" [disablePadding]="true">
     <div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
       <div class="tw-size-32 tw-content-center tw-my-4">
-        <bit-icon [icon]="noCredentials"></bit-icon>
+        <bit-svg [icon]="noCredentials"></bit-svg>
       </div>
       <h2 bitTypography="h2" class="tw-text-center">{{ "secureUser" | i18n }}</h2>
       <p bitTypography="body1" class="tw-text-center">{{ "secureUserBody" | i18n }}</p>
@@ -29,7 +29,7 @@
   <vault-carousel-slide [label]="'secureDevices' | i18n" [disablePadding]="true">
     <div class="tw-flex tw-flex-col tw-items-center tw-justify-around">
       <div class="tw-size-32 tw-content-center tw-my-4">
-        <bit-icon [icon]="secureDevices"></bit-icon>
+        <bit-svg [icon]="secureDevices"></bit-svg>
       </div>
       <h2 bitTypography="h2" class="tw-text-center">{{ "secureDevices" | i18n }}</h2>
       <p bitTypography="body1" class="tw-text-center">{{ "secureDevicesBody" | i18n }}</p>
diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
index 48c8f5682bc..5ad44c2f545 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
@@ -3,7 +3,7 @@ import { Router } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ItemTypes, LoginCards, NoCredentialsIcon, DevicesIcon } from "@bitwarden/assets/svg";
-import { ButtonModule, DialogModule, IconModule, TypographyModule } from "@bitwarden/components";
+import { ButtonModule, DialogModule, SvgModule, TypographyModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 import { VaultCarouselModule } from "@bitwarden/vault";
 
@@ -17,7 +17,7 @@ import { IntroCarouselService } from "../../../services/intro-carousel.service";
   imports: [
     VaultCarouselModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     DialogModule,
     TypographyModule,
     JslibModule,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
index 67fc76aa317..ab73e868c3d 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
@@ -5,7 +5,7 @@
   >
     <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
-        <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
+        <bit-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
 
         <h2 bitTypography="h4" class="tw-font-semibold tw-text-lg">
           {{ "savePasskeyQuestion" | i18n }}
@@ -28,7 +28,7 @@
   <bit-section class="tw-bg-background-alt tw-p-4 tw-flex tw-flex-col">
     <div *ngIf="(ciphers$ | async)?.length === 0; else hasCiphers">
       <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
-        <bit-icon [icon]="Icons.NoResults" class="tw-text-main"></bit-icon>
+        <bit-svg [icon]="Icons.NoResults" class="tw-text-main"></bit-svg>
         <div class="tw-flex tw-flex-col tw-gap-2">
           {{ "noMatchingLoginsForSite" | i18n }}
         </div>
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
index 67237bedccd..d18fb6752e3 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
@@ -16,7 +16,7 @@ import {
   BadgeModule,
   ButtonModule,
   DialogModule,
-  IconModule,
+  SvgModule,
   ItemModule,
   SectionComponent,
   TableModule,
@@ -42,7 +42,7 @@ import {
     BitIconButtonComponent,
     TableModule,
     JslibModule,
-    IconModule,
+    SvgModule,
     ButtonModule,
     DialogModule,
     SectionComponent,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
index 792934deedc..3b17219486d 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
@@ -5,7 +5,7 @@
   >
     <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
-        <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
+        <bit-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
 
         <h2 bitTypography="h4" class="tw-font-semibold tw-text-lg">
           {{ "savePasskeyQuestion" | i18n }}
@@ -30,7 +30,7 @@
       class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
     >
       <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
-        <bit-icon [icon]="Icons.NoResults" class="tw-text-main"></bit-icon>
+        <bit-svg [icon]="Icons.NoResults" class="tw-text-main"></bit-svg>
         <div class="tw-flex tw-flex-col tw-gap-2">
           <b>{{ "passkeyAlreadyExists" | i18n }}</b>
           {{ "applicationDoesNotSupportDuplicates" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
index 049771c2252..274956be0eb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
@@ -9,7 +9,7 @@ import {
   BadgeModule,
   ButtonModule,
   DialogModule,
-  IconModule,
+  SvgModule,
   ItemModule,
   SectionComponent,
   TableModule,
@@ -32,7 +32,7 @@ import {
     BitIconButtonComponent,
     TableModule,
     JslibModule,
-    IconModule,
+    SvgModule,
     ButtonModule,
     DialogModule,
     SectionComponent,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
index ed04993d09f..940f6d00ef7 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
@@ -5,7 +5,7 @@
   >
     <bit-section-header class="tw-app-region-drag tw-bg-background">
       <div class="tw-flex tw-items-center">
-        <bit-icon [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-icon>
+        <bit-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
 
         <h2 bitTypography="h4" class="tw-font-semibold tw-text-lg">{{ "passkeyLogin" | i18n }}</h2>
       </div>
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
index 897e825c53e..635ba3972cb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
@@ -24,7 +24,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
-  IconModule,
+  SvgModule,
   ItemModule,
   SectionComponent,
   TableModule,
@@ -48,7 +48,7 @@ import {
     BitIconButtonComponent,
     TableModule,
     JslibModule,
-    IconModule,
+    SvgModule,
     ButtonModule,
     DialogModule,
     SectionComponent,
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index b00e4d9840d..2d1fde10856 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
@@ -26,7 +26,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { getById } from "@bitwarden/common/platform/misc";
-import { BannerModule, IconModule } from "@bitwarden/components";
+import { BannerModule, SvgModule } from "@bitwarden/components";
 import { OrganizationWarningsModule } from "@bitwarden/web-vault/app/billing/organizations/warnings/organization-warnings.module";
 import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/organizations/warnings/services";
 import { NonIndividualSubscriber } from "@bitwarden/web-vault/app/billing/types";
@@ -47,7 +47,7 @@ import { WebLayoutModule } from "../../../layouts/web-layout.module";
     RouterModule,
     JslibModule,
     WebLayoutModule,
-    IconModule,
+    SvgModule,
     OrgSwitcherComponent,
     BannerModule,
     TaxIdWarningComponent,
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
index 54f166b662e..16725d71200 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
@@ -44,7 +44,7 @@
 
 <ng-template #step1>
   <div class="tw-flex tw-justify-center tw-mb-6">
-    <bit-icon class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-icon>
+    <bit-svg class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-svg>
   </div>
   <ol>
     <li>1. {{ "autoConfirmExtension1" | i18n }}</li>
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index ca1264829b9..52927559b66 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -1,7 +1,7 @@
 <div class="tw-mt-10 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
-    </bit-icon>
+    <bit-svg class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
+    </bit-svg>
     <div class="tw-flex tw-justify-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.ts b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.ts
index c34073b2a04..2a267d0d570 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.ts
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.ts
@@ -8,7 +8,7 @@ import { BitwardenLogo } from "@bitwarden/assets/svg";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { OrganizationSponsorshipResponse } from "@bitwarden/common/admin-console/models/response/organization-sponsorship.response";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { IconModule, ToastService } from "@bitwarden/components";
+import { SvgModule, ToastService } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { BaseAcceptComponent } from "../../../common/base.accept.component";
@@ -22,7 +22,7 @@ import { BaseAcceptComponent } from "../../../common/base.accept.component";
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "accept-family-sponsorship.component.html",
-  imports: [CommonModule, I18nPipe, IconModule],
+  imports: [CommonModule, I18nPipe, SvgModule],
 })
 export class AcceptFamilySponsorshipComponent extends BaseAcceptComponent {
   protected logo = BitwardenLogo;
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 d93a5947445..d27e8ffecce 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,7 +29,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   LinkModule,
   ToastService,
@@ -68,7 +68,7 @@ declare global {
     TypographyModule,
     CalloutModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     AsyncActionsModule,
     JslibModule,
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts
index b4c8ece92a7..2bb7fd4f368 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts
@@ -21,7 +21,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   ToastService,
   TypographyModule,
@@ -42,7 +42,7 @@ import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-bas
     InputModule,
     TypographyModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     ReactiveFormsModule,
     AsyncActionsModule,
diff --git a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts
index 1402d6b8969..86b4e2ad939 100644
--- a/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts
+++ b/apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts
@@ -24,7 +24,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   ToastService,
   TypographyModule,
@@ -45,7 +45,7 @@ import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-bas
     CommonModule,
     DialogModule,
     FormFieldModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     InputModule,
     ReactiveFormsModule,
diff --git a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
index 305bb8e7f9c..7842a68aa5a 100644
--- a/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
+++ b/apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html
@@ -16,7 +16,7 @@
 
       <div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
         <div class="tw-size-24 tw-content-center tw-mb-6">
-          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
+          <bit-svg [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-svg>
         </div>
         <h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
         <p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
@@ -27,7 +27,7 @@
         class="tw-flex tw-flex-col tw-items-center"
       >
         <div class="tw-size-24 tw-content-center tw-mb-6">
-          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
+          <bit-svg [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-svg>
         </div>
         <h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
         <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 4858deabec6..80fbbacc9e3 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -242,7 +242,7 @@
     <ng-template #organizationIsNotManagedByConsolidatedBillingMSP>
       <div class="tw-flex tw-flex-col tw-items-center tw-text-info">
         <div class="tw-size-56 tw-content-center">
-          <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+          <bit-svg [icon]="gearIcon" aria-hidden="true"></bit-svg>
         </div>
         <p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
         <p>{{ "billingContactProviderForAssistance" | i18n }}</p>
diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
index ef6e2dd0495..b359a8ef68d 100644
--- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
+++ b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
@@ -10,7 +10,7 @@ import { GearIcon } from "@bitwarden/assets/svg";
   selector: "app-org-subscription-hidden",
   template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
     <div class="tw-size-56 tw-content-center">
-      <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+      <bit-svg [icon]="gearIcon" aria-hidden="true"></bit-svg>
     </div>
     <p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: providerName }}</p>
     <p>{{ "billingContactProviderForAssistance" | i18n }}</p>
diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html
index 6cdaeb9476d..09f78e8d8f3 100644
--- a/apps/web/src/app/billing/shared/sm-subscribe.component.html
+++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html
@@ -2,7 +2,7 @@
   <h3 bitTypography="h3">{{ "moreFromBitwarden" | i18n }}</h3>
   <div class="tw-rounded-t tw-bg-background-alt3 tw-p-5">
     <div class="tw-w-72">
-      <bit-icon [icon]="logo"></bit-icon>
+      <bit-svg [icon]="logo"></bit-svg>
     </div>
   </div>
   <div
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
index f0318028e60..ceb60c97d2c 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html
@@ -8,7 +8,7 @@
       [ngClass]="{ 'tw-grayscale': disabled }"
     >
       <div class="tw-m-auto tw-size-20 tw-content-center">
-        <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
+        <bit-svg [icon]="icon" aria-hidden="true"></bit-svg>
       </div>
     </div>
     <bit-card-content [ngClass]="{ 'tw-grayscale': disabled }">
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index 93ea79c8418..4f442dc9380 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
@@ -14,7 +14,7 @@ import {
   BaseCardComponent,
   CardContentComponent,
   I18nMockService,
-  IconModule,
+  SvgModule,
 } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
@@ -31,7 +31,7 @@ export default {
         JslibModule,
         BadgeModule,
         CardContentComponent,
-        IconModule,
+        SvgModule,
         RouterTestingModule,
         PremiumBadgeComponent,
         BaseCardComponent,
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 5a95e332816..9686644bd74 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
@@ -12,7 +12,7 @@ import {
   BadgeModule,
   BaseCardComponent,
   CardContentComponent,
-  IconModule,
+  SvgModule,
 } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
@@ -31,7 +31,7 @@ export default {
         JslibModule,
         BadgeModule,
         RouterTestingModule,
-        IconModule,
+        SvgModule,
         PremiumBadgeComponent,
         CardContentComponent,
         BaseCardComponent,
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index 88c98f01e6c..3b3b28b8e45 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/apps/web/src/app/layouts/header/web-header.stories.ts
@@ -24,7 +24,7 @@ import {
   BreadcrumbsModule,
   ButtonModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   InputModule,
   MenuModule,
   NavigationModule,
@@ -94,7 +94,7 @@ export default {
         BreadcrumbsModule,
         ButtonModule,
         IconButtonModule,
-        IconModule,
+        SvgModule,
         InputModule,
         MenuModule,
         TabsModule,
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index 90207f59ad4..33bce661c65 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/apps/web/src/app/layouts/user-layout.component.ts
@@ -16,7 +16,7 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 
 import { BillingFreeFamiliesNavItemComponent } from "../billing/shared/billing-free-families-nav-item.component";
 
@@ -32,7 +32,7 @@ import { WebLayoutModule } from "./web-layout.module";
     RouterModule,
     JslibModule,
     WebLayoutModule,
-    IconModule,
+    SvgModule,
     BillingFreeFamiliesNavItemComponent,
   ],
 })
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 6d051a91f7e..6873700e2bc 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, IconModule, ProgressModule } from "@bitwarden/components";
+import { LinkModule, SvgModule, ProgressModule } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../core/tests";
 
@@ -16,7 +16,7 @@ export default {
   component: OnboardingComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, RouterModule, LinkModule, IconModule, ProgressModule],
+      imports: [JslibModule, RouterModule, LinkModule, 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 6012e4867e1..b83555fd84e 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -18,7 +18,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   LinkModule,
   MenuModule,
   MultiSelectModule,
@@ -63,7 +63,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     MenuModule,
     MultiSelectModule,
@@ -99,7 +99,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     MenuModule,
     MultiSelectModule,
diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
index a484f210f62..ac1b347d27f 100644
--- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
+++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
@@ -8,7 +8,7 @@
     >
       <div class="tw-mb-6 tw-mt-8">
         <div class="tw-size-[95px] tw-content-center">
-          <bit-icon [icon]="activeSendIcon"></bit-icon>
+          <bit-svg [icon]="activeSendIcon"></bit-svg>
         </div>
       </div>
 
diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts
index 54d62b8414a..51603724c57 100644
--- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts
+++ b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts
@@ -12,7 +12,7 @@ import { ActivatedRoute } from "@angular/router";
 import { map, Observable, of, tap } from "rxjs";
 
 import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
-import { ButtonComponent, IconModule } from "@bitwarden/components";
+import { ButtonComponent, SvgModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import {
@@ -24,7 +24,7 @@ import { ManuallyOpenExtensionComponent } from "../manually-open-extension/manua
 @Component({
   selector: "vault-browser-extension-prompt",
   templateUrl: "./browser-extension-prompt.component.html",
-  imports: [CommonModule, I18nPipe, ButtonComponent, IconModule, ManuallyOpenExtensionComponent],
+  imports: [CommonModule, I18nPipe, ButtonComponent, SvgModule, ManuallyOpenExtensionComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
index d15cdaa712b..5197ffba34e 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
+++ b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
@@ -1,8 +1,8 @@
 <p bitTypography="body1" class="tw-mb-0">
   {{ "openExtensionFromToolbarPart1" | i18n }}
-  <bit-icon
+  <bit-svg
     [icon]="BitwardenIcon"
     class="!tw-inline-block [&>svg]:tw-align-baseline [&>svg]:-tw-mb-[0.25rem]"
-  ></bit-icon>
+  ></bit-svg>
   {{ "openExtensionFromToolbarPart2" | i18n }}
 </p>
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
index 435e847f6e9..e4db0a55097 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
+++ b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
@@ -1,14 +1,14 @@
 import { Component, ChangeDetectionStrategy } from "@angular/core";
 
 import { BitwardenIcon } from "@bitwarden/assets/svg";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "vault-manually-open-extension",
   templateUrl: "./manually-open-extension.component.html",
-  imports: [I18nPipe, IconModule],
+  imports: [I18nPipe, SvgModule],
 })
 export class ManuallyOpenExtensionComponent {
   protected BitwardenIcon = BitwardenIcon;
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
index 8cfd394b854..4291d98c0d7 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -31,7 +31,7 @@
 
 <section *ngIf="showSuccessUI" class="tw-flex tw-flex-col tw-items-center">
   <div class="tw-size-[90px]">
-    <bit-icon [icon]="PartyIcon"></bit-icon>
+    <bit-svg [icon]="PartyIcon"></bit-svg>
   </div>
   <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4 tw-text-center">
     {{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
@@ -18,7 +18,7 @@ import {
   CenterPositionStrategy,
   DialogRef,
   DialogService,
-  IconModule,
+  SvgModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -52,7 +52,7 @@ type SetupExtensionState = UnionOfValues<typeof SetupExtensionState>;
     JslibModule,
     ButtonComponent,
     LinkModule,
-    IconModule,
+    SvgModule,
     RouterModule,
     AddExtensionVideosComponent,
     ManuallyOpenExtensionComponent,
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index bc209ead2bd..c0cf23057fc 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,10 +1,10 @@
 <div class="tw-mt-5 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon
+    <bit-svg
       class="tw-w-72 tw-block tw-mb-4"
       [icon]="logo"
       [ariaLabel]="'appLogoLabel' | i18n"
-    ></bit-icon>
+    ></bit-svg>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts
index 65f85616dfa..988dcba0ad6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts
@@ -13,7 +13,7 @@ import { ProviderType } from "@bitwarden/common/admin-console/enums";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 import { NonIndividualSubscriber } from "@bitwarden/web-vault/app/billing/types";
 import { TaxIdWarningComponent } from "@bitwarden/web-vault/app/billing/warnings/components";
 import { TaxIdWarningType } from "@bitwarden/web-vault/app/billing/warnings/types";
@@ -31,7 +31,7 @@ import { ProviderWarningsService } from "../../billing/providers/warnings/servic
     RouterModule,
     JslibModule,
     WebLayoutModule,
-    IconModule,
+    SvgModule,
     TaxIdWarningComponent,
   ],
 })
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index cb8eaea80c3..5880470e4a8 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,10 +1,10 @@
 <div class="tw-mt-12 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon
+    <bit-svg
       class="tw-w-72 tw-block tw-mb-4"
       [icon]="logo"
       [ariaLabel]="'appLogoLabel' | i18n"
-    ></bit-icon>
+    ></bit-svg>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html b/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
index 3d074906f2a..b95183cd7fd 100644
--- a/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
+++ b/bitwarden_license/bit-web/src/app/billing/providers/setup/setup-business-unit.component.html
@@ -1,10 +1,10 @@
 <div class="tw-mt-12 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon
+    <bit-svg
       class="tw-w-72 tw-block tw-mb-4"
       [icon]="bitwardenLogo"
       [ariaLabel]="'appLogoLabel' | i18n"
-    ></bit-icon>
+    ></bit-svg>
     <p class="tw-text-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.html b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.html
index 42600671e8c..6fffc26dffb 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.html
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.html
@@ -68,11 +68,11 @@
         <div
           class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
         >
-          <bit-icon
+          <bit-svg
             [icon]="icon()"
             class="tw-size-16 xl:tw-size-24 tw-text-muted"
             aria-hidden="true"
-          ></bit-icon>
+          ></bit-svg>
         </div>
       }
     </div>
@@ -94,11 +94,11 @@
         <div
           class="tw-size-full tw-flex tw-items-center tw-justify-center tw-bg-secondary-100 tw-rounded-lg"
         >
-          <bit-icon
+          <bit-svg
             [icon]="icon()"
             class="tw-size-12 sm:tw-size-16 tw-text-muted"
             aria-hidden="true"
-          ></bit-icon>
+          ></bit-svg>
         </div>
       }
     </div>
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..b9f48876227 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -2,12 +2,12 @@ import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
 
 import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
 
 @Component({
   selector: "empty-state-card",
   templateUrl: "./empty-state-card.component.html",
-  imports: [CommonModule, IconModule, ButtonModule],
+  imports: [CommonModule, SvgModule, ButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class EmptyStateCardComponent implements OnInit {
diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html
index 14558700757..cf28278bb53 100644
--- a/libs/angular/src/auth/components/two-factor-icon.component.html
+++ b/libs/angular/src/auth/components/two-factor-icon.component.html
@@ -1,6 +1,6 @@
 <ng-container>
   <div class="tw-size-[70px] tw-content-center" *ngIf="!!IconProviderMap[provider]">
-    <bit-icon [icon]="IconProviderMap[provider]"></bit-icon>
+    <bit-svg [icon]="IconProviderMap[provider]"></bit-svg>
   </div>
   <!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
   <img
diff --git a/libs/angular/src/auth/login-via-webauthn/login-via-webauthn.component.ts b/libs/angular/src/auth/login-via-webauthn/login-via-webauthn.component.ts
index b4d856309ed..c45c3a0562d 100644
--- a/libs/angular/src/auth/login-via-webauthn/login-via-webauthn.component.ts
+++ b/libs/angular/src/auth/login-via-webauthn/login-via-webauthn.component.ts
@@ -25,7 +25,7 @@ import { ValidationService } from "@bitwarden/common/platform/abstractions/valid
 import {
   AnonLayoutWrapperDataService,
   ButtonModule,
-  IconModule,
+  SvgModule,
   LinkModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -43,7 +43,7 @@ export type State = "assert" | "assertFailed";
     RouterModule,
     JslibModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     TypographyModule,
   ],
diff --git a/libs/angular/src/jslib.module.ts b/libs/angular/src/jslib.module.ts
index 8d222a4aaf9..c3670148d67 100644
--- a/libs/angular/src/jslib.module.ts
+++ b/libs/angular/src/jslib.module.ts
@@ -11,7 +11,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   LinkModule,
   MenuModule,
   RadioButtonModule,
@@ -73,9 +73,9 @@ import { IconComponent } from "./vault/components/icon.component";
     MenuModule,
     NoItemsModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
-    IconModule,
+    SvgModule,
     TextDragDirective,
     CopyClickDirective,
     A11yTitleDirective,
diff --git a/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts b/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts
index e7a3e99759c..87b5173a6a7 100644
--- a/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts
+++ b/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts
@@ -9,7 +9,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { TwoFactorTimeoutIcon } from "@bitwarden/assets/svg";
 // 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, IconModule } from "@bitwarden/components";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
 
 /**
  * RegistrationLinkExpiredComponentData
@@ -24,7 +24,7 @@ export interface RegistrationLinkExpiredComponentData {
 @Component({
   selector: "auth-registration-link-expired",
   templateUrl: "./registration-link-expired.component.html",
-  imports: [CommonModule, JslibModule, RouterModule, IconModule, ButtonModule],
+  imports: [CommonModule, JslibModule, RouterModule, SvgModule, ButtonModule],
 })
 export class RegistrationLinkExpiredComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
diff --git a/libs/auth/src/angular/registration/registration-start/registration-start.component.ts b/libs/auth/src/angular/registration/registration-start/registration-start.component.ts
index 714f6d49342..1161af836b4 100644
--- a/libs/auth/src/angular/registration/registration-start/registration-start.component.ts
+++ b/libs/auth/src/angular/registration/registration-start/registration-start.component.ts
@@ -20,7 +20,7 @@ import {
   ButtonModule,
   CheckboxModule,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -54,7 +54,7 @@ const DEFAULT_MARKETING_EMAILS_PREF_BY_REGION: Record<Region, boolean> = {
     CheckboxModule,
     ButtonModule,
     LinkModule,
-    IconModule,
+    SvgModule,
     RegistrationEnvSelectorComponent,
   ],
 })
diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html
index 277ba047add..49385319771 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html
@@ -11,30 +11,30 @@
             [ngSwitch]="provider.type"
             class="tw-w-16 md:tw-w-20 tw-mr-2 sm:tw-mr-4"
           >
-            <bit-icon
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.Authenticator"
               [icon]="Icons.TwoFactorAuthAuthenticatorIcon"
-            ></bit-icon>
-            <bit-icon
+            ></bit-svg>
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.Email"
               [icon]="Icons.TwoFactorAuthEmailIcon"
-            ></bit-icon>
-            <bit-icon
+            ></bit-svg>
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.Duo"
               [icon]="Icons.TwoFactorAuthDuoIcon"
-            ></bit-icon>
-            <bit-icon
+            ></bit-svg>
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.Yubikey"
               [icon]="Icons.TwoFactorAuthYubicoIcon"
-            ></bit-icon>
-            <bit-icon
+            ></bit-svg>
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.OrganizationDuo"
               [icon]="Icons.TwoFactorAuthDuoIcon"
-            ></bit-icon>
-            <bit-icon
+            ></bit-svg>
+            <bit-svg
               *ngSwitchCase="TwoFactorProviderType.WebAuthn"
               [icon]="Icons.TwoFactorAuthWebAuthnIcon"
-            ></bit-icon>
+            ></bit-svg>
           </div>
           {{ provider.name }}
           <ng-container slot="secondary"> {{ provider.description }} </ng-container>
diff --git a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts
index d8b2ab2508b..53ae509f182 100644
--- a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts
@@ -18,7 +18,7 @@ import {
   ButtonModule,
   DialogModule,
   DialogService,
-  IconModule,
+  SvgModule,
   ItemModule,
   TypographyModule,
 } from "@bitwarden/components";
@@ -39,7 +39,7 @@ export type TwoFactorOptionsDialogResult = {
     ButtonModule,
     TypographyModule,
     ItemModule,
-    IconModule,
+    SvgModule,
   ],
   providers: [],
 })
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 5699f3dd9a4..e2796dcf944 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
@@ -42,7 +42,7 @@
     >
       <div class="tw-flex tw-flex-col tw-items-center">
         <div class="tw-size-16 tw-content-center tw-mb-4">
-          <bit-icon [icon]="Icons.UserVerificationBiometricsIcon"></bit-icon>
+          <bit-svg [icon]="Icons.UserVerificationBiometricsIcon"></bit-svg>
         </div>
         <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
         <div *ngIf="!biometricsVerificationFailed">
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 296359c92ff..af73cc3de99 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
@@ -28,7 +28,7 @@ import {
   CalloutModule,
   FormFieldModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -64,7 +64,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
     FormFieldModule,
     AsyncActionsModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     ButtonModule,
     CalloutModule,
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..521c146da94 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -16,10 +16,10 @@ import { ClientType } from "@bitwarden/common/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-import { IconModule } from "../icon";
 import { LandingContentMaxWidthType } from "../landing-layout";
 import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
 import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
 import { TypographyModule } from "../typography";
 
 // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
   selector: "auth-anon-layout",
   templateUrl: "./anon-layout.component.html",
   imports: [
-    IconModule,
+    SvgModule,
     CommonModule,
     TypographyModule,
     SharedModule,
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
 
 import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
   component: CalloutComponent,
   decorators: [
     moduleMetadata({
-      imports: [LinkModule, IconModule],
+      imports: [LinkModule, SvgModule],
       providers: [
         {
           provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
   BreadcrumbsModule,
   ButtonModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   InputModule,
   MenuModule,
   NavigationModule,
@@ -40,7 +40,7 @@ export default {
         BreadcrumbsModule,
         ButtonModule,
         IconButtonModule,
-        IconModule,
+        SvgModule,
         InputModule,
         MenuModule,
         NavigationModule,
diff --git a/libs/components/src/landing-layout/landing-header.component.html b/libs/components/src/landing-layout/landing-header.component.html
index ed6d34ef23b..5bd6d546069 100644
--- a/libs/components/src/landing-layout/landing-header.component.html
+++ b/libs/components/src/landing-layout/landing-header.component.html
@@ -4,7 +4,7 @@
       [routerLink]="['/']"
       class="tw-w-32 tw-py-5 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top"
     >
-      <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
+      <bit-svg [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
     </a>
   }
   <div class="[&:has(*)]:tw-ms-auto [&:has(*)]:tw-py-5">
diff --git a/libs/components/src/landing-layout/landing-header.component.ts b/libs/components/src/landing-layout/landing-header.component.ts
index eb5329e915d..c0fb3cd67f1 100644
--- a/libs/components/src/landing-layout/landing-header.component.ts
+++ b/libs/components/src/landing-layout/landing-header.component.ts
@@ -3,8 +3,8 @@ import { RouterModule } from "@angular/router";
 
 import { BitwardenLogo } from "@bitwarden/assets/svg";
 
-import { IconModule } from "../icon";
 import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
 
 /**
  * Header component for landing pages with optional Bitwarden logo and header actions slot.
@@ -34,7 +34,7 @@ import { SharedModule } from "../shared";
   selector: "bit-landing-header",
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./landing-header.component.html",
-  imports: [RouterModule, IconModule, SharedModule],
+  imports: [RouterModule, SvgModule, SharedModule],
 })
 export class LandingHeaderComponent {
   readonly hideLogo = input<boolean>(false);
diff --git a/libs/components/src/landing-layout/landing-hero.component.html b/libs/components/src/landing-layout/landing-hero.component.html
index dbce6a7c585..f3f5d2e7ed0 100644
--- a/libs/components/src/landing-layout/landing-hero.component.html
+++ b/libs/components/src/landing-layout/landing-hero.component.html
@@ -6,7 +6,7 @@
       <div
         class="tw-size-20 sm:tw-size-24 [&_svg]:tw-w-full [&_svg]:tw-max-w-24 tw-mx-auto tw-content-center"
       >
-        <bit-icon [icon]="icon()"></bit-icon>
+        <bit-svg [icon]="icon()"></bit-svg>
       </div>
     }
 
diff --git a/libs/components/src/landing-layout/landing-hero.component.ts b/libs/components/src/landing-layout/landing-hero.component.ts
index b29e9768efd..78883a5f0df 100644
--- a/libs/components/src/landing-layout/landing-hero.component.ts
+++ b/libs/components/src/landing-layout/landing-hero.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, input } from "@angular/core";
 
 import { Icon } from "@bitwarden/assets/svg";
 
-import { IconModule } from "../icon";
+import { SvgModule } from "../svg";
 import { TypographyModule } from "../typography";
 
 /**
@@ -31,7 +31,7 @@ import { TypographyModule } from "../typography";
   selector: "bit-landing-hero",
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./landing-hero.component.html",
-  imports: [IconModule, TypographyModule],
+  imports: [SvgModule, TypographyModule],
 })
 export class LandingHeroComponent {
   readonly icon = input<Icon | null>(null);
diff --git a/libs/components/src/landing-layout/landing-layout.component.html b/libs/components/src/landing-layout/landing-layout.component.html
index 1164f538116..8e28f9c25ed 100644
--- a/libs/components/src/landing-layout/landing-layout.component.html
+++ b/libs/components/src/landing-layout/landing-layout.component.html
@@ -13,12 +13,12 @@
     <div
       class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-start-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
     >
-      <bit-icon [icon]="leftIllustration"></bit-icon>
+      <bit-svg [icon]="leftIllustration"></bit-svg>
     </div>
     <div
       class="tw-hidden md:tw-block [&_svg]:tw-absolute tw-z-[1] tw-opacity-[.11] [&_svg]:tw-bottom-0 [&_svg]:tw-end-0 [&_svg]:tw-w-[35%] [&_svg]:tw-max-w-[450px]"
     >
-      <bit-icon [icon]="rightIllustration"></bit-icon>
+      <bit-svg [icon]="rightIllustration"></bit-svg>
     </div>
   }
   <ng-content select="bit-landing-footer"></ng-content>
diff --git a/libs/components/src/landing-layout/landing-layout.component.ts b/libs/components/src/landing-layout/landing-layout.component.ts
index 520cca945d6..65c7302e828 100644
--- a/libs/components/src/landing-layout/landing-layout.component.ts
+++ b/libs/components/src/landing-layout/landing-layout.component.ts
@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, inject, input } from "@angular/core
 import { BackgroundLeftIllustration, BackgroundRightIllustration } from "@bitwarden/assets/svg";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
-import { IconModule } from "../icon";
+import { SvgModule } from "../svg";
 
 /**
  * Root layout component for landing pages providing a full-screen container with optional decorative background illustrations.
@@ -27,7 +27,7 @@ import { IconModule } from "../icon";
   selector: "bit-landing-layout",
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: "./landing-layout.component.html",
-  imports: [IconModule],
+  imports: [SvgModule],
 })
 export class LandingLayoutComponent {
   readonly hideBackgroundIllustration = input<boolean>(false);
diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html
index 9f18855ae13..69eee9f2b87 100644
--- a/libs/components/src/navigation/nav-logo.component.html
+++ b/libs/components/src/navigation/nav-logo.component.html
@@ -16,6 +16,6 @@
     routerLinkActive
     ariaCurrentWhenActive="page"
   >
-    <bit-icon [icon]="sideNavService.open() ? openIcon() : closedIcon()"></bit-icon>
+    <bit-svg [icon]="sideNavService.open() ? openIcon() : closedIcon()"></bit-svg>
   </a>
 </div>
diff --git a/libs/components/src/no-items/no-items.component.html b/libs/components/src/no-items/no-items.component.html
index e728584a41a..016ca84f8b9 100644
--- a/libs/components/src/no-items/no-items.component.html
+++ b/libs/components/src/no-items/no-items.component.html
@@ -1,7 +1,7 @@
 <div class="tw-mx-auto tw-flex tw-flex-col tw-items-center tw-justify-center tw-pt-6">
   <div class="tw-max-w-sm tw-flex tw-flex-col tw-items-center">
     <div class="tw-size-24 tw-content-center">
-      <bit-icon [icon]="icon()" aria-hidden="true"></bit-icon>
+      <bit-svg [icon]="icon()" aria-hidden="true"></bit-svg>
     </div>
     <h3 class="tw-font-medium tw-text-center tw-mt-4">
       <ng-content select="[slot=title]"></ng-content>
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink-shared.module.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink-shared.module.ts
index c4fe2f9b2af..398251fd2e2 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink-shared.module.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink-shared.module.ts
@@ -16,7 +16,6 @@ import { DialogModule } from "../../dialog";
 import { DrawerModule } from "../../drawer";
 import { FormControlModule } from "../../form-control";
 import { FormFieldModule } from "../../form-field";
-import { IconModule } from "../../icon";
 import { IconButtonModule } from "../../icon-button";
 import { InputModule } from "../../input";
 import { LayoutComponent } from "../../layout";
@@ -31,6 +30,7 @@ import { SearchModule } from "../../search";
 import { SectionComponent } from "../../section";
 import { SelectModule } from "../../select";
 import { SharedModule } from "../../shared";
+import { SvgModule } from "../../svg";
 import { TableModule } from "../../table";
 import { TabsModule } from "../../tabs";
 import { ToggleGroupModule } from "../../toggle-group";
@@ -54,7 +54,7 @@ import { TypographyModule } from "../../typography";
     FormFieldModule,
     FormsModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     InputModule,
     LayoutComponent,
     LinkModule,
@@ -92,7 +92,7 @@ import { TypographyModule } from "../../typography";
     FormFieldModule,
     FormsModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     InputModule,
     LayoutComponent,
     LinkModule,
diff --git a/libs/pricing/src/components/pricing-card/pricing-card.component.spec.ts b/libs/pricing/src/components/pricing-card/pricing-card.component.spec.ts
index 735d694152c..669b54c5b57 100644
--- a/libs/pricing/src/components/pricing-card/pricing-card.component.spec.ts
+++ b/libs/pricing/src/components/pricing-card/pricing-card.component.spec.ts
@@ -2,7 +2,7 @@ import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { BadgeVariant, ButtonType, IconModule, TypographyModule } from "@bitwarden/components";
+import { BadgeVariant, ButtonType, SvgModule, TypographyModule } from "@bitwarden/components";
 import { PricingCardComponent } from "@bitwarden/pricing";
 
 @Component({
@@ -68,13 +68,7 @@ describe("PricingCardComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        PricingCardComponent,
-        TestHostComponent,
-        IconModule,
-        TypographyModule,
-        CommonModule,
-      ],
+      imports: [PricingCardComponent, TestHostComponent, SvgModule, TypographyModule, CommonModule],
     }).compileComponents();
 
     // For signal inputs, we need to set required inputs through the host component
diff --git a/libs/pricing/src/components/pricing-card/pricing-card.component.ts b/libs/pricing/src/components/pricing-card/pricing-card.component.ts
index c9da7c32462..4b9241fc9dd 100644
--- a/libs/pricing/src/components/pricing-card/pricing-card.component.ts
+++ b/libs/pricing/src/components/pricing-card/pricing-card.component.ts
@@ -7,7 +7,7 @@ import {
   ButtonModule,
   ButtonType,
   CardComponent,
-  IconModule,
+  SvgModule,
   TypographyModule,
 } from "@bitwarden/components";
 
@@ -20,7 +20,7 @@ import {
   selector: "billing-pricing-card",
   templateUrl: "./pricing-card.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [BadgeModule, ButtonModule, IconModule, TypographyModule, CurrencyPipe, CardComponent],
+  imports: [BadgeModule, ButtonModule, SvgModule, TypographyModule, CurrencyPipe, CardComponent],
 })
 export class PricingCardComponent {
   readonly tagline = input.required<string>();
diff --git a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html
index 7af120cfd6c..4c2ffe7d4fd 100644
--- a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html
+++ b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html
@@ -9,5 +9,5 @@
   [attr.aria-label]="slide.label"
   (click)="onClick.emit()"
 >
-  <bit-icon [icon]="CarouselIcon"></bit-icon>
+  <bit-svg [icon]="CarouselIcon"></bit-svg>
 </button>
diff --git a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.ts b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.ts
index bef7f5b12d6..42fe082d5f8 100644
--- a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.ts
+++ b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.ts
@@ -3,7 +3,7 @@ import { CommonModule } from "@angular/common";
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from "@angular/core";
 
 import { CarouselIcon } from "@bitwarden/assets/svg";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 
 import { VaultCarouselSlideComponent } from "../carousel-slide/carousel-slide.component";
 
@@ -12,7 +12,7 @@ import { VaultCarouselSlideComponent } from "../carousel-slide/carousel-slide.co
 @Component({
   selector: "vault-carousel-button",
   templateUrl: "carousel-button.component.html",
-  imports: [CommonModule, IconModule],
+  imports: [CommonModule, SvgModule],
 })
 export class VaultCarouselButtonComponent implements FocusableOption {
   /** Slide component that is associated with the individual button */