diff --git a/packages/web-components/.storybook/templates/with-layer.ts b/packages/web-components/.storybook/templates/with-layer.ts
index d7ff7d81493d..4271e7d2deb5 100644
--- a/packages/web-components/.storybook/templates/with-layer.ts
+++ b/packages/web-components/.storybook/templates/with-layer.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import Layers from '@carbon/icons/lib/layers/16';
+import Layers from '@carbon/icons/lib/layers/16.js';
 import { prefix } from '../../src/globals/settings';
 
 import styles from './with-layer.scss?lit';
diff --git a/packages/web-components/src/components/accordion/accordion-item-skeleton.ts b/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
index 7a2b97002a06..3c174a612b04 100644
--- a/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
+++ b/packages/web-components/src/components/accordion/accordion-item-skeleton.ts
@@ -8,7 +8,7 @@
  */
 
 import { LitElement, html } from 'lit';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { prefix } from '../../globals/settings';
 import '../skeleton-text/index';
 import styles from './accordion.scss?lit';
diff --git a/packages/web-components/src/components/accordion/accordion-item.ts b/packages/web-components/src/components/accordion/accordion-item.ts
index c7803e991629..acccd3e693bc 100644
--- a/packages/web-components/src/components/accordion/accordion-item.ts
+++ b/packages/web-components/src/components/accordion/accordion-item.ts
@@ -10,7 +10,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import Handle from '../../globals/internal/handle';
diff --git a/packages/web-components/src/components/accordion/accordion-skeleton.ts b/packages/web-components/src/components/accordion/accordion-skeleton.ts
index 84ba24ebe6dd..e982d5acdf50 100644
--- a/packages/web-components/src/components/accordion/accordion-skeleton.ts
+++ b/packages/web-components/src/components/accordion/accordion-skeleton.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import { ACCORDION_ALIGNMENT } from './accordion';
 import { forEach } from '../../globals/internal/collection-helpers';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import './accordion-item-skeleton';
 import '../skeleton-text/index';
 import styles from './accordion.scss?lit';
diff --git a/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts b/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
index b5479589ae48..bbab1bf07dd7 100644
--- a/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
+++ b/packages/web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { prefix } from '../../globals/settings';
-import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
+import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16.js';
 import CDSOverflowMenu from '../overflow-menu/overflow-menu';
 import styles from './breadcrumb.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/button/button.mdx b/packages/web-components/src/components/button/button.mdx
index 69122ea2d0b8..12826f8a559d 100644
--- a/packages/web-components/src/components/button/button.mdx
+++ b/packages/web-components/src/components/button/button.mdx
@@ -1,6 +1,6 @@
 import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import * as ButtonStories from './button.stories';
 
 <Meta of={ButtonStories} />
@@ -69,7 +69,7 @@ will be styled as primary or ghost buttons.
 Our Storybook example also shows off the Tooltip feature, explained later.
 
 ````html
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 <cds-button> ${Add16({ slot: 'icon' })} </cds-button>``` ## Set of Buttons You
 can wrap two `Button` elements in a `ButtonSet` when an action required by the
diff --git a/packages/web-components/src/components/button/button.stories.ts b/packages/web-components/src/components/button/button.stories.ts
index f909c061140c..55cf99de469a 100644
--- a/packages/web-components/src/components/button/button.stories.ts
+++ b/packages/web-components/src/components/button/button.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import {
   BUTTON_KIND,
   BUTTON_TYPE,
diff --git a/packages/web-components/src/components/chat-button/chat-button.mdx b/packages/web-components/src/components/chat-button/chat-button.mdx
index 407a6c5cbba0..81556b907633 100644
--- a/packages/web-components/src/components/chat-button/chat-button.mdx
+++ b/packages/web-components/src/components/chat-button/chat-button.mdx
@@ -1,6 +1,6 @@
-import { ArgTypes, Markdown, Meta } from "@storybook/blocks";
-import { cdnJs, cdnCss } from "../../globals/internal/storybook-cdn";
-import * as ChatButtonStories from "./chat-button.stories";
+import { ArgTypes, Markdown, Meta } from '@storybook/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as ChatButtonStories from './chat-button.stories';
 
 <Meta of={ChatButtonStories} />
 
@@ -19,19 +19,19 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
+import '@carbon/web-components/es/components/chat-button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ["chat-button"] })}`}</Markdown>
+<Markdown>{`${cdnJs({ components: ['chat-button'] })}`}</Markdown>
 <Markdown>{`${cdnCss()}`}</Markdown>
 
 ```javascript
-import "@carbon/web-components/es/components/chat-button/index.js";
-import Add16 from "@carbon/icons/lib/add/16";
+import '@carbon/web-components/es/components/chat-button/index.js';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 function App() {
   return html`<cds-chat-button>
-    Primary ${Add16({ slot: "icon" })}
+    Primary ${Add16({ slot: 'icon' })}
   </cds-chat-button>`;
 }
 ```
