From 0d381c572bd569877b5141b44c604515c731bd95 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:29:19 -0700
Subject: [PATCH 01/16] feat(button): `icon` is generic

---
 src/Button/Button.svelte    |  5 +++--
 tests/Button/Button.test.ts | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 2b8d6b9838..796e49c9c0 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @extends {"./ButtonSkeleton.svelte"} ButtonSkeletonProps
    * @restProps {button | a | div}
    * @slot {{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }}
@@ -30,7 +31,7 @@
    * Specify the icon to render.
    * Alternatively, use the named slot "icon".
    *
-   * @type {any}
+   * @type {Icon}
    * @example
    * ```svelte
    * <Button>
@@ -38,7 +39,7 @@
    * </Button>
    * ```
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /**
    * Specify the ARIA label for the button icon.
diff --git a/tests/Button/Button.test.ts b/tests/Button/Button.test.ts
index dd47fd1c43..0e1112ea7b 100644
--- a/tests/Button/Button.test.ts
+++ b/tests/Button/Button.test.ts
@@ -1,4 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/svelte";
+import type ButtonComponent from "carbon-components-svelte/Button/Button.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import Button from "./Button.test.svelte";
 
@@ -172,4 +174,23 @@ describe("Button", () => {
     assert(assistiveText);
     expect(assistiveText).toHaveTextContent("Add item");
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = ButtonComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = ButtonComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 8be0a8aa7f872cd39ab607eae738813ad5123030 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:29:51 -0700
Subject: [PATCH 02/16] feat(modal-footer): `primaryButtonIcon` is generic

---
 src/ComposedModal/ModalFooter.svelte    |  5 +++--
 tests/ComposedModal/ModalFooter.test.ts | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index d0db10f652..748eb2fcec 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event click:button--secondary
    * @property {string} text
    */
@@ -9,9 +10,9 @@
 
   /**
    * Specify the primary button icon.
-   * @type {any}
+   * @type {Icon}
    */
-  export let primaryButtonIcon = undefined;
+  export let primaryButtonIcon = /** @type {Icon} */ (undefined);
 
   /** Set to `true` to disable the primary button */
   export let primaryButtonDisabled = false;
diff --git a/tests/ComposedModal/ModalFooter.test.ts b/tests/ComposedModal/ModalFooter.test.ts
index ade62990e9..e82e9c98d1 100644
--- a/tests/ComposedModal/ModalFooter.test.ts
+++ b/tests/ComposedModal/ModalFooter.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type ModalFooterComponent from "carbon-components-svelte/ComposedModal/ModalFooter.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ModalFooterTest from "./ModalFooter.test.svelte";
 
