update component api

2026-03-01 11:01:17 +00:00 · 2026-01-26 23:15:50 -05:00
parent 8f5708a06b
commit 03f017a1d6
31 changed files with 50 additions and 141 deletions
--- 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-svg *ngIf="showLogo" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
+      <bit-svg *ngIf="showLogo" [content]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
    </div>

    <ng-container slot="end">
@@ -17,7 +17,7 @@
  <auth-anon-layout
    [title]="pageTitle"
    [subtitle]="pageSubtitle"
-    [icon]="pageIcon"
+    [content]="pageIcon"
    [showReadonlyHostname]="showReadonlyHostname"
    [hideLogo]="true"
    [maxWidth]="maxWidth"
--- 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-svg [icon]="sendCreatedIcon"></bit-svg>
+      <bit-svg [content]="sendCreatedIcon"></bit-svg>
    </div>
    <h3 tabindex="0" appAutofocus class="tw-font-medium">
      {{ "createdSendSuccessfully" | i18n }}
--- 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-svg [icon]="itemTypes"></bit-svg>
+        <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-svg [icon]="loginCards"></bit-svg>
+        <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-svg [icon]="noCredentials"></bit-svg>
+        <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-svg [icon]="secureDevices"></bit-svg>
+        <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/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-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
+        <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-svg [icon]="Icons.NoResults" class="tw-text-main"></bit-svg>
+        <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-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-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
+        <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-svg [icon]="Icons.NoResults" class="tw-text-main"></bit-svg>
+        <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-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-svg [icon]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>
+        <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/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-svg class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-svg>
+    <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,6 +1,6 @@
 <div class="tw-mt-10 tw-flex tw-justify-center" *ngIf="loading">
  <div>