diff --git a/packages/web-components/src/components/chat-button/chat-button.stories.ts b/packages/web-components/src/components/chat-button/chat-button.stories.ts
index 3953a1d96c24..b633a0a2ae40 100644
--- a/packages/web-components/src/components/chat-button/chat-button.stories.ts
+++ b/packages/web-components/src/components/chat-button/chat-button.stories.ts
@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import './index';
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 import styles from './chat-button-story.scss?lit';
 
 export const Default = () => {
diff --git a/packages/web-components/src/components/checkbox/checkbox-group.ts b/packages/web-components/src/components/checkbox/checkbox-group.ts
index 20ea32c7a967..6759c19505b2 100644
--- a/packages/web-components/src/components/checkbox/checkbox-group.ts
+++ b/packages/web-components/src/components/checkbox/checkbox-group.ts
@@ -11,8 +11,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import CDSCheckbox from './checkbox';
 import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/checkbox/checkbox.ts b/packages/web-components/src/components/checkbox/checkbox.ts
index 55022c635388..4f9311c7c038 100644
--- a/packages/web-components/src/components/checkbox/checkbox.ts
+++ b/packages/web-components/src/components/checkbox/checkbox.ts
@@ -14,8 +14,8 @@ import { property, query } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import styles from './checkbox.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/packages/web-components/src/components/code-snippet/code-snippet.ts b/packages/web-components/src/components/code-snippet/code-snippet.ts
index 51c6f3f11790..72c24a09f06f 100644
--- a/packages/web-components/src/components/code-snippet/code-snippet.ts
+++ b/packages/web-components/src/components/code-snippet/code-snippet.ts
@@ -10,7 +10,7 @@
 import { styleMap } from 'lit/directives/style-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';
diff --git a/packages/web-components/src/components/combo-box/combo-box.ts b/packages/web-components/src/components/combo-box/combo-box.ts
index 2f0d2455f84b..1a8dadd40730 100644
--- a/packages/web-components/src/components/combo-box/combo-box.ts
+++ b/packages/web-components/src/components/combo-box/combo-box.ts
@@ -10,7 +10,7 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { TemplateResult, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
 import { prefix } from '../../globals/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
diff --git a/packages/web-components/src/components/content-switcher/content-switcher.stories.ts b/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
index 4e78f651af64..6fbcb1dc8414 100644
--- a/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
+++ b/packages/web-components/src/components/content-switcher/content-switcher.stories.ts
@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { CONTENT_SWITCHER_SIZE } from './content-switcher';
 import './index';
 import { prefix } from '../../globals/settings';
-import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16';
-import Workspace16 from '@carbon/icons/lib/workspace/16';
-import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16';
+import TableOfContents16 from '@carbon/icons/lib/table-of-contents/16.js';
+import Workspace16 from '@carbon/icons/lib/workspace/16.js';
+import ViewMode2_16 from '@carbon/icons/lib/view--mode-2/16.js';
 import '../layer/index';
 import '../../../.storybook/templates/with-layer';
 
diff --git a/packages/web-components/src/components/copy-button/copy-button.ts b/packages/web-components/src/components/copy-button/copy-button.ts
index 2fb8ab45930d..f5287db88da4 100644
--- a/packages/web-components/src/components/copy-button/copy-button.ts
+++ b/packages/web-components/src/components/copy-button/copy-button.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Copy16 from '@carbon/icons/lib/copy/16';
+import Copy16 from '@carbon/icons/lib/copy/16.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
index 38c9c928c3ad..4b29e2d30281 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-batch-actions.stories.ts
@@ -10,13 +10,13 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
 // @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../../overflow-menu';
 import '../index';
 import storyDocs from './data-table.mdx';
diff --git a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
index 96d3e746cea5..487cf2a93d2a 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-dynamic.stories.ts
@@ -10,13 +10,13 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Add from '@carbon/icons/lib/add/16';
-import Save from '@carbon/icons/lib/save/16';
-import TrashCan from '@carbon/icons/lib/trash-can/16';
+import Add from '@carbon/icons/lib/add/16.js';
+import Save from '@carbon/icons/lib/save/16.js';
+import TrashCan from '@carbon/icons/lib/trash-can/16.js';
 // @ts-ignore
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../index';
 import storyDocs from './data-table.mdx';
 
diff --git a/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
index 9db390bf1e96..106dd87a63e5 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-filtering.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
 // @ts-ignore
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 import '../index';
 import storyDocs from './data-table.mdx';
 
diff --git a/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts b/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
index c1e58b74199a..cf6c30875c32 100644
--- a/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
+++ b/packages/web-components/src/components/data-table/stories/data-table-toolbar.stories.ts
@@ -10,8 +10,8 @@
 import { html } from 'lit';
 import { prefix } from '../../../globals/settings';
 import { TABLE_SIZE } from '../table';
-import Settings16 from '@carbon/icons/lib/settings/16';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
 import storyDocs from './data-table.mdx';
 import '../index';
 
diff --git a/packages/web-components/src/components/data-table/table-header-cell.ts b/packages/web-components/src/components/data-table/table-header-cell.ts
index 6bd485960fbd..51db23be0264 100644
--- a/packages/web-components/src/components/data-table/table-header-cell.ts
+++ b/packages/web-components/src/components/data-table/table-header-cell.ts
@@ -10,8 +10,8 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
-import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
+import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32.js';
+import ArrowDown32 from '@carbon/icons/lib/arrow--down/32.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import {
diff --git a/packages/web-components/src/components/data-table/table-row.ts b/packages/web-components/src/components/data-table/table-row.ts
index b633c77324b7..b91196b89e62 100644
--- a/packages/web-components/src/components/data-table/table-row.ts
+++ b/packages/web-components/src/components/data-table/table-row.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './data-table.scss?lit';
diff --git a/packages/web-components/src/components/date-picker/date-picker-input.ts b/packages/web-components/src/components/date-picker/date-picker-input.ts
index 80f110da2703..5fe98499c6bc 100644
--- a/packages/web-components/src/components/date-picker/date-picker-input.ts
+++ b/packages/web-components/src/components/date-picker/date-picker-input.ts
@@ -10,14 +10,14 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
-import Calendar16 from '@carbon/icons/lib/calendar/16';
+import Calendar16 from '@carbon/icons/lib/calendar/16.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { INPUT_SIZE } from '../text-input/text-input';
 import { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from './defs';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import styles from './date-picker.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/packages/web-components/src/components/date-picker/icon-plugin.ts b/packages/web-components/src/components/date-picker/icon-plugin.ts
index 76fd78274522..c826c76454fb 100644
--- a/packages/web-components/src/components/date-picker/icon-plugin.ts
+++ b/packages/web-components/src/components/date-picker/icon-plugin.ts
@@ -10,8 +10,8 @@
 import { render } from 'lit';
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16.js';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
 
 /**
  * @returns A Flatpickr plugin to set the right icons in the design system.
diff --git a/packages/web-components/src/components/dropdown/dropdown-item.ts b/packages/web-components/src/components/dropdown/dropdown-item.ts
index cd373afeae76..cf36b9a0dad5 100644
--- a/packages/web-components/src/components/dropdown/dropdown-item.ts
+++ b/packages/web-components/src/components/dropdown/dropdown-item.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Checkmark16 from '@carbon/icons/lib/checkmark/16';
+import Checkmark16 from '@carbon/icons/lib/checkmark/16.js';
 import { prefix } from '../../globals/settings';
 import { DROPDOWN_SIZE } from './dropdown';
 import styles from './dropdown.scss?lit';
diff --git a/packages/web-components/src/components/dropdown/dropdown.ts b/packages/web-components/src/components/dropdown/dropdown.ts
index fbaaa4d5f115..0250fc0f2198 100644
--- a/packages/web-components/src/components/dropdown/dropdown.ts
+++ b/packages/web-components/src/components/dropdown/dropdown.ts
@@ -12,9 +12,9 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html, TemplateResult } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/file-uploader/file-uploader-item.ts b/packages/web-components/src/components/file-uploader/file-uploader-item.ts
index 5b0866da0752..37393ac3bdd7 100644
--- a/packages/web-components/src/components/file-uploader/file-uploader-item.ts
+++ b/packages/web-components/src/components/file-uploader/file-uploader-item.ts
@@ -9,9 +9,9 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import Close16 from '@carbon/icons/lib/close/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
 import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from '../loading/loading';
 import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';
diff --git a/packages/web-components/src/components/icon-button/icon-button.mdx b/packages/web-components/src/components/icon-button/icon-button.mdx
index e89aa6f11dc7..1d133eb9d92d 100644
--- a/packages/web-components/src/components/icon-button/icon-button.mdx
+++ b/packages/web-components/src/components/icon-button/icon-button.mdx
@@ -32,7 +32,7 @@ import '@carbon/web-components/es/components/icon-button/index.js';
 
 ```javascript
 import '@carbon/web-components/es/components/icon-button/index.js';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
 
 function App() {
   return html`<cds-icon-button>
diff --git a/packages/web-components/src/components/icon-button/icon-button.stories.ts b/packages/web-components/src/components/icon-button/icon-button.stories.ts
index d2fa901bee63..e848e75fc0ce 100644
--- a/packages/web-components/src/components/icon-button/icon-button.stories.ts
+++ b/packages/web-components/src/components/icon-button/icon-button.stories.ts
@@ -11,7 +11,7 @@ import { html } from 'lit';
 import './index';
 import '../button/index';
 import { ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
-import Edit16 from '@carbon/icons/lib/edit/16';
+import Edit16 from '@carbon/icons/lib/edit/16.js';
 import { ICON_BUTTON_SIZE } from './defs';
 import { BUTTON_KIND } from '../button/defs';
 
diff --git a/packages/web-components/src/components/icon/icon.mdx b/packages/web-components/src/components/icon/icon.mdx
index e0f79f5679cc..712d97091dd6 100644
--- a/packages/web-components/src/components/icon/icon.mdx
+++ b/packages/web-components/src/components/icon/icon.mdx
@@ -1,5 +1,5 @@
-import { ArgTypes, Meta } from "@storybook/blocks";
-import * as IconStories from "./icon.stories";
+import { ArgTypes, Meta } from '@storybook/blocks';
+import * as IconStories from './icon.stories';
 
 <Meta of={IconStories} />
 
@@ -14,7 +14,7 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 
 function App() {
   return (
diff --git a/packages/web-components/src/components/icon/icon.stories.ts b/packages/web-components/src/components/icon/icon.stories.ts
index 9cee6aad6f22..f52edcf31b2c 100644
--- a/packages/web-components/src/components/icon/icon.stories.ts
+++ b/packages/web-components/src/components/icon/icon.stories.ts
@@ -12,13 +12,13 @@ import { html, svg } from 'lit';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Add16 from '@carbon/icons/lib/add/16';
+import Add16 from '@carbon/icons/lib/add/16.js';
 // @ts-ignore
-import Add20 from '@carbon/icons/lib/add/20';
+import Add20 from '@carbon/icons/lib/add/20.js';
 // @ts-ignore
-import Add24 from '@carbon/icons/lib/add/24';
+import Add24 from '@carbon/icons/lib/add/24.js';
 // @ts-ignore
-import Add32 from '@carbon/icons/lib/add/32';
+import Add32 from '@carbon/icons/lib/add/32.js';
 
 export const Default = {
   render: () => html` ${Add16()} ${Add20()} ${Add24()} ${Add32()} `,
diff --git a/packages/web-components/src/components/inline-loading/inline-loading.ts b/packages/web-components/src/components/inline-loading/inline-loading.ts
index f0cabe8df1e9..d37b46085158 100644
--- a/packages/web-components/src/components/inline-loading/inline-loading.ts
+++ b/packages/web-components/src/components/inline-loading/inline-loading.ts
@@ -10,8 +10,8 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
 import { prefix } from '../../globals/settings';
 import LOADING_TYPE from '../loading/types';
 import getLoadingIcon from '../loading/loading-icon';
diff --git a/packages/web-components/src/components/link/link.mdx b/packages/web-components/src/components/link/link.mdx
index 376156fa89d5..543e2c3d40ff 100644
--- a/packages/web-components/src/components/link/link.mdx
+++ b/packages/web-components/src/components/link/link.mdx
@@ -39,7 +39,7 @@ import '@carbon/web-components/es/components/list/index.js';
 Import the desired icon and incorporate with the link text:
 
 ```javascript
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 
 function App() {
   return html`<cds-link href="https://www.ibm.com">
diff --git a/packages/web-components/src/components/link/link.stories.ts b/packages/web-components/src/components/link/link.stories.ts
index 6fda7939ae12..1a81f4d01e59 100644
--- a/packages/web-components/src/components/link/link.stories.ts
+++ b/packages/web-components/src/components/link/link.stories.ts
@@ -9,7 +9,7 @@
 
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 import { LINK_SIZE } from './link';
 
 const defaultArgs = {
diff --git a/packages/web-components/src/components/modal/modal-close-button.ts b/packages/web-components/src/components/modal/modal-close-button.ts
index 612d4945d7ae..ac2d8a2ef1d4 100644
--- a/packages/web-components/src/components/modal/modal-close-button.ts
+++ b/packages/web-components/src/components/modal/modal-close-button.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Close20 from '@carbon/icons/lib/close/20';
+import Close20 from '@carbon/icons/lib/close/20.js';
 import { prefix } from '../../globals/settings';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/multi-select/multi-select.ts b/packages/web-components/src/components/multi-select/multi-select.ts
index d686bfe03abf..a75bb2ef7b7a 100644
--- a/packages/web-components/src/components/multi-select/multi-select.ts
+++ b/packages/web-components/src/components/multi-select/multi-select.ts
@@ -10,7 +10,7 @@
 import { html, TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
 import { prefix } from '../../globals/settings';
 import {
   filter,
diff --git a/packages/web-components/src/components/notification/actionable-notification.ts b/packages/web-components/src/components/notification/actionable-notification.ts
index 265571082bef..1f0bd194b0ac 100644
--- a/packages/web-components/src/components/notification/actionable-notification.ts
+++ b/packages/web-components/src/components/notification/actionable-notification.ts
@@ -6,12 +6,12 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
-import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
-import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
-import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
-import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
-import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20.js';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20.js';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20.js';
+import WarningFilled20 from '@carbon/icons/lib/warning--filled/20.js';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20.js';
 import { html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
diff --git a/packages/web-components/src/components/notification/inline-notification.ts b/packages/web-components/src/components/notification/inline-notification.ts
index ea2c285bbc49..69f4c4b76f06 100644
--- a/packages/web-components/src/components/notification/inline-notification.ts
+++ b/packages/web-components/src/components/notification/inline-notification.ts
@@ -7,13 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
-import Close16 from '@carbon/icons/lib/close/16';
-import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
-import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
-import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
-import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
-import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20.js';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20.js';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20.js';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20.js';
+import WarningFilled20 from '@carbon/icons/lib/warning--filled/20.js';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20.js';
 import { LitElement, html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
diff --git a/packages/web-components/src/components/number-input/number-input.ts b/packages/web-components/src/components/number-input/number-input.ts
index cef3909bc0ad..79ff542fcdc2 100644
--- a/packages/web-components/src/components/number-input/number-input.ts
+++ b/packages/web-components/src/components/number-input/number-input.ts
@@ -11,10 +11,10 @@ import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
-import Add16 from '@carbon/icons/lib/add/16';
-import Subtract16 from '@carbon/icons/lib/subtract/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
+import Add16 from '@carbon/icons/lib/add/16.js';
+import Subtract16 from '@carbon/icons/lib/subtract/16.js';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { NUMBER_INPUT_VALIDATION_STATUS } from './defs';
 import styles from './number-input.scss?lit';
diff --git a/packages/web-components/src/components/overflow-menu/overflow-menu.mdx b/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
index 550eda73c004..ed738b3cc24e 100644
--- a/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
+++ b/packages/web-components/src/components/overflow-menu/overflow-menu.mdx
@@ -24,7 +24,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/web-components/es/components/overflow-menu/index.js';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
 ```
 
 <Markdown>{`${cdnJs({ components: ['overflow-menu'] })}`}</Markdown>
diff --git a/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts b/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
index 46f60fd2155e..626ec5ce1e62 100644
--- a/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
+++ b/packages/web-components/src/components/overflow-menu/overflow-menu.stories.ts
@@ -13,8 +13,8 @@ import { OVERFLOW_MENU_SIZE } from './overflow-menu';
 import './overflow-menu-body';
 import './overflow-menu-item';
 import { prefix } from '../../globals/settings';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
-import Filter16 from '@carbon/icons/lib/filter/16';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16.js';
+import Filter16 from '@carbon/icons/lib/filter/16.js';
 
 const sizes = {
   [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL,
diff --git a/packages/web-components/src/components/pagination/pagination.ts b/packages/web-components/src/components/pagination/pagination.ts
index 403bef7a02ec..6902bd806f31 100644
--- a/packages/web-components/src/components/pagination/pagination.ts
+++ b/packages/web-components/src/components/pagination/pagination.ts
@@ -9,8 +9,8 @@
 
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import CaretLeft16 from '@carbon/icons/lib/caret--left/16';
-import CaretRight16 from '@carbon/icons/lib/caret--right/16';
+import CaretLeft16 from '@carbon/icons/lib/caret--left/16.js';
+import CaretRight16 from '@carbon/icons/lib/caret--right/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/popover/autoalign.mdx b/packages/web-components/src/components/popover/autoalign.mdx
index bebc1315a9f2..aaf40421d5b6 100644
--- a/packages/web-components/src/components/popover/autoalign.mdx
+++ b/packages/web-components/src/components/popover/autoalign.mdx
@@ -42,7 +42,7 @@ to the component.
 
 ```javascript
 import '@carbon/web-components/es/components/popover/index.js';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
 ```
 
 <Markdown>{`${cdnJs({ components: ['popover'] })}`}</Markdown>
diff --git a/packages/web-components/src/components/popover/autoalign.stories.ts b/packages/web-components/src/components/popover/autoalign.stories.ts
index 837214229799..3286e1ecdfa5 100644
--- a/packages/web-components/src/components/popover/autoalign.stories.ts
+++ b/packages/web-components/src/components/popover/autoalign.stories.ts
@@ -15,11 +15,11 @@ import '../icon-button/index';
 import '../data-table/index';
 import { POPOVER_ALIGNMENT } from './defs';
 import { SLUG_SIZE } from '../slug/defs';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
-import Information16 from '@carbon/icons/lib/information/16';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
+import Information16 from '@carbon/icons/lib/information/16.js';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
 
 import styles from './popover-story.scss?lit';
 import slugStyles from '../slug/slug-story.scss?lit';
diff --git a/packages/web-components/src/components/popover/popover.mdx b/packages/web-components/src/components/popover/popover.mdx
index ada966141d7f..30597ee826e3 100644
--- a/packages/web-components/src/components/popover/popover.mdx
+++ b/packages/web-components/src/components/popover/popover.mdx
@@ -22,7 +22,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/web-components/es/components/popover/index.js';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
 ```
 
 <Markdown>{`${cdnJs({ components: ['popover'] })}`}</Markdown>
@@ -54,7 +54,7 @@ import '@carbon/web-components/es/components/form/index.js';
 import '@carbon/web-components/es/components/radio-button/index.js';
 import '@carbon/web-components/es/components/checkbox/index.js';
 
-import Settings16 from '@carbon/icons/lib/settings/16';
+import Settings16 from '@carbon/icons/lib/settings/16.js';
 ```
 
 ```html
diff --git a/packages/web-components/src/components/popover/popover.stories.ts b/packages/web-components/src/components/popover/popover.stories.ts
index e92a3275a087..37b500e58a8f 100644
--- a/packages/web-components/src/components/popover/popover.stories.ts
+++ b/packages/web-components/src/components/popover/popover.stories.ts
@@ -13,7 +13,7 @@ import './popover-content';
 import '../radio-button/index';
 import { POPOVER_ALIGNMENT } from './defs';
 import { prefix } from '../../globals/settings';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
 import Settings16 from '@carbon/icons/lib/settings/16';
 import '../checkbox/checkbox';
 
diff --git a/packages/web-components/src/components/progress-bar/progress-bar.ts b/packages/web-components/src/components/progress-bar/progress-bar.ts
index cee8e62d80dd..636801dfdc6d 100644
--- a/packages/web-components/src/components/progress-bar/progress-bar.ts
+++ b/packages/web-components/src/components/progress-bar/progress-bar.ts
@@ -11,8 +11,8 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { classMap } from 'lit/directives/class-map.js';
-import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16.js';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
 import {
   PROGRESS_BAR_SIZE,
   PROGRESS_BAR_STATUS,
diff --git a/packages/web-components/src/components/progress-indicator/progress-step.ts b/packages/web-components/src/components/progress-indicator/progress-step.ts
index cbe1d7be0538..0bdbdcc3f7b2 100644
--- a/packages/web-components/src/components/progress-indicator/progress-step.ts
+++ b/packages/web-components/src/components/progress-indicator/progress-step.ts
@@ -9,10 +9,10 @@
 
 import { LitElement, html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16';
-import CircleDash16 from '@carbon/icons/lib/circle-dash/16';
-import Incomplete16 from '@carbon/icons/lib/incomplete/16';
-import Warning16 from '@carbon/icons/lib/warning/16';
+import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16.js';
+import CircleDash16 from '@carbon/icons/lib/circle-dash/16.js';
+import Incomplete16 from '@carbon/icons/lib/incomplete/16.js';
+import Warning16 from '@carbon/icons/lib/warning/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { PROGRESS_STEP_STAT } from './defs';
diff --git a/packages/web-components/src/components/radio-button/radio-button-group.ts b/packages/web-components/src/components/radio-button/radio-button-group.ts
index 1d2cf7d8ede3..773e76cd080c 100644
--- a/packages/web-components/src/components/radio-button/radio-button-group.ts
+++ b/packages/web-components/src/components/radio-button/radio-button-group.ts
@@ -16,8 +16,8 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { find, forEach } from '../../globals/internal/collection-helpers';
 import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import CDSRadioButton from './radio-button';
 import styles from './radio-button.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/search/search.ts b/packages/web-components/src/components/search/search.ts
index c30a5bf7dbbf..fdc37112647a 100644
--- a/packages/web-components/src/components/search/search.ts
+++ b/packages/web-components/src/components/search/search.ts
@@ -10,8 +10,8 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
-import Search16 from '@carbon/icons/lib/search/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
+import Search16 from '@carbon/icons/lib/search/16.js';
 import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/select/select.ts b/packages/web-components/src/components/select/select.ts
index 49344e3e6ba7..31eb06a10c58 100644
--- a/packages/web-components/src/components/select/select.ts
+++ b/packages/web-components/src/components/select/select.ts
@@ -10,9 +10,9 @@
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import { prefix } from '../../globals/settings';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import FormMixin from '../../globals/mixins/form';
diff --git a/packages/web-components/src/components/side-panel/side-panel.ts b/packages/web-components/src/components/side-panel/side-panel.ts
index 2d075cca64c0..214d2abf61a3 100644
--- a/packages/web-components/src/components/side-panel/side-panel.ts
+++ b/packages/web-components/src/components/side-panel/side-panel.ts
@@ -20,8 +20,8 @@ import HostListenerMixin from '../../globals/mixins/host-listener';
 import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs';
 import { selectorTabbable } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16';
-import Close20 from '@carbon/icons/lib/close/20';
+import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16.js';
+import Close20 from '@carbon/icons/lib/close/20.js';
 import { moderate02 } from '@carbon/motion';
 import '../button/index';
 import '../icon-button/index';
diff --git a/packages/web-components/src/components/slider/slider-input.ts b/packages/web-components/src/components/slider/slider-input.ts
index 7b3be0951aab..a9cdb8b1655b 100644
--- a/packages/web-components/src/components/slider/slider-input.ts
+++ b/packages/web-components/src/components/slider/slider-input.ts
@@ -12,8 +12,8 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './slider.scss?lit';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
diff --git a/packages/web-components/src/components/slug/slug-data-table.stories.ts b/packages/web-components/src/components/slug/slug-data-table.stories.ts
index fecce2f9a5de..679df467a9d8 100644
--- a/packages/web-components/src/components/slug/slug-data-table.stories.ts
+++ b/packages/web-components/src/components/slug/slug-data-table.stories.ts
@@ -8,9 +8,9 @@
  */
 
 import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
 import '../data-table/index';
 import '../icon-button/index';
 import '../link/index';
diff --git a/packages/web-components/src/components/slug/slug-example.stories.ts b/packages/web-components/src/components/slug/slug-example.stories.ts
index 84c811097560..97757cb5b62a 100644
--- a/packages/web-components/src/components/slug/slug-example.stories.ts
+++ b/packages/web-components/src/components/slug/slug-example.stories.ts
@@ -8,10 +8,10 @@
  */
 
 import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
-import Asleep16 from '@carbon/icons/lib/asleep/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
+import Asleep16 from '@carbon/icons/lib/asleep/16.js';
 import './index';
 import '../icon-button/index';
 import '../checkbox/index';
diff --git a/packages/web-components/src/components/slug/slug-form.stories.ts b/packages/web-components/src/components/slug/slug-form.stories.ts
index c65b86af1516..a8db60e01ec3 100644
--- a/packages/web-components/src/components/slug/slug-form.stories.ts
+++ b/packages/web-components/src/components/slug/slug-form.stories.ts
@@ -8,9 +8,9 @@
  */
 
 import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
 import './index';
 import '../button/index';
 import '../combo-box/index';
diff --git a/packages/web-components/src/components/slug/slug.stories.ts b/packages/web-components/src/components/slug/slug.stories.ts
index 17c4c848a0c4..26dda6431de3 100644
--- a/packages/web-components/src/components/slug/slug.stories.ts
+++ b/packages/web-components/src/components/slug/slug.stories.ts
@@ -8,9 +8,9 @@
  */
 
 import { html } from 'lit';
-import View16 from '@carbon/icons/lib/view/16';
-import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
-import Folders16 from '@carbon/icons/lib/folders/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16.js';
+import Folders16 from '@carbon/icons/lib/folders/16.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import './index';
 import '../icon-button/index';
diff --git a/packages/web-components/src/components/slug/slug.ts b/packages/web-components/src/components/slug/slug.ts
index b4d082f5a72d..cce483275847 100644
--- a/packages/web-components/src/components/slug/slug.ts
+++ b/packages/web-components/src/components/slug/slug.ts
@@ -13,7 +13,7 @@ import { property } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
 import CDSToggleTip from '../toggle-tip/toggletip';
 import styles from './slug.scss?lit';
-import Undo16 from '@carbon/icons/lib/undo/16';
+import Undo16 from '@carbon/icons/lib/undo/16.js';
 import { SLUG_SIZE, SLUG_KIND } from './defs';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
diff --git a/packages/web-components/src/components/structured-list/structured-list-row.ts b/packages/web-components/src/components/structured-list/structured-list-row.ts
index 572f42615a55..722e3d74359e 100644
--- a/packages/web-components/src/components/structured-list/structured-list-row.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-row.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/tabs/tabs.ts b/packages/web-components/src/components/tabs/tabs.ts
index 429e03ae7054..68406e0f43c7 100644
--- a/packages/web-components/src/components/tabs/tabs.ts
+++ b/packages/web-components/src/components/tabs/tabs.ts
@@ -14,8 +14,8 @@ import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
-import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16.js';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16.js';
 import CDSContentSwitcher, {
   NAVIGATION_DIRECTION,
 } from '../content-switcher/content-switcher';
diff --git a/packages/web-components/src/components/tag/tag.mdx b/packages/web-components/src/components/tag/tag.mdx
index 20d8065140f6..e7d72fcdc6ee 100644
--- a/packages/web-components/src/components/tag/tag.mdx
+++ b/packages/web-components/src/components/tag/tag.mdx
@@ -65,7 +65,7 @@ icon and insert it within the tag element as such:
 ```
 
 ```javascript
-import Download16 from '@carbon/icons/lib/download/16';
+import Download16 from '@carbon/icons/lib/download/16.js';
 
 function App() {
   return html` <cds-tag filter type="gray" title="Clear selection"
diff --git a/packages/web-components/src/components/tag/tag.ts b/packages/web-components/src/components/tag/tag.ts
index a3058d9bfcfa..293b8debd2a1 100644
--- a/packages/web-components/src/components/tag/tag.ts
+++ b/packages/web-components/src/components/tag/tag.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import Close16 from '@carbon/icons/lib/close/16';
+import Close16 from '@carbon/icons/lib/close/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListener from '../../globals/decorators/host-listener';
diff --git a/packages/web-components/src/components/text-input/text-input.ts b/packages/web-components/src/components/text-input/text-input.ts
index a5d4ef4eff08..7c4b8ff328f0 100644
--- a/packages/web-components/src/components/text-input/text-input.ts
+++ b/packages/web-components/src/components/text-input/text-input.ts
@@ -12,10 +12,10 @@ import { property, query } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { classMap } from 'lit/directives/class-map.js';
 import { prefix } from '../../globals/settings';
-import View16 from '@carbon/icons/lib/view/16';
-import ViewOff16 from '@carbon/icons/lib/view--off/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import View16 from '@carbon/icons/lib/view/16.js';
+import ViewOff16 from '@carbon/icons/lib/view--off/16.js';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import FormMixin from '../../globals/mixins/form';
 import ValidityMixin from '../../globals/mixins/validity';
diff --git a/packages/web-components/src/components/textarea/textarea.ts b/packages/web-components/src/components/textarea/textarea.ts
index 232a21f6e4b0..52a8737fbb0a 100644
--- a/packages/web-components/src/components/textarea/textarea.ts
+++ b/packages/web-components/src/components/textarea/textarea.ts
@@ -10,8 +10,8 @@
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16.js';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16.js';
 import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { ifDefined } from 'lit/directives/if-defined.js';
diff --git a/packages/web-components/src/components/tile/expandable-tile.ts b/packages/web-components/src/components/tile/expandable-tile.ts
index acacc9801449..ba7957229f07 100644
--- a/packages/web-components/src/components/tile/expandable-tile.ts
+++ b/packages/web-components/src/components/tile/expandable-tile.ts
@@ -10,7 +10,7 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
+import ChevronDown16 from '@carbon/icons/lib/chevron--down/16.js';
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/tile/radio-tile.ts b/packages/web-components/src/components/tile/radio-tile.ts
index 76350c65d55c..fcf598e7d26d 100644
--- a/packages/web-components/src/components/tile/radio-tile.ts
+++ b/packages/web-components/src/components/tile/radio-tile.ts
@@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import SelectableTile from './selectable-tile';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
diff --git a/packages/web-components/src/components/tile/selectable-tile.ts b/packages/web-components/src/components/tile/selectable-tile.ts
index 7397ed95a1f3..09adf72e6353 100644
--- a/packages/web-components/src/components/tile/selectable-tile.ts
+++ b/packages/web-components/src/components/tile/selectable-tile.ts
@@ -11,8 +11,8 @@ import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html, svg } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import Checkbox16 from '@carbon/icons/lib/checkbox/16';
-import CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16.js';
+import CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/toggle-tip/toggletip.ts b/packages/web-components/src/components/toggle-tip/toggletip.ts
index 773778305e40..11ca49b3eeef 100644
--- a/packages/web-components/src/components/toggle-tip/toggletip.ts
+++ b/packages/web-components/src/components/toggle-tip/toggletip.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import Information16 from '@carbon/icons/lib/information/16';
+import Information16 from '@carbon/icons/lib/information/16.js';
 import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/tooltip/tooltip.mdx b/packages/web-components/src/components/tooltip/tooltip.mdx
index 02b11bb5c77d..a34230eb4e6b 100644
--- a/packages/web-components/src/components/tooltip/tooltip.mdx
+++ b/packages/web-components/src/components/tooltip/tooltip.mdx
@@ -27,7 +27,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/web-components/es/components/tooltip/index.js';
-import Information16 from '@carbon/icons/lib/information/16';
+import Information16 from '@carbon/icons/lib/information/16.js';
 ```
 
 <Markdown>{`${cdnJs({ components: ['tooltip'] })}`}</Markdown>
diff --git a/packages/web-components/src/components/tooltip/tooltip.stories.ts b/packages/web-components/src/components/tooltip/tooltip.stories.ts
index 732ad8afb61e..4c42a31ea0a8 100644
--- a/packages/web-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/web-components/src/components/tooltip/tooltip.stories.ts
@@ -14,7 +14,7 @@ import { html } from 'lit';
 import './index';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
 import styles from './tooltip-story.scss?lit';
-import Information16 from '@carbon/icons/lib/information/16';
+import Information16 from '@carbon/icons/lib/information/16.js';
 
 const tooltipAlignments = {
   [`top`]: POPOVER_ALIGNMENT.TOP,
diff --git a/packages/web-components/src/components/ui-shell/header-menu-button.ts b/packages/web-components/src/components/ui-shell/header-menu-button.ts
index 0185fbd8b36a..591af4fbfef7 100644
--- a/packages/web-components/src/components/ui-shell/header-menu-button.ts
+++ b/packages/web-components/src/components/ui-shell/header-menu-button.ts
@@ -10,8 +10,8 @@
 import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import Close20 from '@carbon/icons/lib/close/20';
-import Menu20 from '@carbon/icons/lib/menu/20';
+import Close20 from '@carbon/icons/lib/close/20.js';
+import Menu20 from '@carbon/icons/lib/menu/20.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/ui-shell/header-menu.ts b/packages/web-components/src/components/ui-shell/header-menu.ts
index a44030db264a..2015e53a1b0a 100644
--- a/packages/web-components/src/components/ui-shell/header-menu.ts
+++ b/packages/web-components/src/components/ui-shell/header-menu.ts
@@ -11,7 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';
+import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
diff --git a/packages/web-components/src/components/ui-shell/side-nav-menu.ts b/packages/web-components/src/components/ui-shell/side-nav-menu.ts
index 2e5d8fb08115..b636ef18ddf3 100644
--- a/packages/web-components/src/components/ui-shell/side-nav-menu.ts
+++ b/packages/web-components/src/components/ui-shell/side-nav-menu.ts
@@ -9,7 +9,7 @@
 
 import { LitElement, html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import ChevronDown20 from '@carbon/icons/lib/chevron--down/20';
+import ChevronDown20 from '@carbon/icons/lib/chevron--down/20.js';
 import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import FocusMixin from '../../globals/mixins/focus';
diff --git a/packages/web-components/src/components/ui-shell/ui-shell.stories.ts b/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
index 5c4892aec197..c93dd42d8e61 100644
--- a/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
+++ b/packages/web-components/src/components/ui-shell/ui-shell.stories.ts
@@ -11,10 +11,10 @@ import { html } from 'lit';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Fade16 from '@carbon/icons/lib/fade/16';
-import Search20 from '@carbon/icons/lib/search/20';
-import Notification20 from '@carbon/icons/lib/notification/20';
-import SwitcherIcon20 from '@carbon/icons/lib/switcher/20';
+import Fade16 from '@carbon/icons/lib/fade/16.js';
+import Search20 from '@carbon/icons/lib/search/20.js';
+import Notification20 from '@carbon/icons/lib/notification/20.js';
+import SwitcherIcon20 from '@carbon/icons/lib/switcher/20.js';
 import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss?lit';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
 import { classMap } from 'lit/directives/class-map.js';
diff --git a/packages/web-components/tests/spec/ui-shell_spec.ts b/packages/web-components/tests/spec/ui-shell_spec.ts
index b9c1bc4c2d94..ddd4356e71e8 100644
--- a/packages/web-components/tests/spec/ui-shell_spec.ts
+++ b/packages/web-components/tests/spec/ui-shell_spec.ts
@@ -11,7 +11,7 @@ import { html, render } from 'lit';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Fade16 from '@carbon/icons/lib/fade/16';
+import Fade16 from '@carbon/icons/lib/fade/16.js';
 import EventManager from '../utils/event-manager';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import CDSHeaderMenu from '../../src/components/ui-shell/header-menu';
diff --git a/packages/web-components/tools/rollup-plugin-icons.js b/packages/web-components/tools/rollup-plugin-icons.js
index 3ea6c5241754..138ff005b448 100644
--- a/packages/web-components/tools/rollup-plugin-icons.js
+++ b/packages/web-components/tools/rollup-plugin-icons.js
@@ -38,7 +38,7 @@ export default function rollupPluginIcons(inputs, banner) {
         );
         const spreadModulePath = path.resolve(
           __dirname,
-          '../es/globals/directives/spread'
+          '../es/globals/directives/spread.js'
         );
 
         const code = `${banner}