Merge branch 'main' into beeep/dev-container

2026-01-30 16:23:53 +00:00 · 2026-01-28 14:23:52 -05:00
parent 09ad4fcff8 c5bd811dfd
commit 8f1a5cb70d
171 changed files with 870 additions and 612 deletions
--- a/apps/browser/src/autofill/fido2/content/fido2-page-script.ts
+++ b/apps/browser/src/autofill/fido2/content/fido2-page-script.ts
@@ -1,12 +1,10 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { WebauthnUtils } from "../utils/webauthn-utils";

 import { MessageTypes } from "./messaging/message";
 import { Messenger } from "./messaging/messenger";

 (function (globalContext) {
-  if (globalContext.document.currentScript) {
+  if (globalContext.document.currentScript?.parentNode) {
    globalContext.document.currentScript.parentNode.removeChild(
      globalContext.document.currentScript,
    );
@@ -86,7 +84,7 @@ import { Messenger } from "./messaging/messenger";
   */
  async function createWebAuthnCredential(
    options?: CredentialCreationOptions,
-  ): Promise<Credential> {
+  ): Promise<Credential | null> {
    if (!isWebauthnCall(options)) {
      return await browserCredentials.create(options);
    }
@@ -106,13 +104,18 @@ import { Messenger } from "./messaging/messenger";
        options?.signal,
      );

-      if (response.type !== MessageTypes.CredentialCreationResponse) {
+      if (response.type !== MessageTypes.CredentialCreationResponse || !response.result) {
        throw new Error("Something went wrong.");
      }

      return WebauthnUtils.mapCredentialRegistrationResult(response.result);
    } catch (error) {
-      if (error && error.fallbackRequested && fallbackSupported) {
+      if (
+        fallbackSupported &&
+        error instanceof Object &&
+        "fallbackRequested" in error &&
+        error.fallbackRequested
+      ) {
        await waitForFocus();
        return await browserCredentials.create(options);
      }
@@ -127,7 +130,9 @@ import { Messenger } from "./messaging/messenger";
   * @param options Options for creating new credentials.
   * @returns Promise that resolves to the new credential object.
   */
-  async function getWebAuthnCredential(options?: CredentialRequestOptions): Promise<Credential> {
+  async function getWebAuthnCredential(
+    options?: CredentialRequestOptions,
+  ): Promise<Credential | null> {
    if (!isWebauthnCall(options)) {
      return await browserCredentials.get(options);
    }
@@ -153,7 +158,7 @@ import { Messenger } from "./messaging/messenger";
            internalAbortController.signal,
          );
          internalAbortController.signal.removeEventListener("abort", abortListener);
-          if (response.type !== MessageTypes.CredentialGetResponse) {
+          if (response.type !== MessageTypes.CredentialGetResponse || !response.result) {
            throw new Error("Something went wrong.");
          }

@@ -176,7 +181,7 @@ import { Messenger } from "./messaging/messenger";
      abortSignal.removeEventListener("abort", abortListener);
      internalAbortControllers.forEach((controller) => controller.abort());

-      return response;
+      return response ?? null;
    }

    try {
@@ -188,13 +193,18 @@ import { Messenger } from "./messaging/messenger";
        options?.signal,
      );

-      if (response.type !== MessageTypes.CredentialGetResponse) {
+      if (response.type !== MessageTypes.CredentialGetResponse || !response.result) {
        throw new Error("Something went wrong.");
      }

      return WebauthnUtils.mapCredentialAssertResult(response.result);
    } catch (error) {
-      if (error && error.fallbackRequested && fallbackSupported) {
+      if (
+        fallbackSupported &&
+        error instanceof Object &&
+        "fallbackRequested" in error &&
+        error.fallbackRequested
+      ) {
        await waitForFocus();
        return await browserCredentials.get(options);
      }
@@ -203,8 +213,10 @@ import { Messenger } from "./messaging/messenger";
    }
  }

-  function isWebauthnCall(options?: CredentialCreationOptions | CredentialRequestOptions) {
-    return options && "publicKey" in options;
+  function isWebauthnCall(
+    options?: CredentialCreationOptions | CredentialRequestOptions,
+  ): options is CredentialCreationOptions | CredentialRequestOptions {
+    return options != null && "publicKey" in options;
  }

  /**
@@ -217,7 +229,7 @@ import { Messenger } from "./messaging/messenger";
   */
  async function waitForFocus(fallbackWait = 500, timeout = 5 * 60 * 1000) {
    try {
-      if (globalContext.top.document.hasFocus()) {
+      if (globalContext.top?.document.hasFocus()) {
        return;
      }
    } catch {
@@ -225,9 +237,14 @@ import { Messenger } from "./messaging/messenger";
      return await new Promise((resolve) => globalContext.setTimeout(resolve, fallbackWait));
    }

+    if (!globalContext.top) {
+      return await new Promise((resolve) => globalContext.setTimeout(resolve, fallbackWait));
+    }
+
+    const topWindow = globalContext.top;
    const focusPromise = new Promise<void>((resolve) => {
      focusListenerHandler = () => resolve();
-      globalContext.top.addEventListener("focus", focusListenerHandler);
+      topWindow.addEventListener("focus", focusListenerHandler);
    });

    const timeoutPromise = new Promise<void>((_, reject) => {
@@ -248,7 +265,7 @@ import { Messenger } from "./messaging/messenger";
  }

  function clearWaitForFocus() {
-    globalContext.top.removeEventListener("focus", focusListenerHandler);
+    globalContext.top?.removeEventListener("focus", focusListenerHandler);
    if (waitForFocusTimeout) {
      globalContext.clearTimeout(waitForFocusTimeout);
    }
--- a/apps/browser/src/autofill/fido2/content/messaging/messenger.ts
+++ b/apps/browser/src/autofill/fido2/content/messaging/messenger.ts
@@ -1,5 +1,3 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { Message, MessageTypes } from "./message";

 const SENDER = "bitwarden-webauthn";
@@ -25,7 +23,9 @@ type Handler = (
 * handling aborts and exceptions across separate execution contexts.
 */
 export class Messenger {
-  private messageEventListener: (event: MessageEvent<MessageWithMetadata>) => void | null = null;
+  private messageEventListener:
+    | ((event: MessageEvent<MessageWithMetadata>) => void | Promise<void>)
+    | null = null;
  private onDestroy = new EventTarget();

  /**
--- 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/desktop/src/vault/app/vault/item-footer.component.html
+++ b/apps/desktop/src/vault/app/vault/item-footer.component.html
@@ -11,61 +11,66 @@
    >
      {{ submitButtonText() }}
    </button>
-    <button
-      type="button"
-      class="primary"
-      (click)="edit()"
-      appA11yTitle="{{ 'edit' | i18n }}"
-      *ngIf="!cipher.isDeleted && action === 'view'"
-    >
-      <i class="bwi bwi-pencil bwi-fw bwi-lg" aria-hidden="true"></i>
-    </button>
-    <button
-      *ngIf="action === 'edit' || action === 'clone' || action === 'add'"
-      type="button"
-      (click)="cancel()"
-    >
-      {{ "cancel" | i18n }}
-    </button>
-    <button
-      type="button"
-      class="primary"
-      (click)="restore()"
-      appA11yTitle="{{ 'restore' | i18n }}"
-      *ngIf="cipher.isDeleted && cipher.permissions.restore"
-    >
-      <i class="bwi bwi-undo bwi-fw bwi-lg" aria-hidden="true"></i>
-    </button>
+    @if (!cipher.isDeleted && action === "view") {
+      <button type="button" class="primary" (click)="edit()" appA11yTitle="{{ 'edit' | i18n }}">
+        <i class="bwi bwi-pencil bwi-fw bwi-lg" aria-hidden="true" style="pointer-events: none">
+        </i>
+      </button>
+    }
+
+    @if (action === "edit" || action === "clone" || action === "add") {
+      <button type="button" (click)="cancel()">
+        {{ "cancel" | i18n }}
+      </button>
+    }
+
+    @if (cipher.isDeleted && cipher.permissions.restore) {
+      <button
+        type="button"
+        class="primary"
+        (click)="restore()"
+        appA11yTitle="{{ 'restore' | i18n }}"
+      >
+        <i class="bwi bwi-undo bwi-fw bwi-lg" aria-hidden="true" style="pointer-events: none"></i>
+      </button>
+    }
+
    @if (showCloneOption) {
      <button type="button" class="primary" (click)="clone()" appA11yTitle="{{ 'clone' | i18n }}">
-        <i class="bwi bwi-files bwi-fw bwi-lg" aria-hidden="true"></i>
+        <i class="bwi bwi-files bwi-fw bwi-lg" aria-hidden="true" style="pointer-events: none"></i>
      </button>
    }
  </ng-container>
-  <div class="right" *ngIf="hasFooterAction">
-    <button
-      type="button"
-      *ngIf="showArchiveButton"
-      (click)="archive()"
-      appA11yTitle="{{ 'archiveVerb' | i18n }}"
-    >
-      <i class="bwi bwi-archive bwi-lg bwi-fw" aria-hidden="true"></i>
-    </button>
-    <button
-      type="button"
-      *ngIf="showUnarchiveButton"
-      (click)="unarchive()"
-      appA11yTitle="{{ 'unArchive' | i18n }}"
-    >
-      <i class="bwi bwi-unarchive bwi-lg bwi-fw" aria-hidden="true"></i>
-    </button>
-    <button
-      type="button"
-      (click)="delete()"
-      class="danger"
-      appA11yTitle="{{ (cipher.isDeleted ? 'permanentlyDelete' : 'delete') | i18n }}"
-    >
-      <i class="bwi bwi-trash bwi-lg bwi-fw" aria-hidden="true"></i>
-    </button>
-  </div>
+  @if (hasFooterAction) {
+    <div class="right">
+      @if (showArchiveButton) {
+        <button type="button" (click)="archive()" appA11yTitle="{{ 'archiveVerb' | i18n }}">
+          <i
+            class="bwi bwi-archive bwi-lg bwi-fw"
+            aria-hidden="true"
+            style="pointer-events: none"
+          ></i>
+        </button>
+      }
+
+      @if (showUnarchiveButton) {
+        <button type="button" (click)="unarchive()" appA11yTitle="{{ 'unArchive' | i18n }}">
+          <i
+            class="bwi bwi-unarchive bwi-lg bwi-fw"
+            aria-hidden="true"
+            style="pointer-events: none"
+          ></i>
+        </button>
+      }
+
+      <button
+        type="button"
+        (click)="delete()"
+        class="danger"
+        appA11yTitle="{{ (cipher.isDeleted ? 'permanentlyDelete' : 'delete') | i18n }}"
+      >
+        <i class="bwi bwi-trash bwi-lg bwi-fw" aria-hidden="true" style="pointer-events: none"></i>
+      </button>
+    </div>
+  }
 </div>
--- 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/pipes/policy-order.pipe.ts
+++ b/apps/web/src/app/admin-console/organizations/policies/pipes/policy-order.pipe.ts
@@ -20,7 +20,7 @@ const POLICY_ORDER_MAP = new Map<string, number>([
  ["removeUnlockWithPinPolicyTitle", 10],
  ["passwordGenerator", 11],
  ["uriMatchDetectionPolicy", 12],
-  ["activateAutofill", 13],
+  ["activateAutofillPolicy", 13],
  ["sendOptions", 14],
  ["disableSend", 15],
  ["restrictedItemTypePolicy", 16],
--- 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>;
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -6937,17 +6937,17 @@
  "personalVaultExportPolicyInEffect": {
    "message": "One or more organization policies prevents you from exporting your individual vault."
  },
-  "activateAutofill": {
-    "message": "Activate auto-fill"
+  "activateAutofillPolicy": {
+    "message": "Activate autofill"
  },
  "activateAutofillPolicyDescription": {
    "message": "Activate the autofill on page load setting on the browser extension for all existing and new members."
  },
-  "experimentalFeature": {
-    "message": "Compromised or untrusted websites can exploit auto-fill on page load."
+  "autofillOnPageLoadExploitWarning": {
+    "message": "Compromised or untrusted websites can exploit autofill on page load."
  },
-  "learnMoreAboutAutofill": {
-    "message": "Learn more about auto-fill"
+  "learnMoreAboutAutofillPolicy": {
+    "message": "Learn more about autofill"
  },
  "selectType": {
    "message": "Select SSO type"
--- a/bitwarden_license/bit-web/src/app/admin-console/policies/policy-edit-definitions/activate-autofill.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/policy-edit-definitions/activate-autofill.component.html
@@ -1,11 +1,11 @@
 <bit-callout type="warning">
-  {{ "experimentalFeature" | i18n }}
+  {{ "autofillOnPageLoadExploitWarning" | i18n }}
  <a
    bitLink
    href="https://bitwarden.com/help/auto-fill-browser/"
    target="_blank"
    rel="noreferrer"
-    >{{ "learnMoreAboutAutofill" | i18n }}</a
+    >{{ "learnMoreAboutAutofillPolicy" | i18n }}</a
  >
 </bit-callout>

--- a/bitwarden_license/bit-web/src/app/admin-console/policies/policy-edit-definitions/activate-autofill.component.ts
+++ b/bitwarden_license/bit-web/src/app/admin-console/policies/policy-edit-definitions/activate-autofill.component.ts
@@ -11,7 +11,7 @@ import {
 import { SharedModule } from "@bitwarden/web-vault/app/shared";

 export class ActivateAutofillPolicy extends BasePolicyEditDefinition {
-  name = "activateAutofill";
+  name = "activateAutofillPolicy";
  description = "activateAutofillPolicyDescription";
  type = PolicyType.ActivateAutofill;
  component = ActivateAutofillPolicyComponent;
--- 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"
+      [content]="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
@@ -7,13 +7,13 @@ import { combineLatest, map, Observable, Subject, switchMap } from "rxjs";
 import { takeUntil } from "rxjs/operators";

 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { BusinessUnitPortalLogo, Icon, ProviderPortalLogo } from "@bitwarden/assets/svg";
+import { BusinessUnitPortalLogo, BitSvg, ProviderPortalLogo } from "@bitwarden/assets/svg";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 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,
  ],
 })
@@ -41,7 +41,7 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  protected provider$: Observable<Provider>;

-  protected logo$: Observable<Icon>;
+  protected logo$: Observable<BitSvg>;

  protected canAccessBilling$: Observable<boolean>;

--- 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"
+      [content]="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"
+      [content]="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
-            [icon]="icon()"
+          <bit-svg
+            [content]="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
-            [icon]="icon()"
+          <bit-svg
+            [content]="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
@@ -1,17 +1,17 @@
 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 { BitSvg } from "@bitwarden/assets/svg";
+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 {
-  readonly icon = input<Icon | null>(null);
+  readonly icon = input<BitSvg | null>(null);
  readonly videoSrc = input<string | null>(null);
  readonly title = input<string>("");
  readonly description = input<string>("");
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { map, concatMap, firstValueFrom } from "rxjs";

-import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
+import { BitSvg, DeactivatedOrg } from "@bitwarden/assets/svg";
 import {
  getOrganizationById,
  OrganizationService,
@@ -23,7 +23,7 @@ export class OrgSuspendedComponent {
    private route: ActivatedRoute,
  ) {}

-  protected DeactivatedOrg: Icon = DeactivatedOrg;
+  protected DeactivatedOrg: BitSvg = DeactivatedOrg;
  protected organizationName$ = this.route.params.pipe(
    concatMap(async (params) => {
      const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -207,6 +207,7 @@ export default tseslint.config(
        "error",
        { ignoreIfHas: ["bitPasswordInputToggle"] },
      ],
+      "@bitwarden/components/no-bwi-class-usage": "warn",
    },
  },

--- 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 [content]="IconProviderMap[provider]"></bit-svg>
  </div>
  <!-- Other 2FA Types (Duo, Yubico, U2F as PNG) -->
  <img
--- a/libs/angular/src/auth/components/two-factor-icon.component.ts
+++ b/libs/angular/src/auth/components/two-factor-icon.component.ts
@@ -3,7 +3,7 @@
 import { Component, Input } from "@angular/core";

 import {
-  Icon,
+  BitSvg,
  TwoFactorAuthAuthenticatorIcon,
  TwoFactorAuthEmailIcon,
  TwoFactorAuthWebAuthnIcon,
@@ -24,7 +24,7 @@ export class TwoFactorIconComponent {
  // eslint-disable-next-line @angular-eslint/prefer-signals
  @Input() name: string;

-  protected readonly IconProviderMap: { [key: number | string]: Icon } = {
+  protected readonly IconProviderMap: { [key: number | string]: BitSvg } = {
    0: TwoFactorAuthAuthenticatorIcon,
    1: TwoFactorAuthEmailIcon,
    7: TwoFactorAuthWebAuthnIcon,
--- 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/assets/README.md
+++ b/libs/assets/README.md
@@ -8,9 +8,9 @@ This lib contains assets used by the Bitwarden clients. Unused assets are tree-s

 ### SVGs

-SVGs intended to be used with the `bit-icon` component live in `src/svgs`. These SVGs are built with the `icon-service` for security reasons. These SVGs can be viewed in our Component Library [Icon Story](https://components.bitwarden.com/?path=/story/component-library-icon--default).
+SVGs intended to be used with the `bit-svg` component live in `src/svgs`. These SVGs are built with the `svg` function for security reasons. These SVGs can be viewed in our Component Library [SVG Story](https://components.bitwarden.com/?path=/story/component-library-svg--default).

-When adding a new SVG, follow the instructions in our Component Library: [SVG Icon Docs](https://components.bitwarden.com/?path=/docs/component-library-icon--docs)
+When adding a new SVG, follow the instructions in our Component Library: [SVG Docs](https://components.bitwarden.com/?path=/docs/component-library-svg--docs)

 When importing an SVG in one of the clients:
 `import { ExampleSvg } from "@bitwarden/assets/svg";`
--- a/libs/assets/src/svg/icon-service.ts
+++ b/libs/assets/src/svg/icon-service.ts
@@ -1,25 +0,0 @@
-class Icon {
-  constructor(readonly svg: string) {}
-}
-
-// We only export the type to prohibit the creation of Icons without using
-// the `svgIcon` template literal tag.
-export type { Icon };
-
-export function isIcon(icon: unknown): icon is Icon {
-  return icon instanceof Icon;
-}
-
-export class DynamicContentNotAllowedError extends Error {
-  constructor() {
-    super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
-  }
-}
-
-export function svgIcon(strings: TemplateStringsArray, ...values: unknown[]): Icon {
-  if (values.length > 0) {
-    throw new DynamicContentNotAllowedError();
-  }
-
-  return new Icon(strings[0]);
-}
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
 export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/icon-service.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";

 describe("Icon", () => {
  it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {

  describe("isIcon", () => {
    it("should return true when input is icon", () => {
-      const result = isIcon(svgIcon`icon`);
+      const result = isBitSvg(svg`icon`);

      expect(result).toBe(true);
    });

    it("should return false when input is not an icon", () => {
-      const result = isIcon({ svg: "not an icon" });
+      const result = isBitSvg({ svg: "not an icon" });

      expect(result).toBe(false);
    });
@@ -24,13 +24,13 @@ describe("Icon", () => {
    it("should throw when attempting to create dynamic icons", () => {
      const dynamic = "some user input";

-      const f = () => svgIcon`static and ${dynamic}`;
+      const f = () => svg`static and ${dynamic}`;

      expect(f).toThrow(DynamicContentNotAllowedError);
    });

    it("should return svg content when supplying icon with svg string", () => {
-      const icon = svgIcon`safe static content`;
+      const icon = svg`safe static content`;

      expect(icon.svg).toBe("safe static content");
    });
--- a/libs/assets/src/svg/svg.ts
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+  constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+  return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+  constructor() {
+    super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+  }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+  if (values.length > 0) {
+    throw new DynamicContentNotAllowedError();
+  }
+
+  return new BitSvg(strings[0]);
+}
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 12.75 96 72">
  <path class="tw-fill-illustration-bg-primary" d="M0 18.512a5.76 5.76 0 0 1 5.76-5.76h54.48a5.76 5.76 0 0 1 5.76 5.76v38.48a5.76 5.76 0 0 1-5.76 5.76H5.76A5.76 5.76 0 0 1 0 56.992v-38.48Z"/>
  <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M60.24 14.672H5.76a3.84 3.84 0 0 0-3.84 3.84v38.48a3.84 3.84 0 0 0 3.84 3.84h54.48a3.84 3.84 0 0 0 3.84-3.84v-38.48a3.84 3.84 0 0 0-3.84-3.84Zm-54.48-1.92A5.76 5.76 0 0 0 0 18.512v38.48a5.76 5.76 0 0 0 5.76 5.76h54.48a5.76 5.76 0 0 0 5.76-5.76v-38.48a5.76 5.76 0 0 0-5.76-5.76H5.76Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/active-send.icon.ts
+++ b/libs/assets/src/svg/svgs/active-send.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const ActiveSendIcon = svgIcon`
+export const ActiveSendIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="5 4 87 87">
    <path class="tw-fill-illustration-bg-primary" d="M90 48c0 23.196-18.804 42-42 42S6 71.196 6 48 24.804 6 48 6s42 18.804 42 42Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M48 7C25.356 7 7 25.356 7 48s18.356 41 41 41 41-18.356 41-41S70.644 7 48 7ZM5 48C5 24.252 24.252 5 48 5s43 19.252 43 43-19.252 43-43 43S5 71.748 5 48Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/admin-console.ts
+++ b/libs/assets/src/svg/svgs/admin-console.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-const AdminConsoleLogo = svgIcon`
+const AdminConsoleLogo = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 46">
    <g class="tw-fill-fg-sidenav-text" clip-path="url(#admin-console-logo-clip)">
      <path d="M47.948 7.444c2.284 0 4.06.867 5.366 2.674 1.305 1.77 1.958 4.191 1.958 7.263 0 3.18-.653 5.637-1.995 7.371-1.341 1.77-3.154 2.602-5.438 2.602s-4.025-.795-5.33-2.457h-.363l-.688 1.698a.67.67 0 0 1-.617.398h-2.9a.649.649 0 0 1-.653-.65V.94c0-.362.29-.65.653-.65h3.915c.363 0 .653.288.653.65v5.564c0 .795-.072 2.06-.218 3.794h.218c1.197-1.879 3.046-2.854 5.439-2.854Zm-1.668 4.228c-1.27 0-2.248.397-2.865 1.192-.58.795-.906 2.132-.906 3.939v.578c0 2.06.29 3.541.906 4.408.617.867 1.596 1.337 2.937 1.337 1.052 0 1.958-.506 2.575-1.517.616-.976.942-2.458.942-4.3 0-1.88-.326-3.289-.943-4.228-.652-.94-1.559-1.41-2.646-1.41ZM63.9 27.029h-3.915a.649.649 0 0 1-.653-.65V8.491c0-.362.29-.65.653-.65h3.916c.362 0 .652.288.652.65v17.85c.037.326-.29.687-.652.687Zm14.322-3.867c.762 0 1.668-.144 2.756-.433a.435.435 0 0 1 .544.433v3c0 .18-.109.325-.254.397-1.233.506-2.792.759-4.532.759-2.103 0-3.626-.506-4.569-1.59-.942-1.048-1.45-2.638-1.45-4.734V11.78H68.65a.418.418 0 0 1-.435-.434V9.648c0-.036.037-.072.037-.108l2.864-1.699 1.414-3.758c.073-.18.218-.289.399-.289h2.61c.254 0 .435.18.435.434v3.65h5.185c.109 0 .218.108.218.216v3.252a.418.418 0 0 1-.435.434H76.01v9.178c0 .723.217 1.301.616 1.626.363.398.943.578 1.595.578Zm24.401 3.867c-.507 0-.906-.325-1.124-.795l-3.843-11.672c-.254-.83-.58-2.095-1.015-3.722h-.109l-.362 1.301-.762 2.457-3.952 11.672c-.145.47-.58.759-1.088.759a1.12 1.12 0 0 1-1.087-.831L84.459 9.395c-.145-.506.253-1.048.834-1.048h.108c.363 0 .69.253.798.614l2.828 10.227c.689 2.674 1.16 4.625 1.378 5.926h.108c.653-2.674 1.16-4.445 1.487-5.348L95.662 9.07c.145-.434.544-.723 1.051-.723.472 0 .87.29 1.016.723l3.408 10.623c.834 2.71 1.341 4.445 1.523 5.348h.108c.109-.722.544-2.746 1.378-5.998l2.72-10.082a.848.848 0 0 1 .797-.614c.544 0 .943.506.798 1.048l-4.569 16.803c-.145.506-.58.83-1.124.83h-.145Zm21.537 0a.663.663 0 0 1-.652-.578l-.327-2.385H123c-.943 1.192-1.885 2.06-2.901 2.565-.979.506-2.175.723-3.517.723-1.849 0-3.263-.47-4.278-1.41-.906-.83-1.414-1.95-1.486-3.36-.145-1.879.652-3.686 2.175-4.733 1.559-1.012 3.734-1.627 6.671-1.627l3.554-.108v-1.229c0-1.806-.363-3.107-1.124-4.01-.762-.904-1.886-1.337-3.481-1.337-1.523 0-3.046.36-4.641 1.12-.399.18-.87 0-1.052-.398-.181-.397 0-.867.399-1.011 1.813-.723 3.59-1.12 5.403-1.12 2.066 0 3.589.541 4.641 1.625 1.015 1.048 1.522 2.747 1.522 4.95v11.745c-.036.216-.362.578-.725.578Zm-7.505-1.229c2.03 0 3.589-.578 4.713-1.698 1.161-1.12 1.741-2.746 1.741-4.734v-1.806l-3.263.144c-2.647.108-4.496.542-5.657 1.229-1.124.686-1.704 1.806-1.704 3.252 0 1.156.363 2.096 1.052 2.746.797.542 1.813.867 3.118.867Zm21.464-17.814c.544 0 1.088.036 1.704.108a.815.815 0 0 1 .689.94c-.072.433-.507.686-.942.614-.544-.072-1.088-.145-1.632-.145-1.595 0-2.901.687-3.916 2.024-1.015 1.337-1.523 3.072-1.523 5.095v9.467c0 .47-.362.831-.834.831a.819.819 0 0 1-.833-.83V9.105c0-.398.326-.723.725-.723.398 0 .725.29.725.687l.145 2.674h.109c.761-1.373 1.595-2.349 2.465-2.891.834-.578 1.885-.867 3.118-.867Zm12.763 0c1.341 0 2.538.253 3.517.722 1.015.47 1.885 1.338 2.646 2.53h.109a86.156 86.156 0 0 1-.109-4.228V1.12a.82.82 0 0 1 .834-.83c.472 0 .834.36.834.83v25.258a.571.571 0 0 1-.58.579.588.588 0 0 1-.58-.543l-.363-2.348h-.145c-1.414 2.132-3.48 3.18-6.127 3.18-2.611 0-4.532-.795-5.946-2.421-1.342-1.627-2.067-3.94-2.067-7.01 0-3.217.653-5.674 2.031-7.408 1.377-1.554 3.335-2.421 5.946-2.421Zm0 1.554c-2.067 0-3.59.722-4.641 2.168-1.015 1.409-1.523 3.469-1.523 6.215 0 5.276 2.067 7.913 6.2 7.913 2.139 0 3.662-.614 4.641-1.842 1.015-1.23 1.486-3.253 1.486-6.071v-.29c0-2.89-.471-4.95-1.486-6.178-.943-1.301-2.502-1.915-4.677-1.915ZM172.6 27.354c-2.719 0-4.822-.831-6.381-2.53-1.523-1.662-2.285-4.01-2.285-7.01 0-2.999.725-5.384 2.212-7.154 1.487-1.807 3.444-2.71 5.946-2.71 2.176 0 3.952.758 5.185 2.276 1.305 1.518 1.922 3.614 1.922 6.251v1.374h-13.488c.036 2.565.616 4.516 1.813 5.89 1.196 1.373 2.864 1.987 5.076 1.987 1.051 0 2.03-.072 2.828-.217a14.66 14.66 0 0 0 2.103-.578c.471-.18.979.18.979.687a.74.74 0 0 1-.472.686 12.46 12.46 0 0 1-2.465.723c-.907.253-1.885.325-2.973.325Zm-.508-17.85c-1.813 0-3.263.578-4.351 1.77-1.087 1.156-1.704 2.89-1.921 5.095h11.602c0-2.132-.471-3.866-1.414-5.059-.943-1.192-2.248-1.807-3.916-1.807Zm26.25 17.525a.819.819 0 0 1-.833-.831v-11.31c0-1.88-.399-3.253-1.161-4.084-.834-.83-2.03-1.3-3.698-1.3-2.248 0-3.879.542-4.895 1.698-1.015 1.12-1.595 2.963-1.595 5.456v9.467a.82.82 0 0 1-.834.832.82.82 0 0 1-.834-.832V9.107c0-.434.326-.759.762-.759.398 0 .688.29.761.65l.218 1.88h.108c1.233-1.952 3.372-2.927 6.49-2.927 4.242 0 6.382 2.276 6.382 6.83v11.345c-.037.506-.435.904-.871.904ZM61.979 0c-1.704 0-3.082 1.3-3.082 2.927v.289c0 1.59 1.414 2.927 3.082 2.927s3.082-1.337 3.082-2.927v-.253C65.061 1.301 63.647 0 61.979 0Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/auto-confirmation.ts
+++ b/libs/assets/src/svg/svgs/auto-confirmation.ts
--- a/libs/assets/src/svg/svgs/background-left-illustration.ts
+++ b/libs/assets/src/svg/svgs/background-left-illustration.ts
--- a/libs/assets/src/svg/svgs/background-right-illustration.ts
+++ b/libs/assets/src/svg/svgs/background-right-illustration.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const BackgroundRightIllustration = svgIcon`
+export const BackgroundRightIllustration = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 506 297">
    <g clip-path="url(#right-bg-illustration-clip)">
      <path class="tw-fill-illustration-bg-primary" d="M45.673 294.742v-29.124l22.323 16.198-15.395 15.75a4.04 4.04 0 0 1-6.928-2.824Z"/>
--- a/libs/assets/src/svg/svgs/bitwarden-icon.ts
+++ b/libs/assets/src/svg/svgs/bitwarden-icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const BitwardenIcon = svgIcon`
+export const BitwardenIcon = svg`
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0_11934_25684)">
    <path d="M17.3333 0H2.66667C1.19391 0 0 1.19391 0 2.66667V17.3333C0 18.8061 1.19391 20 2.66667 20H17.3333C18.8061 20 20 18.8061 20 17.3333V2.66667C20 1.19391 18.8061 0 17.3333 0Z" class="tw-fill-bw-blue" />
--- a/libs/assets/src/svg/svgs/bitwarden-logo.icon.ts
+++ b/libs/assets/src/svg/svgs/bitwarden-logo.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const BitwardenLogo = svgIcon`
+export const BitwardenLogo = svg`
  <svg viewBox="0 0 290 45" xmlns="http://www.w3.org/2000/svg">
    <title>Bitwarden</title>
    <path class="tw-fill-marketing-logo" fill-rule="evenodd" clip-rule="evenodd" d="M69.799 10.713c3.325 0 5.911 1.248 7.811 3.848 1.9 2.549 2.85 6.033 2.85 10.453 0 4.576-.95 8.113-2.902 10.61-1.953 2.547-4.592 3.743-7.918 3.743-3.325 0-5.858-1.144-7.758-3.536h-.528l-1.003 2.444a.976.976 0 0 1-.897.572H55.23a.94.94 0 0 1-.95-.936V1.352a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v8.009c0 1.144-.105 2.964-.316 5.46h.317c1.741-2.704 4.433-4.108 7.917-4.108Zm-2.428 6.084c-1.847 0-3.273.572-4.17 1.717-.844 1.144-1.32 3.068-1.32 5.668v.832c0 2.964.423 5.097 1.32 6.345.897 1.248 2.322 1.924 4.275 1.924 1.531 0 2.85-.728 3.748-2.184.897-1.404 1.372-3.537 1.372-6.189 0-2.704-.475-4.732-1.372-6.084-.95-1.352-2.27-2.029-3.853-2.029ZM93.022 38.9h-5.7a.94.94 0 0 1-.95-.936V12.221a.94.94 0 0 1 .95-.936h5.7a.94.94 0 0 1 .95.936v25.69c.053.468-.422.988-.95.988Zm20.849-5.564c1.108 0 2.428-.208 4.011-.624a.632.632 0 0 1 .792.624v4.316a.64.64 0 0 1-.37.572c-1.794.728-4.064 1.092-6.597 1.092-3.062 0-5.278-.728-6.651-2.288-1.372-1.508-2.111-3.796-2.111-6.812V16.953h-3.008c-.37 0-.634-.26-.634-.624v-2.444c0-.052.053-.104.053-.156l4.17-2.444 2.058-5.408c.106-.26.317-.417.581-.417h3.8c.369 0 .633.26.633.625v5.252h7.548c.158 0 .317.156.317.312v4.68c0 .364-.264.624-.634.624h-7.178v13.21c0 1.04.317 1.872.897 2.34.528.572 1.373.832 2.323.832Zm35.521 5.564c-.739 0-1.319-.468-1.636-1.144l-5.595-16.797c-.369-1.196-.844-3.016-1.478-5.357h-.158l-.528 1.873-1.108 3.536-5.753 16.797c-.211.676-.845 1.092-1.584 1.092a1.628 1.628 0 0 1-1.583-1.196l-7.02-24.182c-.211-.728.369-1.508 1.214-1.508h.158c.528 0 1.003.364 1.161.884l4.117 14.717c1.003 3.849 1.689 6.657 2.006 8.53h.158c.95-3.85 1.689-6.397 2.164-7.698l5.331-15.393c.211-.624.792-1.04 1.531-1.04.686 0 1.267.416 1.478 1.04l4.961 15.29c1.214 3.9 1.953 6.396 2.217 7.696h.158c.159-1.04.792-3.952 2.006-8.633l3.958-14.509c.159-.52.634-.884 1.162-.884.791 0 1.372.728 1.161 1.508l-6.651 24.182c-.211.728-.844 1.196-1.636 1.196h-.211Zm31.352 0a.962.962 0 0 1-.95-.832l-.475-3.432h-.264c-1.372 1.716-2.745 2.964-4.223 3.692-1.425.728-3.166 1.04-5.119 1.04-2.692 0-4.751-.676-6.228-2.028-1.32-1.196-2.059-2.808-2.164-4.836-.212-2.704.95-5.305 3.166-6.813 2.27-1.456 5.437-2.34 9.712-2.34l5.173-.156v-1.768c0-2.6-.528-4.473-1.637-5.773-1.108-1.3-2.744-1.924-5.067-1.924-2.216 0-4.433.52-6.756 1.612-.58.26-1.266 0-1.53-.572s0-1.248.58-1.456c2.639-1.04 5.226-1.612 7.865-1.612 3.008 0 5.225.78 6.756 2.34 1.478 1.508 2.216 3.953 2.216 7.125v16.901c-.052.312-.527.832-1.055.832Zm-10.926-1.768c2.956 0 5.226-.832 6.862-2.444 1.689-1.612 2.533-3.952 2.533-6.813v-2.6l-4.75.208c-3.853.156-6.545.78-8.234 1.768-1.636.988-2.481 2.6-2.481 4.68 0 1.665.528 3.017 1.531 3.953 1.161.78 2.639 1.248 4.539 1.248Zm31.246-25.638c.792 0 1.584.052 2.481.156a1.176 1.176 0 0 1 1.003 1.352c-.106.624-.739.988-1.372.884-.792-.104-1.584-.208-2.375-.208-2.323 0-4.223.988-5.701 2.912-1.478 1.925-2.217 4.42-2.217 7.333v13.625c0 .676-.527 1.196-1.214 1.196-.686 0-1.213-.52-1.213-1.196V13.105c0-.572.475-1.04 1.055-1.04.581 0 1.056.416 1.056.988l.211 3.848h.158c1.109-1.976 2.323-3.38 3.589-4.16 1.214-.832 2.745-1.248 4.539-1.248Zm18.579 0c1.953 0 3.695.364 5.12 1.04 1.478.676 2.745 1.924 3.853 3.64h.158a122.343 122.343 0 0 1-.158-6.084V1.612c0-.676.528-1.196 1.214-1.196.686 0 1.214.52 1.214 1.196v36.351c0 .468-.37.832-.845.832a.852.852 0 0 1-.844-.78l-.528-3.38h-.211c-2.058 3.068-5.067 4.576-8.92 4.576-3.8 0-6.598-1.144-8.656-3.484-1.953-2.34-3.008-5.668-3.008-10.089 0-4.628.95-8.165 2.955-10.66 2.006-2.237 4.856-3.485 8.656-3.485Zm0 2.236c-3.008 0-5.225 1.04-6.756 3.12-1.478 2.029-2.216 4.993-2.216 8.945 0 7.593 3.008 11.39 9.025 11.39 3.114 0 5.331-.885 6.756-2.653 1.478-1.768 2.164-4.68 2.164-8.737v-.416c0-4.16-.686-7.124-2.164-8.893-1.372-1.872-3.642-2.756-6.809-2.756Zm31.616 25.638c-3.959 0-7.02-1.196-9.289-3.64-2.217-2.392-3.326-5.772-3.326-10.089 0-4.316 1.056-7.748 3.22-10.297 2.164-2.6 5.014-3.9 8.656-3.9 3.167 0 5.753 1.092 7.548 3.276 1.9 2.184 2.797 5.2 2.797 8.997v1.976h-19.634c.052 3.692.897 6.5 2.639 8.477 1.741 1.976 4.169 2.86 7.389 2.86 1.531 0 2.956-.104 4.117-.312.844-.156 1.847-.416 3.061-.832.686-.26 1.425.26 1.425.988 0 .416-.264.832-.686.988-1.267.52-2.481.832-3.589 1.04-1.32.364-2.745.468-4.328.468Zm-.739-25.69c-2.639 0-4.75.832-6.334 2.548-1.583 1.665-2.48 4.16-2.797 7.333h16.89c0-3.068-.686-5.564-2.059-7.28-1.372-1.717-3.272-2.6-5.7-2.6ZM288.733 38.9c-.686 0-1.214-.52-1.214-1.196V21.426c0-2.704-.58-4.68-1.689-5.877-1.214-1.196-2.955-1.872-5.383-1.872-3.273 0-5.648.78-7.126 2.444-1.478 1.613-2.322 4.265-2.322 7.853V37.6c0 .676-.528 1.196-1.214 1.196-.686 0-1.214-.52-1.214-1.196V13.105c0-.624.475-1.092 1.108-1.092.581 0 1.003.416 1.109.936l.316 2.704h.159c1.794-2.808 4.908-4.212 9.448-4.212 6.175 0 9.289 3.276 9.289 9.829V37.6c-.053.727-.633 1.3-1.267 1.3ZM90.225 0c-2.48 0-4.486 1.872-4.486 4.212v.416c0 2.289 2.058 4.213 4.486 4.213s4.486-1.924 4.486-4.213v-.364C94.711 1.872 92.653 0 90.225 0Z" />
--- a/libs/assets/src/svg/svgs/browser-extension.ts
+++ b/libs/assets/src/svg/svgs/browser-extension.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const BrowserExtensionIcon = svgIcon`
+export const BrowserExtensionIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 14.58 100 75">
    <path class="tw-fill-illustration-bg-secondary" d="M0 20.833a6.25 6.25 0 0 1 6.25-6.25h87.5a6.25 6.25 0 0 1 6.25 6.25v62.5a6.25 6.25 0 0 1-6.25 6.25H6.25A6.25 6.25 0 0 1 0 83.333v-62.5Z"/>
    <path class="tw-fill-illustration-tertiary" d="M14.583 52.084a4.167 4.167 0 0 1 4.167-4.167h65.625a4.167 4.167 0 0 1 4.166 4.167v6.25a4.167 4.167 0 0 1-4.166 4.166H18.75a4.167 4.167 0 0 1-4.167-4.166v-6.25Z"/>
--- a/libs/assets/src/svg/svgs/business-unit-portal.ts
+++ b/libs/assets/src/svg/svgs/business-unit-portal.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-const BusinessUnitPortalLogo = svgIcon`
+const BusinessUnitPortalLogo = svg`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 46" fill="none">
    <g class="tw-fill-text-alt2" clip-path="url(#business-unit-portal-logo-clip)">
      <path fill-rule="evenodd" d="M47.948 7.444c2.284 0 4.06.867 5.366 2.674 1.305 1.77 1.958 4.191 1.958 7.263 0 3.18-.653 5.637-1.995 7.371-1.341 1.77-3.154 2.602-5.438 2.602s-4.025-.795-5.33-2.457h-.363l-.688 1.698a.67.67 0 0 1-.617.398h-2.9a.649.649 0 0 1-.653-.65V.94c0-.362.29-.65.653-.65h3.915c.363 0 .653.288.653.65v5.564c0 .795-.072 2.06-.218 3.794h.218c1.197-1.879 3.046-2.854 5.439-2.854Zm-1.668 4.228c-1.27 0-2.248.397-2.865 1.192-.58.795-.906 2.132-.906 3.939v.578c0 2.06.29 3.541.906 4.408.617.867 1.596 1.337 2.937 1.337 1.052 0 1.958-.506 2.575-1.517.616-.976.942-2.458.942-4.3 0-1.88-.326-3.289-.943-4.228-.652-.94-1.559-1.41-2.646-1.41ZM63.9 27.029h-3.915a.649.649 0 0 1-.653-.65V8.491c0-.362.29-.65.653-.65h3.916c.362 0 .652.288.652.65v17.85c.037.326-.29.687-.652.687Zm14.322-3.867c.762 0 1.668-.144 2.756-.433a.435.435 0 0 1 .544.433v3c0 .18-.109.325-.254.397-1.233.506-2.792.759-4.532.759-2.103 0-3.626-.506-4.569-1.59-.942-1.048-1.45-2.638-1.45-4.734V11.78H68.65a.418.418 0 0 1-.435-.434V9.648c0-.036.037-.072.037-.108l2.864-1.699 1.414-3.758c.073-.18.218-.289.399-.289h2.61c.254 0 .435.18.435.434v3.65h5.185c.109 0 .218.108.218.216v3.252a.418.418 0 0 1-.435.434H76.01v9.178c0 .723.217 1.301.616 1.626.363.398.943.578 1.595.578Zm24.401 3.867c-.507 0-.906-.325-1.124-.795l-3.843-11.672c-.254-.83-.58-2.095-1.015-3.722h-.109l-.362 1.301-.762 2.457-3.952 11.672c-.145.47-.58.759-1.088.759a1.12 1.12 0 0 1-1.087-.831L84.459 9.395c-.145-.506.253-1.048.834-1.048h.108c.363 0 .69.253.798.614l2.828 10.227c.689 2.674 1.16 4.625 1.378 5.926h.108c.653-2.674 1.16-4.445 1.487-5.348L95.662 9.07c.145-.434.544-.723 1.051-.723.472 0 .87.29 1.016.723l3.408 10.623c.834 2.71 1.341 4.445 1.523 5.348h.108c.109-.722.544-2.746 1.378-5.998l2.72-10.082a.848.848 0 0 1 .797-.614c.544 0 .943.506.798 1.048l-4.569 16.803c-.145.506-.58.83-1.124.83h-.145Zm21.537 0a.663.663 0 0 1-.652-.578l-.327-2.385H123c-.943 1.192-1.885 2.06-2.901 2.565-.979.506-2.175.723-3.517.723-1.849 0-3.263-.47-4.278-1.41-.906-.83-1.414-1.95-1.486-3.36-.145-1.879.652-3.686 2.175-4.733 1.559-1.012 3.734-1.627 6.671-1.627l3.554-.108v-1.229c0-1.806-.363-3.107-1.124-4.01-.762-.904-1.886-1.337-3.481-1.337-1.523 0-3.046.36-4.641 1.12-.399.18-.87 0-1.052-.398-.181-.397 0-.867.399-1.011 1.813-.723 3.59-1.12 5.403-1.12 2.066 0 3.589.541 4.641 1.625 1.015 1.048 1.522 2.747 1.522 4.95v11.745c-.036.216-.362.578-.725.578Zm-7.505-1.229c2.03 0 3.589-.578 4.713-1.698 1.161-1.12 1.741-2.746 1.741-4.734v-1.806l-3.263.144c-2.647.108-4.496.542-5.657 1.229-1.124.686-1.704 1.806-1.704 3.252 0 1.156.363 2.096 1.052 2.746.797.542 1.813.867 3.118.867Zm21.464-17.814c.544 0 1.088.036 1.704.108a.815.815 0 0 1 .689.94c-.072.433-.507.686-.942.614-.544-.072-1.088-.145-1.632-.145-1.595 0-2.901.687-3.916 2.024-1.015 1.337-1.523 3.072-1.523 5.095v9.467c0 .47-.362.831-.834.831a.819.819 0 0 1-.833-.83V9.105c0-.398.326-.723.725-.723.398 0 .725.29.725.687l.145 2.674h.109c.761-1.373 1.595-2.349 2.465-2.891.834-.578 1.885-.867 3.118-.867Zm12.763 0c1.341 0 2.538.253 3.517.722 1.015.47 1.885 1.338 2.646 2.53h.109a86.156 86.156 0 0 1-.109-4.228V1.12a.82.82 0 0 1 .834-.83c.472 0 .834.36.834.83v25.258a.571.571 0 0 1-.58.579.588.588 0 0 1-.58-.543l-.363-2.348h-.145c-1.414 2.132-3.48 3.18-6.127 3.18-2.611 0-4.532-.795-5.946-2.421-1.342-1.627-2.067-3.94-2.067-7.01 0-3.217.653-5.674 2.031-7.408 1.377-1.554 3.335-2.421 5.946-2.421Zm0 1.554c-2.067 0-3.59.722-4.641 2.168-1.015 1.409-1.523 3.469-1.523 6.215 0 5.276 2.067 7.913 6.2 7.913 2.139 0 3.662-.614 4.641-1.842 1.015-1.23 1.486-3.253 1.486-6.071v-.29c0-2.89-.471-4.95-1.486-6.178-.943-1.301-2.502-1.915-4.677-1.915ZM172.6 27.354c-2.719 0-4.822-.831-6.381-2.53-1.523-1.662-2.285-4.01-2.285-7.01 0-2.999.725-5.384 2.212-7.154 1.487-1.807 3.444-2.71 5.946-2.71 2.176 0 3.952.758 5.185 2.276 1.305 1.518 1.922 3.614 1.922 6.251v1.374h-13.488c.036 2.565.616 4.516 1.813 5.89 1.196 1.373 2.864 1.987 5.076 1.987 1.051 0 2.03-.072 2.828-.217.58-.108 1.269-.289 2.103-.578.471-.18.979.18.979.687 0 .289-.182.578-.472.686-.87.361-1.704.578-2.465.723-.907.253-1.885.325-2.973.325Zm-.508-17.85c-1.813 0-3.263.578-4.351 1.77-1.087 1.156-1.704 2.89-1.921 5.095h11.602c0-2.132-.471-3.866-1.414-5.059-.943-1.192-2.248-1.807-3.916-1.807Zm26.25 17.525a.819.819 0 0 1-.833-.831v-11.31c0-1.88-.399-3.253-1.161-4.084-.834-.83-2.03-1.3-3.698-1.3-2.248 0-3.879.542-4.895 1.698-1.015 1.12-1.595 2.963-1.595 5.456v9.467a.82.82 0 0 1-.834.832.82.82 0 0 1-.834-.832V9.107c0-.434.326-.759.762-.759.398 0 .688.29.761.65l.218 1.88h.108c1.233-1.952 3.372-2.927 6.49-2.927 4.242 0 6.382 2.276 6.382 6.83v11.345c-.037.506-.435.904-.871.904ZM61.979 0c-1.704 0-3.082 1.3-3.082 2.927v.289c0 1.59 1.414 2.927 3.082 2.927s3.082-1.337 3.082-2.927v-.253C65.061 1.301 63.647 0 61.979 0Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/business-welcome.icon.ts
+++ b/libs/assets/src/svg/svgs/business-welcome.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const BusinessWelcome = svgIcon`
+export const BusinessWelcome = svg`
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4.17 0.75 91.67 95.83">
  <path class="tw-fill-illustration-bg-secondary" d="M56.25 9.085A8.333 8.333 0 0 1 64.583.752h8.334a8.333 8.333 0 0 1 8.333 8.333v4.167h-25V9.085Z"/>
  <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M72.917 2.835h-8.334a6.25 6.25 0 0 0-6.25 6.25v2.084h20.834V9.085a6.25 6.25 0 0 0-6.25-6.25ZM64.583.752a8.333 8.333 0 0 0-8.333 8.333v4.167h25V9.085A8.333 8.333 0 0 0 72.917.752h-8.334Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/carousel-icon.ts
+++ b/libs/assets/src/svg/svgs/carousel-icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const CarouselIcon = svgIcon`
+export const CarouselIcon = svg`
  <svg class="tw-block" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="inactive-carousel-icon">
    <rect class="tw-stroke-current" x="0.5" y="0.5" width="11" height="11" rx="5.5" />
  </svg>
--- a/libs/assets/src/svg/svgs/credit-card.icon.ts
+++ b/libs/assets/src/svg/svgs/credit-card.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const CreditCardIcon = svgIcon`
+export const CreditCardIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0.98 15.86 95.04 65.76">
    <path class="tw-fill-illustration-bg-secondary" d="M.98 21.62a5.76 5.76 0 0 1 5.76-5.76h57.6a5.76 5.76 0 0 1 5.76 5.76v33.6a5.76 5.76 0 0 1-5.76 5.76H6.74a5.76 5.76 0 0 1-5.76-5.76v-33.6Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M64.34 17.78H6.74a3.84 3.84 0 0 0-3.84 3.84v33.6a3.84 3.84 0 0 0 3.84 3.84h57.6a3.84 3.84 0 0 0 3.84-3.84v-33.6a3.84 3.84 0 0 0-3.84-3.84Zm-57.6-1.92a5.76 5.76 0 0 0-5.76 5.76v33.6a5.76 5.76 0 0 0 5.76 5.76h57.6a5.76 5.76 0 0 0 5.76-5.76v-33.6a5.76 5.76 0 0 0-5.76-5.76H6.74Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/deactivated-org.ts
+++ b/libs/assets/src/svg/svgs/deactivated-org.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const DeactivatedOrg = svgIcon`
+export const DeactivatedOrg = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 0.5 90.32 96">
    <path class="tw-fill-illustration-bg-secondary" d="M54 8.5a8 8 0 0 1 8-8h8a8 8 0 0 1 8 8v4H54v-4Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M70 2.5h-8a6 6 0 0 0-6 6v2h20v-2a6 6 0 0 0-6-6Zm-8-2a8 8 0 0 0-8 8v4h24v-4a8 8 0 0 0-8-8h-8Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/devices.icon.ts
+++ b/libs/assets/src/svg/svgs/devices.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const DevicesIcon = svgIcon`
+export const DevicesIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 10 80 60">
    <path class="tw-fill-illustration-bg-primary" d="M7.5 15a5 5 0 0 1 5-5h55a5 5 0 0 1 5 5v35a5 5 0 0 1-5 5h-55a5 5 0 0 1-5-5V15Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M67.5 11.667h-55A3.333 3.333 0 0 0 9.167 15v35a3.333 3.333 0 0 0 3.333 3.333h55A3.333 3.333 0 0 0 70.833 50V15a3.333 3.333 0 0 0-3.333-3.333ZM12.5 10a5 5 0 0 0-5 5v35a5 5 0 0 0 5 5h55a5 5 0 0 0 5-5V15a5 5 0 0 0-5-5h-55Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/domain.icon.ts
+++ b/libs/assets/src/svg/svgs/domain.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const DomainIcon = svgIcon`
+export const DomainIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0.52 0.12 120 120">
    <path class="tw-fill-illustration-bg-primary" d="M120.518 60.121c0 33.137-26.863 60-60 60s-60-26.863-60-60 26.863-60 60-60 60 26.863 60 60Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M60.518 117.621c31.756 0 57.5-25.743 57.5-57.5 0-31.756-25.744-57.5-57.5-57.5s-57.5 25.744-57.5 57.5 25.744 57.5 57.5 57.5Zm0 2.5c33.137 0 60-26.863 60-60s-26.863-60-60-60-60 26.863-60 60 26.863 60 60 60Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/empty-trash.ts
+++ b/libs/assets/src/svg/svgs/empty-trash.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const EmptyTrash = svgIcon`
+export const EmptyTrash = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0.22 7 95.71 88">
    <path class="tw-fill-illustration-bg-primary" d="M.232 9.21A2 2 0 0 1 2.222 7h67.556a2 2 0 0 1 1.99 2.21l-7.014 66.627A8 8 0 0 1 56.798 83H15.202a8 8 0 0 1-7.956-7.162L.232 9.209Z"/>
    <path class="tw-fill-illustration-bg-secondary" d="M60.283 80.99C63.59 80.76 61.313 77 58 77H14c-3.314 0-5.59 3.759-2.284 3.99.094.007.189.01.284.01h48c.095 0 .19-.003.283-.01Z"/>
--- a/libs/assets/src/svg/svgs/favorites.icon.ts
+++ b/libs/assets/src/svg/svgs/favorites.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const FavoritesIcon = svgIcon`
+export const FavoritesIcon = svg`
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="5.29 4.98 86.89 90.19">
 <g clip-path="url(#clip0_2211_2391)">
 <path class="tw-stroke-illustration-outline tw-fill-illustration-bg-primary" d="M45.7322 7.73645C46.8425 5.06767 50.6228 5.06767 51.7332 7.73645L60.8269 29.5929C61.511 31.2373 63.0575 32.3607 64.8328 32.5031L88.4343 34.3947C91.316 34.6257 92.4843 38.2221 90.2888 40.1027L72.3083 55.5001C70.9554 56.6589 70.3647 58.4773 70.7781 60.2101L76.2712 83.2335C76.9419 86.0452 73.8838 88.2672 71.4167 86.7609L51.2078 74.422C49.688 73.4941 47.7773 73.4941 46.2576 74.422L26.0486 86.7609C23.5815 88.2672 20.5234 86.0452 21.1941 83.2335L26.6873 60.2101C27.1007 58.4773 26.51 56.6589 25.157 55.5001L7.17651 40.1027C4.98107 38.2221 6.14942 34.6258 9.03101 34.3947L32.6326 32.5031C34.4079 32.3607 35.9543 31.2373 36.6384 29.5929L45.7322 7.73645Z" stroke-width="1.5"/>
--- a/libs/assets/src/svg/svgs/gear.ts
+++ b/libs/assets/src/svg/svgs/gear.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const GearIcon = svgIcon`
+export const GearIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4.8 6 110.4 107.52">
    <path class="tw-fill-illustration-bg-primary" d="M59.64 84.96c12.924 0 23.4-10.316 23.4-23.04 0-12.725-10.476-23.04-23.4-23.04-12.923 0-23.4 10.315-23.4 23.04 0 12.724 10.477 23.04 23.4 23.04Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M59.64 40.08c-12.278 0-22.2 9.795-22.2 21.84 0 12.044 9.922 21.84 22.2 21.84 12.278 0 22.2-9.796 22.2-21.84 0-12.045-9.922-21.84-22.2-21.84Zm-24.6 21.84c0-13.405 11.031-24.24 24.6-24.24s24.6 10.835 24.6 24.24c0 13.405-11.031 24.24-24.6 24.24s-24.6-10.835-24.6-24.24Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/generator.ts
+++ b/libs/assets/src/svg/svgs/generator.ts
@@ -1,12 +1,12 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const GeneratorInactive = svgIcon`
+export const GeneratorInactive = svg`
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
  </svg>
 `;

-export const GeneratorActive = svgIcon`
+export const GeneratorActive = svg`
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z" class="tw-fill-primary-100" />
    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-primary-600" />
--- a/libs/assets/src/svg/svgs/item-types.ts
+++ b/libs/assets/src/svg/svgs/item-types.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const ItemTypes = svgIcon`
+export const ItemTypes = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 18.75 150 112.5">
    <path class="tw-fill-illustration-bg-secondary" d="M0 28.125a9.375 9.375 0 0 1 9.375-9.375h50a9.375 9.375 0 0 1 9.375 9.375v31.25a9.375 9.375 0 0 1-9.375 9.375h-50A9.375 9.375 0 0 1 0 59.375v-31.25Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M59.375 21.875h-50a6.25 6.25 0 0 0-6.25 6.25v31.25a6.25 6.25 0 0 0 6.25 6.25h50a6.25 6.25 0 0 0 6.25-6.25v-31.25a6.25 6.25 0 0 0-6.25-6.25Zm-50-3.125A9.375 9.375 0 0 0 0 28.125v31.25a9.375 9.375 0 0 0 9.375 9.375h50a9.375 9.375 0 0 0 9.375-9.375v-31.25a9.375 9.375 0 0 0-9.375-9.375h-50Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/lock.icon.ts
+++ b/libs/assets/src/svg/svgs/lock.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const LockIcon = svgIcon`
+export const LockIcon = svg`
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 73.33">
  <path class="tw-fill-illustration-bg-primary" d="M11.667 31.666c0-5.523 3.805-10 8.5-10h39.666c4.695 0 8.5 4.477 8.5 10v31.667c0 5.523-3.805 10-8.5 10H20.167c-4.695 0-8.5-4.477-8.5-10V31.666Z"/>
  <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M59.833 23.333H20.167c-3.912 0-7.084 3.73-7.084 8.333v31.667c0 4.602 3.172 8.333 7.084 8.333h39.666c3.912 0 7.084-3.73 7.084-8.333V31.666c0-4.602-3.172-8.333-7.084-8.333Zm-39.666-1.667c-4.695 0-8.5 4.477-8.5 10v31.667c0 5.523 3.805 10 8.5 10h39.666c4.695 0 8.5-4.477 8.5-10V31.666c0-5.523-3.805-10-8.5-10H20.167Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/login-cards.ts
+++ b/libs/assets/src/svg/svgs/login-cards.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const LoginCards = svgIcon`
+export const LoginCards = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="6.25 6.25 137.5 137.5">
    <path class="tw-fill-illustration-bg-secondary" d="M18.75 53.125a9.375 9.375 0 0 1 9.375-9.375h106.25a9.375 9.375 0 0 1 9.375 9.375v81.25a9.375 9.375 0 0 1-9.375 9.375H28.125a9.375 9.375 0 0 1-9.375-9.375v-81.25Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M134.375 46.875H28.125a6.25 6.25 0 0 0-6.25 6.25v81.25a6.25 6.25 0 0 0 6.25 6.25h106.25a6.25 6.25 0 0 0 6.25-6.25v-81.25a6.25 6.25 0 0 0-6.25-6.25ZM28.125 43.75a9.375 9.375 0 0 0-9.375 9.375v81.25a9.375 9.375 0 0 0 9.375 9.375h106.25a9.375 9.375 0 0 0 9.375-9.375v-81.25a9.375 9.375 0 0 0-9.375-9.375H28.125Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/no-credentials.icon.ts
+++ b/libs/assets/src/svg/svgs/no-credentials.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const NoCredentialsIcon = svgIcon`
+export const NoCredentialsIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 1.49 96 94.02">
    <path class="tw-fill-illustration-bg-primary" d="M79 48.5c0 17.12-13.88 31-31 31-17.12 0-31-13.88-31-31 0-17.12 13.88-31 31-31 17.12 0 31 13.88 31 31Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M48 18.5c-16.569 0-30 13.431-30 30 0 16.569 13.431 30 30 30 16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30Zm-32 30c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/no-folders.ts
+++ b/libs/assets/src/svg/svgs/no-folders.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const NoFolders = svgIcon`
+export const NoFolders = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 12.5 93.63 72">
    <path class="tw-fill-illustration-bg-secondary" d="M2 21.5a6 6 0 0 1 6-6h17.24a6 6 0 0 1 4.556 2.095L34 22.5h52a4 4 0 0 1 4 4v36c0 12.15-9.85 22-22 22H7a5 5 0 0 1-5-5v-58Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="m33.08 24.5-4.803-5.603A4 4 0 0 0 25.24 17.5H8a4 4 0 0 0-4 4v58a3 3 0 0 0 3 3h61c11.046 0 20-8.954 20-20v-36a2 2 0 0 0-2-2H33.08Zm.92-2-4.204-4.905A6 6 0 0 0 25.24 15.5H8a6 6 0 0 0-6 6v58a5 5 0 0 0 5 5h61c12.15 0 22-9.85 22-22v-36a4 4 0 0 0-4-4H34Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/no-results.ts
+++ b/libs/assets/src/svg/svgs/no-results.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const NoResults = svgIcon`
+export const NoResults = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4.5 91.63 88">
    <path class="tw-fill-illustration-bg-secondary" d="M62 12.5a2 2 0 0 1 2 2v76a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-76a2 2 0 0 1 2-2h56Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M62 90.5v-76H6v76h56Zm2-76a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v76a2 2 0 0 0 2 2h56a2 2 0 0 0 2-2v-76Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/no-send.icon.ts
+++ b/libs/assets/src/svg/svgs/no-send.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const NoSendsIcon = svgIcon`
+export const NoSendsIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="9 4 83.89 91">
    <path class="tw-fill-illustration-bg-secondary" d="M67 12a2 2 0 0 1 2 2v76a2 2 0 0 1-2 2H11a2 2 0 0 1-2-2V14a2 2 0 0 1 2-2h56Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M67 90V14H11v76h56Zm2-76a2 2 0 0 0-2-2H11a2 2 0 0 0-2 2v76a2 2 0 0 0 2 2h56a2 2 0 0 0 2-2V14Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/party.ts
+++ b/libs/assets/src/svg/svgs/party.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const Party = svgIcon`
+export const Party = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="3.76 4 88.24 88.24">
    <path class="tw-fill-illustration-tertiary" d="M61.342 69.774 10.61 90.912a4.223 4.223 0 0 1-5.523-5.523l21.138-50.73a8 8 0 0 1 9.683-4.586l1.43.428a42 42 0 0 1 28.16 28.16l.428 1.43a8 8 0 0 1-4.585 9.683Z"/>
    <path class="tw-fill-illustration-bg-tertiary" fill-rule="evenodd" d="M29.603 82.999a87.777 87.777 0 0 1-8.85-7.751A87.763 87.763 0 0 1 13 66.397l.893-2.143a85.302 85.302 0 0 0 8.273 9.58c3.099 3.099 6.32 5.863 9.579 8.272l-2.143.893Zm-8.438 3.516a104.44 104.44 0 0 1-6.07-5.61 104.496 104.496 0 0 1-5.61-6.07l-.86 2.066a106.756 106.756 0 0 0 5.056 5.418 106.754 106.754 0 0 0 5.418 5.056l2.066-.86Zm19.768-8.237c-4.415-2.637-8.845-6.073-12.991-10.22-4.147-4.147-7.583-8.576-10.22-12.991l.967-2.321c2.625 4.678 6.212 9.443 10.667 13.898s9.22 8.042 13.898 10.667l-2.32.967Zm-17.882-36c1.659 6.049 5.736 12.863 11.772 18.899 6.036 6.036 12.85 10.113 18.9 11.772l3.242-1.351a23.334 23.334 0 0 1-3.26-.734c-5.523-1.644-11.815-5.448-17.468-11.101-5.653-5.654-9.458-11.945-11.101-17.469a23.344 23.344 0 0 1-.734-3.259l-1.351 3.243Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/password-manager.ts
+++ b/libs/assets/src/svg/svgs/password-manager.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-const PasswordManagerLogo = svgIcon`
+const PasswordManagerLogo = svg`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 49" fill="none">
    <g class="tw-fill-fg-sidenav-text" clip-path="url(#password-manager-logo-clip)">
      <path fill-rule="evenodd" d="M47.948 7.444c2.284 0 4.06.867 5.366 2.674 1.305 1.77 1.958 4.191 1.958 7.263 0 3.18-.653 5.637-1.995 7.371-1.341 1.77-3.154 2.602-5.438 2.602s-4.025-.795-5.33-2.457h-.363l-.688 1.698a.67.67 0 0 1-.617.398h-2.9a.649.649 0 0 1-.653-.65V.94c0-.362.29-.65.653-.65h3.915c.363 0 .653.288.653.65v5.564c0 .795-.072 2.06-.218 3.794h.218c1.197-1.879 3.046-2.854 5.439-2.854Zm-1.668 4.228c-1.27 0-2.248.397-2.865 1.192-.58.795-.906 2.132-.906 3.939v.578c0 2.06.29 3.541.906 4.408.617.867 1.596 1.337 2.937 1.337 1.052 0 1.958-.506 2.575-1.517.616-.976.942-2.458.942-4.3 0-1.88-.326-3.289-.943-4.228-.652-.94-1.559-1.41-2.646-1.41ZM63.9 27.029h-3.915a.649.649 0 0 1-.653-.65V8.491c0-.362.29-.65.653-.65h3.916c.362 0 .652.288.652.65v17.85c.037.326-.29.687-.652.687Zm14.322-3.867c.762 0 1.668-.144 2.756-.433a.435.435 0 0 1 .544.433v3c0 .18-.109.325-.254.397-1.233.506-2.792.759-4.532.759-2.103 0-3.626-.506-4.569-1.59-.942-1.048-1.45-2.638-1.45-4.734V11.78H68.65a.418.418 0 0 1-.435-.434V9.648c0-.036.037-.072.037-.108l2.864-1.699 1.414-3.758c.073-.18.218-.289.399-.289h2.61c.254 0 .435.18.435.434v3.65h5.185c.109 0 .218.108.218.216v3.252a.418.418 0 0 1-.435.434H76.01v9.178c0 .723.217 1.301.616 1.626.363.398.943.578 1.595.578Zm24.401 3.867c-.507 0-.906-.325-1.124-.795l-3.843-11.672c-.254-.83-.58-2.095-1.015-3.722h-.109l-.362 1.301-.762 2.457-3.952 11.672c-.145.47-.58.759-1.088.759a1.12 1.12 0 0 1-1.087-.831L84.459 9.395c-.145-.506.253-1.048.834-1.048h.108c.363 0 .69.253.798.614l2.828 10.227c.689 2.674 1.16 4.625 1.378 5.926h.108c.653-2.674 1.16-4.445 1.487-5.348L95.662 9.07c.145-.434.544-.723 1.051-.723.472 0 .87.29 1.016.723l3.408 10.623c.834 2.71 1.341 4.445 1.523 5.348h.108c.109-.722.544-2.746 1.378-5.998l2.72-10.082a.848.848 0 0 1 .797-.614c.544 0 .943.506.798 1.048l-4.569 16.803c-.145.506-.58.83-1.124.83h-.145Zm21.537 0a.663.663 0 0 1-.652-.578l-.327-2.385H123c-.943 1.192-1.885 2.06-2.901 2.565-.979.506-2.175.723-3.517.723-1.849 0-3.263-.47-4.278-1.41-.906-.83-1.414-1.95-1.486-3.36-.145-1.879.652-3.686 2.175-4.733 1.559-1.012 3.734-1.627 6.671-1.627l3.554-.108v-1.229c0-1.806-.363-3.107-1.124-4.01-.762-.904-1.886-1.337-3.481-1.337-1.523 0-3.046.36-4.641 1.12-.399.18-.87 0-1.052-.398-.181-.397 0-.867.399-1.011 1.813-.723 3.59-1.12 5.403-1.12 2.066 0 3.589.541 4.641 1.625 1.015 1.048 1.522 2.747 1.522 4.95v11.745c-.036.216-.362.578-.725.578Zm-7.505-1.229c2.03 0 3.589-.578 4.713-1.698 1.161-1.12 1.741-2.746 1.741-4.734v-1.806l-3.263.144c-2.647.108-4.496.542-5.657 1.229-1.124.686-1.704 1.806-1.704 3.252 0 1.156.363 2.096 1.052 2.746.797.542 1.813.867 3.118.867Zm21.464-17.814c.544 0 1.088.036 1.704.108a.815.815 0 0 1 .689.94c-.072.433-.507.686-.942.614-.544-.072-1.088-.145-1.632-.145-1.595 0-2.901.687-3.916 2.024-1.015 1.337-1.523 3.072-1.523 5.095v9.467c0 .47-.362.831-.834.831a.819.819 0 0 1-.833-.83V9.105c0-.398.326-.723.725-.723.398 0 .725.29.725.687l.145 2.674h.109c.761-1.373 1.595-2.349 2.465-2.891.834-.578 1.885-.867 3.118-.867Zm12.763 0c1.341 0 2.538.253 3.517.722 1.015.47 1.885 1.338 2.646 2.53h.109a86.156 86.156 0 0 1-.109-4.228V1.12a.82.82 0 0 1 .834-.83c.472 0 .834.36.834.83v25.258a.571.571 0 0 1-.58.579.588.588 0 0 1-.58-.543l-.363-2.348h-.145c-1.414 2.132-3.48 3.18-6.127 3.18-2.611 0-4.532-.795-5.946-2.421-1.342-1.627-2.067-3.94-2.067-7.01 0-3.217.653-5.674 2.031-7.408 1.377-1.554 3.335-2.421 5.946-2.421Zm0 1.554c-2.067 0-3.59.722-4.641 2.168-1.015 1.409-1.523 3.469-1.523 6.215 0 5.276 2.067 7.913 6.2 7.913 2.139 0 3.662-.614 4.641-1.842 1.015-1.23 1.486-3.253 1.486-6.071v-.29c0-2.89-.471-4.95-1.486-6.178-.943-1.301-2.502-1.915-4.677-1.915ZM172.6 27.354c-2.719 0-4.822-.831-6.381-2.53-1.523-1.662-2.285-4.01-2.285-7.01 0-2.999.725-5.384 2.212-7.154 1.487-1.807 3.444-2.71 5.946-2.71 2.176 0 3.952.758 5.185 2.276 1.305 1.518 1.922 3.614 1.922 6.251v1.374h-13.488c.036 2.565.616 4.516 1.813 5.89 1.196 1.373 2.864 1.987 5.076 1.987 1.051 0 2.03-.072 2.828-.217.58-.108 1.269-.289 2.103-.578.471-.18.979.18.979.687 0 .289-.182.578-.472.686-.87.361-1.704.578-2.465.723-.907.253-1.885.325-2.973.325Zm-.508-17.85c-1.813 0-3.263.578-4.351 1.77-1.087 1.156-1.704 2.89-1.921 5.095h11.602c0-2.132-.471-3.866-1.414-5.059-.943-1.192-2.248-1.807-3.916-1.807Zm26.25 17.525a.819.819 0 0 1-.833-.831v-11.31c0-1.88-.399-3.253-1.161-4.084-.834-.83-2.03-1.3-3.698-1.3-2.248 0-3.879.542-4.895 1.698-1.015 1.12-1.595 2.963-1.595 5.456v9.467a.82.82 0 0 1-.834.832.82.82 0 0 1-.834-.832V9.107c0-.434.326-.759.762-.759.398 0 .688.29.761.65l.218 1.88h.108c1.233-1.952 3.372-2.927 6.49-2.927 4.242 0 6.382 2.276 6.382 6.83v11.345c-.037.506-.435.904-.871.904ZM61.979 0c-1.704 0-3.082 1.3-3.082 2.927v.289c0 1.59 1.414 2.927 3.082 2.927s3.082-1.337 3.082-2.927v-.253C65.061 1.301 63.647 0 61.979 0Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/provider-portal.ts
+++ b/libs/assets/src/svg/svgs/provider-portal.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-const ProviderPortalLogo = svgIcon`
+const ProviderPortalLogo = svg`
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 46" fill="none">
    <g class="tw-fill-fg-sidenav-text" clip-path="url(#provider-portal-logo-clip)">
      <path fill-rule="evenodd" d="M47.948 7.444c2.284 0 4.06.867 5.366 2.674 1.305 1.77 1.958 4.191 1.958 7.263 0 3.18-.653 5.637-1.995 7.371-1.341 1.77-3.154 2.602-5.438 2.602s-4.025-.795-5.33-2.457h-.363l-.688 1.698a.67.67 0 0 1-.617.398h-2.9a.649.649 0 0 1-.653-.65V.94c0-.362.29-.65.653-.65h3.915c.363 0 .653.288.653.65v5.564c0 .795-.072 2.06-.218 3.794h.218c1.197-1.879 3.046-2.854 5.439-2.854Zm-1.668 4.228c-1.27 0-2.248.397-2.865 1.192-.58.795-.906 2.132-.906 3.939v.578c0 2.06.29 3.541.906 4.408.617.867 1.596 1.337 2.937 1.337 1.052 0 1.958-.506 2.575-1.517.616-.976.942-2.458.942-4.3 0-1.88-.326-3.289-.943-4.228-.652-.94-1.559-1.41-2.646-1.41ZM63.9 27.029h-3.915a.649.649 0 0 1-.653-.65V8.491c0-.362.29-.65.653-.65h3.916c.362 0 .652.288.652.65v17.85c.037.326-.29.687-.652.687Zm14.322-3.867c.762 0 1.668-.144 2.756-.433a.435.435 0 0 1 .544.433v3c0 .18-.109.325-.254.397-1.233.506-2.792.759-4.532.759-2.103 0-3.626-.506-4.569-1.59-.942-1.048-1.45-2.638-1.45-4.734V11.78H68.65a.418.418 0 0 1-.435-.434V9.648c0-.036.037-.072.037-.108l2.864-1.699 1.414-3.758c.073-.18.218-.289.399-.289h2.61c.254 0 .435.18.435.434v3.65h5.185c.109 0 .218.108.218.216v3.252a.418.418 0 0 1-.435.434H76.01v9.178c0 .723.217 1.301.616 1.626.363.398.943.578 1.595.578Zm24.401 3.867c-.507 0-.906-.325-1.124-.795l-3.843-11.672c-.254-.83-.58-2.095-1.015-3.722h-.109l-.362 1.301-.762 2.457-3.952 11.672c-.145.47-.58.759-1.088.759a1.12 1.12 0 0 1-1.087-.831L84.459 9.395c-.145-.506.253-1.048.834-1.048h.108c.363 0 .69.253.798.614l2.828 10.227c.689 2.674 1.16 4.625 1.378 5.926h.108c.653-2.674 1.16-4.445 1.487-5.348L95.662 9.07c.145-.434.544-.723 1.051-.723.472 0 .87.29 1.016.723l3.408 10.623c.834 2.71 1.341 4.445 1.523 5.348h.108c.109-.722.544-2.746 1.378-5.998l2.72-10.082a.848.848 0 0 1 .797-.614c.544 0 .943.506.798 1.048l-4.569 16.803c-.145.506-.58.83-1.124.83h-.145Zm21.537 0a.663.663 0 0 1-.652-.578l-.327-2.385H123c-.943 1.192-1.885 2.06-2.901 2.565-.979.506-2.175.723-3.517.723-1.849 0-3.263-.47-4.278-1.41-.906-.83-1.414-1.95-1.486-3.36-.145-1.879.652-3.686 2.175-4.733 1.559-1.012 3.734-1.627 6.671-1.627l3.554-.108v-1.229c0-1.806-.363-3.107-1.124-4.01-.762-.904-1.886-1.337-3.481-1.337-1.523 0-3.046.36-4.641 1.12-.399.18-.87 0-1.052-.398-.181-.397 0-.867.399-1.011 1.813-.723 3.59-1.12 5.403-1.12 2.066 0 3.589.541 4.641 1.625 1.015 1.048 1.522 2.747 1.522 4.95v11.745c-.036.216-.362.578-.725.578Zm-7.505-1.229c2.03 0 3.589-.578 4.713-1.698 1.161-1.12 1.741-2.746 1.741-4.734v-1.806l-3.263.144c-2.647.108-4.496.542-5.657 1.229-1.124.686-1.704 1.806-1.704 3.252 0 1.156.363 2.096 1.052 2.746.797.542 1.813.867 3.118.867Zm21.464-17.814c.544 0 1.088.036 1.704.108a.815.815 0 0 1 .689.94c-.072.433-.507.686-.942.614-.544-.072-1.088-.145-1.632-.145-1.595 0-2.901.687-3.916 2.024-1.015 1.337-1.523 3.072-1.523 5.095v9.467c0 .47-.362.831-.834.831a.819.819 0 0 1-.833-.83V9.105c0-.398.326-.723.725-.723.398 0 .725.29.725.687l.145 2.674h.109c.761-1.373 1.595-2.349 2.465-2.891.834-.578 1.885-.867 3.118-.867Zm12.763 0c1.341 0 2.538.253 3.517.722 1.015.47 1.885 1.338 2.646 2.53h.109a86.156 86.156 0 0 1-.109-4.228V1.12a.82.82 0 0 1 .834-.83c.472 0 .834.36.834.83v25.258a.571.571 0 0 1-.58.579.588.588 0 0 1-.58-.543l-.363-2.348h-.145c-1.414 2.132-3.48 3.18-6.127 3.18-2.611 0-4.532-.795-5.946-2.421-1.342-1.627-2.067-3.94-2.067-7.01 0-3.217.653-5.674 2.031-7.408 1.377-1.554 3.335-2.421 5.946-2.421Zm0 1.554c-2.067 0-3.59.722-4.641 2.168-1.015 1.409-1.523 3.469-1.523 6.215 0 5.276 2.067 7.913 6.2 7.913 2.139 0 3.662-.614 4.641-1.842 1.015-1.23 1.486-3.253 1.486-6.071v-.29c0-2.89-.471-4.95-1.486-6.178-.943-1.301-2.502-1.915-4.677-1.915ZM172.6 27.354c-2.719 0-4.822-.831-6.381-2.53-1.523-1.662-2.285-4.01-2.285-7.01 0-2.999.725-5.384 2.212-7.154 1.487-1.807 3.444-2.71 5.946-2.71 2.176 0 3.952.758 5.185 2.276 1.305 1.518 1.922 3.614 1.922 6.251v1.374h-13.488c.036 2.565.616 4.516 1.813 5.89 1.196 1.373 2.864 1.987 5.076 1.987 1.051 0 2.03-.072 2.828-.217.58-.108 1.269-.289 2.103-.578.471-.18.979.18.979.687 0 .289-.182.578-.472.686-.87.361-1.704.578-2.465.723-.907.253-1.885.325-2.973.325Zm-.508-17.85c-1.813 0-3.263.578-4.351 1.77-1.087 1.156-1.704 2.89-1.921 5.095h11.602c0-2.132-.471-3.866-1.414-5.059-.943-1.192-2.248-1.807-3.916-1.807Zm26.25 17.525a.819.819 0 0 1-.833-.831v-11.31c0-1.88-.399-3.253-1.161-4.084-.834-.83-2.03-1.3-3.698-1.3-2.248 0-3.879.542-4.895 1.698-1.015 1.12-1.595 2.963-1.595 5.456v9.467a.82.82 0 0 1-.834.832.82.82 0 0 1-.834-.832V9.107c0-.434.326-.759.762-.759.398 0 .688.29.761.65l.218 1.88h.108c1.233-1.952 3.372-2.927 6.49-2.927 4.242 0 6.382 2.276 6.382 6.83v11.345c-.037.506-.435.904-.871.904ZM61.979 0c-1.704 0-3.082 1.3-3.082 2.927v.289c0 1.59 1.414 2.927 3.082 2.927s3.082-1.337 3.082-2.927v-.253C65.061 1.301 63.647 0 61.979 0Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/registration-check-email.icon.ts
+++ b/libs/assets/src/svg/svgs/registration-check-email.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const RegistrationCheckEmailIcon = svgIcon`
+export const RegistrationCheckEmailIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="3.33 0.87 76.36 76.8">
    <path class="tw-fill-illustration-bg-primary" d="M3.333 33.298a5 5 0 0 1 1.745-3.794L37.287 1.87a4.167 4.167 0 0 1 5.426 0l32.21 27.634a5 5 0 0 1 1.744 3.794v41.035a3.333 3.333 0 0 1-3.334 3.334H6.667a3.333 3.333 0 0 1-3.334-3.334V33.299Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M75 74.334V33.297c0-.972-.425-1.896-1.163-2.53L41.627 3.136a2.5 2.5 0 0 0-3.255 0L6.162 30.769A3.333 3.333 0 0 0 5 33.299v41.035C5 75.254 5.746 76 6.667 76h66.666c.92 0 1.667-.746 1.667-1.666ZM5.078 29.504a5 5 0 0 0-1.745 3.794v41.035a3.333 3.333 0 0 0 3.334 3.334h66.666a3.333 3.333 0 0 0 3.334-3.334V33.299a5 5 0 0 0-1.745-3.794L42.713 1.87a4.167 4.167 0 0 0-5.426 0L5.077 29.504Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/registration-user-add.icon.ts
+++ b/libs/assets/src/svg/svgs/registration-user-add.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const RegistrationUserAddIcon = svgIcon`
+export const RegistrationUserAddIcon = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 10 80 60">
    <path class="tw-fill-illustration-bg-primary" d="M0 14.8A4.8 4.8 0 0 1 4.8 10h45.4a4.8 4.8 0 0 1 4.8 4.8v32.067a4.8 4.8 0 0 1-4.8 4.8H4.8a4.8 4.8 0 0 1-4.8-4.8V14.8Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M50.2 11.6H4.8a3.2 3.2 0 0 0-3.2 3.2v32.067a3.2 3.2 0 0 0 3.2 3.2h45.4a3.2 3.2 0 0 0 3.2-3.2V14.8a3.2 3.2 0 0 0-3.2-3.2ZM4.8 10A4.8 4.8 0 0 0 0 14.8v32.067a4.8 4.8 0 0 0 4.8 4.8h45.4a4.8 4.8 0 0 0 4.8-4.8V14.8a4.8 4.8 0 0 0-4.8-4.8H4.8Z" clip-rule="evenodd"/>
--- a/libs/assets/src/svg/svgs/report-breach.icon.ts
+++ b/libs/assets/src/svg/svgs/report-breach.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";

-export const ReportBreach = svgIcon`
+export const ReportBreach = svg`
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="11.6 3.33 56.67 73.33">
    <path class="tw-fill-illustration-bg-secondary" d="M60 10a1.6 1.6 0 0 1 1.6 1.6v63.467a1.6 1.6 0 0 1-1.6 1.6H13.2a1.6 1.6 0 0 1-1.6-1.6V11.6a1.6 1.6 0 0 1 1.6-1.6H60Z"/>
    <path class="tw-fill-illustration-outline" fill-rule="evenodd" d="M60 75.067V11.6H13.2v63.467H60ZM61.6 11.6A1.6 1.6 0 0 0 60 10H13.2a1.6 1.6 0 0 0-1.6 1.6v63.467a1.6 1.6 0 0 0 1.6 1.6H60a1.6 1.6 0 0 0 1.6-1.6V11.6Z" clip-rule="evenodd"/>
--- a/Show More
+++ b/Show More