-    <bit-svg class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
+    <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
--- 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-svg [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-svg>
+          <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-svg [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-svg>
+          <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-svg [icon]="gearIcon" aria-hidden="true"></bit-svg>
+          <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-svg [icon]="gearIcon" aria-hidden="true"></bit-svg>
+      <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-svg [icon]="logo"></bit-svg>
+      <bit-svg [content]="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-svg [icon]="icon" aria-hidden="true"></bit-svg>
+        <bit-svg [content]="icon" aria-hidden="true"></bit-svg>
      </div>
    </div>
    <bit-card-content [ngClass]="{ 'tw-grayscale': disabled }">
--- 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-svg [icon]="activeSendIcon"></bit-svg>
+          <bit-svg [content]="activeSendIcon"></bit-svg>
        </div>
      </div>

--- 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-svg [icon]="PartyIcon"></bit-svg>
+    <bit-svg [content]="PartyIcon"></bit-svg>
  </div>
  <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4 tw-text-center">
    {{
--- 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-svg [icon]="IconProviderMap[provider]"></bit-svg>
+    <bit-svg [content]="IconProviderMap[provider]"></bit-svg>
  </div>
  <!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
  <img
--- 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-svg [icon]="Icons.UserVerificationBiometricsIcon"></bit-svg>
+          <bit-svg [content]="Icons.UserVerificationBiometricsIcon"></bit-svg>
        </div>
        <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
        <div *ngIf="!biometricsVerificationFailed">
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -2,16 +2,6 @@ import { ChangeDetectionStrategy, Component, computed, input } from "@angular/co

 import { BitwardenIcon } from "../shared/icon";

-export const BitIconSize = Object.freeze({
-  Xs: "xs",
-  Sm: "sm",
-  Md: "md",
-  Lg: "lg",
-  Xl: "xl",
-} as const);
-
-export type BitIconSize = (typeof BitIconSize)[keyof typeof BitIconSize];
-
@Component({
  selector: "bit-icon",
  standalone: true,
@@ -27,17 +17,7 @@ export class BitIconComponent {
  /**
   * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
   */
-  readonly icon = input.required<BitwardenIcon>();
-
-  /**
-   * Whether the icon should have a fixed width for alignment
-   */
-  readonly fw = input<boolean>(false);
-
-  /**
-   * Icon size - applies bwi-* size classes
-   */
-  readonly size = input<BitIconSize>();
+  readonly name = input.required<BitwardenIcon>();

  /**
   * Accessible label for the icon
@@ -45,17 +25,6 @@ export class BitIconComponent {
  readonly ariaLabel = input<string>();

  protected readonly classList = computed(() => {
-    const classes = ["bwi", this.icon()];
-
-    if (this.fw()) {
-      classes.push("bwi-fw");
-    }
-
-    const size = this.size();
-    if (size) {
-      classes.push(`bwi-${size}`);
-    }
-
-    return classes.join(" ");
+    return ["bwi", this.name()].join(" ");
  });
 }
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -15,7 +15,7 @@ The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font class
 ## Basic Usage

 ```html
-<bit-icon icon="bwi-lock"></bit-icon>
+<bit-icon name="bwi-lock"></bit-icon>
 ```

 ## Icon Names
@@ -23,43 +23,13 @@ The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font class
 All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
 convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).

-## Modifiers
-
-### Fixed Width
-
-Use the `fw` input to give icons a fixed width for alignment:
-
-```html
-<bit-icon icon="bwi-lock" [fw]="true"></bit-icon>
-```
-
-This is useful when aligning icons in lists or menus.
-
-### Spin
-
-Use the `spin` input to animate icons:
-
-```html
-<bit-icon icon="bwi-spinner" [spin]="true"></bit-icon>
-```
-
-### Size
-
-Use the `size` input to control icon size:
-
-```html
-<bit-icon icon="bwi-lock" size="lg"></bit-icon>
-```
-
-Available sizes: `xs`, `sm`, `md`, `lg`, `xl`
-
 ## Accessibility

 By default, icons are decorative and marked with `aria-hidden="true"`. To make an icon accessible,
 provide an `ariaLabel`:

 ```html
-<bit-icon icon="bwi-lock" [ariaLabel]="'Secure lock'"></bit-icon>
+<bit-icon name="bwi-lock" [ariaLabel]="'Secure lock'"></bit-icon>
 ```

 ## Styling
@@ -68,7 +38,7 @@ The component renders as an inline element. Apply standard CSS classes or styles
 appearance:

 ```html
-<bit-icon icon="bwi-lock" class="tw-text-primary-500 tw-text-2xl"></bit-icon>
+<bit-icon name="bwi-lock" class="tw-text-primary-500 tw-text-2xl"></bit-icon>
 ```

 ## Note on SVG Icons
--- a/libs/components/src/icon/icon.stories.ts
+++ b/libs/components/src/icon/icon.stories.ts
@@ -14,14 +14,10 @@ export default {
    },
  },
  argTypes: {
-    icon: {
+    name: {
      control: { type: "select" },
      options: BITWARDEN_ICONS,
    },
-    size: {
-      control: { type: "select" },
-      options: ["xs", "sm", "md", "lg", "xl"],
-    },
  },
 } as Meta<BitIconComponent>;

@@ -29,7 +25,7 @@ type Story = StoryObj<BitIconComponent>;

 export const Default: Story = {
  args: {
-    icon: "bwi-lock",
+    name: "bwi-lock",
  },
 };

@@ -39,7 +35,7 @@ export const AllIcons: Story = {
      <div class="tw-grid tw-grid-cols-[repeat(auto-fit,minmax(150px,1fr))] tw-gap-4 tw-p-4">
        @for (icon of icons; track icon) {
          <div class="tw-flex tw-flex-col tw-items-center tw-p-2 tw-border tw-border-secondary-300 tw-rounded">
-            <bit-icon [icon]="icon" class="tw-text-2xl tw-mb-2"></bit-icon>
+            <bit-icon [name]="icon" class="tw-text-2xl tw-mb-2"></bit-icon>
            <span class="tw-text-xs tw-text-center">{{ icon }}</span>
          </div>
        }
@@ -51,35 +47,9 @@ export const AllIcons: Story = {
  }),
 };

-export const WithFixedWidth: Story = {
-  render: () => ({
-    template: `
-      <div class="tw-space-y-2">
-        <div><bit-icon icon="bwi-lock" [fw]="true"></bit-icon> Lock</div>
-        <div><bit-icon icon="bwi-user" [fw]="true"></bit-icon> User</div>
-        <div><bit-icon icon="bwi-key" [fw]="true"></bit-icon> Key</div>
-      </div>
-    `,
-  }),
-};
-
-export const WithSizes: Story = {
-  render: () => ({
-    template: `
-      <div class="tw-flex tw-items-end tw-gap-4">
-        <bit-icon icon="bwi-lock" size="xs"></bit-icon>
-        <bit-icon icon="bwi-lock" size="sm"></bit-icon>
-        <bit-icon icon="bwi-lock" size="md"></bit-icon>
-        <bit-icon icon="bwi-lock" size="lg"></bit-icon>
-        <bit-icon icon="bwi-lock" size="xl"></bit-icon>
-      </div>
-    `,
-  }),
-};
-
 export const WithAriaLabel: Story = {
  args: {
-    icon: "bwi-lock",
+    name: "bwi-lock",
    ariaLabel: "Secure lock icon",
  },
 };
--- 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-svg [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
+      <bit-svg [content]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-svg>
    </a>
  }
  <div class="[&:has(*)]:tw-ms-auto [&:has(*)]:tw-py-5">
--- 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-svg [icon]="icon()"></bit-svg>
+        <bit-svg [content]="icon()"></bit-svg>
      </div>
    }

--- 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-svg [icon]="leftIllustration"></bit-svg>
+      <bit-svg [content]="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-svg [icon]="rightIllustration"></bit-svg>
+      <bit-svg [content]="rightIllustration"></bit-svg>
    </div>
  }
  <ng-content select="bit-landing-footer"></ng-content>
--- 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-svg [icon]="sideNavService.open() ? openIcon() : closedIcon()"></bit-svg>
+    <bit-svg [content]="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-svg [icon]="icon()" aria-hidden="true"></bit-svg>
+      <bit-svg [content]="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/svg/svg.component.ts
+++ b/libs/components/src/svg/svg.component.ts
@@ -17,15 +17,15 @@ import { Icon, isIcon } from "@bitwarden/assets/svg";
 export class SvgComponent {
  private domSanitizer = inject(DomSanitizer);

-  readonly icon = input<Icon>();
+  readonly content = input<Icon>();
  readonly ariaLabel = input<string>();

  protected readonly innerHtml = computed<SafeHtml | null>(() => {
-    const icon = this.icon();
-    if (!isIcon(icon)) {
+    const content = this.content();
+    if (!isIcon(content)) {
      return null;
    }
-    const svg = icon.svg;
+    const svg = content.svg;
    return this.domSanitizer.bypassSecurityTrustHtml(svg);
  });
 }
--- a/libs/components/src/svg/svg.components.spec.ts
+++ b/libs/components/src/svg/svg.components.spec.ts
@@ -19,7 +19,7 @@ describe("SvgComponent", () => {
  it("should have empty innerHtml when input is not an Icon", () => {
    const fakeIcon = { svg: "harmful user input" } as Icon;

-    fixture.componentRef.setInput("icon", fakeIcon);
+    fixture.componentRef.setInput("content", fakeIcon);
    fixture.detectChanges();

    const el = fixture.nativeElement as HTMLElement;
@@ -29,7 +29,7 @@ describe("SvgComponent", () => {
  it("should contain icon when input is a safe Icon", () => {
    const icon = svgIcon`<svg><text x="0" y="15">safe icon</text></svg>`;

-    fixture.componentRef.setInput("icon", icon);
+    fixture.componentRef.setInput("content", icon);
    fixture.detectChanges();

    const el = fixture.nativeElement as HTMLElement;
--- a/libs/components/src/svg/svg.mdx
+++ b/libs/components/src/svg/svg.mdx
@@ -107,13 +107,13 @@ import { SvgModule } from "@bitwarden/components";
       > `ariaLabel` is explicitly provided to the `<bit-svg>` component

       ```html
-       <bit-svg [icon]="Icons.ExampleIcon"></bit-svg>
+       <bit-svg [content]="Icons.ExampleIcon"></bit-svg>
       ```

       With `ariaLabel`

       ```html
-       <bit-svg [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-svg>
+       <bit-svg [content]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-svg>
       ```

 9. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
--- a/libs/components/src/svg/svg.stories.ts
+++ b/libs/components/src/svg/svg.stories.ts
@@ -37,7 +37,7 @@ export const Default = {
        <div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
          <div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
          <div class="tw-size-52 tw-w-full tw-content-center">
-            <bit-svg [icon]="icon[1]"></bit-svg>
+            <bit-svg [content]="icon[1]"></bit-svg>
          </div>
        </div>
      }
--- a/libs/eslint/components/no-bwi-class-usage.mjs
+++ b/libs/eslint/components/no-bwi-class-usage.mjs
@@ -1,5 +1,5 @@
 export const errorMessage =
-  "Use <bit-icon> component instead of applying 'bwi' classes directly. Example: <bit-icon icon=\"bwi-lock\"></bit-icon>";
+  "Use <bit-icon> component instead of applying 'bwi' classes directly. Example: <bit-icon name=\"bwi-lock\"></bit-icon>";

 export default {
  meta: {
--- 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-svg [icon]="CarouselIcon"></bit-svg>
+  <bit-svg [content]="CarouselIcon"></bit-svg>
 </button>