@@ -247,4 +249,25 @@ describe("ModalFooter", () => {
     });
     expect(consoleLog).not.toHaveBeenCalledWith("close");
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = ModalFooterComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["primaryButtonIcon"]>().toEqualTypeOf<
+        CustomIcon | undefined
+      >();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = ModalFooterComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["primaryButtonIcon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 34ec2d3431275ba4534562ac0a352539cd0af131 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:30:03 -0700
Subject: [PATCH 03/16] feat(contained-list): `icon` is generic

---
 src/ContainedList/ContainedListItem.svelte |  8 ++++++--
 tests/ContainedList/ContainedList.test.ts  | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/ContainedList/ContainedListItem.svelte b/src/ContainedList/ContainedListItem.svelte
index 972efcf763..e70a491a7b 100644
--- a/src/ContainedList/ContainedListItem.svelte
+++ b/src/ContainedList/ContainedListItem.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /** Set to `true` to render a `button` element instead of a `div` */
   export let interactive = false;
 
@@ -8,9 +12,9 @@
   /**
    * Specify the icon to render.
    * Icon is rendered to the left of the item content.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   $: tag = interactive ? "button" : "div";
   $: props = {
diff --git a/tests/ContainedList/ContainedList.test.ts b/tests/ContainedList/ContainedList.test.ts
index 08180ee210..3c9538371e 100644
--- a/tests/ContainedList/ContainedList.test.ts
+++ b/tests/ContainedList/ContainedList.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type ContainedListItemComponent from "carbon-components-svelte/ContainedList/ContainedListItem.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ContainedListLabelChildren from "./ContainedList.labelChildren.test.svelte";
 import ContainedList from "./ContainedList.test.svelte";
@@ -213,4 +215,23 @@ describe("ContainedList", () => {
     await user.click(dismissButton);
     expect(consoleLog).toHaveBeenCalledWith("action click");
   });
+
+  describe("ContainedListItem Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = ContainedListItemComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = ContainedListItemComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 4aeb4cd4634df2c003df6c763d97b9ec7fc440f5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:30:19 -0700
Subject: [PATCH 04/16] feat(context-menu-option): `icon` is generic

---
 src/ContextMenu/ContextMenuOption.svelte |  8 ++++++--
 tests/ContextMenu/ContextMenu.test.ts    | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 9deff38a18..b7f9c87c92 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Specify the kind of option.
    * @type {"default" | "danger"}
@@ -14,9 +18,9 @@
   /**
    * Specify the icon to render.
    * Icon is rendered to the left of the label text.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /**
    * Specify the label text.
diff --git a/tests/ContextMenu/ContextMenu.test.ts b/tests/ContextMenu/ContextMenu.test.ts
index d2012e711a..4b11efa56e 100644
--- a/tests/ContextMenu/ContextMenu.test.ts
+++ b/tests/ContextMenu/ContextMenu.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type ContextMenuOptionComponent from "carbon-components-svelte/ContextMenu/ContextMenuOption.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import ContextMenu from "./ContextMenu.test.svelte";
 import ContextMenuOptionSlot from "./ContextMenuOption.slot.test.svelte";
@@ -282,4 +284,23 @@ describe("ContextMenu", () => {
     const customLabel = screen.getByText("Custom label content");
     expect(customLabel).toBeInTheDocument();
   });
+
+  describe("ContextMenuOption Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = ContextMenuOptionComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = ContextMenuOptionComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 0c92316794c01577cf8991ecbddcd42fadae397f Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:30:35 -0700
Subject: [PATCH 05/16] feat(file-uploader-button): `icon` is generic

---
 src/FileUploader/FileUploaderButton.svelte    |  5 +++--
 tests/FileUploader/FileUploaderButton.test.ts | 21 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/FileUploader/FileUploaderButton.svelte b/src/FileUploader/FileUploaderButton.svelte
index 39325ecb1a..6086fcb869 100644
--- a/src/FileUploader/FileUploaderButton.svelte
+++ b/src/FileUploader/FileUploaderButton.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event {ReadonlyArray<File>} change
    */
 
@@ -50,9 +51,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /**
    * Specify the ARIA label for the button icon.
diff --git a/tests/FileUploader/FileUploaderButton.test.ts b/tests/FileUploader/FileUploaderButton.test.ts
index b1a65ccbce..60341df335 100644
--- a/tests/FileUploader/FileUploaderButton.test.ts
+++ b/tests/FileUploader/FileUploaderButton.test.ts
@@ -1,6 +1,8 @@
 import { render, screen } from "@testing-library/svelte";
+import type FileUploaderButtonComponent from "carbon-components-svelte/FileUploader/FileUploaderButton.svelte";
 import Add from "carbon-icons-svelte/lib/Add.svelte";
 import DocumentAdd from "carbon-icons-svelte/lib/DocumentAdd.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import FileUploaderButton from "./FileUploaderButton.test.svelte";
 
@@ -457,4 +459,23 @@ describe("FileUploaderButton", () => {
     await user.click(button);
     expect(clickSpy).toHaveBeenCalled();
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = FileUploaderButtonComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = FileUploaderButtonComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 9acac73f68f7d5190e2cead7b513681c0e69c867 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:30:49 -0700
Subject: [PATCH 06/16] feat(link): `icon` is generic

---
 src/Link/Link.svelte    |  8 ++++++--
 tests/Link/Link.test.ts | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index d52a448d64..62512dad70 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Specify the size of the link.
    * @type {"sm" | "lg"}
@@ -17,9 +21,9 @@
   /**
    * Specify the icon to render.
    * `inline` must be `false`.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Set to `true` to disable the checkbox */
   export let disabled = false;
diff --git a/tests/Link/Link.test.ts b/tests/Link/Link.test.ts
index b9fb195e61..7f121d8cf2 100644
--- a/tests/Link/Link.test.ts
+++ b/tests/Link/Link.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type LinkComponent from "carbon-components-svelte/Link/Link.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import Link from "./Link.test.svelte";
 
@@ -142,4 +144,23 @@ describe("Link", () => {
     expect(link).toHaveClass("bx--link--inline");
     expect(link.querySelector(".bx--link__icon")).not.toBeInTheDocument();
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = LinkComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = LinkComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 5c2b8560394b7d886bde82a7f684d520a99ac072 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:31:04 -0700
Subject: [PATCH 07/16] feat(modal): `primaryButtonIcon` is generic

---
 src/Modal/Modal.svelte    |  5 +++--
 tests/Modal/Modal.test.ts | 23 +++++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 2e8953f153..0a80d7e2f2 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event close
    * @type {object}
    * @property {"escape-key" | "outside-click" | "close-button"} trigger
@@ -71,9 +72,9 @@
 
   /**
    * Specify the primary button icon.
-   * @type {any}
+   * @type {Icon}
    */
-  export let primaryButtonIcon = undefined;
+  export let primaryButtonIcon = /** @type {Icon} */ (undefined);
 
   /**
    * Set to `true` for the "submit" and "click:button--primary" events
diff --git a/tests/Modal/Modal.test.ts b/tests/Modal/Modal.test.ts
index c003143829..5392b25828 100644
--- a/tests/Modal/Modal.test.ts
+++ b/tests/Modal/Modal.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type ModalComponent from "carbon-components-svelte/Modal/Modal.svelte";
+import type { ComponentProps } from "svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import ModalTest from "./Modal.test.svelte";
@@ -744,4 +746,25 @@ describe("Modal", () => {
       expect(clickPrimaryHandler).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = ModalComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["primaryButtonIcon"]>().toEqualTypeOf<
+        CustomIcon | undefined
+      >();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = ModalComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["primaryButtonIcon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From aa4526ae757bde174cd8df29e314b4c38dddaef9 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:31:21 -0700
Subject: [PATCH 08/16] feat(search): `icon` is generic

---
 src/Search/Search.svelte    |  6 +++---
 tests/Search/Search.test.ts | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 84b315110c..2710ab79d9 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @generics {T = any} T
+   * @generics {T = any, Icon = any} T,Icon
    * @event {null} expand
    * @event {null} collapse
    * @restProps {input}
@@ -56,9 +56,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = IconSearch;
+  export let icon = /** @type {Icon} */ (IconSearch);
 
   /** Set an id for the input element */
   export let id = `ccs-${Math.random().toString(36)}`;
diff --git a/tests/Search/Search.test.ts b/tests/Search/Search.test.ts
index 6058672247..d2adc45da7 100644
--- a/tests/Search/Search.test.ts
+++ b/tests/Search/Search.test.ts
@@ -152,5 +152,22 @@ describe("Search", () => {
 
       expectTypeOf<Props["value"]>().toEqualTypeOf<InferredType | undefined>();
     });
+
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = SearchComponent<unknown, CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default Icon to any when not specified", () => {
+      type ComponentType = SearchComponent<string>;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
   });
 });

