diff --git a/package-lock.json b/package-lock.json
index 5180d35bb79..c646116fae0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -35900,7 +35900,6 @@
       "version": "2.11.0-next.29",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-ui-icons": "^3.29.1-next.0",
         "@floating-ui/dom": "1.6.8",
         "@stencil/core": "4.19.2",
         "@types/color": "3.0.6",
@@ -35916,6 +35915,7 @@
       },
       "devDependencies": {
         "@esri/calcite-design-tokens": "^2.2.1-next.3",
+        "@esri/calcite-ui-icons": "^3.29.1-next.0",
         "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3",
         "@stencil-community/eslint-plugin": "0.7.2",
         "@stencil-community/postcss": "2.2.0",
diff --git a/packages/calcite-components/.eslintrc.cjs b/packages/calcite-components/.eslintrc.cjs
index b5ceb4e7075..75c1fcfcd12 100644
--- a/packages/calcite-components/.eslintrc.cjs
+++ b/packages/calcite-components/.eslintrc.cjs
@@ -70,7 +70,6 @@ module.exports = {
         ],
       },
     ],
-    "@typescript-eslint/lines-between-class-members": ["error", "always"],
     "@typescript-eslint/method-signature-style": ["error", "property"],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "error",
@@ -85,7 +84,7 @@ module.exports = {
     "jsdoc/require-property-type": "off",
     "jsdoc/require-returns-type": "off",
     "jsdoc/tag-lines": ["error", "any", { startLines: 1 }],
-    "lines-between-class-members": "off",
+    "lines-between-class-members": ["error", "always"],
     "no-eval": "error",
     "no-implied-eval": "error",
     "no-multiple-empty-lines": [
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 94e78b1d3e4..b0fa18276e5 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -63,7 +63,6 @@
     "directory": "packages/calcite-components"
   },
   "dependencies": {
-    "@esri/calcite-ui-icons": "^3.29.1-next.0",
     "@floating-ui/dom": "1.6.8",
     "@stencil/core": "4.19.2",
     "@types/color": "3.0.6",
@@ -79,6 +78,7 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "^2.2.1-next.3",
+    "@esri/calcite-ui-icons": "^3.29.1-next.0",
     "@esri/eslint-plugin-calcite-components": "^1.2.1-next.3",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil-community/postcss": "2.2.0",
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index f90f78a16c5..6aa9d2bfd4f 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -7,7 +7,6 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
-import { IconName } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 import { Columns } from "./components/action-group/interfaces";
@@ -53,7 +52,6 @@ import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
-export { IconName } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
 export { Columns } from "./components/action-group/interfaces";
@@ -143,7 +141,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -155,7 +153,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
@@ -194,7 +192,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -425,7 +423,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": IconName | boolean;
+        "icon": string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -524,7 +522,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -532,7 +530,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -567,7 +565,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -575,7 +573,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -637,7 +635,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -645,7 +643,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Specifies the kind of the component, which will apply to the border and background if applicable.
          */
@@ -921,7 +919,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1199,7 +1197,7 @@ export namespace Components {
         /**
           * Specifies the placeholder icon for the input.
          */
-        "placeholderIcon": IconName;
+        "placeholderIcon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1249,7 +1247,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -1297,7 +1295,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1730,7 +1728,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1738,7 +1736,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Accessible name for the component.
          */
@@ -1781,7 +1779,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @default "plus"
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2033,7 +2031,7 @@ export namespace Components {
           * Displays a specific icon.
           * @see [Icons](https://esri.github.io/calcite-ui-icons)
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * Specifies the size of the component.
          */
@@ -2132,7 +2130,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": IconName | boolean;
+        "icon": string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2270,7 +2268,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2393,7 +2391,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2417,7 +2415,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName | boolean;
+        "icon": boolean | string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2473,7 +2471,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon": IconName | boolean;
+        "icon": string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2588,7 +2586,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2642,7 +2640,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon": IconName | boolean;
+        "icon": string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2729,7 +2727,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2829,7 +2827,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2917,7 +2915,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2968,7 +2966,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2976,7 +2974,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Specifies the relationship to the linked document defined in `href`.
          */
@@ -3257,7 +3255,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -3265,7 +3263,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         "isTopLevelItem": boolean;
         /**
           * Accessible name for the component.
@@ -3496,7 +3494,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -3566,7 +3564,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": IconName | boolean;
+        "icon": string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4094,7 +4092,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4213,7 +4211,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4245,7 +4243,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4253,7 +4251,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
@@ -4308,7 +4306,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4656,7 +4654,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the primary button.
          */
-        "primaryIconEnd": IconName;
+        "primaryIconEnd": string;
         /**
           * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4664,7 +4662,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the primary button.
          */
-        "primaryIconStart": IconName;
+        "primaryIconStart": string;
         /**
           * Accessible name for the primary button.
          */
@@ -4924,7 +4922,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": IconName;
+        "iconEnd": string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4932,7 +4930,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         "layout": TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -5260,7 +5258,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": IconName | boolean;
+        "validationIcon": string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -5315,7 +5313,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -5417,7 +5415,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": IconName;
+        "icon": string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -5645,7 +5643,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": IconName;
+        "iconStart": string;
         /**
           * In ancestor selection mode, show as indeterminate when only some children are selected.
          */
@@ -8030,7 +8028,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8042,7 +8040,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
@@ -8079,7 +8077,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8298,7 +8296,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8417,7 +8415,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8425,7 +8423,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -8477,7 +8475,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8485,7 +8483,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8547,7 +8545,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8555,7 +8553,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Specifies the kind of the component, which will apply to the border and background if applicable.
          */
@@ -8844,7 +8842,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9161,7 +9159,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the placeholder icon for the input.
          */
-        "placeholderIcon"?: IconName;
+        "placeholderIcon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9201,7 +9199,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -9249,7 +9247,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9723,7 +9721,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9731,7 +9729,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Accessible name for the component.
          */
@@ -9777,7 +9775,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @default "plus"
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10023,7 +10021,7 @@ declare namespace LocalJSX {
           * Displays a specific icon.
           * @see [Icons](https://esri.github.io/calcite-ui-icons)
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * Specifies the size of the component.
          */
@@ -10127,7 +10125,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10267,7 +10265,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10401,7 +10399,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10425,7 +10423,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: boolean | string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10481,7 +10479,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10598,7 +10596,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10652,7 +10650,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10744,7 +10742,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10855,7 +10853,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10962,7 +10960,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -11016,7 +11014,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11024,7 +11022,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Specifies the relationship to the linked document defined in `href`.
          */
@@ -11340,7 +11338,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11348,7 +11346,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         "isTopLevelItem"?: boolean;
         /**
           * Accessible name for the component.
@@ -11582,7 +11580,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11644,7 +11642,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: IconName | boolean;
+        "icon"?: string | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12202,7 +12200,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12321,7 +12319,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12353,7 +12351,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12361,7 +12359,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
@@ -12420,7 +12418,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12794,7 +12792,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the primary button.
          */
-        "primaryIconEnd"?: IconName;
+        "primaryIconEnd"?: string;
         /**
           * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12802,7 +12800,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the primary button.
          */
-        "primaryIconStart"?: IconName;
+        "primaryIconStart"?: string;
         /**
           * Accessible name for the primary button.
          */
@@ -13040,7 +13038,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: IconName;
+        "iconEnd"?: string;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -13048,7 +13046,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         "layout"?: TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -13401,7 +13399,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: IconName | boolean;
+        "validationIcon"?: string | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -13456,7 +13454,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -13563,7 +13561,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: IconName;
+        "icon"?: string;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -13805,7 +13803,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: IconName;
+        "iconStart"?: string;
         /**
           * In ancestor selection mode, show as indeterminate when only some children are selected.
          */
diff --git a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
index c8e99f9512b..973e9374f3a 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -30,7 +30,6 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
-import { IconName } from "../icon/interfaces";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
@@ -61,10 +60,10 @@ export class AccordionItem implements ConditionalSlotComponent, LoadableComponen
   @Prop() description: string;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/packages/calcite-components/src/components/action-group/resources.ts
index 7d8be4ba27e..c43144a4821 100644
--- a/packages/calcite-components/src/components/action-group/resources.ts
+++ b/packages/calcite-components/src/components/action-group/resources.ts
@@ -5,7 +5,7 @@ export const SLOTS = {
 
 export const ICONS = {
   menu: "ellipsis",
-} as const;
+};
 
 export const CSS = {
   container: "container",
diff --git a/packages/calcite-components/src/components/action-menu/resources.ts b/packages/calcite-components/src/components/action-menu/resources.ts
index 38223214d32..d10c0e03549 100644
--- a/packages/calcite-components/src/components/action-menu/resources.ts
+++ b/packages/calcite-components/src/components/action-menu/resources.ts
@@ -10,6 +10,6 @@ export const SLOTS = {
 
 export const ICONS = {
   menu: "ellipsis",
-} as const;
+};
 
 export const activeAttr = "data-active";
diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx
index f68e5515f88..f77b9dad14c 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -36,7 +36,6 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Alignment, Appearance, Scale } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
 import { ActionMessages } from "./assets/action/t9n";
 import { CSS, SLOTS } from "./resources";
@@ -86,7 +85,7 @@ export class Action
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display. */
-  @Prop() icon: IconName;
+  @Prop() icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
diff --git a/packages/calcite-components/src/components/alert/alert.tsx b/packages/calcite-components/src/components/alert/alert.tsx
index 2ba97cd4a11..93aefbc2bbf 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -42,7 +42,6 @@ import {
 } from "../../utils/t9n";
 import { Kind, Scale } from "../interfaces";
 import { KindIcons } from "../resources";
-import { IconName } from "../icon/interfaces";
 import { AlertMessages } from "./assets/alert/t9n";
 import { AlertDuration, Sync, Unregister } from "./interfaces";
 import { CSS, DURATIONS, SLOTS } from "./resources";
@@ -111,7 +110,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
    * When `true`, shows a default recommended icon. Alternatively,
    * pass a Calcite UI Icon name to display a specific icon.
    */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: string | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -309,7 +308,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     );
   }
 
-  private renderIcon(icon: IconName): VNode {
+  private renderIcon(icon: string): VNode {
     return (
       <div class={CSS.icon}>
         <calcite-icon flipRtl={this.iconFlipRtl} icon={icon} scale={getIconScale(this.scale)} />
diff --git a/packages/calcite-components/src/components/block-section/block-section.tsx b/packages/calcite-components/src/components/block-section/block-section.tsx
index fe1a3842b85..82f42b74585 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -28,7 +28,6 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
-import { IconName } from "../icon/interfaces";
 import { BlockSectionMessages } from "./assets/block-section/t9n";
 import { BlockSectionToggleDisplay } from "./interfaces";
 import { CSS, ICONS, IDS } from "./resources";
@@ -50,13 +49,13 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   // --------------------------------------------------------------------------
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /**
    * When `true`, expands the component and its contents.
diff --git a/packages/calcite-components/src/components/block-section/resources.ts b/packages/calcite-components/src/components/block-section/resources.ts
index 08eee3e4a6c..9efb94b3684 100644
--- a/packages/calcite-components/src/components/block-section/resources.ts
+++ b/packages/calcite-components/src/components/block-section/resources.ts
@@ -26,4 +26,4 @@ export const ICONS = {
   menuClosed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/block/block.tsx b/packages/calcite-components/src/components/block/block.tsx
index c06303aaa8e..7c5bd1abe53 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -48,7 +48,6 @@ import {
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { FlipContext } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, IDS, SLOTS } from "./resources";
 import { BlockMessages } from "./assets/block/t9n";
 
@@ -107,13 +106,13 @@ export class Block
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /**
    * When `true`, a busy indicator is displayed.
diff --git a/packages/calcite-components/src/components/block/resources.ts b/packages/calcite-components/src/components/block/resources.ts
index aced6eb14ae..758e209afd5 100644
--- a/packages/calcite-components/src/components/block/resources.ts
+++ b/packages/calcite-components/src/components/block/resources.ts
@@ -41,4 +41,4 @@ export const ICONS = {
   closed: "chevron-down",
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/button/button.tsx b/packages/calcite-components/src/components/button/button.tsx
index d655278282a..a9995185ccd 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -36,7 +36,6 @@ import {
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { toAriaBoolean } from "../../utils/dom";
-import { IconName } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
@@ -118,13 +117,13 @@ export class Button
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /**
    * When `true`, a busy indicator is displayed and interaction is disabled.
diff --git a/packages/calcite-components/src/components/card/card.tsx b/packages/calcite-components/src/components/card/card.tsx
index f19ba3a9348..265ec7b7b86 100644
--- a/packages/calcite-components/src/components/card/card.tsx
+++ b/packages/calcite-components/src/components/card/card.tsx
@@ -35,7 +35,6 @@ import {
   updateHostInteraction,
 } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
-import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 import { CardMessages } from "./assets/card/t9n";
 
@@ -277,7 +276,7 @@ export class Card
   }
 
   private renderSelectionIcon(): VNode {
-    const icon: IconName =
+    const icon =
       this.selectionMode === "multiple" && this.selected
         ? ICONS.selected
         : this.selectionMode === "multiple"
diff --git a/packages/calcite-components/src/components/card/resources.ts b/packages/calcite-components/src/components/card/resources.ts
index ca463b37216..9f36ac2a531 100644
--- a/packages/calcite-components/src/components/card/resources.ts
+++ b/packages/calcite-components/src/components/card/resources.ts
@@ -28,4 +28,4 @@ export const ICONS = {
   unselected: "square",
   selectedSingle: "circle-f",
   unselectedSingle: "circle",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index 088997a1a50..7f139137438 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -25,4 +25,4 @@ export const ICONS = {
   active: "bullet-point-large",
   pause: "pause-f",
   play: "play-f",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index 4a6cdaab93b..520ee1a80c5 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -37,7 +37,6 @@ import {
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { isActivationKey } from "../../utils/key";
 import { getIconScale } from "../../utils/component";
-import { IconName } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
 import { ChipMessages } from "./assets/chip/t9n";
 import { CSS, SLOTS, ICONS } from "./resources";
@@ -74,7 +73,7 @@ export class Chip
   @Prop({ reflect: true }) closable = false;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName;
+  @Prop({ reflect: true }) icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
index cf7ddfc459b..68ef74130de 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -27,7 +27,6 @@ import { ComboboxChildElement } from "../combobox/interfaces";
 import { getAncestors, getDepth, isSingleLike } from "../combobox/utils";
 import { Scale, SelectionMode } from "../interfaces";
 import { getIconScale } from "../../utils/component";
-import { IconName } from "../icon/interfaces";
 import { CSS, SLOTS } from "./resources";
 
 /**
@@ -76,7 +75,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   @Prop({ reflect: true }) guid = guid();
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName;
+  @Prop({ reflect: true }) icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -203,7 +202,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   //
   // --------------------------------------------------------------------------
 
-  renderIcon(iconPath: IconName): VNode {
+  renderIcon(iconPath: string): VNode {
     return this.icon ? (
       <calcite-icon
         class={{
@@ -218,9 +217,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     ) : null;
   }
 
-  renderSelectIndicator(showDot: boolean): VNode;
-  renderSelectIndicator(showDot: boolean, iconPath: IconName): VNode;
-  renderSelectIndicator(showDot: boolean, iconPath?: IconName): VNode {
+  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {
     return showDot ? (
       <span
         class={{
@@ -258,8 +255,8 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     const { disabled } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !disabled;
-    const defaultIcon = isSingleSelect ? undefined : "check";
-    const iconPath = disabled ? undefined : defaultIcon;
+    const defaultIcon = isSingleSelect ? "dot" : "check";
+    const iconPath = disabled ? "" : defaultIcon;
 
     const classes = {
       [CSS.label]: true,
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index d25b899523d..5208d31bdd5 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -68,7 +68,6 @@ import { Scale, SelectionMode, Status } from "../interfaces";
 import { CSS as XButtonCSS, XButton } from "../functional/XButton";
 import { componentOnReady, getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { ComboboxMessages } from "./assets/combobox/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./interfaces";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
@@ -188,7 +187,7 @@ export class Combobox
   @Prop() placeholder: string;
 
   /** Specifies the placeholder icon for the input. */
-  @Prop({ reflect: true }) placeholderIcon: IconName;
+  @Prop({ reflect: true }) placeholderIcon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) placeholderIconFlipRtl = false;
@@ -205,7 +204,7 @@ export class Combobox
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/date-picker-month-header/resources.ts b/packages/calcite-components/src/components/date-picker-month-header/resources.ts
index 59cc3177eb9..c2229b037f2 100644
--- a/packages/calcite-components/src/components/date-picker-month-header/resources.ts
+++ b/packages/calcite-components/src/components/date-picker-month-header/resources.ts
@@ -11,4 +11,4 @@ export const CSS = {
 export const ICON = {
   chevronLeft: "chevron-left",
   chevronRight: "chevron-right",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index ad2b0d0ce29..c80fe3f9d5d 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -26,7 +26,6 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -60,10 +59,10 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Accessible name for the component. */
   @Prop() label: string;
diff --git a/packages/calcite-components/src/components/fab/fab.tsx b/packages/calcite-components/src/components/fab/fab.tsx
index 0b80f5f25c5..f52e63dcf51 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -14,7 +14,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Appearance, Kind, Scale } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { CSS, ICONS } from "./resources";
 
 @Component({
@@ -50,7 +49,7 @@ export class Fab implements InteractiveComponent, LoadableComponent {
    *
    * @default "plus"
    */
-  @Prop({ reflect: true }) icon: IconName = ICONS.plus;
+  @Prop({ reflect: true }) icon: string = ICONS.plus;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
diff --git a/packages/calcite-components/src/components/fab/resources.ts b/packages/calcite-components/src/components/fab/resources.ts
index e2ed2d1298b..0c4a877faa9 100644
--- a/packages/calcite-components/src/components/fab/resources.ts
+++ b/packages/calcite-components/src/components/fab/resources.ts
@@ -4,4 +4,4 @@ export const CSS = {
 
 export const ICONS = {
   plus: "plus",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts
index 0f94804aa07..c1c6dd4c104 100644
--- a/packages/calcite-components/src/components/flow-item/resources.ts
+++ b/packages/calcite-components/src/components/flow-item/resources.ts
@@ -5,7 +5,7 @@ export const CSS = {
 export const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right",
-} as const;
+};
 
 export const SLOTS = {
   actionBar: "action-bar",
diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
index b0608fbc241..303c9f5d9a2 100644
--- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx
+++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx
@@ -21,7 +21,7 @@ interface ExpandToggleProps {
 const ICONS = {
   chevronsLeft: "chevrons-left",
   chevronsRight: "chevrons-right",
-} as const;
+};
 
 function getCalcitePosition(position: Position, el: HTMLElement): Position {
   return position || el.closest("calcite-shell-panel")?.position || "start";
diff --git a/packages/calcite-components/src/components/functional/Validation.tsx b/packages/calcite-components/src/components/functional/Validation.tsx
index 4989a1529b4..a611ab7f8f7 100644
--- a/packages/calcite-components/src/components/functional/Validation.tsx
+++ b/packages/calcite-components/src/components/functional/Validation.tsx
@@ -1,12 +1,11 @@
 import { FunctionalComponent, h } from "@stencil/core";
 import { JSXBase } from "@stencil/core/internal";
 import { Scale, Status } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 
 interface ValidationProps extends JSXBase.HTMLAttributes {
   scale: Scale;
   status: Status;
-  icon?: IconName | boolean;
+  icon?: string | boolean;
   message: string;
 }
 
diff --git a/packages/calcite-components/src/components/handle/resources.ts b/packages/calcite-components/src/components/handle/resources.ts
index 6b262a6bac7..0d6e9d1aa59 100644
--- a/packages/calcite-components/src/components/handle/resources.ts
+++ b/packages/calcite-components/src/components/handle/resources.ts
@@ -5,7 +5,7 @@ export const CSS = {
 
 export const ICONS = {
   drag: "drag",
-} as const;
+};
 
 export const SUBSTITUTIONS = {
   itemLabel: "{itemLabel}",
diff --git a/packages/calcite-components/src/components/icon/icon.tsx b/packages/calcite-components/src/components/icon/icon.tsx
index 44f11c4ac70..beb02014d86 100644
--- a/packages/calcite-components/src/components/icon/icon.tsx
+++ b/packages/calcite-components/src/components/icon/icon.tsx
@@ -6,7 +6,6 @@ import { Scale } from "../interfaces";
 import { isBrowser } from "../../utils/browser";
 import { CSS } from "./resources";
 import { fetchIcon, getCachedIconData, scaleToPx } from "./utils";
-import { IconName } from "./interfaces";
 
 @Component({
   tag: "calcite-icon",
@@ -29,7 +28,7 @@ export class Icon {
   @Prop({
     reflect: true,
   })
-  icon: IconName = null;
+  icon: string = null;
 
   /**
    * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
diff --git a/packages/calcite-components/src/components/icon/interfaces.ts b/packages/calcite-components/src/components/icon/interfaces.ts
deleted file mode 100644
index 27071f99f02..00000000000
--- a/packages/calcite-components/src/components/icon/interfaces.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as icons from "@esri/calcite-ui-icons";
-import { KebabCase } from "type-fest";
-
-type ExtractBaseIcon<T> = T extends `${infer Base}${"16" | "24" | "32"}F`
-  ? `${Base}F`
-  : T extends `${infer Base}F`
-    ? `${Base}F`
-    : T extends `${infer Base}${"16" | "24" | "32"}`
-      ? Base
-      : never;
-
-type CamelCaseIcons = ExtractBaseIcon<keyof typeof icons>;
-type KebabCaseIcons = KebabCase<CamelCaseIcons>;
-
-export type IconName = KebabCaseIcons | CamelCaseIcons;
diff --git a/packages/calcite-components/src/components/icon/utils.ts b/packages/calcite-components/src/components/icon/utils.ts
index 0602f44e0f7..ac308690bbe 100644
--- a/packages/calcite-components/src/components/icon/utils.ts
+++ b/packages/calcite-components/src/components/icon/utils.ts
@@ -1,10 +1,9 @@
 import { CalciteIconPath } from "@esri/calcite-ui-icons";
 import { getAssetPath } from "@stencil/core";
 import { Scale } from "../interfaces";
-import { IconName } from "./interfaces";
 
 export interface FetchIconProps {
-  icon: IconName;
+  icon: string;
   scale: Scale;
 }
 
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 3d52178a33e..9dbcb057611 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -87,7 +87,6 @@ import { guid } from "../../utils/guid";
 import { getIconScale } from "../../utils/component";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { syncHiddenFormInput } from "../input/common/input";
 import { isBrowser } from "../../utils/browser";
 import { normalizeToCurrentCentury, isTwoDigitYear } from "./utils";
@@ -279,7 +278,7 @@ export class InputDatePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/input-message/input-message.tsx b/packages/calcite-components/src/components/input-message/input-message.tsx
index 8719748bc7f..0fb1ff6555f 100644
--- a/packages/calcite-components/src/components/input-message/input-message.tsx
+++ b/packages/calcite-components/src/components/input-message/input-message.tsx
@@ -1,7 +1,6 @@
 import { Component, Element, h, Host, Prop, VNode, Watch } from "@stencil/core";
 import { setRequestedIcon } from "../../utils/dom";
 import { Scale, Status } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { StatusIconDefaults } from "./interfaces";
 
 /**
@@ -20,7 +19,7 @@ export class InputMessage {
   //--------------------------------------------------------------------------
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: boolean | string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -66,7 +65,7 @@ export class InputMessage {
   @Element() el: HTMLCalciteInputMessageElement;
 
   /** the computed icon to render */
-  private requestedIcon?: IconName;
+  private requestedIcon?: string;
 
   //--------------------------------------------------------------------------
   //
@@ -74,7 +73,7 @@ export class InputMessage {
   //
   //--------------------------------------------------------------------------
 
-  private renderIcon(iconName: IconName): VNode {
+  private renderIcon(iconName: string): VNode {
     if (iconName) {
       return (
         <calcite-icon
diff --git a/packages/calcite-components/src/components/input-message/interfaces.ts b/packages/calcite-components/src/components/input-message/interfaces.ts
index cffe1f9acb1..f5ce05fd655 100644
--- a/packages/calcite-components/src/components/input-message/interfaces.ts
+++ b/packages/calcite-components/src/components/input-message/interfaces.ts
@@ -2,4 +2,4 @@ export const StatusIconDefaults = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
   idle: "information",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index b3a85cf96ba..fcb37343334 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -74,7 +74,6 @@ import {
   syncHiddenFormInput,
   TextualInputComponent,
 } from "../input/common/input";
-import { IconName } from "../icon/interfaces";
 import { CSS, SLOTS } from "./resources";
 import { InputNumberMessages } from "./assets/input-number/t9n";
 
@@ -171,7 +170,7 @@ export class InputNumber
    *
    * @futureBreaking Remove boolean type as it is not supported.
    */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: string | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -254,7 +253,7 @@ export class InputNumber
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
@@ -423,7 +422,7 @@ export class InputNumber
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: IconName;
+  private requestedIcon?: string;
 
   private nudgeNumberValueIntervalId: number;
 
diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx
index be167b16110..263d66f4075 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -51,7 +51,6 @@ import { Alignment, Scale, Status } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
 import { syncHiddenFormInput, TextualInputComponent } from "../input/common/input";
-import { IconName } from "../icon/interfaces";
 import { CSS, SLOTS } from "./resources";
 import { InputTextMessages } from "./assets/input-text/t9n";
 
@@ -143,7 +142,7 @@ export class InputText
    *
    * @futureBreaking Remove boolean type as it is not supported.
    */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: string | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -181,7 +180,7 @@ export class InputText
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
@@ -332,7 +331,7 @@ export class InputText
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: IconName;
+  private requestedIcon?: string;
 
   mutationObserver = createObserver("mutation", () => this.setDisabledAction());
 
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 53a9395df70..3371fb2ab99 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -80,7 +80,6 @@ import { decimalPlaces } from "../../utils/math";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
 import { focusFirstTabbable } from "../../utils/dom";
-import { IconName } from "../icon/interfaces";
 import { syncHiddenFormInput } from "../input/common/input";
 import { CSS } from "./resources";
 import { InputTimePickerMessages } from "./assets/input-time-picker/t9n";
@@ -270,7 +269,7 @@ export class InputTimePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index bc742585e5f..e3e54037ad3 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -46,7 +46,6 @@ import {
   HiddenFormInputSlot,
   MutableValidityState,
 } from "../../utils/form";
-import { IconName } from "../icon/interfaces";
 import {
   createTimeZoneItems,
   findTimeZoneItemByProp,
@@ -155,7 +154,7 @@ export class InputTimeZone
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 0224b9c60b1..0064313186f 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -68,7 +68,6 @@ import {
 } from "../../utils/t9n";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { InputMessages } from "./assets/input/t9n";
 import { InputPlacement, NumberNudgeDirection, SetValueOrigin } from "./interfaces";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
@@ -165,7 +164,7 @@ export class Input
   /**
    * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: string | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -242,7 +241,7 @@ export class Input
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
@@ -480,7 +479,7 @@ export class Input
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: IconName;
+  private requestedIcon?: string;
 
   private nudgeNumberValueIntervalId: number;
 
diff --git a/packages/calcite-components/src/components/input/resources.ts b/packages/calcite-components/src/components/input/resources.ts
index f278c4d0da7..72206aab7b2 100644
--- a/packages/calcite-components/src/components/input/resources.ts
+++ b/packages/calcite-components/src/components/input/resources.ts
@@ -22,7 +22,7 @@ export const INPUT_TYPE_ICONS = {
   date: "calendar",
   time: "clock",
   search: "search",
-} as const;
+};
 
 export const SLOTS = {
   action: "action",
diff --git a/packages/calcite-components/src/components/link/link.tsx b/packages/calcite-components/src/components/link/link.tsx
index f83c0c7ba8f..0a78c436a14 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -15,7 +15,6 @@ import {
 } from "../../utils/loadable";
 import { CSS_UTILITY } from "../../utils/resources";
 import { FlipContext } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
@@ -48,13 +47,13 @@ export class Link implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /** Specifies the relationship to the linked document defined in `href`. */
   @Prop() rel: string;
diff --git a/packages/calcite-components/src/components/list-item/resources.ts b/packages/calcite-components/src/components/list-item/resources.ts
index 64609366ca1..00688d07e17 100644
--- a/packages/calcite-components/src/components/list-item/resources.ts
+++ b/packages/calcite-components/src/components/list-item/resources.ts
@@ -49,6 +49,6 @@ export const ICONS = {
   open: "chevron-down",
   blank: "blank",
   close: "x",
-} as const;
+};
 
 export const activeCellTestAttribute = "data-test-active";
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.tsx b/packages/calcite-components/src/components/menu-item/menu-item.tsx
index f54fdb40829..73744b0f7dd 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -30,7 +30,6 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { LocalizedComponent, connectLocalized, disconnectLocalized } from "../../utils/locale";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 import { MenuItemCustomEvent } from "./interfaces";
 import { MenuItemMessages } from "./assets/menu-item/t9n";
@@ -63,13 +62,13 @@ export class CalciteMenuItem implements LoadableComponent, T9nComponent, Localiz
   @Prop() href: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /**
    * @internal
diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts
index d9fd23662e8..cd28b7235ef 100644
--- a/packages/calcite-components/src/components/modal/resources.ts
+++ b/packages/calcite-components/src/components/modal/resources.ts
@@ -33,7 +33,7 @@ export const DURATIONS = {
 
 export const ICONS = {
   close: "x",
-} as const;
+};
 
 export const SLOTS = {
   content: "content",
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
index b25155eb643..0a817879832 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -6,7 +6,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Heading, HeadingLevel } from "../functional/Heading";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 @Component({
@@ -30,7 +29,7 @@ export class CalciteNavigationLogo implements LoadableComponent {
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName;
+  @Prop({ reflect: true }) icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
diff --git a/packages/calcite-components/src/components/navigation/resources.ts b/packages/calcite-components/src/components/navigation/resources.ts
index 8ef4f5c9d10..cefa4e288a9 100644
--- a/packages/calcite-components/src/components/navigation/resources.ts
+++ b/packages/calcite-components/src/components/navigation/resources.ts
@@ -22,4 +22,4 @@ export const SLOTS = {
 
 export const ICONS = {
   hamburger: "hamburger",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/notice/notice.tsx b/packages/calcite-components/src/components/notice/notice.tsx
index 6e56aa3277e..dd16d5e07b8 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -34,7 +34,6 @@ import { Kind, Scale, Width } from "../interfaces";
 import { KindIcons } from "../resources";
 import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
 import { getIconScale } from "../../utils/component";
-import { IconName } from "../icon/interfaces";
 import { NoticeMessages } from "./assets/notice/t9n";
 import { CSS, SLOTS } from "./resources";
 
@@ -92,7 +91,7 @@ export class Notice
   /**
    * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
    */
-  @Prop({ reflect: true }) icon: IconName | boolean;
+  @Prop({ reflect: true }) icon: string | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -282,7 +281,7 @@ export class Notice
   private closeButton?: HTMLButtonElement;
 
   /** The computed icon to render. */
-  private requestedIcon?: IconName;
+  private requestedIcon?: string;
 
   @State() effectiveLocale: string;
 
diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts
index 50561c421fd..3ba74cdb169 100644
--- a/packages/calcite-components/src/components/pagination/resources.ts
+++ b/packages/calcite-components/src/components/pagination/resources.ts
@@ -13,4 +13,4 @@ export const ICONS = {
   previous: "chevron-left",
   first: "chevron-start",
   last: "chevron-end",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/panel/resources.ts b/packages/calcite-components/src/components/panel/resources.ts
index f7704b36582..80108a71f0d 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -30,7 +30,7 @@ export const ICONS = {
   backRight: "chevron-right",
   expand: "chevron-down",
   collapse: "chevron-up",
-} as const;
+};
 
 export const SLOTS = {
   actionBar: "action-bar",
diff --git a/packages/calcite-components/src/components/pick-list-item/resources.ts b/packages/calcite-components/src/components/pick-list-item/resources.ts
index 6ae6b6e491a..b7f207d35e7 100644
--- a/packages/calcite-components/src/components/pick-list-item/resources.ts
+++ b/packages/calcite-components/src/components/pick-list-item/resources.ts
@@ -17,7 +17,7 @@ export const CSS = {
 export const ICONS = {
   checked: "check",
   remove: "x",
-} as const;
+};
 
 export const SLOTS = {
   actionsEnd: "actions-end",
diff --git a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
index 047907fe944..1738ecaaee4 100644
--- a/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
+++ b/packages/calcite-components/src/components/radio-button-group/radio-button-group.tsx
@@ -21,7 +21,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -90,7 +89,7 @@ export class RadioButtonGroup implements LoadableComponent {
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   @Watch("scale")
   onScaleChange(): void {
diff --git a/packages/calcite-components/src/components/resources.ts b/packages/calcite-components/src/components/resources.ts
index 87d8d1dd310..b64461ecf90 100644
--- a/packages/calcite-components/src/components/resources.ts
+++ b/packages/calcite-components/src/components/resources.ts
@@ -4,4 +4,4 @@ export const KindIcons = {
   info: "information",
   success: "checkCircle",
   warning: "exclamationMarkTriangle",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
index 0dc3e22b8b2..1e8f3372b9a 100644
--- a/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
+++ b/packages/calcite-components/src/components/segmented-control-item/segmented-control-item.tsx
@@ -12,7 +12,6 @@ import {
 } from "@stencil/core";
 import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom";
 import { Appearance, Layout, Scale } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { CSS, SLOTS } from "./resources";
 
 @Component({
@@ -40,10 +39,10 @@ export class SegmentedControlItem {
   @Prop({ reflect: true }) iconFlipRtl = false;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /**
    * The component's value.
@@ -78,7 +77,7 @@ export class SegmentedControlItem {
   //
   //--------------------------------------------------------------------------
 
-  private renderIcon(icon: IconName, solo: boolean = false): VNode {
+  private renderIcon(icon: string, solo: boolean = false): VNode {
     return icon ? (
       <calcite-icon
         class={{
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index dd1638dbd4f..b322c684160 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -37,7 +37,6 @@ import {
 import { Appearance, Layout, Scale, Status, Width } from "../interfaces";
 import { createObserver } from "../../utils/observers";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
 import { CSS } from "./resources";
 
@@ -137,7 +136,7 @@ export class SegmentedControl
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index aa14e0c48ad..eab68fb83b5 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -38,7 +38,6 @@ import { createObserver } from "../../utils/observers";
 import { Scale, Status, Width } from "../interfaces";
 import { getIconScale } from "../../utils/component";
 import { Validation } from "../functional/Validation";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 type OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement;
@@ -93,7 +92,7 @@ export class Select
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index d2b4264dd54..9490e5e88c6 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -25,7 +25,6 @@ import {
 } from "../../utils/loadable";
 import { DropdownIconType } from "../button/interfaces";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -113,13 +112,13 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) placement: MenuPlacement = "bottom-end";
 
   /** Specifies an icon to display at the end of the primary button. */
-  @Prop({ reflect: true }) primaryIconEnd: IconName;
+  @Prop({ reflect: true }) primaryIconEnd: string;
 
   /**  Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) primaryIconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the primary button. */
-  @Prop({ reflect: true }) primaryIconStart: IconName;
+  @Prop({ reflect: true }) primaryIconStart: string;
 
   /** Accessible name for the primary button. */
   @Prop({ reflect: true }) primaryLabel: string;
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 76144a24d42..111a53af12f 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -46,7 +46,6 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
-import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 import { StepperItemMessages } from "./assets/stepper-item/t9n";
 
@@ -362,7 +361,7 @@ export class StepperItem
   };
 
   private renderIcon(): VNode {
-    let path: IconName = "circle";
+    let path = "circle";
 
     if (this.selected && (this.layout !== "horizontal-single" || (!this.error && !this.complete))) {
       path = "circleF";
diff --git a/packages/calcite-components/src/components/tab-nav/resources.ts b/packages/calcite-components/src/components/tab-nav/resources.ts
index 010d3306dfa..6e4d502bf4e 100644
--- a/packages/calcite-components/src/components/tab-nav/resources.ts
+++ b/packages/calcite-components/src/components/tab-nav/resources.ts
@@ -1,7 +1,7 @@
 export const ICON = {
   chevronRight: "chevron-right",
   chevronLeft: "chevron-left",
-} as const;
+};
 
 export const CSS = {
   container: "tab-nav",
diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts
index a2891547cb3..161b60d7105 100644
--- a/packages/calcite-components/src/components/tab-title/resources.ts
+++ b/packages/calcite-components/src/components/tab-title/resources.ts
@@ -16,4 +16,4 @@ export const CSS = {
 
 export const ICONS = {
   close: "x",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index d0bd9d0456f..b5e1ca86613 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -34,7 +34,6 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { getIconScale } from "../../utils/component";
-import { IconName } from "../icon/interfaces";
 import { isBrowser } from "../../utils/browser";
 import { TabTitleMessages } from "./assets/tab-title/t9n";
 import { CSS, ICONS } from "./resources";
@@ -83,13 +82,13 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: IconName;
+  @Prop({ reflect: true }) iconEnd: string;
 
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /**
    * @internal
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index fa5fed0580d..95b2f39fbdb 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -55,7 +55,6 @@ import { guid } from "../../utils/guid";
 import { Status } from "../interfaces";
 import { Validation } from "../functional/Validation";
 import { syncHiddenFormInput, TextualInputComponent } from "../input/common/input";
-import { IconName } from "../icon/interfaces";
 import { CharacterLengthObj } from "./interfaces";
 import { TextAreaMessages } from "./assets/text-area/t9n";
 import { CSS, SLOTS, RESIZE_TIMEOUT } from "./resources";
@@ -157,7 +156,7 @@ export class TextArea
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: IconName | boolean;
+  @Prop({ reflect: true }) validationIcon: string | boolean;
 
   /**
    * The current validation state of the component.
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index 3caa80856a5..14ec9c12425 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -26,7 +26,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Alignment, Width } from "../interfaces";
-import { IconName } from "../icon/interfaces";
 import { logger } from "../../utils/logger";
 import { TileSelectType } from "./interfaces";
 import { CSS } from "./resources";
@@ -71,7 +70,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) heading: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName;
+  @Prop({ reflect: true }) icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
diff --git a/packages/calcite-components/src/components/tile/resources.ts b/packages/calcite-components/src/components/tile/resources.ts
index 32fa506008a..cc4fbef7830 100644
--- a/packages/calcite-components/src/components/tile/resources.ts
+++ b/packages/calcite-components/src/components/tile/resources.ts
@@ -20,7 +20,7 @@ export const ICONS = {
   selectedSingle: "circle-f",
   unselectedMultiple: "square",
   unselectedSingle: "circle",
-} as const;
+};
 
 export const SLOTS = {
   contentBottom: "content-bottom",
diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx
index 231b3d9c83c..720c958afa6 100644
--- a/packages/calcite-components/src/components/tile/tile.tsx
+++ b/packages/calcite-components/src/components/tile/tile.tsx
@@ -25,7 +25,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { SelectableComponent } from "../../utils/selectableComponent";
-import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 
 /**
@@ -84,7 +83,7 @@ export class Tile implements InteractiveComponent, SelectableComponent {
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: IconName;
+  @Prop({ reflect: true }) icon: string;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
 
diff --git a/packages/calcite-components/src/components/tip-manager/resources.ts b/packages/calcite-components/src/components/tip-manager/resources.ts
index 9ac0ffb7bd2..79edfd40dde 100644
--- a/packages/calcite-components/src/components/tip-manager/resources.ts
+++ b/packages/calcite-components/src/components/tip-manager/resources.ts
@@ -16,7 +16,7 @@ export const ICONS = {
   chevronLeft: "chevron-left",
   chevronRight: "chevron-right",
   close: "x",
-} as const;
+};
 
 export const TEXT = {
   defaultGroupTitle: "Tips",
diff --git a/packages/calcite-components/src/components/tip/resources.ts b/packages/calcite-components/src/components/tip/resources.ts
index 5ea0631d833..b27f5999206 100644
--- a/packages/calcite-components/src/components/tip/resources.ts
+++ b/packages/calcite-components/src/components/tip/resources.ts
@@ -10,7 +10,7 @@ export const CSS = {
 
 export const ICONS = {
   close: "x",
-} as const;
+};
 
 export const SLOTS = {
   thumbnail: "thumbnail",
diff --git a/packages/calcite-components/src/components/tree-item/resources.ts b/packages/calcite-components/src/components/tree-item/resources.ts
index 31b0d0fb231..b7faf3783e0 100644
--- a/packages/calcite-components/src/components/tree-item/resources.ts
+++ b/packages/calcite-components/src/components/tree-item/resources.ts
@@ -22,4 +22,4 @@ export const ICONS = {
   checkmark: "check",
   chevronRight: "chevron-right",
   blank: "blank",
-} as const;
+};
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index 3864ebb964b..34757a3bcf6 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -33,7 +33,6 @@ import {
 import { CSS_UTILITY } from "../../utils/resources";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
 import { getIconScale } from "../../utils/component";
-import { IconName } from "../icon/interfaces";
 import { TreeItemSelectDetail } from "./interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -71,7 +70,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
   @Prop({ reflect: true }) iconFlipRtl: FlipContext;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: IconName;
+  @Prop({ reflect: true }) iconStart: string;
 
   /** When `true`, the component is selected. */
   @Prop({ mutable: true, reflect: true }) selected = false;
diff --git a/packages/calcite-components/src/components/value-list-item/resources.ts b/packages/calcite-components/src/components/value-list-item/resources.ts
index 97b6dd01047..cda5c28279d 100644
--- a/packages/calcite-components/src/components/value-list-item/resources.ts
+++ b/packages/calcite-components/src/components/value-list-item/resources.ts
@@ -1,6 +1,6 @@
 export const ICONS = {
   drag: "drag",
-} as const;
+};
 
 export const SLOTS = {
   actionsEnd: "actions-end",
diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts
index 487e95190c1..2cca961be93 100644
--- a/packages/calcite-components/src/utils/dom.spec.ts
+++ b/packages/calcite-components/src/utils/dom.spec.ts
@@ -293,13 +293,11 @@ describe("dom", () => {
 
   describe("setRequestedIcon()", () => {
     it("returns the custom icon name if custom value is passed", () =>
-      // @ts-expect-error -- unsupported icon names are used to make the test more readable
       expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "myCustomValue", "exampleValue")).toBe(
         "myCustomValue",
       ));
 
     it("returns the pre-defined icon name if custom value is not passed", () =>
-      // @ts-expect-error -- unsupported icon names are used to make the test more readable
       expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
         "exampleReturnedValue",
       ));
diff --git a/packages/calcite-components/src/utils/dom.ts b/packages/calcite-components/src/utils/dom.ts
index 4ed42e4cc6a..48be00ac40c 100644
--- a/packages/calcite-components/src/utils/dom.ts
+++ b/packages/calcite-components/src/utils/dom.ts
@@ -1,5 +1,4 @@
 import { tabbable } from "tabbable";
-import { IconName } from "../components/icon/interfaces";
 import { guid } from "./guid";
 import { CSS_UTILITY } from "./resources";
 
@@ -439,10 +438,10 @@ export function filterElementsBySelector<T extends Element>(elements: Element[],
  * @returns {string|undefined} The resulting icon value.
  */
 export function setRequestedIcon(
-  iconObject: Record<string, IconName>,
-  iconValue: IconName | boolean | "",
+  iconObject: Record<string, string>,
+  iconValue: string | boolean,
   matchedValue: string,
-): IconName | undefined {
+): string | undefined {
   if (typeof iconValue === "string" && iconValue !== "") {
     return iconValue;
   } else if (iconValue === "") {
diff --git a/packages/calcite-components/src/utils/form.tsx b/packages/calcite-components/src/utils/form.tsx
index 8a39e706a91..2d2f87e3b4a 100644
--- a/packages/calcite-components/src/utils/form.tsx
+++ b/packages/calcite-components/src/utils/form.tsx
@@ -1,6 +1,6 @@
 import { FunctionalComponent, h } from "@stencil/core";
 import { Writable } from "type-fest";
-import { IconName, Status } from "../components";
+import { Status } from "../components";
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 
 /**
@@ -211,7 +211,7 @@ function hasRegisteredFormComponentParent(
 export interface ValidationProps {
   status: Status;
   message: string;
-  icon: IconName | boolean | "";
+  icon: string | boolean;
 }
 
 function displayValidationMessage(