diff --git a/package-lock.json b/package-lock.json
index b365c5c4c0e..e94322ede2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3910,7 +3910,6 @@
       "version": "3.28.2",
       "resolved": "https://registry.npmjs.org/@esri/calcite-ui-icons/-/calcite-ui-icons-3.28.2.tgz",
       "integrity": "sha512-XllnLkjjjbnjaYPn1XlsU5ufs8L5Ye/Yo+X/m1+/RaHW/sRYC2h4jXnPRYU3Nhh1yU5ZR8pfgC/BepmZas0FyA==",
-      "dev": true,
       "bin": {
         "spriter": "bin/spriter.js"
       }
@@ -36916,6 +36915,7 @@
       "version": "2.10.2-next.1",
       "license": "SEE LICENSE.md",
       "dependencies": {
+        "@esri/calcite-ui-icons": "3.28.2",
         "@floating-ui/dom": "1.6.5",
         "@stencil/core": "4.18.3",
         "@types/color": "3.0.6",
@@ -36930,7 +36930,6 @@
       },
       "devDependencies": {
         "@esri/calcite-design-tokens": "^2.2.1-next.1",
-        "@esri/calcite-ui-icons": "3.28.2",
         "@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 75c1fcfcd12..b5ceb4e7075 100644
--- a/packages/calcite-components/.eslintrc.cjs
+++ b/packages/calcite-components/.eslintrc.cjs
@@ -70,6 +70,7 @@ 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",
@@ -84,7 +85,7 @@ module.exports = {
     "jsdoc/require-property-type": "off",
     "jsdoc/require-returns-type": "off",
     "jsdoc/tag-lines": ["error", "any", { startLines: 1 }],
-    "lines-between-class-members": ["error", "always"],
+    "lines-between-class-members": "off",
     "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 4293d2c5352..2cbe84f28ab 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -63,6 +63,7 @@
     "directory": "packages/calcite-components"
   },
   "dependencies": {
+    "@esri/calcite-ui-icons": "3.28.2",
     "@floating-ui/dom": "1.6.5",
     "@stencil/core": "4.18.3",
     "@types/color": "3.0.6",
@@ -77,7 +78,6 @@
   },
   "devDependencies": {
     "@esri/calcite-design-tokens": "^2.2.1-next.1",
-    "@esri/calcite-ui-icons": "3.28.2",
     "@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 c5ada57ac20..0546404fefd 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -7,87 +7,187 @@
 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 { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, Sync } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 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 { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, Sync } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
@@ -135,7 +235,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -147,7 +247,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
@@ -185,7 +285,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -412,7 +512,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": string | boolean;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -515,7 +615,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -523,7 +623,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -558,7 +658,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -566,7 +666,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -628,7 +728,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -636,7 +736,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Specifies the kind of the component, which will apply to the border and background if applicable.
          */
@@ -912,7 +1012,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1190,7 +1290,7 @@ export namespace Components {
         /**
           * Specifies the placeholder icon for the input.
          */
-        "placeholderIcon": string;
+        "placeholderIcon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1240,7 +1340,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -1284,7 +1384,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1623,7 +1723,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1631,7 +1731,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Accessible name for the component.
          */
@@ -1674,7 +1774,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @default "plus"
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -1918,7 +2018,7 @@ export namespace Components {
           * Displays a specific icon.
           * @see [Icons](https://esri.github.io/calcite-ui-icons)
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * Specifies the size of the component.
          */
@@ -2017,7 +2117,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": string | boolean;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2155,7 +2255,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2278,7 +2378,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2302,7 +2402,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": boolean | string;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2358,7 +2458,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon": string | boolean;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2473,7 +2573,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2527,7 +2627,7 @@ export namespace Components {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon": string | boolean;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2614,7 +2714,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2714,7 +2814,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2802,7 +2902,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -2853,7 +2953,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -2861,7 +2961,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Specifies the relationship to the linked document defined in `href`.
          */
@@ -3142,7 +3242,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -3150,7 +3250,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         "isTopLevelItem": boolean;
         /**
           * Accessible name for the component.
@@ -3381,7 +3481,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -3451,7 +3551,7 @@ export namespace Components {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon": string | boolean;
+        "icon": IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -3971,7 +4071,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4090,7 +4190,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4122,7 +4222,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4130,7 +4230,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
@@ -4185,7 +4285,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -4533,7 +4633,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the primary button.
          */
-        "primaryIconEnd": string;
+        "primaryIconEnd": IconName;
         /**
           * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4541,7 +4641,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the primary button.
          */
-        "primaryIconStart": string;
+        "primaryIconStart": IconName;
         /**
           * Accessible name for the primary button.
          */
@@ -4803,7 +4903,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd": string;
+        "iconEnd": IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -4811,7 +4911,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         "layout": TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -5139,7 +5239,7 @@ export namespace Components {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon": string | boolean;
+        "validationIcon": IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -5194,7 +5294,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -5296,7 +5396,7 @@ export namespace Components {
         /**
           * Specifies an icon to display.
          */
-        "icon": string;
+        "icon": IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -5524,7 +5624,7 @@ export namespace Components {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart": string;
+        "iconStart": IconName;
         /**
           * In ancestor selection mode, show as indeterminate when only some children are selected.
          */
@@ -7897,7 +7997,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -7909,7 +8009,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
          */
@@ -7945,7 +8045,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8160,7 +8260,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: string | boolean;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8283,7 +8383,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8291,7 +8391,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * When `true`, a busy indicator is displayed.
          */
@@ -8343,7 +8443,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8351,7 +8451,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -8413,7 +8513,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -8421,7 +8521,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Specifies the kind of the component, which will apply to the border and background if applicable.
          */
@@ -8710,7 +8810,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9027,7 +9127,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the placeholder icon for the input.
          */
-        "placeholderIcon"?: string;
+        "placeholderIcon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9067,7 +9167,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -9111,7 +9211,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9487,7 +9587,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9495,7 +9595,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Accessible name for the component.
          */
@@ -9541,7 +9641,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @default "plus"
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -9779,7 +9879,7 @@ declare namespace LocalJSX {
           * Displays a specific icon.
           * @see [Icons](https://esri.github.io/calcite-ui-icons)
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * Specifies the size of the component.
          */
@@ -9883,7 +9983,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: string | boolean;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10023,7 +10123,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10157,7 +10257,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10181,7 +10281,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: boolean | string;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10237,7 +10337,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon"?: string | boolean;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10354,7 +10454,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10408,7 +10508,7 @@ declare namespace LocalJSX {
           * Specifies an icon to display.
           * @futureBreaking Remove boolean type as it is not supported.
          */
-        "icon"?: string | boolean;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10500,7 +10600,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10611,7 +10711,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10718,7 +10818,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -10772,7 +10872,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -10780,7 +10880,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Specifies the relationship to the linked document defined in `href`.
          */
@@ -11096,7 +11196,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11104,7 +11204,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         "isTopLevelItem"?: boolean;
         /**
           * Accessible name for the component.
@@ -11338,7 +11438,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11400,7 +11500,7 @@ declare namespace LocalJSX {
         /**
           * When `true`, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon.
          */
-        "icon"?: string | boolean;
+        "icon"?: IconName | boolean;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -11950,7 +12050,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12069,7 +12169,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12101,7 +12201,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12109,7 +12209,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
          */
@@ -12168,7 +12268,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -12542,7 +12642,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the primary button.
          */
-        "primaryIconEnd"?: string;
+        "primaryIconEnd"?: IconName;
         /**
           * Displays the `primaryIconStart` and/or `primaryIconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12550,7 +12650,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the primary button.
          */
-        "primaryIconStart"?: string;
+        "primaryIconStart"?: IconName;
         /**
           * Accessible name for the primary button.
          */
@@ -12790,7 +12890,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the end of the component.
          */
-        "iconEnd"?: string;
+        "iconEnd"?: IconName;
         /**
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -12798,7 +12898,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         "layout"?: TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -13151,7 +13251,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the validation icon to display under the component.
          */
-        "validationIcon"?: string | boolean;
+        "validationIcon"?: IconName | boolean;
         /**
           * Specifies the validation message to display under the component.
          */
@@ -13206,7 +13306,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -13313,7 +13413,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display.
          */
-        "icon"?: string;
+        "icon"?: IconName;
         /**
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
@@ -13555,7 +13655,7 @@ declare namespace LocalJSX {
         /**
           * Specifies an icon to display at the start of the component.
          */
-        "iconStart"?: string;
+        "iconStart"?: IconName;
         /**
           * 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 973e9374f3a..c8e99f9512b 100644
--- a/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
+++ b/packages/calcite-components/src/components/accordion-item/accordion-item.tsx
@@ -30,6 +30,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { IconName } from "../icon/interfaces";
 import { SLOTS, CSS, IDS } from "./resources";
 import { RequestedItem } from "./interfaces";
 
@@ -60,10 +61,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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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 c43144a4821..7d8be4ba27e 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 d10c0e03549..38223214d32 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 64e3169ffcd..59acf41142a 100644
--- a/packages/calcite-components/src/components/action/action.tsx
+++ b/packages/calcite-components/src/components/action/action.tsx
@@ -37,6 +37,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Alignment, Appearance, Scale } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { ActionMessages } from "./assets/action/t9n";
 import { CSS, SLOTS } from "./resources";
 
@@ -83,7 +84,7 @@ export class Action
   @Prop({ reflect: true }) disabled = false;
 
   /** Specifies an icon to display. */
-  @Prop() icon: string;
+  @Prop() icon: IconName;
 
   /** 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 366fd9b6a81..d70a9677195 100644
--- a/packages/calcite-components/src/components/alert/alert.tsx
+++ b/packages/calcite-components/src/components/alert/alert.tsx
@@ -42,6 +42,7 @@ 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";
@@ -102,7 +103,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: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -308,7 +309,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen
     );
   }
 
-  private renderIcon(icon: string): VNode {
+  private renderIcon(icon: IconName): 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 01de828ae29..28a56cb7c8a 100644
--- a/packages/calcite-components/src/components/block-section/block-section.tsx
+++ b/packages/calcite-components/src/components/block-section/block-section.tsx
@@ -28,6 +28,7 @@ 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";
@@ -49,13 +50,13 @@ export class BlockSection implements LocalizedComponent, T9nComponent, LoadableC
   // --------------------------------------------------------------------------
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * 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 9efb94b3684..08eee3e4a6c 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 7c5bd1abe53..c06303aaa8e 100644
--- a/packages/calcite-components/src/components/block/block.tsx
+++ b/packages/calcite-components/src/components/block/block.tsx
@@ -48,6 +48,7 @@ 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";
 
@@ -106,13 +107,13 @@ export class Block
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * 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 758e209afd5..aced6eb14ae 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 5eb13e520d0..7c433f30177 100644
--- a/packages/calcite-components/src/components/button/button.tsx
+++ b/packages/calcite-components/src/components/button/button.tsx
@@ -37,6 +37,7 @@ import {
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { toAriaBoolean } from "../../utils/dom";
+import { IconName } from "../icon/interfaces";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -117,13 +118,13 @@ export class Button
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * 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 265ec7b7b86..f19ba3a9348 100644
--- a/packages/calcite-components/src/components/card/card.tsx
+++ b/packages/calcite-components/src/components/card/card.tsx
@@ -35,6 +35,7 @@ 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";
 
@@ -276,7 +277,7 @@ export class Card
   }
 
   private renderSelectionIcon(): VNode {
-    const icon =
+    const icon: IconName =
       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 9f36ac2a531..ca463b37216 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 7f139137438..088997a1a50 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 fdd0326f811..f85448c4618 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -38,6 +38,7 @@ import {
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { isActivationKey } from "../../utils/key";
 import { getIconScale } from "../../utils/component";
+import { IconName } from "../icon/interfaces";
 import { ChipMessages } from "./assets/chip/t9n";
 import { CSS, SLOTS, ICONS } from "./resources";
 
@@ -73,7 +74,7 @@ export class Chip
   @Prop({ reflect: true }) closable = false;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** 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/chip/resources.ts b/packages/calcite-components/src/components/chip/resources.ts
index 7f9bacb67fd..88e23590fcc 100644
--- a/packages/calcite-components/src/components/chip/resources.ts
+++ b/packages/calcite-components/src/components/chip/resources.ts
@@ -24,4 +24,4 @@ export const ICONS = {
   unchecked: "circle",
   checkedSingle: "circle-f",
   checked: "check-circle-f",
-};
+} as const;
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 32a23eb9cf8..f65d4d4fb19 100644
--- a/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
+++ b/packages/calcite-components/src/components/combobox-item/combobox-item.tsx
@@ -27,6 +27,7 @@ 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 } from "./resources";
 
 /**
@@ -62,7 +63,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   @Prop({ reflect: true }) guid = guid();
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -182,7 +183,7 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
   //
   // --------------------------------------------------------------------------
 
-  renderIcon(iconPath: string): VNode {
+  renderIcon(iconPath: IconName): VNode {
     return this.icon ? (
       <calcite-icon
         class={{
@@ -198,7 +199,9 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     ) : null;
   }
 
-  renderSelectIndicator(showDot: boolean, iconPath: string): VNode {
+  renderSelectIndicator(showDot: boolean): VNode;
+  renderSelectIndicator(showDot: boolean, iconPath: IconName): VNode;
+  renderSelectIndicator(showDot: boolean, iconPath?: IconName): VNode {
     return showDot ? (
       <span
         class={{
@@ -238,8 +241,8 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     const { disabled } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !disabled;
-    const defaultIcon = isSingleSelect ? "dot" : "check";
-    const iconPath = disabled ? "" : defaultIcon;
+    const defaultIcon = isSingleSelect ? undefined : "check";
+    const iconPath = disabled ? undefined : 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 c1d4cbe8a2b..a8768d9fa4d 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -67,6 +67,7 @@ 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";
@@ -177,7 +178,7 @@ export class Combobox
   @Prop() placeholder: string;
 
   /** Specifies the placeholder icon for the input. */
-  @Prop({ reflect: true }) placeholderIcon: string;
+  @Prop({ reflect: true }) placeholderIcon: IconName;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) placeholderIconFlipRtl = false;
@@ -194,7 +195,7 @@ export class Combobox
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 c2229b037f2..59cc3177eb9 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 c80fe3f9d5d..ad2b0d0ce29 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -26,6 +26,7 @@ import {
   InteractiveContainer,
   updateHostInteraction,
 } from "../../utils/interactive";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -59,10 +60,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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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 f52e63dcf51..0b80f5f25c5 100755
--- a/packages/calcite-components/src/components/fab/fab.tsx
+++ b/packages/calcite-components/src/components/fab/fab.tsx
@@ -14,6 +14,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Appearance, Kind, Scale } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { CSS, ICONS } from "./resources";
 
 @Component({
@@ -49,7 +50,7 @@ export class Fab implements InteractiveComponent, LoadableComponent {
    *
    * @default "plus"
    */
-  @Prop({ reflect: true }) icon: string = ICONS.plus;
+  @Prop({ reflect: true }) icon: IconName = 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 0c4a877faa9..e2ed2d1298b 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/filter/resources.ts b/packages/calcite-components/src/components/filter/resources.ts
index dcf929a0aa4..0adab7cd3b8 100644
--- a/packages/calcite-components/src/components/filter/resources.ts
+++ b/packages/calcite-components/src/components/filter/resources.ts
@@ -6,6 +6,6 @@ export const CSS = {
 export const ICONS = {
   search: "search",
   close: "x",
-};
+} as const;
 
 export const DEBOUNCE_TIMEOUT = 250;
diff --git a/packages/calcite-components/src/components/flow-item/resources.ts b/packages/calcite-components/src/components/flow-item/resources.ts
index 3a560252586..8efec758a71 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 303c9f5d9a2..b0608fbc241 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 a611ab7f8f7..4989a1529b4 100644
--- a/packages/calcite-components/src/components/functional/Validation.tsx
+++ b/packages/calcite-components/src/components/functional/Validation.tsx
@@ -1,11 +1,12 @@
 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?: string | boolean;
+  icon?: IconName | boolean;
   message: string;
 }
 
diff --git a/packages/calcite-components/src/components/handle/resources.ts b/packages/calcite-components/src/components/handle/resources.ts
index 0d6e9d1aa59..6b262a6bac7 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 64e65be993b..aa2404dece0 100644
--- a/packages/calcite-components/src/components/icon/icon.tsx
+++ b/packages/calcite-components/src/components/icon/icon.tsx
@@ -5,6 +5,7 @@ import { createObserver } from "../../utils/observers";
 import { Scale } from "../interfaces";
 import { CSS } from "./resources";
 import { fetchIcon, getCachedIconData, scaleToPx } from "./utils";
+import { IconName } from "./interfaces";
 
 @Component({
   tag: "calcite-icon",
@@ -27,7 +28,7 @@ export class Icon {
   @Prop({
     reflect: true,
   })
-  icon: string = null;
+  icon: IconName = 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
new file mode 100644
index 00000000000..27071f99f02
--- /dev/null
+++ b/packages/calcite-components/src/components/icon/interfaces.ts
@@ -0,0 +1,15 @@
+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 ac308690bbe..0602f44e0f7 100644
--- a/packages/calcite-components/src/components/icon/utils.ts
+++ b/packages/calcite-components/src/components/icon/utils.ts
@@ -1,9 +1,10 @@
 import { CalciteIconPath } from "@esri/calcite-ui-icons";
 import { getAssetPath } from "@stencil/core";
 import { Scale } from "../interfaces";
+import { IconName } from "./interfaces";
 
 export interface FetchIconProps {
-  icon: string;
+  icon: IconName;
   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 65541a7d149..f45fc2e3c82 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
@@ -88,6 +88,7 @@ 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 { normalizeToCurrentCentury, isTwoDigitYear } from "./utils";
 import { InputDatePickerMessages } from "./assets/input-date-picker/t9n";
@@ -278,7 +279,7 @@ export class InputDatePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 0fb1ff6555f..8719748bc7f 100644
--- a/packages/calcite-components/src/components/input-message/input-message.tsx
+++ b/packages/calcite-components/src/components/input-message/input-message.tsx
@@ -1,6 +1,7 @@
 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";
 
 /**
@@ -19,7 +20,7 @@ export class InputMessage {
   //--------------------------------------------------------------------------
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: boolean | string;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -65,7 +66,7 @@ export class InputMessage {
   @Element() el: HTMLCalciteInputMessageElement;
 
   /** the computed icon to render */
-  private requestedIcon?: string;
+  private requestedIcon?: IconName;
 
   //--------------------------------------------------------------------------
   //
@@ -73,7 +74,7 @@ export class InputMessage {
   //
   //--------------------------------------------------------------------------
 
-  private renderIcon(iconName: string): VNode {
+  private renderIcon(iconName: IconName): 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 f5ce05fd655..cffe1f9acb1 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 fcc024deb4d..37a953b7cf7 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -74,6 +74,7 @@ import {
   syncHiddenFormInput,
   TextualInputComponent,
 } from "../input/common/input";
+import { IconName } from "../icon/interfaces";
 import { CSS, SLOTS } from "./resources";
 import { InputNumberMessages } from "./assets/input-number/t9n";
 
@@ -170,7 +171,7 @@ export class InputNumber
    *
    * @futureBreaking Remove boolean type as it is not supported.
    */
-  @Prop({ reflect: true }) icon: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -253,7 +254,7 @@ export class InputNumber
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | boolean;
 
   /**
    * The current validation state of the component.
@@ -422,7 +423,7 @@ export class InputNumber
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: string;
+  private requestedIcon?: IconName;
 
   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 263d66f4075..be167b16110 100644
--- a/packages/calcite-components/src/components/input-text/input-text.tsx
+++ b/packages/calcite-components/src/components/input-text/input-text.tsx
@@ -51,6 +51,7 @@ 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";
 
@@ -142,7 +143,7 @@ export class InputText
    *
    * @futureBreaking Remove boolean type as it is not supported.
    */
-  @Prop({ reflect: true }) icon: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -180,7 +181,7 @@ export class InputText
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | boolean;
 
   /**
    * The current validation state of the component.
@@ -331,7 +332,7 @@ export class InputText
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: string;
+  private requestedIcon?: IconName;
 
   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 9e4ef66a35b..023442b8fdc 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,6 +80,7 @@ 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";
@@ -269,7 +270,7 @@ export class InputTimePicker
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 e3e54037ad3..bc742585e5f 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,6 +46,7 @@ import {
   HiddenFormInputSlot,
   MutableValidityState,
 } from "../../utils/form";
+import { IconName } from "../icon/interfaces";
 import {
   createTimeZoneItems,
   findTimeZoneItemByProp,
@@ -154,7 +155,7 @@ export class InputTimeZone
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 0064313186f..0224b9c60b1 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -68,6 +68,7 @@ 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";
@@ -164,7 +165,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: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -241,7 +242,7 @@ export class Input
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | boolean;
 
   /**
    * The current validation state of the component.
@@ -479,7 +480,7 @@ export class Input
   private previousValueOrigin: SetValueOrigin = "initial";
 
   /** the computed icon to render */
-  private requestedIcon?: string;
+  private requestedIcon?: IconName;
 
   private nudgeNumberValueIntervalId: number;
 
diff --git a/packages/calcite-components/src/components/input/resources.ts b/packages/calcite-components/src/components/input/resources.ts
index 72206aab7b2..f278c4d0da7 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 0a78c436a14..f83c0c7ba8f 100644
--- a/packages/calcite-components/src/components/link/link.tsx
+++ b/packages/calcite-components/src/components/link/link.tsx
@@ -15,6 +15,7 @@ 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. */
@@ -47,13 +48,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: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** 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 00688d07e17..64609366ca1 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 73744b0f7dd..f54fdb40829 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.tsx
+++ b/packages/calcite-components/src/components/menu-item/menu-item.tsx
@@ -30,6 +30,7 @@ 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";
@@ -62,13 +63,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: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * @internal
diff --git a/packages/calcite-components/src/components/modal/resources.ts b/packages/calcite-components/src/components/modal/resources.ts
index 0bac8afae13..aa5f9954dfe 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 0a817879832..b25155eb643 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -6,6 +6,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Heading, HeadingLevel } from "../functional/Heading";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 @Component({
@@ -29,7 +30,7 @@ export class CalciteNavigationLogo implements LoadableComponent {
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** 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 cefa4e288a9..8ef4f5c9d10 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 dd16d5e07b8..6e56aa3277e 100644
--- a/packages/calcite-components/src/components/notice/notice.tsx
+++ b/packages/calcite-components/src/components/notice/notice.tsx
@@ -34,6 +34,7 @@ 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";
 
@@ -91,7 +92,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: string | boolean;
+  @Prop({ reflect: true }) icon: IconName | boolean;
 
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
@@ -281,7 +282,7 @@ export class Notice
   private closeButton?: HTMLButtonElement;
 
   /** The computed icon to render. */
-  private requestedIcon?: string;
+  private requestedIcon?: IconName;
 
   @State() effectiveLocale: string;
 
diff --git a/packages/calcite-components/src/components/pagination/resources.ts b/packages/calcite-components/src/components/pagination/resources.ts
index 3ba74cdb169..50561c421fd 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 fed52d703ef..b76560c9571 100644
--- a/packages/calcite-components/src/components/panel/resources.ts
+++ b/packages/calcite-components/src/components/panel/resources.ts
@@ -26,7 +26,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 b7f207d35e7..6ae6b6e491a 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 1738ecaaee4..047907fe944 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,6 +21,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Validation } from "../functional/Validation";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 
 /**
@@ -89,7 +90,7 @@ export class RadioButtonGroup implements LoadableComponent {
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | boolean;
 
   @Watch("scale")
   onScaleChange(): void {
diff --git a/packages/calcite-components/src/components/resources.ts b/packages/calcite-components/src/components/resources.ts
index b64461ecf90..87d8d1dd310 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 1e8f3372b9a..0dc3e22b8b2 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,6 +12,7 @@ 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({
@@ -39,10 +40,10 @@ export class SegmentedControlItem {
   @Prop({ reflect: true }) iconFlipRtl = false;
 
   /** Specifies an icon to display at the start of the component. */
-  @Prop({ reflect: true }) iconStart: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** Specifies an icon to display at the end of the component. */
-  @Prop({ reflect: true }) iconEnd: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /**
    * The component's value.
@@ -77,7 +78,7 @@ export class SegmentedControlItem {
   //
   //--------------------------------------------------------------------------
 
-  private renderIcon(icon: string, solo: boolean = false): VNode {
+  private renderIcon(icon: IconName, 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 857c9259c4a..2444536da0f 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -38,6 +38,7 @@ 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 { CSS } from "./resources";
 
 /**
@@ -136,7 +137,7 @@ export class SegmentedControl
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 eab68fb83b5..aa14e0c48ad 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -38,6 +38,7 @@ 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;
@@ -92,7 +93,7 @@ export class Select
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 9490e5e88c6..d2b4264dd54 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -25,6 +25,7 @@ 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";
 
 /**
@@ -112,13 +113,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: string;
+  @Prop({ reflect: true }) primaryIconEnd: IconName;
 
   /**  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: string;
+  @Prop({ reflect: true }) primaryIconStart: IconName;
 
   /** 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 111a53af12f..76144a24d42 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -46,6 +46,7 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
+import { IconName } from "../icon/interfaces";
 import { CSS } from "./resources";
 import { StepperItemMessages } from "./assets/stepper-item/t9n";
 
@@ -361,7 +362,7 @@ export class StepperItem
   };
 
   private renderIcon(): VNode {
-    let path = "circle";
+    let path: IconName = "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 ae679c3acbc..451228247f6 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 = {
   activeIndicatorContainer: "tab-nav-active-indicator-container",
diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts
index d03df24cee7..f0d85f55681 100644
--- a/packages/calcite-components/src/components/tab-title/resources.ts
+++ b/packages/calcite-components/src/components/tab-title/resources.ts
@@ -11,4 +11,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 3403b146ab1..7ff878514d5 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -35,6 +35,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { getIconScale } from "../../utils/component";
+import { IconName } from "../icon/interfaces";
 import { TabTitleMessages } from "./assets/tab-title/t9n";
 import { CSS, ICONS } from "./resources";
 
@@ -82,13 +83,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: string;
+  @Prop({ reflect: true }) iconEnd: IconName;
 
   /** 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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /**
    * @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 95b2f39fbdb..fa5fed0580d 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -55,6 +55,7 @@ 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";
@@ -156,7 +157,7 @@ export class TextArea
   @Prop() validationMessage: string;
 
   /** Specifies the validation icon to display under the component. */
-  @Prop({ reflect: true }) validationIcon: string | boolean;
+  @Prop({ reflect: true }) validationIcon: IconName | 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 b64aa7278bb..f4501318f28 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -26,6 +26,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { Alignment, Width } from "../interfaces";
+import { IconName } from "../icon/interfaces";
 import { TileSelectType } from "./interfaces";
 import { CSS } from "./resources";
 
@@ -63,7 +64,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
   @Prop({ reflect: true }) heading: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** 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 cc4fbef7830..32fa506008a 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 720c958afa6..231b3d9c83c 100644
--- a/packages/calcite-components/src/components/tile/tile.tsx
+++ b/packages/calcite-components/src/components/tile/tile.tsx
@@ -25,6 +25,7 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { SelectableComponent } from "../../utils/selectableComponent";
+import { IconName } from "../icon/interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
 
 /**
@@ -83,7 +84,7 @@ export class Tile implements InteractiveComponent, SelectableComponent {
   @Prop({ reflect: true }) href: string;
 
   /** Specifies an icon to display. */
-  @Prop({ reflect: true }) icon: string;
+  @Prop({ reflect: true }) icon: IconName;
 
   /** 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 79edfd40dde..9ac0ffb7bd2 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 b27f5999206..5ea0631d833 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 b7faf3783e0..31b0d0fb231 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 c5284322ef8..27f6228877d 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -33,6 +33,7 @@ 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";
 
@@ -70,7 +71,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: string;
+  @Prop({ reflect: true }) iconStart: IconName;
 
   /** 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 cda5c28279d..97b6dd01047 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 41d71a79775..d207fa2f6e7 100644
--- a/packages/calcite-components/src/utils/dom.spec.ts
+++ b/packages/calcite-components/src/utils/dom.spec.ts
@@ -292,11 +292,13 @@ 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 72e3e4212bd..e622ab4194c 100644
--- a/packages/calcite-components/src/utils/dom.ts
+++ b/packages/calcite-components/src/utils/dom.ts
@@ -1,4 +1,5 @@
 import { tabbable } from "tabbable";
+import { IconName } from "../components/icon/interfaces";
 import { guid } from "./guid";
 import { CSS_UTILITY } from "./resources";
 
@@ -427,10 +428,10 @@ export function filterDirectChildren<T extends Element>(el: Element, selector: s
  * @returns {string|undefined} The resulting icon value.
  */
 export function setRequestedIcon(
-  iconObject: Record<string, string>,
-  iconValue: string | boolean,
+  iconObject: Record<string, IconName>,
+  iconValue: IconName | boolean | "",
   matchedValue: string,
-): string | undefined {
+): IconName | 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 2d2f87e3b4a..8a39e706a91 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 { Status } from "../components";
+import { IconName, Status } from "../components";
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 
 /**
@@ -211,7 +211,7 @@ function hasRegisteredFormComponentParent(
 export interface ValidationProps {
   status: Status;
   message: string;
-  icon: string | boolean;
+  icon: IconName | boolean | "";
 }
 
 function displayValidationMessage(