[CL-82] rename bit-icon to bit-svg; create new bit-icon component for font icons (#18584)

* rename bit-icon to bit-svg; create new bit-icon for font icons Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * find and replace current usage Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * add custom eslint warning Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix incorrect usage * fix tests * fix tests * Update libs/components/src/svg/index.ts Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * Update libs/eslint/components/no-bwi-class-usage.spec.mjs Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * update component api * update class name * use icon type in iconButton component * update type Icon --> BitSvg * fix bad renames * fix more renames * fix bad input * revert iconButton type * fix lint * fix more inputs * misc fixes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix test * add eslint ignore * fix lint * add comparison story --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
2026-02-19 19:04:01 +00:00 · 2026-01-28 11:36:27 -05:00
parent 67ff1e1d85
commit de2f4a04fc
161 changed files with 764 additions and 529 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
-              [icon]="rla.isActive ? button.iconActive : button.icon"
+            <bit-svg
+              [content]="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
@@ -3,15 +3,15 @@ import { Component, Input } from "@angular/core";
 import { RouterModule } from "@angular/router";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } 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;
  page: string;
-  icon: Icon;
-  iconActive: Icon;
+  icon: BitSvg;
+  iconActive: BitSvg;
  showBerry?: boolean;
 };

@@ -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" [content]="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
@@ -5,10 +5,10 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
 import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";

-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } 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,
@@ -54,7 +54,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {

  protected pageTitle: string;
  protected pageSubtitle: string;
-  protected pageIcon: Icon;
+  protected pageIcon: BitSvg;
  protected showReadonlyHostname: boolean;
  protected maxWidth: "md" | "3xl";
  protected hasLoggedInAccount: boolean = false;
--- 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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="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]" [content]="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" [content]="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 [content]="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 [content]="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 [content]="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 [content]="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 [content]="logo"></bit-svg>
    </div>
  </div>
  <div
--- a/apps/web/src/app/dirt/reports/shared/models/report-entry.ts
+++ b/apps/web/src/app/dirt/reports/shared/models/report-entry.ts
@@ -1,4 +1,4 @@
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";

 import { ReportVariant } from "./report-variant";

@@ -6,6 +6,6 @@ export type ReportEntry = {
  title: string;
  description: string;
  route: string;
-  icon: Icon;
+  icon: BitSvg;
  variant: ReportVariant;
 };
--- 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 [content]="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.component.ts
+++ b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
@@ -2,7 +2,7 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";

-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";

 import { ReportVariant } from "../models/report-variant";

@@ -25,7 +25,7 @@ export class ReportCardComponent {
  @Input() route: string;
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
  // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() icon: Icon;
+  @Input() icon: BitSvg;
  // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() variant: ReportVariant;
--- 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 [content]="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
-    [icon]="BitwardenIcon"
+  <bit-svg
+    [content]="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 [content]="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/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -33,7 +33,7 @@ import {
  EmptyTrash,
  FavoritesIcon,
  ItemTypes,
-  Icon,
+  BitSvg,
 } from "@bitwarden/assets/svg";
 import { AutomaticUserConfirmationService } from "@bitwarden/auto-confirm";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -160,7 +160,7 @@ type EmptyStateType = "trash" | "favorites" | "archive";
 type EmptyStateItem = {
  title: string;
  description: string;
-  icon: Icon;
+  icon: BitSvg;
 };

 type EmptyStateMap = Record<EmptyStateType, EmptyStateItem>;