From 9ab68fa12ef0991356ff7e196ce98ceef9fe2f6c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:31:34 -0700
Subject: [PATCH 09/16] feat(overflow-menu): `icon` is generic

---
 src/OverflowMenu/OverflowMenu.svelte    |  5 +++--
 tests/OverflowMenu/OverflowMenu.test.ts | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 24d232fa64..dc3c160aa9 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event close
    * @property {number} [index]
    * @property {string} [text]
@@ -34,9 +35,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = OverflowMenuVertical;
+  export let icon = /** @type {Icon} */ (OverflowMenuVertical);
 
   /**
    * Specify the icon class.
diff --git a/tests/OverflowMenu/OverflowMenu.test.ts b/tests/OverflowMenu/OverflowMenu.test.ts
index 46fa206a53..850c895499 100644
--- a/tests/OverflowMenu/OverflowMenu.test.ts
+++ b/tests/OverflowMenu/OverflowMenu.test.ts
@@ -1,4 +1,6 @@
 import { render, screen, waitFor } from "@testing-library/svelte";
+import type OverflowMenuComponent from "carbon-components-svelte/OverflowMenu/OverflowMenu.svelte";
+import type { ComponentProps } from "svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import OverflowMenuPreventDefault from "./OverflowMenu.preventDefault.test.svelte";
@@ -631,4 +633,23 @@ describe("OverflowMenu", () => {
       }
     });
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = OverflowMenuComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = OverflowMenuComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From d02b60990385600f765b8eafdd670f4422273456 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:31:48 -0700
Subject: [PATCH 10/16] feat(tooltip-icon): `icon` is generic

---
 src/TooltipIcon/TooltipIcon.svelte    |  8 ++++++--
 tests/TooltipIcon/TooltipIcon.test.ts | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 7a2d181fdb..f89ff95e5d 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Specify the tooltip text.
    * Alternatively, use the "tooltipText" slot.
@@ -7,9 +11,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /**
    * Specify the icon size.
diff --git a/tests/TooltipIcon/TooltipIcon.test.ts b/tests/TooltipIcon/TooltipIcon.test.ts
index 597a7af9c3..3554f943e3 100644
--- a/tests/TooltipIcon/TooltipIcon.test.ts
+++ b/tests/TooltipIcon/TooltipIcon.test.ts
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
 import type { TooltipIcon as TooltipIconSource } from "carbon-components-svelte";
+import type TooltipIconComponent from "carbon-components-svelte/TooltipIcon/TooltipIcon.svelte";
 import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import TooltipIconSize from "./TooltipIcon.size.test.svelte";
@@ -155,4 +156,25 @@ describe("TooltipIcon", () => {
       expectTypeOf<number>().toExtend<NonNullable<Props["size"]>>();
     });
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TooltipIconComponent<CustomIcon>;
+      type GenericProps = ComponentProps<ComponentType>;
+
+      expectTypeOf<GenericProps["icon"]>().toEqualTypeOf<
+        CustomIcon | undefined
+      >();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = TooltipIconComponent;
+      type GenericProps = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<GenericProps["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From d4cc910035174209b294e9a2377e9f6c51a50989 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:32:00 -0700
Subject: [PATCH 11/16] feat(tab): `icon` is generic

---
 src/Tabs/Tab.svelte     |  8 ++++++--
 tests/Tabs/Tabs.test.ts | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte
index 7ab1472c75..20d3b8ac44 100644
--- a/src/Tabs/Tab.svelte
+++ b/src/Tabs/Tab.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Specify the tab label.
    * Alternatively, use the default slot.
@@ -33,9 +37,9 @@
   /**
    * Specify the icon to render.
    * Icon is rendered to the right of the label.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Obtain a reference to the anchor HTML element */
   export let ref = null;
