carbon-design-system · metonym · Mar 9, 2026 · Mar 9, 2026 · Mar 9, 2026 · Mar 9, 2026
diff --git 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,15 +31,15 @@
    * Specify the icon to render.
    * Alternatively, use the named slot "icon".
    *
-   * @type {any}
+   * @type {Icon}
    * @example
    * ```svelte
    * <Button>
    *   <Icon slot="icon" size={20} />
    * </Button>
    * ```
    */
-  export let icon = undefined;
+  export let icon = /** @type {Icon} */ (undefined);
 
   /**
    * Specify the ARIA label for the button icon.

diff --git 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/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/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/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/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/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/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/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/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/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/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/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/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/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
@@ -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/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
@@ -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.