find and replace current usage

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-13 06:54:07 +00:00 · 2026-01-26 18:48:09 -05:00
parent 00b4bccfd8
commit 15b72c6b7c
71 changed files with 142 additions and 148 deletions
--- 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,
--- 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>
--- 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",
  },
--- 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">
--- 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,
--- 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 }}
--- 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,
--- 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 {
--- 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>
--- 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,
--- 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>
--- 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,
--- 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 }}
--- 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,
--- 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>
--- 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,
--- 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,
--- 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>
--- 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"
--- 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;
--- 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,
--- 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,
--- 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,
--- 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>
--- 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>
--- 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>
--- 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
--- 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 }">
--- 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,
--- 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,
--- 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,
--- 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,
  ],
 })
--- 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({
--- 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,
--- 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>

--- 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 {
--- 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>
--- 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;
--- 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">
    {{
--- 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,
--- 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"
--- 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,
  ],
 })
--- 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"
--- 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"
--- 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>
--- 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 {
--- 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
--- 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,
  ],
--- 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,
--- 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>();
--- 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,
  ],
 })
--- 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>
--- 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: [],
 })
--- 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">
--- 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,
--- 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,
--- 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,
--- 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,
--- 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">
--- 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);
--- 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>
    }

--- 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);
--- 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>
--- 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);
--- 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>
--- 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>
--- 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,
--- 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
--- 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>();
--- 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>
--- 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 */