diff --git a/tests/Tabs/Tabs.test.ts b/tests/Tabs/Tabs.test.ts
index 85931fdf23..5e6dac961e 100644
--- a/tests/Tabs/Tabs.test.ts
+++ b/tests/Tabs/Tabs.test.ts
@@ -1,4 +1,6 @@
 import { render, screen, within } from "@testing-library/svelte";
+import type TabComponent from "carbon-components-svelte/Tabs/Tab.svelte";
+import type { ComponentProps } from "svelte";
 import Calendar from "../../src/icons/Calendar.svelte";
 import Settings from "../../src/icons/Settings.svelte";
 import { user } from "../setup-tests";
@@ -688,4 +690,23 @@ describe("TabsSkeleton", () => {
     );
     expect(navItems).toHaveLength(20);
   });
+
+  describe("Tab Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TabComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = TabComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From db4c41651a6985083f388e890d6bcdecbe233433 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:32:12 -0700
Subject: [PATCH 12/16] feat(tag): `icon` is generic

---
 src/Tag/Tag.svelte    |  9 ++++++---
 tests/Tag/Tag.test.ts | 21 +++++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index b6ce0b1cd6..5ae7e63329 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -1,5 +1,8 @@
 <script>
-  /** @restProps {div | span} */
+  /**
+   * @generics {Icon = any} Icon
+   * @restProps {div | span}
+   */
 
   /**
    * Specify the type of tag.
@@ -27,9 +30,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Set an id for the filterable tag */
   export let id = `ccs-${Math.random().toString(36)}`;
diff --git a/tests/Tag/Tag.test.ts b/tests/Tag/Tag.test.ts
index 9ed11dc4c3..d84269c3f2 100644
--- a/tests/Tag/Tag.test.ts
+++ b/tests/Tag/Tag.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type TagComponent from "carbon-components-svelte/Tag/Tag.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import Tag from "./Tag.test.svelte";
 
@@ -172,4 +174,23 @@ describe("Tag", () => {
     const iconContainer = tagElement.querySelector(".bx--tag__custom-icon");
     expect(iconContainer).toBeInTheDocument();
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TagComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = TagComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 9f04d8fa0953758f46bf0ec812d8a22e03b49de7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:32:22 -0700
Subject: [PATCH 13/16] feat(tooltip): `icon` is generic

---
 src/Tooltip/Tooltip.svelte    |  5 +++--
 tests/Tooltip/Tooltip.test.ts | 21 +++++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index fb01a29eb4..7885980d7f 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event {null} open
    * @event {null} close
    */
@@ -31,9 +32,9 @@
   /**
    * Specify the icon to render for the tooltip button.
    * Defaults to `<Information />`.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = Information;
+  export let icon = /** @type {Icon} */ (Information);
 
   /** Specify the ARIA label for the tooltip button */
   export let iconDescription = "";
diff --git a/tests/Tooltip/Tooltip.test.ts b/tests/Tooltip/Tooltip.test.ts
index 90c0375271..1dd6a56900 100644
--- a/tests/Tooltip/Tooltip.test.ts
+++ b/tests/Tooltip/Tooltip.test.ts
@@ -1,4 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/svelte";
+import type TooltipComponent from "carbon-components-svelte/Tooltip/Tooltip.svelte";
+import type { ComponentProps } from "svelte";
 import TooltipAlignments from "./TooltipAlignments.test.svelte";
 import TooltipCustomContent from "./TooltipCustomContent.test.svelte";
 import TooltipCustomIcon from "./TooltipCustomIcon.test.svelte";
@@ -217,4 +219,23 @@ describe("Tooltip", () => {
 
     expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TooltipComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = TooltipComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From 4e7719df490f277f7deb098f0ab6b3b17db1cd90 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:32:41 -0700
Subject: [PATCH 14/16] feat(tree-view-node): `icon` is generic

---
 src/TreeView/TreeViewNode.svelte     |  6 ++---
 src/TreeView/TreeViewNodeList.svelte |  6 ++---
 tests/TreeView/TreeView.test.ts      | 40 ++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index 7a25947f16..ea6ef141ff 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@@ -54,7 +54,7 @@
 
 <script>
   /**
-   * @generics {Node extends TreeNode<any> = TreeNode<any>} Node
+   * @generics {Node extends TreeNode<any> = TreeNode<any>, Icon = any} Node,Icon
    * @template {TreeNode<any>} Node
    * @typedef {import('./TreeView.svelte').TreeNode<Id>} TreeNode<Id=(string|number)>
    * @slot {{ node: Node & { expanded: false; leaf: boolean; selected: boolean; } }}
@@ -69,9 +69,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   import { afterUpdate, getContext } from "svelte";
 
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index 1e08678fb9..aad8ed1504 100644
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@@ -1,6 +1,6 @@
 <script>
   /**
-   * @generics {Id = (string|number)} Id
+   * @generics {Id = (string|number), Icon = any} Id,Icon
    * @template {string | number} Id
    * @typedef {{ id: Id; text: string; disabled?: boolean; expanded?: boolean; }} TreeNode<Id>
    * @slot {{ node: TreeNode<Id> & { expanded: boolean; leaf: boolean; selected: boolean; } }}
@@ -17,9 +17,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   import { afterUpdate, getContext } from "svelte";
   import CaretDown from "../icons/CaretDown.svelte";
diff --git a/tests/TreeView/TreeView.test.ts b/tests/TreeView/TreeView.test.ts
index 7a75c8fe99..6ead835ac4 100644
--- a/tests/TreeView/TreeView.test.ts
+++ b/tests/TreeView/TreeView.test.ts
@@ -1,6 +1,8 @@
 import { render, screen } from "@testing-library/svelte";
 import type TreeViewComponent from "carbon-components-svelte/TreeView/TreeView.svelte";
 import type { TreeNode } from "carbon-components-svelte/TreeView/TreeView.svelte";
+import type TreeViewNodeComponent from "carbon-components-svelte/TreeView/TreeViewNode.svelte";
+import type TreeViewNodeListComponent from "carbon-components-svelte/TreeView/TreeViewNodeList.svelte";
 import type {
   ComponentEvents,
   ComponentProps,
@@ -969,4 +971,42 @@ describe("TreeView autoCollapse", () => {
     expect(folder2).toHaveAttribute("aria-expanded", "true");
     expect(folder1).toHaveAttribute("aria-expanded", "false");
   });
+
+  describe("TreeViewNode Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TreeViewNodeComponent<TreeNode, CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default Icon to any when not specified", () => {
+      type ComponentType = TreeViewNodeComponent<TreeNode>;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
+
+  describe("TreeViewNodeList Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = TreeViewNodeListComponent<string, CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default Icon to any when not specified", () => {
+      type ComponentType = TreeViewNodeListComponent<string>;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From e1d9d6cc257f72e3b6b752fa14d74c2750be356c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:33:11 -0700
Subject: [PATCH 15/16] feat(notification-button): `icon` is generic

---
 src/Notification/NotificationButton.svelte   |  8 ++++++--
 tests/Notification/NotificationQueue.test.ts | 21 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index fcbcafd4e6..ec697bf832 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Set the type of notification.
    * @type {"toast" | "inline"}
@@ -7,9 +11,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = Close;
+  export let icon = /** @type {Icon} */ (Close);
 
   /**
    * Specify the title of the icon.
diff --git a/tests/Notification/NotificationQueue.test.ts b/tests/Notification/NotificationQueue.test.ts
index 44fd6bda30..64ea3b3ae8 100644
--- a/tests/Notification/NotificationQueue.test.ts
+++ b/tests/Notification/NotificationQueue.test.ts
@@ -1,5 +1,7 @@
 import { render, screen } from "@testing-library/svelte";
+import type NotificationButtonComponent from "carbon-components-svelte/Notification/NotificationButton.svelte";
 import type NotificationQueueComponent from "carbon-components-svelte/Notification/NotificationQueue.svelte";
+import type { ComponentProps } from "svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import NotificationQueueTest from "./NotificationQueue.test.svelte";
@@ -487,4 +489,23 @@ describe("NotificationQueue", () => {
     );
     expect(queueContainer).not.toBeInTheDocument();
   });
+
+  describe("NotificationButton Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = NotificationButtonComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = NotificationButtonComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+    });
+  });
 });

From d480243d32d86dd09ccf6f52649a25e7c774bb5c Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 8 Mar 2026 19:33:27 -0700
Subject: [PATCH 16/16] feat(ui-shell): `icon` is generic

---
 src/UIShell/HamburgerMenu.svelte      |  12 ++-
 src/UIShell/Header.svelte             |  12 ++-
 src/UIShell/HeaderAction.svelte       |   9 +-
 src/UIShell/HeaderActionLink.svelte   |   8 +-
 src/UIShell/HeaderGlobalAction.svelte |   5 +-
 src/UIShell/SideNavLink.svelte        |   8 +-
 src/UIShell/SideNavMenu.svelte        |   8 +-
 tests/UIShell/HeaderAction.test.ts    |  26 +++++
 tests/UIShell/UIShell.test.ts         | 137 ++++++++++++++++++++++++++
 9 files changed, 205 insertions(+), 20 deletions(-)

diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte
index 1b4fe29df9..49a190a03c 100644
--- a/src/UIShell/HamburgerMenu.svelte
+++ b/src/UIShell/HamburgerMenu.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /**
    * Specify the ARIA label for the button.
    * @type {string}
@@ -10,15 +14,15 @@
 
   /**
    * Specify the icon to render for the closed state.
-   * @type {any}
+   * @type {Icon}
    */
-  export let iconMenu = Menu;
+  export let iconMenu = /** @type {Icon} */ (Menu);
 
   /**
    * Specify the icon to render for the opened state.
-   * @type {any}
+   * @type {Icon}
    */
-  export let iconClose = Close;
+  export let iconClose = /** @type {Icon} */ (Close);
 
   /** Obtain a reference to the HTML button element */
   export let ref = null;
diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte
index 4bccba5af1..8b151171e8 100644
--- a/src/UIShell/Header.svelte
+++ b/src/UIShell/Header.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /** Set to `false` to hide the side nav by default */
   export let expandedByDefault = true;
 
@@ -62,15 +66,15 @@
 
   /**
    * Specify the icon to render for the closed state.
-   * @type {any}
+   * @type {Icon}
    */
-  export let iconMenu = Menu;
+  export let iconMenu = /** @type {Icon} */ (Menu);
 
   /**
    * Specify the icon to render for the opened state.
-   * @type {any}
+   * @type {Icon}
    */
-  export let iconClose = Close;
+  export let iconClose = /** @type {Icon} */ (Close);
 
   /**
    * Specify the ARIA label for the hamburger menu.
diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte
index abc2e386ea..52f5500bcf 100644
--- a/src/UIShell/HeaderAction.svelte
+++ b/src/UIShell/HeaderAction.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @event {null} open
    * @event {null} close
    */
@@ -9,15 +10,15 @@
 
   /**
    * Specify the icon to render when the action panel is closed.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = Switcher;
+  export let icon = /** @type {Icon} */ (Switcher);
 
   /**
    * Specify the icon to render when the action panel is open.
-   * @type {any}
+   * @type {Icon}
    */
-  export let closeIcon = Close;
+  export let closeIcon = /** @type {Icon} */ (Close);
 
   /**
    * Specify the text displayed next to the icon.
diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte
index f0baa05a72..bddd67a048 100644
--- a/src/UIShell/HeaderActionLink.svelte
+++ b/src/UIShell/HeaderActionLink.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /** Set to `true` to use the active state */
   export let linkIsActive = false;
 
@@ -10,9 +14,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 3d93dbbecb..cd31bff6b9 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -1,5 +1,6 @@
 <script>
   /**
+   * @generics {Icon = any} Icon
    * @extends {"../Button/Button.svelte"} ButtonProps
    */
 
@@ -8,9 +9,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Obtain a reference to the HTML button element.
    * @type {HTMLButtonElement}
diff --git a/src/UIShell/SideNavLink.svelte b/src/UIShell/SideNavLink.svelte
index 05c7e2420e..a8aebc1d39 100644
--- a/src/UIShell/SideNavLink.svelte
+++ b/src/UIShell/SideNavLink.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /** Set to `true` to select the current link */
   export let isSelected = false;
 
@@ -16,9 +20,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Obtain a reference to the HTML anchor element */
   export let ref = null;
diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte
index e1d71ae384..d143df512a 100644
--- a/src/UIShell/SideNavMenu.svelte
+++ b/src/UIShell/SideNavMenu.svelte
@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @generics {Icon = any} Icon
+   */
+
   /** Set to `true` to toggle the expanded state */
   export let expanded = false;
 
@@ -10,9 +14,9 @@
 
   /**
    * Specify the icon to render.
-   * @type {any}
+   * @type {Icon}
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /** Obtain a reference to the HTML button element */
   export let ref = null;
diff --git a/tests/UIShell/HeaderAction.test.ts b/tests/UIShell/HeaderAction.test.ts
index 4769d75b55..2794e2ce8f 100644
--- a/tests/UIShell/HeaderAction.test.ts
+++ b/tests/UIShell/HeaderAction.test.ts
@@ -1,4 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
+import type HeaderActionComponent from "carbon-components-svelte/UIShell/HeaderAction.svelte";
+import type { ComponentProps } from "svelte";
 import HeaderActionSlot from "./HeaderAction.slot.test.svelte";
 
 describe("HeaderAction", () => {
@@ -19,4 +21,28 @@ describe("HeaderAction", () => {
     const customIcon = screen.getByTestId("custom-icon");
     expect(customIcon).toBeInTheDocument();
   });
+
+  describe("Generics", () => {
+    it("should support custom Icon types with generics", () => {
+      type CustomIcon = new (...args: unknown[]) => unknown;
+
+      type ComponentType = HeaderActionComponent<CustomIcon>;
+      type Props = ComponentProps<ComponentType>;
+
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+      expectTypeOf<Props["closeIcon"]>().toEqualTypeOf<
+        CustomIcon | undefined
+      >();
+    });
+
+    it("should default to any type when generic is not specified", () => {
+      type ComponentType = HeaderActionComponent;
+      type Props = ComponentProps<ComponentType>;
+
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+      // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+      expectTypeOf<Props["closeIcon"]>().toEqualTypeOf<any>();
+    });
+  });
 });
diff --git a/tests/UIShell/UIShell.test.ts b/tests/UIShell/UIShell.test.ts
index 67899c645c..0248d83f18 100644
--- a/tests/UIShell/UIShell.test.ts
+++ b/tests/UIShell/UIShell.test.ts
@@ -1,4 +1,11 @@
 import { render, screen } from "@testing-library/svelte";
+import type HamburgerMenuComponent from "carbon-components-svelte/UIShell/HamburgerMenu.svelte";
+import type HeaderComponent from "carbon-components-svelte/UIShell/Header.svelte";
+import type HeaderActionLinkComponent from "carbon-components-svelte/UIShell/HeaderActionLink.svelte";
+import type HeaderGlobalActionComponent from "carbon-components-svelte/UIShell/HeaderGlobalAction.svelte";
+import type SideNavLinkComponent from "carbon-components-svelte/UIShell/SideNavLink.svelte";
+import type SideNavMenuComponent from "carbon-components-svelte/UIShell/SideNavMenu.svelte";
+import type { ComponentProps } from "svelte";
 import { user } from "../setup-tests";
 import HeaderSlot from "./Header.slot.test.svelte";
 import UiShell from "./UIShell.test.svelte";
@@ -674,4 +681,134 @@ describe("UIShell", () => {
       });
     });
   });
+
+  describe("Generics", () => {
+    describe("HamburgerMenu", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = HamburgerMenuComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["iconMenu"]>().toEqualTypeOf<
+          CustomIcon | undefined
+        >();
+        expectTypeOf<Props["iconClose"]>().toEqualTypeOf<
+          CustomIcon | undefined
+        >();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = HamburgerMenuComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["iconMenu"]>().toEqualTypeOf<any>();
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["iconClose"]>().toEqualTypeOf<any>();
+      });
+    });
+
+    describe("Header", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = HeaderComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["iconMenu"]>().toEqualTypeOf<
+          CustomIcon | undefined
+        >();
+        expectTypeOf<Props["iconClose"]>().toEqualTypeOf<
+          CustomIcon | undefined
+        >();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = HeaderComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["iconMenu"]>().toEqualTypeOf<any>();
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["iconClose"]>().toEqualTypeOf<any>();
+      });
+    });
+
+    describe("HeaderActionLink", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = HeaderActionLinkComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = HeaderActionLinkComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+      });
+    });
+
+    describe("HeaderGlobalAction", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = HeaderGlobalActionComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["icon"]>().toExtend<CustomIcon | undefined>();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = HeaderGlobalActionComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+      });
+    });
+
+    describe("SideNavLink", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = SideNavLinkComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = SideNavLinkComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+      });
+    });
+
+    describe("SideNavMenu", () => {
+      it("should support custom Icon types with generics", () => {
+        type CustomIcon = new (...args: unknown[]) => unknown;
+
+        type ComponentType = SideNavMenuComponent<CustomIcon>;
+        type Props = ComponentProps<ComponentType>;
+
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<CustomIcon | undefined>();
+      });
+
+      it("should default to any type when generic is not specified", () => {
+        type ComponentType = SideNavMenuComponent;
+        type Props = ComponentProps<ComponentType>;
+
+        // biome-ignore lint/suspicious/noExplicitAny: Testing default any type
+        expectTypeOf<Props["icon"]>().toEqualTypeOf<any>();
+      });
+    });
+  });
 });