diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6a739ac1..068b9ebd 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -388,7 +388,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
 | size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code>                                                              | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
 | expressive       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
 | isSelected       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
-| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                              | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
+| icon             | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>                                                                                      | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Specify the ARIA label for the button icon                                                                                                                                                    |
 | tooltipAlignment | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true`                                                                                                |
 | tooltipPosition  | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                           | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                                                                                                                          |
@@ -839,18 +839,18 @@ None.
 
 ### Props
 
-| Prop name    | Kind             | Reactive | Type                                                         | Default value                                    | Description                                                                                                                        |
-| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
-| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLLIElement</code>                       | <code>null</code>                                | Obtain a reference to the list item HTML element                                                                                   |
-| selectable   | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true`                            |
-| selected     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to use the selected variant                                                                                          |
-| icon         | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text                          |
-| indented     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to indent the label                                                                                                  |
-| kind         | <code>let</code> | No       | <code>"default" &#124; "danger"</code>                       | <code>"default"</code>                           | Specify the kind of option                                                                                                         |
-| disabled     | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                         |
-| labelText    | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;)          |
-| shortcutText | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
-| id           | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group                   |
+| Prop name    | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                                                                        |
+| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLLIElement</code>               | <code>null</code>                                | Obtain a reference to the list item HTML element                                                                                   |
+| selectable   | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true`                            |
+| selected     | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to use the selected variant                                                                                          |
+| icon         | <code>let</code> | Yes      | <code>typeof import("svelte").SvelteComponent</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text                          |
+| indented     | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to indent the label                                                                                                  |
+| kind         | <code>let</code> | No       | <code>"default" &#124; "danger"</code>               | <code>"default"</code>                           | Specify the kind of option                                                                                                         |
+| disabled     | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                         |
+| labelText    | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;)          |
+| shortcutText | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
+| id           | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group                   |
 
 ### Slots
 
@@ -1566,19 +1566,19 @@ None.
 
 ### Props
 
-| Prop name               | Kind             | Reactive | Type                                                         | Default value      | Description                                                                                                                                                                                                                                                      |
-| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref                     | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element                                                                                                                                                                                                                    |
-| isSideNavOpen           | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to open the side nav                                                                                                                                                                                                                               |
-| expandedByDefault       | <code>let</code> | No       | <code>boolean</code>                                         | <code>true</code>  | Set to `false` to hide the side nav by default                                                                                                                                                                                                                   |
-| uiShellAriaLabel        | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the ARIA label for the header                                                                                                                                                                                                                            |
-| href                    | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                                                                                                                                                                                                                                     |
-| company                 | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the company name                                                                                                                                                                                                                                         |
-| platformName            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>    | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;)                                                                                                                                 |
-| persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                      |
-| expansionBreakpoint     | <code>let</code> | No       | <code>number</code>                                          | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
-| iconMenu                | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20`                                                                                                                                                             |
-| iconClose               | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20`                                                                                                                                                            |
+| Prop name               | Kind             | Reactive | Type                                                 | Default value      | Description                                                                                                                                                                                                                                                      |
+| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref                     | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>           | <code>null</code>  | Obtain a reference to the HTML anchor element                                                                                                                                                                                                                    |
+| isSideNavOpen           | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code> | Set to `true` to open the side nav                                                                                                                                                                                                                               |
+| expandedByDefault       | <code>let</code> | No       | <code>boolean</code>                                 | <code>true</code>  | Set to `false` to hide the side nav by default                                                                                                                                                                                                                   |
+| uiShellAriaLabel        | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the ARIA label for the header                                                                                                                                                                                                                            |
+| href                    | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the `href` attribute                                                                                                                                                                                                                                     |
+| company                 | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the company name                                                                                                                                                                                                                                         |
+| platformName            | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>    | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;)                                                                                                                                 |
+| persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code> | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                      |
+| expansionBreakpoint     | <code>let</code> | No       | <code>number</code>                                  | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
+| iconMenu                | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20`                                                                                                                                                             |
+| iconClose               | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20`                                                                                                                                                            |
 
 ### Slots
 
@@ -1608,14 +1608,14 @@ export interface HeaderActionSlideTransition {
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                                                         | Default value                  | Description                                                                                                   |
-| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
-| isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>             | Set to `true` to open the panel                                                                               |
-| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the icon from `carbon-icons-svelte` to render                                                         |
-| closeIcon  | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the close icon from `carbon-icons-svelte` to render                                                   |
-| text       | <code>let</code> | No       | <code>string</code>                                          | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
-| transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code>        | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |
+| Prop name  | Kind             | Reactive | Type                                                  | Default value                  | Description                                                                                                   |
+| :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>            | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
+| isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                  | <code>false</code>             | Set to `true` to open the panel                                                                               |
+| icon       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>  | --                             | Specify the icon from `carbon-icons-svelte` to render                                                         |
+| closeIcon  | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>  | --                             | Specify the close icon from `carbon-icons-svelte` to render                                                   |
+| text       | <code>let</code> | No       | <code>string</code>                                   | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
+| transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |
 
 ### Slots
 
@@ -1635,12 +1635,12 @@ export interface HeaderActionSlideTransition {
 
 ### Props
 
-| Prop name    | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
-| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
-| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
-| linkIsActive | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to use the active state                 |
-| href         | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
-| icon         | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
+| Prop name    | Kind             | Reactive | Type                                                 | Default value      | Description                                           |
+| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>           | <code>null</code>  | Obtain a reference to the HTML anchor element         |
+| linkIsActive | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code> | Set to `true` to use the active state                 |
+| href         | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the `href` attribute                          |
+| icon         | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
@@ -1674,11 +1674,11 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                   |
-| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>  | Obtain a reference to the HTML button element |
-| isActive  | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to use the active variant       |
-| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon to render                    |
+| Prop name | Kind             | Reactive | Type                                                 | Default value      | Description                                   |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>           | <code>null</code>  | Obtain a reference to the HTML button element |
+| isActive  | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code> | Set to `true` to use the active variant       |
+| icon      | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon to render                    |
 
 ### Slots
 
@@ -1883,10 +1883,10 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
-| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
-| render    | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
-| skeleton  | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to display the skeleton state           |
+| Prop name | Kind             | Reactive | Type                                                 | Default value      | Description                                           |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| render    | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
+| skeleton  | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code> | Set to `true` to display the skeleton state           |
 
 ### Slots
 
@@ -2018,7 +2018,7 @@ None.
 | size      | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                                          | --                 | Specify the size of the link                                                        |
 | href      | <code>let</code> | No       | <code>string</code>                                                    | --                 | Specify the href value                                                              |
 | inline    | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to use the inline variant                                             |
-| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>           | --                 | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
+| icon      | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>                   | --                 | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
 | disabled  | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to disable the checkbox                                               |
 | visited   | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to allow visited styles                                               |
 
@@ -2478,12 +2478,12 @@ None.
 
 ### Props
 
-| Prop name        | Kind             | Reactive | Type                                                         | Default value             | Description                                           |
-| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
-| notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                         | <code>"toast"</code>      | Set the type of notification                          |
-| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                        | Specify the icon from `carbon-icons-svelte` to render |
-| title            | <code>let</code> | No       | <code>string</code>                                          | --                        | Specify the title of the icon                         |
-| iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Close icon"</code> | Specify the ARIA label for the icon                   |
+| Prop name        | Kind             | Reactive | Type                                                 | Default value             | Description                                           |
+| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
+| notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                 | <code>"toast"</code>      | Set the type of notification                          |
+| icon             | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                        | Specify the icon from `carbon-icons-svelte` to render |
+| title            | <code>let</code> | No       | <code>string</code>                                  | --                        | Specify the title of the icon                         |
+| iconDescription  | <code>let</code> | No       | <code>string</code>                                  | <code>"Close icon"</code> | Specify the ARIA label for the icon                   |
 
 ### Slots
 
@@ -2662,20 +2662,20 @@ None.
 
 ### Props
 
-| Prop name        | Kind             | Reactive | Type                                                         | Default value                                    | Description                                                       |
-| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
-| menuRef          | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                    | <code>null</code>                                | Obtain a reference to the overflow menu element                   |
-| buttonRef        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>                                | Obtain a reference to the trigger button element                  |
-| icon             | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render             |
-| open             | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to open the menu                                    |
-| size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                | --                                               | Specify the size of the overflow menu                             |
-| direction        | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                           | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button |
-| light            | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the light variant                         |
-| flipped          | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to flip the menu relative to the button             |
-| menuOptionsClass | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the menu options class                                    |
-| iconClass        | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the icon class                                            |
-| iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Open and close list of options"</code>    | Specify the ARIA label for the icon                               |
-| id               | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                  |
+| Prop name        | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                       |
+| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| menuRef          | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>            | <code>null</code>                                | Obtain a reference to the overflow menu element                   |
+| buttonRef        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>           | <code>null</code>                                | Obtain a reference to the trigger button element                  |
+| icon             | <code>let</code> | Yes      | <code>typeof import("svelte").SvelteComponent</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render             |
+| open             | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to open the menu                                    |
+| size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                        | --                                               | Specify the size of the overflow menu                             |
+| direction        | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                   | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button |
+| light            | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant                         |
+| flipped          | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to flip the menu relative to the button             |
+| menuOptionsClass | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the menu options class                                    |
+| iconClass        | <code>let</code> | No       | <code>string</code>                                  | --                                               | Specify the icon class                                            |
+| iconDescription  | <code>let</code> | No       | <code>string</code>                                  | <code>"Open and close list of options"</code>    | Specify the ARIA label for the icon                               |
+| id               | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                  |
 
 ### Slots
 
@@ -3145,26 +3145,26 @@ None.
 
 ### Props
 
-| Prop name            | Kind             | Reactive | Type                                                         | Default value                                    | Description                                             |
-| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
-| ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                    | <code>null</code>                                | Obtain a reference to the input HTML element            |
-| value                | <code>let</code> | Yes      | <code>string</code>                                          | <code>""</code>                                  | Specify the value of the search input                   |
-| expanded             | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true to expand the search input                 |
-| small                | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | --                                                      |
-| size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                    | <code>"xl"</code>                                | Specify the size of the search input                    |
-| searchClass          | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the class name passed to the outer div element  |
-| skeleton             | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to display the skeleton state             |
-| light                | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the light variant               |
-| disabled             | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to disable the search input               |
-| expandable           | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the expandable variant          |
-| type                 | <code>let</code> | No       | <code>string</code>                                          | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
-| placeholder          | <code>let</code> | No       | <code>string</code>                                          | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
-| autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>                               | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
-| autofocus            | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to auto focus the search element          |
-| closeButtonLabelText | <code>let</code> | No       | <code>string</code>                                          | <code>"Clear search input"</code>                | Specify the close button label text                     |
-| labelText            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text                                  |
-| icon                 | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render   |
-| id                   | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                         |
+| Prop name            | Kind             | Reactive | Type                                                 | Default value                                    | Description                                             |
+| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
+| ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>            | <code>null</code>                                | Obtain a reference to the input HTML element            |
+| value                | <code>let</code> | Yes      | <code>string</code>                                  | <code>""</code>                                  | Specify the value of the search input                   |
+| expanded             | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true to expand the search input                 |
+| small                | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | --                                                      |
+| size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>            | <code>"xl"</code>                                | Specify the size of the search input                    |
+| searchClass          | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the class name passed to the outer div element  |
+| skeleton             | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to display the skeleton state             |
+| light                | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant               |
+| disabled             | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to disable the search input               |
+| expandable           | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the expandable variant          |
+| type                 | <code>let</code> | No       | <code>string</code>                                  | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
+| placeholder          | <code>let</code> | No       | <code>string</code>                                  | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
+| autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>                       | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
+| autofocus            | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to auto focus the search element          |
+| closeButtonLabelText | <code>let</code> | No       | <code>string</code>                                  | <code>"Clear search input"</code>                | Specify the close button label text                     |
+| labelText            | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the label text                                  |
+| icon                 | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render   |
+| id                   | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                         |
 
 ### Slots
 
@@ -3403,13 +3403,13 @@ None.
 
 ### Props
 
-| Prop name  | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
-| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
-| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
-| isSelected | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to select the current link              |
-| href       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
-| text       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
-| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
+| Prop name  | Kind             | Reactive | Type                                                 | Default value      | Description                                           |
+| :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>           | <code>null</code>  | Obtain a reference to the HTML anchor element         |
+| isSelected | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code> | Set to `true` to select the current link              |
+| href       | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the `href` attribute                          |
+| text       | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the text                                      |
+| icon       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
@@ -3425,12 +3425,12 @@ None.
 
 ### Props
 
-| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
-| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
-| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>  | Obtain a reference to the HTML button element         |
-| expanded  | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to toggle the expanded state            |
-| text      | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
-| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
+| Prop name | Kind             | Reactive | Type                                                 | Default value      | Description                                           |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
+| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>           | <code>null</code>  | Obtain a reference to the HTML button element         |
+| expanded  | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code> | Set to `true` to toggle the expanded state            |
+| text      | <code>let</code> | No       | <code>string</code>                                  | --                 | Specify the text                                      |
+| icon      | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
 
 ### Slots
 
@@ -4039,7 +4039,7 @@ None.
 | interactive | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to render a `button` element instead of a `div` |
 | skeleton    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to display the skeleton state                   |
 | title       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag        |
-| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                                                                            | --                                               | Specify the icon from `carbon-icons-svelte` to render         |
+| icon        | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>                                                                                                                                    | --                                               | Specify the icon from `carbon-icons-svelte` to render         |
 | id          | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag                              |
 
 ### Slots
@@ -4635,7 +4635,7 @@ None.
 | align           | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                                                                              |
 | direction       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the button                                                                            |
 | hideIcon        | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to hide the tooltip icon                                                                                             |
-| icon            | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>    | --                                               | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
+| icon            | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>            | --                                               | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
 | iconDescription | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the ARIA label for the tooltip button                                                                                      |
 | iconName        | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the icon name attribute                                                                                                    |
 | tabindex        | <code>let</code> | No       | <code>string</code>                                             | <code>"0"</code>                                 | Set the button tabindex                                                                                                            |
@@ -4713,7 +4713,7 @@ None.
 | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
 | ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                            |
 | tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
-| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>    | --                                               | Specify the icon from `carbon-icons-svelte` to render                    |
+| icon        | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code>            | --                                               | Specify the icon from `carbon-icons-svelte` to render                    |
 | disabled    | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the tooltip icon                                |
 | align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                    |
 | direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon                    |
@@ -4746,7 +4746,7 @@ export type TreeNodeId = string | number;
 export interface TreeNode {
   id: TreeNodeId;
   text: string;
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
   disabled?: boolean;
   expanded?: boolean;
 }
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index f203cd5e..e201e2ae 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -490,7 +490,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -1943,7 +1943,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4323,7 +4323,7 @@
           "name": "iconMenu",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4333,7 +4333,7 @@
           "name": "iconClose",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4373,7 +4373,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4383,7 +4383,7 @@
           "name": "closeIcon",
           "kind": "let",
           "description": "Specify the close icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4473,7 +4473,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4543,7 +4543,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -4871,7 +4871,7 @@
           "name": "render",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -5244,7 +5244,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -6710,7 +6710,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -7294,7 +7294,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -9066,7 +9066,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -9726,7 +9726,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -9778,7 +9778,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -11112,7 +11112,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -12761,7 +12761,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -13007,7 +13007,7 @@
           "name": "icon",
           "kind": "let",
           "description": "Specify the icon from `carbon-icons-svelte` to render",
-          "type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -13252,9 +13252,9 @@
           "ts": "type TreeNodeId = string | number"
         },
         {
-          "type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }",
+          "type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }",
           "name": "TreeNode",
-          "ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }"
+          "ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }"
         }
       ],
       "rest_props": { "type": "Element", "name": "ul" }
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 174e6b63..a3d0746b 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -33,7 +33,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 14062953..f4cc6290 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -14,7 +14,7 @@
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    * Icon is rendered to the left of the label text
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/Icon/Icon.svelte b/src/Icon/Icon.svelte
index 9113d25d..85ff5697 100644
--- a/src/Icon/Icon.svelte
+++ b/src/Icon/Icon.svelte
@@ -12,7 +12,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let render = undefined;
 
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 016f56be..4456e1be 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -17,7 +17,7 @@
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    * `inline` must be `false`
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index 48f53ebe..4f158951 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = Close20;
 
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index 41e7d83a..0d569b0d 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -32,7 +32,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = OverflowMenuVertical16;
 
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index 8b18c2ae..6461b0d2 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -60,7 +60,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = Search16;
 
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index c2069f83..a9c361f2 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -27,7 +27,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 368582d2..8b3482eb 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -26,7 +26,7 @@
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
    * Icon size must be 16px (e.g., `Add16`, `Task16`)
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = Information16;
 
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index 62a41245..a6995a9d 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -7,7 +7,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index 7e36da2e..f1620ae7 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {string | number} TreeNodeId
-   * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode
+   * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; }} TreeNode
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
    * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus
diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte
index 038d2e52..d7b06379 100644
--- a/src/TreeView/TreeViewNode.svelte
+++ b/src/TreeView/TreeViewNode.svelte
@@ -45,7 +45,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte
index a1b4f407..fd4ad8dc 100644
--- a/src/TreeView/TreeViewNodeList.svelte
+++ b/src/TreeView/TreeViewNodeList.svelte
@@ -16,7 +16,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/UIShell/GlobalHeader/Header.svelte b/src/UIShell/GlobalHeader/Header.svelte
index 2241bb71..32988b8b 100644
--- a/src/UIShell/GlobalHeader/Header.svelte
+++ b/src/UIShell/GlobalHeader/Header.svelte
@@ -49,14 +49,14 @@
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the closed state
    * Defaults to `Menu20`
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let iconMenu = Menu20;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the opened state
    * Defaults to `Close20`
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let iconClose = Close20;
 
diff --git a/src/UIShell/GlobalHeader/HeaderAction.svelte b/src/UIShell/GlobalHeader/HeaderAction.svelte
index 6f101503..385a0a98 100644
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@@ -8,13 +8,13 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = AppSwitcher20;
 
   /**
    * Specify the close icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let closeIcon = Close20;
 
diff --git a/src/UIShell/GlobalHeader/HeaderActionLink.svelte b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
index d4530519..b4ad3a36 100644
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@@ -10,7 +10,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte
index 6f574918..db0cbc80 100644
--- a/src/UIShell/HeaderGlobalAction.svelte
+++ b/src/UIShell/HeaderGlobalAction.svelte
@@ -4,7 +4,7 @@
 
   /**
    * Specify the icon to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index 4437a35a..4a24c2d1 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -11,14 +11,14 @@
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the closed state
    * Defaults to `Menu20`
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let iconMenu = Menu20;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the opened state
    * Defaults to `Close20`
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let iconClose = Close20;
 
diff --git a/src/UIShell/SideNav/SideNavLink.svelte b/src/UIShell/SideNav/SideNavLink.svelte
index 33244600..94f674ff 100644
--- a/src/UIShell/SideNav/SideNavLink.svelte
+++ b/src/UIShell/SideNav/SideNavLink.svelte
@@ -16,7 +16,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/src/UIShell/SideNav/SideNavMenu.svelte b/src/UIShell/SideNav/SideNavMenu.svelte
index 0625f3ac..9d19cbf4 100644
--- a/src/UIShell/SideNav/SideNavMenu.svelte
+++ b/src/UIShell/SideNav/SideNavMenu.svelte
@@ -10,7 +10,7 @@
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render
-   * @type {typeof import("carbon-icons-svelte").CarbonIcon}
+   * @type {typeof import("svelte").SvelteComponent}
    */
   export let icon = undefined;
 
diff --git a/types/Button/Button.d.ts b/types/Button/Button.d.ts
index 471f240a..13c6c94e 100644
--- a/types/Button/Button.d.ts
+++ b/types/Button/Button.d.ts
@@ -47,7 +47,7 @@ export interface ButtonProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the ARIA label for the button icon
diff --git a/types/ContextMenu/ContextMenuOption.d.ts b/types/ContextMenu/ContextMenuOption.d.ts
index 67a1cf04..dae07f4e 100644
--- a/types/ContextMenu/ContextMenuOption.d.ts
+++ b/types/ContextMenu/ContextMenuOption.d.ts
@@ -25,7 +25,7 @@ export interface ContextMenuOptionProps
    * Specify the icon from `carbon-icons-svelte` to render
    * Icon is rendered to the left of the label text
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the label text
diff --git a/types/Icon/Icon.d.ts b/types/Icon/Icon.d.ts
index 2820cfde..eb5d6cf0 100644
--- a/types/Icon/Icon.d.ts
+++ b/types/Icon/Icon.d.ts
@@ -8,7 +8,7 @@ export interface IconProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  render?: typeof import("carbon-icons-svelte").CarbonIcon;
+  render?: typeof import("svelte").SvelteComponent;
 
   /**
    * Set to `true` to display the skeleton state
diff --git a/types/Link/Link.d.ts b/types/Link/Link.d.ts
index 759fbd30..a2b096d0 100644
--- a/types/Link/Link.d.ts
+++ b/types/Link/Link.d.ts
@@ -23,7 +23,7 @@ export interface LinkProps
    * Specify the icon from `carbon-icons-svelte` to render
    * `inline` must be `false`
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Set to `true` to disable the checkbox
diff --git a/types/Notification/NotificationButton.d.ts b/types/Notification/NotificationButton.d.ts
index 8596893d..55cf0cb6 100644
--- a/types/Notification/NotificationButton.d.ts
+++ b/types/Notification/NotificationButton.d.ts
@@ -12,7 +12,7 @@ export interface NotificationButtonProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the title of the icon
diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts
index cf16c37d..b1844d38 100644
--- a/types/OverflowMenu/OverflowMenu.d.ts
+++ b/types/OverflowMenu/OverflowMenu.d.ts
@@ -40,7 +40,7 @@ export interface OverflowMenuProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the icon class
diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts
index 8a38c411..e47c64ae 100644
--- a/types/Search/Search.d.ts
+++ b/types/Search/Search.d.ts
@@ -94,7 +94,7 @@ export interface SearchProps {
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Set an id for the input element
diff --git a/types/Tag/Tag.d.ts b/types/Tag/Tag.d.ts
index f9d1ed8d..121612e1 100644
--- a/types/Tag/Tag.d.ts
+++ b/types/Tag/Tag.d.ts
@@ -58,7 +58,7 @@ export interface TagProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Set an id for the filterable tag
diff --git a/types/Tooltip/Tooltip.d.ts b/types/Tooltip/Tooltip.d.ts
index 2b0d83fa..dfa910f0 100644
--- a/types/Tooltip/Tooltip.d.ts
+++ b/types/Tooltip/Tooltip.d.ts
@@ -31,7 +31,7 @@ export interface TooltipProps
    * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
    * Icon size must be 16px (e.g., `Add16`, `Task16`)
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the ARIA label for the tooltip button
diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts
index 631511dd..79186201 100644
--- a/types/TooltipIcon/TooltipIcon.d.ts
+++ b/types/TooltipIcon/TooltipIcon.d.ts
@@ -13,7 +13,7 @@ export interface TooltipIconProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Set to `true` to disable the tooltip icon
diff --git a/types/TreeView/TreeView.d.ts b/types/TreeView/TreeView.d.ts
index 29678a9a..3ad00bf5 100644
--- a/types/TreeView/TreeView.d.ts
+++ b/types/TreeView/TreeView.d.ts
@@ -6,7 +6,7 @@ export type TreeNodeId = string | number;
 export interface TreeNode {
   id: TreeNodeId;
   text: string;
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
   disabled?: boolean;
   expanded?: boolean;
 }
diff --git a/types/UIShell/GlobalHeader/Header.d.ts b/types/UIShell/GlobalHeader/Header.d.ts
index 4c61fd74..8f4cf483 100644
--- a/types/UIShell/GlobalHeader/Header.d.ts
+++ b/types/UIShell/GlobalHeader/Header.d.ts
@@ -65,13 +65,13 @@ export interface HeaderProps
    * Specify the icon from `carbon-icons-svelte` to render for the closed state
    * Defaults to `Menu20`
    */
-  iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon;
+  iconMenu?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the opened state
    * Defaults to `Close20`
    */
-  iconClose?: typeof import("carbon-icons-svelte").CarbonIcon;
+  iconClose?: typeof import("svelte").SvelteComponent;
 }
 
 export default class Header extends SvelteComponentTyped<
diff --git a/types/UIShell/GlobalHeader/HeaderAction.d.ts b/types/UIShell/GlobalHeader/HeaderAction.d.ts
index ed97e571..41c9d6af 100644
--- a/types/UIShell/GlobalHeader/HeaderAction.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderAction.d.ts
@@ -18,12 +18,12 @@ export interface HeaderActionProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the close icon from `carbon-icons-svelte` to render
    */
-  closeIcon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  closeIcon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Specify the text
diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
index 12804ee4..85764b83 100644
--- a/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderActionLink.d.ts
@@ -17,7 +17,7 @@ export interface HeaderActionLinkProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Obtain a reference to the HTML anchor element
diff --git a/types/UIShell/HeaderGlobalAction.d.ts b/types/UIShell/HeaderGlobalAction.d.ts
index 95a584ce..113c0fd2 100644
--- a/types/UIShell/HeaderGlobalAction.d.ts
+++ b/types/UIShell/HeaderGlobalAction.d.ts
@@ -12,7 +12,7 @@ export interface HeaderGlobalActionProps
   /**
    * Specify the icon to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Obtain a reference to the HTML button element
diff --git a/types/UIShell/SideNav/SideNavLink.d.ts b/types/UIShell/SideNav/SideNavLink.d.ts
index 50829d20..ec95a2ea 100644
--- a/types/UIShell/SideNav/SideNavLink.d.ts
+++ b/types/UIShell/SideNav/SideNavLink.d.ts
@@ -22,7 +22,7 @@ export interface SideNavLinkProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Obtain a reference to the HTML anchor element
diff --git a/types/UIShell/SideNav/SideNavMenu.d.ts b/types/UIShell/SideNav/SideNavMenu.d.ts
index 4f1405f0..574e6e17 100644
--- a/types/UIShell/SideNav/SideNavMenu.d.ts
+++ b/types/UIShell/SideNav/SideNavMenu.d.ts
@@ -17,7 +17,7 @@ export interface SideNavMenuProps
   /**
    * Specify the icon from `carbon-icons-svelte` to render
    */
-  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
+  icon?: typeof import("svelte").SvelteComponent;
 
   /**
    * Obtain a reference to the HTML button element