From 17951f367e7b4fa2a99b601e64c8452f1ef6141f Mon Sep 17 00:00:00 2001
From: Cassandra <cassandra.tam@cultureamp.com>
Date: Wed, 16 Oct 2024 12:21:20 +1100
Subject: [PATCH] feat: add future Icon (release branch) (#5153)

* feat(Icon): add future Icon (#4973)

* feat: add illustrations entrypoint

* chore(storybook): link to Material Symbols CDN

* feat(future/Icon): add prop to mirror in RTL

* docs(future/Icon): add api specification

* docs(future/Icon): update usage guidelines

* feat(future/Icon): add props for accessibility

* feat(future/Icon): add string suggestions for name

* feat(future/Icon): handle RTL icons that are not a direct mirror

* docs(future/Icon): add list of default icon set

* docs(DosAndDonts): update styles so items are the same height

* chore: update root test command to not watch

* docs(DosAndDonts): update styles for single col to span full width

* feat(Notification): update icons to use future Icon

* chore(tsconfig): resolve json in storybook

* chore(DosAndDonts): update to use new icon

* chore(ResourceLinks): update to use new icon

* fix(future/Tag): fix cautionary icon colour

* refactor: update Icon usage in some components

* chore: fix lint:fix script

* fix(Popover): fix icon color

* feat(codemod): add codemod to upgrade Icon to Future Icon (#5080)

* refactor: rename getTagName to getKaioTagName and abstract traversing

* feat(codemod): add util getKaioTagNamesByRegex

* refactor(transformSource): make tag name generic

* feat(updateJsxElementWithNewProps): add arg to update tag name

* feat(codemod): add codemod for upgrading icons

* feat(upgradeIconV1): transform CaMonogramIcon to Brand

* feat(updateKaioImport): add util to update imports

* feat(upgradeIconV1): transform SpinnerIcon to LoadingSpinner
---
 .changeset/little-lizards-sniff.md            |    5 +
 .changeset/quick-timers-juggle.md             |    2 +
 .changeset/real-pumpkins-drive.md             |    5 +
 .github/workflows/test-unit.yml               |    6 +-
 docs/.storybook/preview-head.html             |    6 +
 .../DosAndDonts/DosAndDonts.module.css        |   14 +
 docs/components/DosAndDonts/DosAndDonts.tsx   |   42 +-
 .../ResourceLinks/ResourceLinks.tsx           |    9 +-
 docs/tsconfig.json                            |    1 +
 package.json                                  |    5 +-
 packages/components/codemods/README.md        |    5 +
 .../getNewIconPropsFromOldIconName.ts         |  255 ++
 .../codemods/upgradeIconV1/index.ts           |   33 +
 .../transformCaMonogramIconToBrand.spec.ts    |   83 +
 .../transformCaMonogramIconToBrand.ts         |   53 +
 .../upgradeIconV1/transformIcon.spec.ts       |  181 +
 .../codemods/upgradeIconV1/transformIcon.ts   |  115 +
 ...ansformSpinnerIconToLoadingSpinner.spec.ts |   81 +
 .../transformSpinnerIconToLoadingSpinner.ts   |   41 +
 .../upgradeIconV1/upgradeIconV1.spec.ts       |  306 ++
 .../codemods/upgradeIconV1/upgradeIconV1.ts   |   94 +
 .../codemods/utils/createProp.spec.ts         |   83 +
 .../components/codemods/utils/createProp.ts   |   51 +
 .../codemods/utils/getKaioTagName.spec.ts     |   85 +
 .../codemods/utils/getKaioTagName.ts          |  129 +
 .../codemods/utils/getTagName.spec.ts         |   24 -
 .../components/codemods/utils/getTagName.ts   |   32 -
 packages/components/codemods/utils/index.ts   |    4 +-
 .../utils/transformComponentsInDir.ts         |   48 +-
 .../codemods/utils/transformSource.ts         |   15 +-
 .../utils/updateJsxElementWithNewProps.ts     |    7 +-
 .../codemods/utils/updateKaioImports.spec.ts  |  223 ++
 .../codemods/utils/updateKaioImports.ts       |  233 ++
 packages/components/rollup.config.mjs         |    6 +-
 .../components/src/Avatar/Avatar.module.scss  |   14 +-
 packages/components/src/Avatar/Avatar.tsx     |   19 +-
 .../BrandMoment/_docs/BrandMoment.stories.tsx |   16 +-
 .../src/BrandMoment/_docs/ExampleHeaders.tsx  |    4 +-
 .../Calendar/CalendarRange/CalendarRange.tsx  |   10 +-
 .../CalendarSingle/CalendarSingle.tsx         |   10 +-
 .../LegacyCalendarRange.tsx                   |   10 +-
 .../baseCalendarClassNames.module.scss        |    4 -
 .../Checkbox/Checkbox/Checkbox.module.scss    |    8 -
 .../src/Checkbox/Checkbox/Checkbox.tsx        |   14 +-
 .../src/ClearButton/ClearButton.tsx           |    4 +-
 .../Collapsible/Collapsible/Collapsible.tsx   |   11 +-
 .../Collapsible/_docs/Collapsible.stories.tsx |    4 +-
 .../DateInputWithIconButton.module.scss       |    9 +-
 .../DateInputWithIconButton.tsx               |    4 +-
 .../src/DateRangePicker/DateRangePicker.tsx   |    4 +-
 .../_docs/EmptyState.stickersheet.stories.tsx |   10 +-
 .../EmptyState/_docs/EmptyState.stories.tsx   |    6 +-
 .../components/src/ErrorPage/ErrorPage.tsx    |    8 +-
 .../src/FieldMessage/FieldMessage.tsx         |   20 +-
 .../src/Filter/FilterBar/FilterBar.spec.tsx   |   24 +-
 .../AddFiltersMenu/AddFiltersMenu.tsx         |    4 +-
 .../FilterButton/FilterButton.tsx             |   11 +-
 .../FilterButtonRemovable.tsx                 |    4 +-
 .../FilterDateRangePicker.spec.tsx            |    1 -
 .../DateRangeInputField.spec.tsx              |    3 +-
 .../MultiSelectOption/MultiSelectOption.tsx   |    4 +-
 .../Filter/FilterSelect/FilterSelect.spec.tsx |    9 +-
 .../src/GuidanceBlock/GuidanceBlock.tsx       |    8 +-
 ...Icon.stories.tsx => Icon.docs.stories.tsx} |    2 +-
 packages/components/src/Icon/_docs/Icon.mdx   |    3 +-
 .../Icon/_docs/Icon.stickersheet.stories.tsx  |    2 +-
 .../src/Illustration/utils/usePausePlay.tsx   |   12 +-
 .../_docs/Input.stickersheet.stories.tsx      |   12 +-
 .../src/Input/Input/_docs/Input.stories.tsx   |    8 +-
 .../src/Input/InputSearch/InputSearch.tsx     |    4 +-
 .../components/src/Label/Label.module.scss    |    4 +
 .../LikertScaleLegacy/LikertScaleLegacy.tsx   |    4 +-
 .../_docs/LoadingGraphic.stories.tsx          |    4 +-
 .../ConfirmationModal.module.scss             |    2 +
 .../ConfirmationModal/ConfirmationModal.tsx   |   67 +-
 .../subcomponents/ModalHeader/ModalHeader.tsx |    4 +-
 .../src/MultiSelect/MultiSelect.spec.tsx      |   10 +-
 .../Checkbox/Checkbox.module.scss             |    6 -
 .../subcomponents/Checkbox/Checkbox.tsx       |   19 +-
 .../MultiSelectOptions.spec.tsx               |   18 +-
 .../MultiSelectToggle/MultiSelectToggle.tsx   |   12 +-
 .../CancelButton/CancelButton.tsx             |    4 +-
 .../GenericNotification/_mixins.scss          |    2 +
 .../NotificationIcon.module.css               |    3 +
 .../NotificationIcon/NotificationIcon.tsx     |   38 +-
 .../DirectionalLink.module.scss               |    4 -
 .../DirectionalLink/DirectionalLink.tsx       |   25 +-
 .../TruncateIndicator.module.scss             |    1 -
 .../TruncateIndicator/TruncateIndicator.tsx   |    4 +-
 .../src/Popover/Popover.module.scss           |    6 +-
 packages/components/src/Popover/Popover.tsx   |    4 +-
 .../src/Popover/utils/classMappers.tsx        |   17 +-
 .../ToggleIconButton.stickersheet.stories.tsx |   14 +-
 .../_docs/ToggleIconButton.stories.tsx        |    4 +-
 .../subcomponents/Toolbar/Toolbar.spec.tsx    |   11 +-
 .../Toolbar/_docs/Toolbar.stories.tsx         |   30 +-
 .../RichTextEditor/utils/controlmap.tsx       |   43 +-
 .../components/LinkPopover/LinkPopover.tsx    |   12 +-
 .../components/src/Select/Select.module.scss  |    2 +
 packages/components/src/Select/Select.tsx     |   17 +-
 .../DropdownButton/DropdownButton.spec.tsx    |    9 +-
 .../DropdownButton/DropdownButton.tsx         |    4 +-
 packages/components/src/Table/Table.tsx       |   12 +-
 .../_docs/Table.stickersheet.stories.tsx      |    8 +-
 .../src/Table/_docs/Table.stories.tsx         |    6 +-
 packages/components/src/Tag/Tag.module.scss   |    2 +
 packages/components/src/Tag/Tag.tsx           |   20 +-
 packages/components/src/Text/Text.module.scss |    2 +
 .../src/TextField/TextField.spec.tsx          |   13 +-
 .../components/src/TextField/TextField.tsx    |    4 +-
 .../src/TextField/_docs/TextField.stories.tsx |    7 +-
 .../subcomponents/GenericTile/GenericTile.tsx |    6 +-
 .../TitleBlockZen/TitleBlockZen.module.scss   |    1 +
 .../src/TitleBlockZen/TitleBlockZen.spec.tsx  |    2 +-
 .../src/TitleBlockZen/TitleBlockZen.tsx       |   15 +-
 .../_docs/TitleBlockZen.stories.tsx           |   10 +-
 .../subcomponents/MainActions.tsx             |    8 +-
 .../subcomponents/MobileActions.tsx           |   29 +-
 .../subcomponents/SecondaryActions.tsx        |    6 +-
 .../ToggleSwitch/ToggleSwitch.module.scss     |    3 -
 .../ToggleSwitch/ToggleSwitch.tsx             |    4 +-
 .../src/Workflow/_docs/Workflow.stories.tsx   |    9 +-
 .../Workflow/_docs/WorkflowHeader.stories.tsx |    9 +-
 .../src/Workflow/_docs/controls/controls.tsx  |    8 +-
 .../ProgressStepper/ProgressStepper.tsx       |   37 +-
 .../_docs/Button.stickersheet.stories.tsx     |   10 +-
 .../Button/v1/Button/_docs/Button.stories.tsx |   11 +-
 .../_docs/IconButton.stickersheet.stories.tsx |   12 +-
 .../IconButton/_docs/IconButton.stories.tsx   |    8 +-
 .../Button/v2/Button/_docs/Button.stories.tsx |   11 +-
 .../IconButton/_docs/IconButton.stories.tsx   |    8 +-
 .../v1/_docs/Menu.stickersheet.stories.tsx    |    6 +-
 .../Menu/v1/_docs/Menu.stories.tsx            |    6 +-
 .../Menu/v1/_docs/MenuContentExample.tsx      |   12 +-
 .../__actions__/Menu/v1/_docs/examples.tsx    |   10 +-
 .../Menu/v2/_docs/Menu.stories.tsx            |    6 +-
 .../Menu/v3/_docs/ApiSpecification.mdx        |    4 +-
 .../Menu/v3/_docs/Menu.docs.stories.tsx       |   91 +-
 .../src/__actions__/Menu/v3/_docs/Menu.mdx    |    2 +-
 .../Menu/v3/_docs/Menu.spec.stories.tsx       |   44 +-
 .../Menu/v3/_docs/Menu.stories.tsx            |   27 +-
 .../src/__future__/Icon/Icon.module.css       |   35 +
 .../src/__future__/Icon/Icon.spec.tsx         |   36 +
 .../components/src/__future__/Icon/Icon.tsx   |   85 +
 .../Icon/_docs/Icon--api-specification.mdx    |   98 +
 .../Icon/_docs/Icon--usage-guidelines.mdx     |  145 +
 .../Icon/_docs/Icon.docs.module.css           |   17 +
 .../Icon/_docs/Icon.docs.stories.tsx          |  524 +++
 .../Icon/_docs/Icon.stickersheet.stories.tsx  |  126 +
 .../Icon/_docs/assets/interface-dont.png      |  Bin 0 -> 6479 bytes
 .../Icon/_docs/assets/tooltip-dont.png        |  Bin 0 -> 37421 bytes
 .../src/__future__/Icon/constants.ts          |  149 +
 .../components/src/__future__/Icon/index.ts   |    1 +
 .../Icon/material-symbols-metadata.json       | 3370 +++++++++++++++++
 .../components/src/__future__/Icon/types.ts   |   11 +
 .../Select/subcomponents/Option/Option.tsx    |    4 +-
 .../SelectToggle/SelectToggle.module.scss     |    2 +-
 .../SelectToggle/SelectToggle.tsx             |   15 +-
 .../_docs/RemovableTag.stories.tsx            |   77 -
 .../subcomponents/RemoveButton.module.scss    |   56 -
 .../subcomponents/RemoveButton.tsx            |   14 +-
 .../subcomponents/RemoveTagIcon.tsx           |   21 -
 .../src/__future__/Tag/Tag/Tag.module.scss    |    2 +-
 .../Tag/_docs/Tag-migration-guide.stories.tsx |   23 +-
 .../Tag/_docs/Tag.stickersheet.stories.tsx    |    7 +-
 .../__future__/Tag/Tag/_docs/Tag.stories.tsx  |   19 +-
 packages/components/src/__future__/index.ts   |    1 +
 .../v1/_docs/Tooltip.stickersheet.stories.tsx |   20 +-
 .../Tooltip/v1/_docs/Tooltip.stories.tsx      |   11 +-
 .../v1/utils/isSemanticElement.spec.tsx       |   15 +-
 .../Tooltip/v3/_docs/Tooltip.docs.stories.tsx |   20 +-
 .../Tooltip/v3/_docs/Tooltip.spec.stories.tsx |    6 +-
 packages/components/types.d.ts                |    5 +
 .../components/CodeSnippet/CodeSnippet.tsx    |    6 +-
 174 files changed, 7432 insertions(+), 964 deletions(-)
 create mode 100644 .changeset/little-lizards-sniff.md
 create mode 100644 .changeset/quick-timers-juggle.md
 create mode 100644 .changeset/real-pumpkins-drive.md
 create mode 100644 packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/index.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.spec.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformIcon.spec.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformIcon.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.spec.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
 create mode 100644 packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
 create mode 100644 packages/components/codemods/utils/createProp.spec.ts
 create mode 100644 packages/components/codemods/utils/createProp.ts
 create mode 100644 packages/components/codemods/utils/getKaioTagName.spec.ts
 create mode 100644 packages/components/codemods/utils/getKaioTagName.ts
 delete mode 100644 packages/components/codemods/utils/getTagName.spec.ts
 delete mode 100644 packages/components/codemods/utils/getTagName.ts
 create mode 100644 packages/components/codemods/utils/updateKaioImports.spec.ts
 create mode 100644 packages/components/codemods/utils/updateKaioImports.ts
 rename packages/components/src/Icon/_docs/{Icon.stories.tsx => Icon.docs.stories.tsx} (98%)
 create mode 100644 packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css
 create mode 100644 packages/components/src/__future__/Icon/Icon.module.css
 create mode 100644 packages/components/src/__future__/Icon/Icon.spec.tsx
 create mode 100644 packages/components/src/__future__/Icon/Icon.tsx
 create mode 100644 packages/components/src/__future__/Icon/_docs/Icon--api-specification.mdx
 create mode 100644 packages/components/src/__future__/Icon/_docs/Icon--usage-guidelines.mdx
 create mode 100644 packages/components/src/__future__/Icon/_docs/Icon.docs.module.css
 create mode 100644 packages/components/src/__future__/Icon/_docs/Icon.docs.stories.tsx
 create mode 100644 packages/components/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx
 create mode 100644 packages/components/src/__future__/Icon/_docs/assets/interface-dont.png
 create mode 100644 packages/components/src/__future__/Icon/_docs/assets/tooltip-dont.png
 create mode 100644 packages/components/src/__future__/Icon/constants.ts
 create mode 100644 packages/components/src/__future__/Icon/index.ts
 create mode 100644 packages/components/src/__future__/Icon/material-symbols-metadata.json
 create mode 100644 packages/components/src/__future__/Icon/types.ts
 delete mode 100644 packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx

diff --git a/.changeset/little-lizards-sniff.md b/.changeset/little-lizards-sniff.md
new file mode 100644
index 00000000000..5e0d6c1c6de
--- /dev/null
+++ b/.changeset/little-lizards-sniff.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": minor
+---
+
+Add future Icon and update internal icon usages (excluding Buttons).
diff --git a/.changeset/quick-timers-juggle.md b/.changeset/quick-timers-juggle.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/quick-timers-juggle.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/real-pumpkins-drive.md b/.changeset/real-pumpkins-drive.md
new file mode 100644
index 00000000000..2047ccc48a3
--- /dev/null
+++ b/.changeset/real-pumpkins-drive.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Fix future Tag cautionary icon colour.
diff --git a/.github/workflows/test-unit.yml b/.github/workflows/test-unit.yml
index fdc3458cd19..a71d3acabf8 100644
--- a/.github/workflows/test-unit.yml
+++ b/.github/workflows/test-unit.yml
@@ -27,7 +27,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (1/3)
-        run: pnpm test -- -- --run --shard=1/3
+        run: pnpm test -- --shard=1/3
 
   unit-tests-2:
     if: github.head_ref != 'changeset-release/main'
@@ -38,7 +38,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (2/3)
-        run: pnpm test -- -- --run --shard=2/3
+        run: pnpm test -- --shard=2/3
 
   unit-tests-3:
     if: github.head_ref != 'changeset-release/main'
@@ -49,4 +49,4 @@ jobs:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/setup
       - name: Unit tests (3/3)
-        run: pnpm test -- -- --run --shard=3/3
+        run: pnpm test -- --shard=3/3
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
index 35aae17a813..b44c54ed349 100644
--- a/docs/.storybook/preview-head.html
+++ b/docs/.storybook/preview-head.html
@@ -1,3 +1,9 @@
+<!-- https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect -->
+<!-- https://stackoverflow.com/a/62219966 -->
+<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+
 <style>
   body {
     /* Removing the default Storybook transition because it's causing false positive a11y violations */
diff --git a/docs/components/DosAndDonts/DosAndDonts.module.css b/docs/components/DosAndDonts/DosAndDonts.module.css
index 658e04724fb..36daa171c04 100644
--- a/docs/components/DosAndDonts/DosAndDonts.module.css
+++ b/docs/components/DosAndDonts/DosAndDonts.module.css
@@ -8,3 +8,17 @@
     grid-column: span 2;
   }
 }
+
+.doOrDontTag {
+  position: absolute;
+  z-index: 10;
+  top: 6px;
+  left: 6px;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--border-solid-border-radius);
+  padding-block: var(--spacing-2);
+  padding-inline: var(--spacing-4) var(--spacing-8);
+  color: var(--color-white);
+}
diff --git a/docs/components/DosAndDonts/DosAndDonts.tsx b/docs/components/DosAndDonts/DosAndDonts.tsx
index 842f64cfbd7..25960cc3d41 100644
--- a/docs/components/DosAndDonts/DosAndDonts.tsx
+++ b/docs/components/DosAndDonts/DosAndDonts.tsx
@@ -1,9 +1,9 @@
 import React, { HTMLAttributes } from "react"
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { Canvas } from "@storybook/blocks"
+import { Canvas, Unstyled } from "@storybook/blocks"
 import classnames from "classnames"
-import { CheckIcon, CloseIcon } from "~components/Icon"
-import { SbContent } from "../SbContent"
+import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./DosAndDonts.module.css"
 
 export const DosAndDonts = ({
@@ -18,6 +18,24 @@ export const DosAndDonts = ({
 
 DosAndDonts.displayName = "DosAndDonts"
 
+const DoOrDontTag = ({ isDont }: { isDont: boolean }): JSX.Element => (
+  <Unstyled>
+    <span
+      className={classnames(
+        styles.doOrDontTag,
+        isDont ? "bg-red-500" : "bg-green-500"
+      )}
+    >
+      <Icon name={isDont ? "close" : "check"} isPresentational />
+      <Text variant="body" color="white">
+        <strong>{isDont ? "Don't" : "Do"}</strong>
+      </Text>
+    </span>
+  </Unstyled>
+)
+
+DoOrDontTag.displayName = "DoOrDontTag"
+
 export const DoOrDont = ({
   isDont = false,
   className,
@@ -28,23 +46,7 @@ export const DoOrDont = ({
   story: any
 } & HTMLAttributes<HTMLDivElement>): JSX.Element => (
   <div className={classnames("relative", className)} {...otherProps}>
-    <div
-      className={classnames(
-        "absolute top-6 left-6 z-10 py-4 px-6 font-bold text-white rounded flex gap-2 items-center justify-center",
-        isDont ? "bg-red-500" : "bg-green-500"
-      )}
-    >
-      {isDont ? (
-        <CloseIcon role="presentation" />
-      ) : (
-        <CheckIcon role="presentation" />
-      )}
-      <SbContent>
-        <span className="text-white">
-          <strong>{isDont ? "Don't" : "Do"}</strong>
-        </span>
-      </SbContent>
-    </div>
+    <DoOrDontTag isDont={isDont} />
     <Canvas
       sourceState="none"
       className="h-full m-0 bg-gray-100 rounded-none shadow-none border-none"
diff --git a/docs/components/ResourceLinks/ResourceLinks.tsx b/docs/components/ResourceLinks/ResourceLinks.tsx
index bc1ae924528..184c110474a 100644
--- a/docs/components/ResourceLinks/ResourceLinks.tsx
+++ b/docs/components/ResourceLinks/ResourceLinks.tsx
@@ -2,8 +2,8 @@ import React, { HTMLAttributes } from "react"
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { Unstyled } from "@storybook/blocks"
 import classNames from "classnames"
-import { ExternalLinkIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 
 type ResourceLinkProps = {
   href: string
@@ -16,15 +16,12 @@ const ResourceLink = ({ href, text }: ResourceLinkProps): JSX.Element => (
       href={href}
       target="_blank"
       rel="noopener noreferrer nofollow"
-      className="border rounded inline-flex items-center p-8 text-blue-400 no-underline"
+      className="border rounded inline-flex gap-4 items-center p-8 text-blue-400 no-underline"
     >
       <Text variant="small" tag="span" classNameOverride="text-inherit">
         {text}
       </Text>
-      <ExternalLinkIcon
-        role="presentation"
-        classNameOverride="ml-4 w-16 h-16"
-      />
+      <Icon name="open_in_new" isPresentational />
     </a>
   </li>
 )
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index b8cae34ba08..b39e402d9a5 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -3,6 +3,7 @@
     "baseUrl": ".",
     "jsx": "react",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
     "paths": {
       "~storybook/*": ["./*"],
diff --git a/package.json b/package.json
index 7ea0b2fc9c3..f8d8e61c5c2 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "dev": "pnpm turbo dev",
     "build": "pnpm turbo build",
     "clean": "pnpm turbo clean && rimraf node_modules && pnpm store prune",
-    "test": "pnpm turbo test",
+    "test": "pnpm turbo test -- --run",
     "lint": "pnpm lint:js && pnpm lint:md && pnpm lint:format && pnpm lint:styles",
     "lint:ts": "pnpm turbo lint:ts",
     "lint:js": "pnpm eslint '**/*.{ts,tsx,mjs,js}' --max-warnings=0",
@@ -20,7 +20,8 @@
     "lint:scss": "pnpm stylelint '**/*.scss' --config .stylelintrc-scss.json",
     "lint:css": "pnpm stylelint '**/*.css' --config .stylelintrc-css.mjs",
     "lint:styles": "pnpm lint:scss && pnpm lint:css",
-    "lint:fix": "pnpm lint:styles --fix && pnpm lint:js --fix && pnpm lint:md --fix && pnpm lint:format --write",
+    "lint:styles:fix": "pnpm lint:scss --fix && pnpm lint:css --fix",
+    "lint:fix": "pnpm lint:styles:fix && pnpm lint:js --fix && pnpm lint:md --fix && pnpm lint:format --write",
     "reset": "pnpm clean && pnpm install --force",
     "chromatic": "chromatic",
     "changeset": "changeset",
diff --git a/packages/components/codemods/README.md b/packages/components/codemods/README.md
index 967f85b1405..078f8db74d4 100644
--- a/packages/components/codemods/README.md
+++ b/packages/components/codemods/README.md
@@ -33,3 +33,8 @@ kaizen-codemod src migrateWellVariantToColor
 - `migrateWellVariantToColor`: Migrates `Well` component prop from `variant` to `color`
 - `removeInputEditModalMood`: Removes `InputEditModal` component prop `mood`
 - `removePopoverVariant`: Removes `Popover` component props `variant` and `customIcon`
+- `upgradeIconV1`: Migrates `*Icon` components to a new equivalent
+  - `CaMonogramIcon` becomes `Brand`
+  - `SpinnerIcon` becomes `LoadingSpinner`
+  - All other Icons become future `Icon`
+    - **Note:** See [Icon API Specification (Future)](https://cultureamp.design/?path=/docs/illustrations-icon-icon-future-api-specification--docs) for setup instructions
diff --git a/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts b/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts
new file mode 100644
index 00000000000..0b8fc8f7dbb
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/getNewIconPropsFromOldIconName.ts
@@ -0,0 +1,255 @@
+import * as OLD_ICONS from "~components/Icon"
+import { IconNames } from "~components/__future__/Icon/types"
+import { StringSuggestions } from "~components/types/StringSuggestions"
+
+// `undefined` means the icon has no usage, thus is not available in the new icon set
+type NewIconProps = { name: IconNames; isFilled?: boolean } | undefined
+
+const iconMap = new Map<keyof typeof OLD_ICONS, NewIconProps>([
+  ["AcademyIcon", { name: "school" }],
+  ["ActionOffIcon", undefined],
+  ["ActionOffWhiteIcon", undefined],
+  ["ActionOnIcon", { name: "flash_on" }],
+  ["AddIcon", { name: "add" }],
+  ["AddLinkIcon", { name: "add_link" }],
+  ["AddWhiteIcon", { name: "add_link" }],
+  ["AiIcon", { name: "auto_awesome" }],
+  ["ArchivedIcon", { name: "assignment_returned" }],
+  ["ArchivedWhiteIcon", undefined],
+  ["ArrowBackwardIcon", { name: "arrow_back" }],
+  ["ArrowDownIcon", { name: "arrow_downward" }],
+  ["ArrowForwardIcon", { name: "arrow_forward" }],
+  ["ArrowLeftIcon", { name: "arrow_back" }],
+  ["ArrowRightIcon", { name: "arrow_forward" }],
+  ["ArrowUpIcon", { name: "arrow_upward" }],
+  ["AssignmentIcon", { name: "assignment_add" }],
+  ["BlankIcon", undefined],
+  ["BoldIcon", { name: "format_bold" }],
+  ["BookmarkOffIcon", { name: "bookmark" }],
+  ["BookmarkOnIcon", { name: "bookmark", isFilled: true }],
+  ["BranchingIcon", { name: "reduce_capacity" }],
+  ["BullettedListIcon", { name: "format_list_bulleted" }],
+  ["CameraIcon", { name: "add_a_photo" }],
+  // "CaMonogramIcon" to shift usage to using Brand
+  ["CautionIcon", { name: "warning" }],
+  ["CautionWhiteIcon", { name: "warning" }],
+  ["CheckIcon", { name: "check" }],
+  ["ChevronDownIcon", { name: "keyboard_arrow_down" }],
+  ["ChevronLeftIcon", { name: "chevron_left" }],
+  ["ChevronRightIcon", { name: "chevron_right" }],
+  ["ChevronUpIcon", { name: "keyboard_arrow_up" }],
+  ["ClearIcon", { name: "cancel" }],
+  ["ClearWhiteIcon", { name: "cancel" }],
+  ["ClosedIcon", { name: "assignment_turned_in" }],
+  ["ClosedWhiteIcon", { name: "assignment_turned_in" }],
+  ["CloseIcon", { name: "close" }],
+  ["CommentAddIcon", { name: "add_comment" }],
+  ["CommentAddWhiteIcon", undefined],
+  ["CommentBankIcon", { name: "comment_bank" }],
+  ["CommentDisabledIcon", { name: "chat_error" }],
+  ["CommentDisabledWhiteIcon", undefined],
+  ["CommentIcon", { name: "sms" }],
+  ["CommentWhiteIcon", undefined],
+  ["CommunicationsIcon", { name: "forum" }],
+  ["CompetencyLibraryIcon", { name: "user_attributes" }],
+  ["ConfigureIcon", { name: "build" }],
+  ["ConnectIcon", { name: "power" }],
+  ["ConnectLineIcon", { name: "power" }],
+  ["CustomIcon", { name: "brush" }],
+  ["DashboardIcon", { name: "dashboard" }],
+  ["DateEndIcon", { name: "event" }],
+  ["DateEndWhiteIcon", undefined],
+  ["DateRangeIcon", { name: "date_range" }],
+  ["DateRangeWhiteIcon", { name: "date_range" }],
+  ["DateStartIcon", { name: "today" }],
+  ["DateStartWhiteIcon", { name: "today" }],
+  ["DecreaseIndentIcon", { name: "format_indent_decrease" }],
+  ["DeltaBareIcon", undefined],
+  ["DeltaBareWhiteIcon", undefined],
+  ["DeltaFlatIcon", { name: "horizontal_rule" }],
+  ["DeltaIcon", undefined],
+  ["DeltaNegativeIcon", { name: "south_east" }],
+  ["DeltaPositiveIcon", { name: "north_east" }],
+  ["DeltaWhiteIcon", undefined],
+  ["DemographicsIcon", { name: "tune" }],
+  ["DepartmentIcon", { name: "groups" }],
+  ["DraftIcon", { name: "note_alt" }],
+  ["DraftWhiteIcon", { name: "note_alt" }],
+  ["DragIcon", { name: "drag_indicator" }],
+  ["DuplicateIcon", { name: "content_copy" }],
+  ["EditIcon", { name: "edit" }],
+  ["EffectivenessIcon", { name: "potted_plant" }],
+  ["EllipsisIcon", { name: "more_horiz" }],
+  ["EmailIcon", { name: "mail" }],
+  ["EmptyIcon", { name: "radio_button_unchecked" }],
+  ["EmptyWhiteIcon", { name: "radio_button_unchecked" }],
+  ["EndIcon", { name: "keyboard_tab" }],
+  ["EngagementIcon", undefined],
+  ["EngagementWhiteIcon", undefined],
+  ["EqualIcon", undefined],
+  ["EqualWhiteIcon", undefined],
+  ["ExclamationIcon", { name: "error" }],
+  ["ExclamationOctagonIcon", { name: "warning" }],
+  ["ExclamationOctagonWhiteIcon", undefined],
+  ["ExclamationWhiteIcon", { name: "error" }],
+  ["ExperienceIcon", undefined],
+  ["ExportIcon", { name: "cloud_download" }],
+  ["ExportWhiteIcon", { name: "cloud_download" }],
+  ["ExternalLinkIcon", { name: "open_in_new" }],
+  ["FaceDissatisfiedIcon", { name: "sentiment_dissatisfied" }],
+  ["FaceDissatisfiedWhiteIcon", undefined],
+  ["FaceNeutralIcon", { name: "sentiment_neutral" }],
+  ["FaceNeutralWhiteIcon", undefined],
+  ["FaceSatisfiedIcon", { name: "sentiment_satisfied" }],
+  ["FaceSatisfiedWhiteIcon", undefined],
+  ["FaceVeryDissatisfiedIcon", undefined],
+  ["FaceVeryDissatisfiedWhiteIcon", undefined],
+  ["FaceVerySatisfiedIcon", { name: "sentiment_very_satisfied" }],
+  ["FaceVerySatisfiedWhiteIcon", undefined],
+  ["FactorsIcon", undefined],
+  ["FavoriteOffIcon", { name: "favorite" }],
+  ["FavoriteOnIcon", { name: "favorite", isFilled: true }],
+  ["FeedbackClassifyIcon", { name: "reviews" }],
+  ["FeedbackClassifyWhiteIcon", undefined],
+  ["FeedbackCompletedIcon", undefined],
+  ["FeedbackCompletedWhiteIcon", undefined],
+  ["FeedbackReportIcon", { name: "mms" }],
+  ["FeedbackReportWhiteIcon", undefined],
+  ["FeedbackReviewIcon", { name: "rate_review" }],
+  ["FeedbackReviewWhiteIcon", undefined],
+  ["FeedbackShareIcon", { name: "chat_paste_go" }],
+  ["FeedbackShareWhiteIcon", undefined],
+  ["FileIcon", { name: "draft" }],
+  ["FileWhiteIcon", { name: "draft" }],
+  ["FilterIcon", { name: "tune" }],
+  ["FlagOffIcon", { name: "flag" }],
+  ["FlagOffWhiteIcon", { name: "flag" }],
+  ["FlagOnIcon", { name: "flag", isFilled: true }],
+  ["FullIcon", { name: "radio_button_checked" }],
+  ["GridViewIcon", undefined],
+  ["GuidanceIcon", { name: "lightbulb" }],
+  ["HamburgerIcon", { name: "menu" }],
+  ["HeatmapIcon", { name: "local_fire_department" }],
+  ["HeatmapWhiteIcon", undefined],
+  ["HierarchyIcon", { name: "lan" }],
+  ["HomeIcon", { name: "home" }],
+  ["ImportIcon", { name: "backup" }],
+  ["ImportWhiteIcon", { name: "backup" }],
+  ["IncreaseIndentIcon", { name: "format_indent_increase" }],
+  ["IndicatorActiveIcon", { name: "radio_button_checked" }],
+  ["IndicatorInactiveIcon", { name: "radio_button_unchecked" }],
+  ["InformationIcon", { name: "info" }],
+  ["InformationWhiteIcon", { name: "info" }],
+  ["InsightIcon", { name: "find_in_page" }],
+  ["InsightsIcon", undefined],
+  ["InvisibleIcon", { name: "visibility_off" }],
+  ["ItalicsIcon", { name: "format_italic" }],
+  ["KebabIcon", { name: "more_vert" }],
+  ["KioskIcon", undefined],
+  ["KioskWhiteIcon", undefined],
+  ["LaunchIcon", { name: "play_circle" }],
+  ["LaunchWhiteIcon", undefined],
+  ["LeaderboardIcon", undefined],
+  ["ListViewIcon", { name: "list" }],
+  ["LiveIcon", { name: "sensors" }],
+  ["LockIcon", { name: "lock" }],
+  ["LockWhiteIcon", undefined],
+  ["LogOutIcon", { name: "logout" }],
+  ["MaximizeIcon", { name: "open_in_full" }],
+  ["MeatballsIcon", { name: "more_horiz" }],
+  ["MinimizeIcon", { name: "close_fullscreen" }],
+  ["MinusIcon", { name: "remove" }],
+  ["NavigatorIcon", undefined],
+  ["NotificationIcon", { name: "notifications_active" }],
+  ["NumberedListIcon", { name: "format_list_numbered" }],
+  ["NumberedListRtlIcon", { name: "format_list_numbered_rtl" }],
+  ["OpenIcon", undefined],
+  ["OpenWhiteIcon", { name: "assignment_ind" }],
+  ["OrganizationIcon", { name: "domain" }],
+  ["ParticipationIcon", { name: "front_hand" }],
+  ["ParticipationWhiteIcon", undefined],
+  ["PauseIcon", { name: "pause" }],
+  ["PauseWhiteIcon", undefined],
+  ["PercentageIcon", { name: "percent" }],
+  ["PermissionsIcon", { name: "key" }],
+  ["PersonIcon", undefined],
+  ["PhotoUploadIcon", { name: "add_a_photo" }],
+  ["PowerIcon", { name: "power_settings_new" }],
+  ["PrintIcon", { name: "print" }],
+  ["PrintWhiteIcon", undefined],
+  ["ProcessManagerIcon", { name: "playlist_add_check" }],
+  ["PromotionIcon", { name: "grade" }],
+  ["PromotionWhiteIcon", undefined],
+  ["QuestionIcon", { name: "help" }],
+  ["QuestionsIcon", undefined],
+  ["QuestionWhiteIcon", { name: "help" }],
+  ["RedoIcon", { name: "redo" }],
+  ["RefreshIcon", { name: "refresh" }],
+  ["RemoveLinkIcon", { name: "link_off" }],
+  ["RepeatsIcon", undefined],
+  ["ReportIcon", { name: "bar_chart" }],
+  ["ReportSharingIcon", { name: "forward" }],
+  ["RestoreIcon", { name: "history" }],
+  ["SaveIcon", undefined],
+  ["SearchIcon", { name: "search" }],
+  ["SearchWhiteIcon", { name: "search" }],
+  ["SecurityTipIcon", { name: "privacy_tip" }],
+  ["SendIcon", { name: "send" }],
+  ["SendRtlIcon", undefined],
+  ["SettingsIcon", { name: "settings" }],
+  ["SettingsWhiteIcon", undefined],
+  ["ShareIcon", { name: "forward" }],
+  ["SkipIcon", { name: "keyboard_tab" }],
+  ["SkipWhiteIcon", { name: "keyboard_tab" }],
+  ["SortAscendingIcon", { name: "arrow_drop_up" }],
+  ["SortDescendingIcon", { name: "arrow_drop_down" }],
+  // "SpinnerIcon" to be replaced with XS LoadingSpinner component
+  ["StarOffIcon", { name: "star" }],
+  ["StarOnIcon", { name: "star", isFilled: true }],
+  ["StartIcon", { name: "keyboard_tab_rtl" }],
+  ["SubtractIcon", { name: "remove" }],
+  ["SubtractWhiteIcon", undefined],
+  ["SuccessIcon", { name: "check_circle" }],
+  ["SuccessWhiteIcon", { name: "check_circle" }],
+  ["SupportIcon", { name: "support" }],
+  ["SurveysIcon", { name: "assignment" }],
+  ["SurveysWhiteIcon", { name: "assignment" }],
+  ["SyncIcon", { name: "cached" }],
+  ["TagIcon", { name: "label" }],
+  ["TasksIcon", undefined],
+  ["TasksWhiteIcon", undefined],
+  ["TemplateIcon", undefined],
+  ["TemplateWhiteIcon", undefined],
+  ["TextAnalyticsIcon", { name: "chat_apps_script" }],
+  ["TextAnalyticsWhiteIcon", undefined],
+  ["ThumbsDownIcon", { name: "thumb_down", isFilled: true }],
+  ["ThumbsDownOffIcon", { name: "thumb_down" }],
+  ["ThumbsDownOnIcon", { name: "thumb_down", isFilled: true }],
+  ["ThumbsUpIcon", { name: "thumb_up", isFilled: true }],
+  ["ThumbsUpOffIcon", { name: "thumb_up" }],
+  ["ThumbsUpOnIcon", { name: "thumb_up", isFilled: true }],
+  ["TimeIcon", { name: "schedule" }],
+  ["TimeWhiteIcon", undefined],
+  ["TranslationIcon", { name: "translate" }],
+  ["TrashIcon", { name: "delete" }],
+  ["UnattributedIcon", { name: "psychology_alt" }],
+  ["UnattributedWhiteIcon", undefined],
+  ["UnderlineIcon", { name: "format_underlined" }],
+  ["UndoIcon", { name: "undo" }],
+  ["UserAddIcon", { name: "person_add" }],
+  ["UserDeleteIcon", { name: "person_cancel" }],
+  ["UserExitIcon", undefined],
+  ["UserIcon", { name: "person" }],
+  ["UserSelectIcon", { name: "person_check" }],
+  ["UserSettingsIcon", { name: "manage_accounts" }],
+  ["UsersIcon", { name: "group" }],
+  ["UserUpdateIcon", undefined],
+  ["VisibleIcon", { name: "visibility" }],
+  ["WritingIcon", undefined],
+  ["ZoomInIcon", { name: "zoom_in" }],
+  ["ZoomOutIcon", { name: "zoom_out" }],
+])
+
+export const getNewIconPropsFromOldIconName = (
+  oldValue: StringSuggestions<keyof typeof OLD_ICONS>
+): NewIconProps => iconMap.get(oldValue as keyof typeof OLD_ICONS)
diff --git a/packages/components/codemods/upgradeIconV1/index.ts b/packages/components/codemods/upgradeIconV1/index.ts
new file mode 100644
index 00000000000..6cde38899a4
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/index.ts
@@ -0,0 +1,33 @@
+import fs from "fs"
+import ts from "typescript"
+import { getKaioTagNamesByRegex, transformSource, traverseDir } from "../utils"
+import { upgradeIconV1 } from "./upgradeIconV1"
+
+const run = (): void => {
+  // eslint-disable-next-line no-console
+  console.log("~(-_- ~) Running Icon v1 to Future upgrade (~ -_-)~")
+  const targetDir = process.argv[2]
+  if (!targetDir) {
+    process.exit(1)
+  }
+
+  const transformFile = (
+    componentFilePath: string,
+    sourceFile: ts.SourceFile
+  ): void => {
+    const tagNames = getKaioTagNamesByRegex(sourceFile, "Icon$")
+    if (tagNames) {
+      const updatedSourceFile = transformSource({
+        sourceFile,
+        astTransformer: upgradeIconV1,
+        tagName: tagNames,
+      })
+
+      fs.writeFileSync(componentFilePath, updatedSourceFile, "utf8")
+    }
+  }
+
+  traverseDir(targetDir, transformFile)
+}
+
+run()
diff --git a/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.spec.ts b/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.spec.ts
new file mode 100644
index 00000000000..e29e10564da
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.spec.ts
@@ -0,0 +1,83 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { transformCaMonogramIconToBrand } from "./transformCaMonogramIconToBrand"
+
+export const mockedTransformer =
+  (alias?: string) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        return transformCaMonogramIconToBrand(node, alias)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile, alias?: string): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(alias)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformCaMonogramIconToBrand()", () => {
+  it("replaces CaMonogramIcon with Brand variant enso and adds size", () => {
+    const inputAst = parseJsx("<CaMonogramIcon />")
+    const outputAst = parseJsx(
+      '<Brand variant="enso" style={{ width: "20px" }} />'
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("uses alias if it is defined", () => {
+    const inputAst = parseJsx("<CaMonogramIcon />")
+    const outputAst = parseJsx(
+      '<KzBrand variant="enso" style={{ width: "20px" }} />'
+    )
+    expect(transformInput(inputAst, "KzBrand")).toEqual(printAst(outputAst))
+  })
+
+  describe("transform existing props", () => {
+    it("removes role and changes aria-label to alt", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <CaMonogramIcon role="presentation" />
+              <CaMonogramIcon role="img" aria-label="Add something" />
+            </>
+          )
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Brand variant="enso" style={{ width: "20px" }} alt="" />
+              <Brand variant="enso" style={{ width: "20px" }} alt="Add something" />
+            </>
+          )
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves classNameOverride as is", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => <CaMonogramIcon classNameOverride="mt-16" />
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => <Brand variant="enso" style={{ width: "20px" }} classNameOverride="mt-16" />
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes inheritSize and does not add size", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => <CaMonogramIcon inheritSize />
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => <Brand variant="enso" />
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})
diff --git a/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.ts b/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.ts
new file mode 100644
index 00000000000..5a392fb5c5a
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformCaMonogramIconToBrand.ts
@@ -0,0 +1,53 @@
+import ts from "typescript"
+import {
+  createStringProp,
+  createStyleProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+export const transformCaMonogramIconToBrand = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  tagName: string = "Brand"
+): ts.Node => {
+  let shouldInheritSize = false
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "role") {
+        if (
+          attr.initializer &&
+          getPropValueText(attr.initializer) === "presentation"
+        ) {
+          acc.push(createStringProp("alt", ""))
+        }
+        return acc
+      }
+
+      if (propName === "aria-label") {
+        const value = attr.initializer && getPropValueText(attr.initializer)
+        if (value) acc.push(createStringProp("alt", value))
+        return acc
+      }
+
+      if (propName === "inheritSize") {
+        shouldInheritSize = true
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  if (!shouldInheritSize) {
+    newAttributes.unshift(createStyleProp({ width: "20px" }))
+  }
+
+  newAttributes.unshift(createStringProp("variant", "enso"))
+
+  return updateJsxElementWithNewProps(node, newAttributes, tagName)
+}
diff --git a/packages/components/codemods/upgradeIconV1/transformIcon.spec.ts b/packages/components/codemods/upgradeIconV1/transformIcon.spec.ts
new file mode 100644
index 00000000000..b3f94b4e4c0
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformIcon.spec.ts
@@ -0,0 +1,181 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { getNewIconPropsFromOldIconName } from "./getNewIconPropsFromOldIconName"
+import { transformIcon } from "./transformIcon"
+
+export const mockedTransformer =
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const oldIconName = node.tagName.getText()
+        const newIconProps = getNewIconPropsFromOldIconName(oldIconName)
+        return transformIcon(node, newIconProps!.name, newIconProps!.isFilled)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformIcon()", () => {
+  it("renames component and adds equivalent props", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <AddIcon />
+          <FlagOffIcon />
+          <FlagOffWhiteIcon />
+          <FlagOnIcon />
+          <MeatballsIcon />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Icon name="add" />
+          <Icon name="flag" />
+          <Icon name="flag" />
+          <Icon name="flag" isFilled />
+          <Icon name="more_horiz" />
+        </>
+      )
+    `)
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  describe("transform existing props", () => {
+    it("replaces role and aria-label with equivalent prop", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => (
+          <>
+            <AddIcon role="presentation" />
+            <AddIcon role="img" aria-label="Add something" />
+            <AddIcon role="img" aria-label={alt} />
+          </>
+        )
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => (
+          <>
+            <Icon name="add" isPresentational />
+            <Icon name="add" alt="Add something" />
+            <Icon name="add" alt={alt} />
+          </>
+        )
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("replaces classNameOverride with className prop", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" classNameOverride="mt-16" />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational className="mt-16" />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves inheritSize - this should throw a TS error for the consumer", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" inheritSize />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational
+        // @todo: Apply the correct --icon-size (eg. in Tailwind: className="[--icon-size:48]")
+        inheritSize />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes aria-hidden", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" aria-hidden={true} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes fontSize", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" fontSize={20} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes viewBox", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon role="presentation" viewBox="0 0 24 24" />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" isPresentational />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    describe("color prop to style", () => {
+      it("transforms a string value", () => {
+        const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <AddIcon color="grey" />
+              <AddIcon color="#0168b3" />
+            </>
+          )
+        `)
+        const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Icon name="add" style={{ color: "grey" }} />
+              <Icon name="add" style={{ color: "#0168b3" }} />
+            </>
+          )
+        `)
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+
+      it("transforms a variable", () => {
+        const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <AddIcon color={c.gray500} />
+              <AddIcon color={variableGrey} />
+            </>
+          )
+        `)
+        const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <Icon name="add" style={{ color: c.gray500 }} />
+              <Icon name="add" style={{ color: variableGrey }} />
+            </>
+          )
+        `)
+        expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+      })
+    })
+
+    it("transforms height and width to style", () => {
+      const inputAst = parseJsx(`
+        export const TestComponent = () => <AddIcon height={24} width={24} />
+      `)
+      const outputAst = parseJsx(`
+        export const TestComponent = () => <Icon name="add" style={{ height: 24, width: 24 }} />
+      `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})
diff --git a/packages/components/codemods/upgradeIconV1/transformIcon.ts b/packages/components/codemods/upgradeIconV1/transformIcon.ts
new file mode 100644
index 00000000000..7a9b33bb67b
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformIcon.ts
@@ -0,0 +1,115 @@
+import ts from "typescript"
+import {
+  createProp,
+  createStringProp,
+  createStyleProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+const propsToStyleMap = new Map<string, string>([
+  ["color", "color"],
+  ["height", "height"],
+  ["width", "width"],
+])
+
+const transformPropRole = (
+  oldValue: string
+): ts.JsxAttribute | null | undefined => {
+  switch (oldValue) {
+    case "presentation":
+      return createProp("isPresentational")
+    case "img":
+      // `role` is removed and `aria-label` transforms to `alt`
+      return null
+    default:
+      return undefined
+  }
+}
+
+/**
+ * @returns
+ * - `ts.JsxAttribute` if the prop should be transformed
+ * - `null` if the prop should be removed
+ * - `undefined` if the prop should be kept as is
+ */
+const transformIconProp = (
+  propName: string,
+  propValue: ts.JsxAttributeValue | undefined
+): ts.JsxAttribute | null | undefined => {
+  switch (propName) {
+    case "role":
+      const oldValue = propValue && getPropValueText(propValue)
+      return oldValue ? transformPropRole(oldValue) : undefined
+    case "aria-label":
+      return createProp("alt", propValue)
+    case "classNameOverride":
+      return createProp("className", propValue)
+    // `aria-hidden` is not necessary as `role` will cater for presentational icons
+    case "aria-hidden":
+    // `fontSize` did nothing for svg icons
+    case "fontSize":
+    // `viewBox` no longer relevant
+    case "viewBox":
+      return null
+    default:
+      return undefined
+  }
+}
+
+export const transformIcon = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  name: string,
+  isFilled?: boolean
+): ts.Node => {
+  const styles: Map<string, ts.JsxAttributeValue> = new Map()
+
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "inheritSize") {
+        ts.addSyntheticLeadingComment(
+          attr,
+          ts.SyntaxKind.SingleLineCommentTrivia,
+          ' @todo: Apply the correct --icon-size (eg. in Tailwind: className="[--icon-size:48]")',
+          true
+        )
+        acc.push(attr)
+        return acc
+      }
+
+      if (propsToStyleMap.has(propName)) {
+        if (attr.initializer) {
+          styles.set(propsToStyleMap.get(propName) as string, attr.initializer)
+        }
+        return acc
+      }
+
+      const newProp = transformIconProp(propName, attr.initializer)
+
+      if (newProp === null) return acc
+
+      if (newProp) {
+        acc.push(newProp)
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  if (styles.size > 0) {
+    newAttributes.unshift(createStyleProp(Object.fromEntries(styles.entries())))
+  }
+
+  if (isFilled) {
+    newAttributes.unshift(createProp("isFilled"))
+  }
+  newAttributes.unshift(createStringProp("name", name))
+
+  return updateJsxElementWithNewProps(node, newAttributes, "Icon")
+}
diff --git a/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.spec.ts b/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.spec.ts
new file mode 100644
index 00000000000..dabfca6ccac
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.spec.ts
@@ -0,0 +1,81 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { printAst } from "../utils"
+import { transformSpinnerIconToLoadingSpinner } from "./transformSpinnerIconToLoadingSpinner"
+
+export const mockedTransformer =
+  (alias?: string) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        return transformSpinnerIconToLoadingSpinner(node, alias)
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile, alias?: string): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer(alias)])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe("transformSpinnerIconToLoadingSpinner()", () => {
+  it("replaces SpinnerIcon with LoadingSpinner and adds size and accessibilityLabel", () => {
+    const inputAst = parseJsx("<SpinnerIcon />")
+    const outputAst = parseJsx(
+      '<LoadingSpinner size="xs" accessibilityLabel="Loading" />'
+    )
+    expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("uses alias if it is defined", () => {
+    const inputAst = parseJsx("<SpinnerIcon />")
+    const outputAst = parseJsx(
+      '<KzLoadingSpinner size="xs" accessibilityLabel="Loading" />'
+    )
+    expect(transformInput(inputAst, "KzLoadingSpinner")).toEqual(
+      printAst(outputAst)
+    )
+  })
+
+  describe("transform existing props", () => {
+    it("removes role and changes aria-label to accessibilityLabel or fallback", () => {
+      const inputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <SpinnerIcon role="presentation" />
+              <SpinnerIcon role="img" aria-label="I am loading" />
+            </>
+          )
+        `)
+      const outputAst = parseJsx(`
+          export const TestComponent = () => (
+            <>
+              <LoadingSpinner size="xs" accessibilityLabel="Loading" />
+              <LoadingSpinner size="xs" accessibilityLabel="I am loading" />
+            </>
+          )
+        `)
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("leaves classNameOverride as is", () => {
+      const inputAst = parseJsx('<SpinnerIcon classNameOverride="mt-16" />')
+      const outputAst = parseJsx(
+        '<LoadingSpinner size="xs" accessibilityLabel="Loading" classNameOverride="mt-16" />'
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+
+    it("removes viewBox", () => {
+      const inputAst = parseJsx('<SpinnerIcon viewBox="0 0 100 100" />')
+      const outputAst = parseJsx(
+        '<LoadingSpinner size="xs" accessibilityLabel="Loading" />'
+      )
+      expect(transformInput(inputAst)).toEqual(printAst(outputAst))
+    })
+  })
+})
diff --git a/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.ts b/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.ts
new file mode 100644
index 00000000000..e8c4bdebb7d
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/transformSpinnerIconToLoadingSpinner.ts
@@ -0,0 +1,41 @@
+import ts from "typescript"
+import {
+  createStringProp,
+  getPropValueText,
+  updateJsxElementWithNewProps,
+} from "../utils"
+
+export const transformSpinnerIconToLoadingSpinner = (
+  node: ts.JsxOpeningElement | ts.JsxSelfClosingElement,
+  tagName: string = "LoadingSpinner"
+): ts.Node => {
+  let accessibilityLabel = "Loading"
+  const newAttributes = node.attributes.properties.reduce<
+    ts.JsxAttributeLike[]
+  >((acc, attr) => {
+    if (ts.isJsxAttribute(attr)) {
+      const propName = attr.name.getText()
+
+      if (propName === "role") return acc
+      if (propName === "viewBox") return acc
+
+      if (propName === "aria-label") {
+        const value = attr.initializer && getPropValueText(attr.initializer)
+        if (value) {
+          accessibilityLabel = value
+        }
+        return acc
+      }
+    }
+
+    acc.push(attr)
+    return acc
+  }, [])
+
+  newAttributes.unshift(
+    createStringProp("accessibilityLabel", accessibilityLabel)
+  )
+  newAttributes.unshift(createStringProp("size", "xs"))
+
+  return updateJsxElementWithNewProps(node, newAttributes, tagName)
+}
diff --git a/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts b/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
new file mode 100644
index 00000000000..1d8f59a57fe
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/upgradeIconV1.spec.ts
@@ -0,0 +1,306 @@
+import { parseJsx } from "../__tests__/utils"
+import {
+  transformSource,
+  printAst,
+  TransformConfig,
+  ImportModuleNameTagsMap,
+} from "../utils"
+import { upgradeIconV1 } from "./upgradeIconV1"
+
+const transformIcons = (
+  sourceFile: TransformConfig["sourceFile"],
+  tagNames: ImportModuleNameTagsMap
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: upgradeIconV1,
+    tagName: tagNames,
+  })
+
+describe("upgradeIconV1()", () => {
+  describe("CaMonogramIcon to Brand", () => {
+    const transformedBrandProps = 'variant="enso" style={{ width: "20px" }}'
+
+    it("updates import from CaMonogramIcon to Brand", () => {
+      const inputAst = parseJsx(`
+        import { CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([["CaMonogramIcon", "CaMonogramIcon"]]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates import from CaMonogramIcon using alias to Brand", () => {
+      const inputAst = parseJsx(`
+        import { CaMonogramIcon as LogoAlias } from "@kaizen/components"
+        export const TestComponent = () => <LogoAlias />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["LogoAlias", "CaMonogramIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add another Brand import if it is already imported", () => {
+      const inputAst = parseJsx(`
+        import { Brand, CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand } from "@kaizen/components"
+        export const TestComponent = () => <Brand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["Brand", "Brand"],
+                ["CaMonogramIcon", "CaMonogramIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("uses Brand alias for an existing import", () => {
+      const inputAst = parseJsx(`
+        import { Brand as KzBrand, CaMonogramIcon } from "@kaizen/components"
+        export const TestComponent = () => <CaMonogramIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { Brand as KzBrand } from "@kaizen/components"
+        export const TestComponent = () => <KzBrand ${transformedBrandProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["KzBrand", "Brand"],
+                ["CaMonogramIcon", "CaMonogramIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  describe("SpinnerIcon to LoadingSpinner", () => {
+    const transformedLoadingSpinnerProps =
+      'size="xs" accessibilityLabel="Loading"'
+
+    it("updates import from SpinnerIcon to LoadingSpinner", () => {
+      const inputAst = parseJsx(`
+        import { SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["SpinnerIcon", "SpinnerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates import from SpinnerIcon using alias to LoadingSpinner", () => {
+      const inputAst = parseJsx(`
+        import { SpinnerIcon as LogoAlias } from "@kaizen/components"
+        export const TestComponent = () => <LogoAlias />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            ["@kaizen/components", new Map([["LogoAlias", "SpinnerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add another LoadingSpinner import if it is already imported", () => {
+      const inputAst = parseJsx(`
+        import { LoadingSpinner, SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <LoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["LoadingSpinner", "LoadingSpinner"],
+                ["SpinnerIcon", "SpinnerIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("uses LoadingSpinner alias for an existing import", () => {
+      const inputAst = parseJsx(`
+        import { LoadingSpinner as KzLoadingSpinner, SpinnerIcon } from "@kaizen/components"
+        export const TestComponent = () => <SpinnerIcon />
+      `)
+      const outputAst = parseJsx(`
+        import { LoadingSpinner as KzLoadingSpinner } from "@kaizen/components"
+        export const TestComponent = () => <KzLoadingSpinner ${transformedLoadingSpinnerProps} />
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["KzLoadingSpinner", "LoadingSpinner"],
+                ["SpinnerIcon", "SpinnerIcon"],
+              ]),
+            ],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  it("transforms old Icon", () => {
+    const inputAst = parseJsx(`
+      import { FlagOnIcon } from "@kaizen/components"
+      export const TestComponent = () => <FlagOnIcon />
+    `)
+    const outputAst = parseJsx(`
+      import { Icon } from "@kaizen/components/future"
+      export const TestComponent = () => <Icon name="flag" isFilled />
+    `)
+    expect(
+      transformIcons(
+        inputAst,
+        new Map([
+          ["@kaizen/components", new Map([["FlagOnIcon", "FlagOnIcon"]])],
+        ])
+      )
+    ).toEqual(printAst(outputAst))
+  })
+
+  it("transforms aliased old Icon", () => {
+    const inputAst = parseJsx(`
+      import { HamburgerIcon as IconAlias } from "@kaizen/components"
+      export const TestComponent = () => <IconAlias />
+    `)
+    const outputAst = parseJsx(`
+      import { Icon } from "@kaizen/components/future"
+      export const TestComponent = () => <Icon name="menu" />
+    `)
+    expect(
+      transformIcons(
+        inputAst,
+        new Map([
+          ["@kaizen/components", new Map([["IconAlias", "HamburgerIcon"]])],
+        ])
+      )
+    ).toEqual(printAst(outputAst))
+  })
+
+  describe("import statements", () => {
+    it("does not update import of components which are not Icons", () => {
+      const inputAst = parseJsx(`
+        import { AddIcon, Card } from "@kaizen/components"
+        export const TestComponent = () => <Card><AddIcon /></Card>
+      `)
+      const outputAst = parseJsx(`
+        import { Card } from "@kaizen/components"
+        import { Icon } from "@kaizen/components/future"
+        export const TestComponent = () => <Card><Icon name="add" /></Card>
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([["@kaizen/components", new Map([["AddIcon", "AddIcon"]])]])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not update import of components which are not from KAIO", () => {
+      const inputAst = parseJsx(`
+        import { AddIcon, HamburgerIcon as IconAlias } from "@kaizen/components"
+        import { HamburgerIcon as HamHam } from "somewhere-else"
+        export const TestComponent = () => (
+          <>
+            <AddIcon />
+            <IconAlias />
+            <HamHam />
+          </>
+        )
+      `)
+      const outputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+        import { HamburgerIcon as HamHam } from "somewhere-else"
+        export const TestComponent = () => (
+          <>
+            <Icon name="add" />
+            <Icon name="menu" />
+            <HamHam />
+          </>
+        )
+      `)
+      expect(
+        transformIcons(
+          inputAst,
+          new Map([
+            [
+              "@kaizen/components",
+              new Map([
+                ["AddIcon", "AddIcon"],
+                ["IconAlias", "HamburgerIcon"],
+              ]),
+            ],
+            ["somewhere-else", new Map([["HamHam", "HamburgerIcon"]])],
+          ])
+        )
+      ).toEqual(printAst(outputAst))
+    })
+  })
+})
diff --git a/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts b/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
new file mode 100644
index 00000000000..670b4e1920e
--- /dev/null
+++ b/packages/components/codemods/upgradeIconV1/upgradeIconV1.ts
@@ -0,0 +1,94 @@
+import ts from "typescript"
+import {
+  setImportToRemove,
+  ImportModuleNameTagsMap,
+  updateKaioImports,
+  UpdateKaioImportsArgs,
+  setImportToAdd,
+} from "../utils"
+import { getNewIconPropsFromOldIconName } from "./getNewIconPropsFromOldIconName"
+import { transformCaMonogramIconToBrand } from "./transformCaMonogramIconToBrand"
+import { transformIcon } from "./transformIcon"
+import { transformSpinnerIconToLoadingSpinner } from "./transformSpinnerIconToLoadingSpinner"
+
+const reverseStringMap = <Key extends string, Value extends string>(
+  map: Map<Key, Value>
+): Map<Value, Key> => {
+  const reverseMap = new Map<Value, Key>()
+  map.forEach((value, key) => reverseMap.set(value, key))
+  return reverseMap
+}
+
+export const upgradeIconV1 =
+  (context: ts.TransformationContext, tagNames: ImportModuleNameTagsMap) =>
+  (rootNode: ts.Node): ts.Node => {
+    const oldImportSource = "@kaizen/components"
+
+    const kaioTagNames = tagNames.get(oldImportSource)
+    if (!kaioTagNames) return rootNode
+
+    const componentToAliasMap = reverseStringMap(kaioTagNames)
+    const importsToRemove =
+      new Map() satisfies UpdateKaioImportsArgs["importsToRemove"]
+    const importsToAdd =
+      new Map() satisfies UpdateKaioImportsArgs["importsToAdd"]
+
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        const tagName = node.tagName.getText()
+        const kaioComponentName = kaioTagNames.get(tagName)
+
+        if (kaioComponentName === "CaMonogramIcon") {
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          const alias = componentToAliasMap.get("Brand") as string
+
+          if (!kaioTagNames.has(alias)) {
+            setImportToAdd(importsToAdd, "@kaizen/components", {
+              componentName: "Brand",
+              alias: alias !== "Brand" ? alias : undefined,
+            })
+          }
+          return transformCaMonogramIconToBrand(node, alias)
+        }
+
+        if (kaioComponentName === "SpinnerIcon") {
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          const alias = componentToAliasMap.get("LoadingSpinner") as string
+
+          if (!kaioTagNames.has(alias)) {
+            setImportToAdd(importsToAdd, "@kaizen/components", {
+              componentName: "LoadingSpinner",
+              alias: alias !== "LoadingSpinner" ? alias : undefined,
+            })
+          }
+          return transformSpinnerIconToLoadingSpinner(node, alias)
+        }
+
+        if (kaioComponentName) {
+          const newIconProps = getNewIconPropsFromOldIconName(kaioComponentName)
+          if (newIconProps === undefined) {
+            // eslint-disable-next-line no-console
+            console.info(
+              "SKIPPED - No new icon equivalent found for",
+              node.tagName.getText()
+            )
+            return node
+          }
+
+          setImportToRemove(importsToRemove, oldImportSource, kaioComponentName)
+          setImportToAdd(importsToAdd, "@kaizen/components/future", {
+            componentName: "Icon",
+          })
+
+          return transformIcon(node, newIconProps.name, newIconProps.isFilled)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    const node = ts.visitNode(rootNode, visit)
+
+    return updateKaioImports({
+      importsToRemove: importsToRemove.size > 0 ? importsToRemove : undefined,
+      importsToAdd: importsToAdd.size > 0 ? importsToAdd : undefined,
+    })(context)(node)
+  }
diff --git a/packages/components/codemods/utils/createProp.spec.ts b/packages/components/codemods/utils/createProp.spec.ts
new file mode 100644
index 00000000000..3ca0f29484d
--- /dev/null
+++ b/packages/components/codemods/utils/createProp.spec.ts
@@ -0,0 +1,83 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils/parseJsx"
+import { createStyleProp } from "./createProp"
+import { printAst } from "./printAst"
+import { TransformConfig, transformSource } from "./transformSource"
+import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
+
+export const mockedTransformer =
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === "Pancakes") {
+          const newAttributes = node.attributes.properties.map(attr => {
+            if (ts.isJsxAttribute(attr)) {
+              if (attr.name.getText() === "replaceWithExistingValue") {
+                return createStyleProp({ width: attr.initializer! })
+              }
+
+              if (attr.name.getText() === "replaceWithStringValue") {
+                return createStyleProp({ width: "100px" })
+              }
+
+              if (attr.name.getText() === "replaceWithNumberValue") {
+                return createStyleProp({ width: 100 })
+              }
+            }
+            return attr
+          })
+          return updateJsxElementWithNewProps(node, newAttributes)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const testCreateStyleProp = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: mockedTransformer,
+    tagName: "Pancakes",
+  })
+
+describe("createStyleProp()", () => {
+  it("creates a style prop with a string value", () => {
+    const inputAst = parseJsx("<Pancakes replaceWithStringValue />")
+    const outputAst = parseJsx('<Pancakes style={{ width: "100px" }} />')
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("creates a style prop with a number value", () => {
+    const inputAst = parseJsx("<Pancakes replaceWithNumberValue />")
+    const outputAst = parseJsx("<Pancakes style={{ width: 100 }} />")
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("creates a style prop with a pre-existing value", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes replaceWithExistingValue="20px" />
+          <Pancakes replaceWithExistingValue={100} />
+          <Pancakes replaceWithExistingValue={variable} />
+          <Pancakes replaceWithExistingValue={variable.nested} />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes style={{ width: "20px" }} />
+          <Pancakes style={{ width: 100 }} />
+          <Pancakes style={{ width: variable }} />
+          <Pancakes style={{ width: variable.nested }} />
+        </>
+      )
+    `)
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+})
diff --git a/packages/components/codemods/utils/createProp.ts b/packages/components/codemods/utils/createProp.ts
new file mode 100644
index 00000000000..9904262a210
--- /dev/null
+++ b/packages/components/codemods/utils/createProp.ts
@@ -0,0 +1,51 @@
+import ts from "typescript"
+
+export const createProp = (
+  name: string,
+  value?: ts.JsxAttributeValue | undefined
+): ts.JsxAttribute =>
+  ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+
+export const createStringProp = (
+  name: string,
+  value: string
+): ts.JsxAttribute => createProp(name, ts.factory.createStringLiteral(value))
+
+// A util that creates a style prop with the given attributes
+// ie. adding style={{ width: "100px" }}
+export const createStyleProp = (
+  attributes: Record<string, string | number | ts.JsxAttributeValue>
+): ts.JsxAttribute => {
+  const styles = Object.keys(attributes).map(name => {
+    const value = attributes[name]
+    if (typeof value === "string") {
+      return ts.factory.createPropertyAssignment(
+        name,
+        ts.factory.createStringLiteral(value)
+      )
+    }
+
+    if (typeof value === "number") {
+      return ts.factory.createPropertyAssignment(
+        name,
+        ts.factory.createNumericLiteral(value)
+      )
+    }
+
+    if (ts.isJsxExpression(value)) {
+      if (value.expression) {
+        return ts.factory.createPropertyAssignment(name, value.expression)
+      }
+    }
+
+    return ts.factory.createPropertyAssignment(name, value)
+  })
+
+  return createProp(
+    "style",
+    ts.factory.createJsxExpression(
+      undefined,
+      ts.factory.createObjectLiteralExpression(styles)
+    )
+  )
+}
diff --git a/packages/components/codemods/utils/getKaioTagName.spec.ts b/packages/components/codemods/utils/getKaioTagName.spec.ts
new file mode 100644
index 00000000000..397627488f0
--- /dev/null
+++ b/packages/components/codemods/utils/getKaioTagName.spec.ts
@@ -0,0 +1,85 @@
+import { parseJsx } from "../__tests__/utils"
+import { getKaioTagName, getKaioTagNamesByRegex } from "./getKaioTagName"
+
+describe("getKaioTagName", () => {
+  it("returns the import name if it matches the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/components"')
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe("Well")
+  })
+
+  it("returns the import alias if it matches the target specifier", () => {
+    const input = parseJsx(
+      'import { Well as KaizenWell } from "@kaizen/components"'
+    )
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe("KaizenWell")
+  })
+
+  it("returns undefined if there is no match to the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/well"')
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe(undefined)
+  })
+})
+
+describe("getKaioTagNamesByRegex", () => {
+  it("returns the import names if it matches the regex target specifier", () => {
+    const input = parseJsx(
+      'import { AddIcon, ArrowDownIcon, Well } from "@kaizen/components"'
+    )
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          "@kaizen/components",
+          new Map([
+            ["AddIcon", "AddIcon"],
+            ["ArrowDownIcon", "ArrowDownIcon"],
+          ]),
+        ],
+      ])
+    )
+  })
+
+  it("returns the import alias if it matches the target specifier", () => {
+    const input = parseJsx(
+      'import { AddIcon as KzAddIcon, ArrowDownIcon, Well } from "@kaizen/components"'
+    )
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          "@kaizen/components",
+          new Map([
+            ["KzAddIcon", "AddIcon"],
+            ["ArrowDownIcon", "ArrowDownIcon"],
+          ]),
+        ],
+      ])
+    )
+  })
+
+  it("returns matching import names from different KAIO imports", () => {
+    const input = parseJsx(`
+      import { AddIcon, Well } from "@kaizen/components"
+      import { Icon } from "@kaizen/components/future"
+    `)
+    const tagNames = getKaioTagNamesByRegex(input, "Icon$")
+    expect(tagNames).toEqual(
+      new Map([
+        ["@kaizen/components", new Map([["AddIcon", "AddIcon"]])],
+        ["@kaizen/components/future", new Map([["Icon", "Icon"]])],
+      ])
+    )
+  })
+
+  it("returns undefined if there is no match to the target specifier", () => {
+    const input = parseJsx(`
+      import { Well } from "@kaizen/components"
+      import { AddIcon } from "@kaizen/icons"
+    `)
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toBe(undefined)
+  })
+})
diff --git a/packages/components/codemods/utils/getKaioTagName.ts b/packages/components/codemods/utils/getKaioTagName.ts
new file mode 100644
index 00000000000..0f99ead0d8f
--- /dev/null
+++ b/packages/components/codemods/utils/getKaioTagName.ts
@@ -0,0 +1,129 @@
+import ts from "typescript"
+
+const getKaioNamedImports = (
+  visitedNode: ts.Node
+):
+  | {
+      importModuleName: string
+      namedImports: ts.NodeArray<ts.ImportSpecifier>
+    }
+  | undefined => {
+  if (ts.isImportDeclaration(visitedNode)) {
+    const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral)
+      .text
+    if (moduleSpecifier.includes("@kaizen/components")) {
+      const namedBindings = visitedNode.importClause?.namedBindings
+      if (namedBindings && ts.isNamedImports(namedBindings)) {
+        return {
+          importModuleName: moduleSpecifier,
+          namedImports: namedBindings.elements,
+        }
+      }
+    }
+  }
+
+  return undefined
+}
+
+type ImportSpecifierNames = { tagName: string; originalName: string }
+
+const getNamesFromSpecifier = (
+  importSpecifier: ts.ImportSpecifier
+): ImportSpecifierNames => {
+  const tagName = importSpecifier.name.getText()
+  const originalName = importSpecifier.propertyName
+    ? importSpecifier.propertyName.getText()
+    : tagName
+
+  return { tagName, originalName }
+}
+
+/**
+ * Recurses through AST to find the import name or alias in KAIO that matches the provided component name.
+ *
+ * @returns string | undefined
+ * - `string` the import name or alias found
+ * - `undefined` no import that matches the target
+ */
+export const getKaioTagName = (
+  node: ts.Node,
+  importSpecifierTarget: string
+): string | undefined => {
+  let alias: string | undefined
+
+  const visitNode = (visitedNode: ts.Node): string | undefined => {
+    const kaioNamedImports = getKaioNamedImports(visitedNode)
+
+    if (!kaioNamedImports) {
+      return ts.forEachChild(visitedNode, visitNode) || undefined
+    }
+
+    kaioNamedImports.namedImports.find(importSpecifier => {
+      const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
+
+      if (originalName === importSpecifierTarget) {
+        alias = tagName
+        return true
+      }
+
+      return false
+    })
+
+    return alias
+  }
+
+  return visitNode(node)
+}
+
+// Key is the tag name (component name or alias)
+// Value is the original component name
+type TagNamesMap = Map<string, string>
+// Key is the import module name (eg. `@kaizen/components/future`)
+export type ImportModuleNameTagsMap = Map<string, TagNamesMap>
+
+/**
+ * Recurses through AST to find all the import names or aliases in KAIO that match the provided regex.
+ *
+ * @returns Map<string, Map<string, string>> | undefined
+ * - `Map<string, Map<string, string>>` = Map<importModuleName, Map<tagName, originalName>>
+ *   - `importModuleName` = the module name of the KAIO import (eg. `@kaizen/components/future`)
+ *   - `tagName` = the component name or alias (eg. `KaizenWell`)
+ *   - `originalName` = the original component name (eg. `Well`)
+ * - `undefined` no imports that match the target
+ */
+export const getKaioTagNamesByRegex = (
+  node: ts.Node,
+  importSpecifierPattern: RegExp | string
+): ImportModuleNameTagsMap | undefined => {
+  const tagsByImportModuleName = new Map() as ImportModuleNameTagsMap
+
+  const visitNode = (visitedNode: ts.Node): ts.Node | undefined => {
+    const kaioNamedImports = getKaioNamedImports(visitedNode)
+
+    if (!kaioNamedImports) {
+      return ts.forEachChild(visitedNode, visitNode)
+    }
+
+    const tags = new Map() as TagNamesMap
+    kaioNamedImports.namedImports.forEach(importSpecifier => {
+      const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
+
+      if (new RegExp(importSpecifierPattern).test(originalName)) {
+        tags.set(tagName, originalName)
+      }
+    })
+
+    if (tags.size > 0) {
+      tagsByImportModuleName.set(
+        kaioNamedImports.importModuleName,
+        new Map(tags)
+      )
+    }
+
+    return ts.forEachChild(visitedNode, visitNode)
+  }
+
+  visitNode(node)
+
+  return tagsByImportModuleName.size === 0 ? undefined : tagsByImportModuleName
+}
diff --git a/packages/components/codemods/utils/getTagName.spec.ts b/packages/components/codemods/utils/getTagName.spec.ts
deleted file mode 100644
index 708f220b918..00000000000
--- a/packages/components/codemods/utils/getTagName.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { parseJsx } from "../__tests__/utils"
-import { getTagName } from "./getTagName"
-
-describe("getTagName", () => {
-  it("returns the import name if it matches the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/components"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("Well")
-  })
-
-  it("returns the import alias if it matches the target specifier", () => {
-    const input = parseJsx(
-      'import { Well as KaizenWell } from "@kaizen/components"'
-    )
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe("KaizenWell")
-  })
-
-  it("returns undefined if there is no match to the target specifier", () => {
-    const input = parseJsx('import { Well } from "@kaizen/well"')
-    const tagName = getTagName(input, "Well")
-    expect(tagName).toBe(undefined)
-  })
-})
diff --git a/packages/components/codemods/utils/getTagName.ts b/packages/components/codemods/utils/getTagName.ts
deleted file mode 100644
index a82210fd57f..00000000000
--- a/packages/components/codemods/utils/getTagName.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import ts from "typescript"
-
-/** Recurses through AST to find the import specifier name and check it against the `importSpecifierTarget`. If found, it will return the import name or alias, otherwise will return `undefined` */
-export const getTagName = (
-  node: ts.Node,
-  importSpecifierTarget: string
-): string | undefined => {
-  let alias: string | undefined
-
-  const visitNode = (visitedNode: ts.Node): string | undefined => {
-    if (ts.isImportDeclaration(visitedNode)) {
-      const moduleSpecifier = visitedNode.moduleSpecifier.getText()
-      if (moduleSpecifier.includes("@kaizen/components")) {
-        const namedBindings = visitedNode.importClause?.namedBindings
-        if (namedBindings && ts.isNamedImports(namedBindings)) {
-          namedBindings.elements.forEach(importSpecifier => {
-            const importName = importSpecifier.name.getText()
-            const tagName = importSpecifier.propertyName
-              ? importSpecifier.propertyName.getText()
-              : importName
-            if (tagName === importSpecifierTarget) {
-              alias = importName
-            }
-          })
-        }
-      }
-    }
-    return alias || ts.forEachChild(visitedNode, visitNode) || undefined
-  }
-
-  return visitNode(node)
-}
diff --git a/packages/components/codemods/utils/index.ts b/packages/components/codemods/utils/index.ts
index 39c46e4bf94..00ad0b0b5b4 100644
--- a/packages/components/codemods/utils/index.ts
+++ b/packages/components/codemods/utils/index.ts
@@ -1,7 +1,9 @@
+export * from "./createProp"
 export * from "./getPropValueText"
-export * from "./getTagName"
+export * from "./getKaioTagName"
 export * from "./migrateStringProp"
 export * from "./printAst"
 export * from "./transformComponentsInDir"
 export * from "./transformSource"
+export * from "./updateKaioImports"
 export * from "./updateJsxElementWithNewProps"
diff --git a/packages/components/codemods/utils/transformComponentsInDir.ts b/packages/components/codemods/utils/transformComponentsInDir.ts
index 6a759a9e068..d2ab22e12b0 100644
--- a/packages/components/codemods/utils/transformComponentsInDir.ts
+++ b/packages/components/codemods/utils/transformComponentsInDir.ts
@@ -1,23 +1,23 @@
 import fs from "fs"
 import path from "path"
 import ts from "typescript"
-import { transformSource, getTagName, TransformConfig } from "."
+import { transformSource, getKaioTagName, TransformConfig } from "."
 
-/** Walks the directory and runs the runs the AST transformer on the given component name */
-export const transformComponentsInDir = (
+export const traverseDir = (
   dir: string,
-  transformer: TransformConfig["astTransformer"],
-  componentName: string
+  transformFile: (componentFilePath: string, sourceFile: ts.SourceFile) => void
 ): void => {
   if (dir.includes("node_modules")) {
     return
   }
 
   const files = fs.readdirSync(dir)
+
   files.forEach(file => {
     const fullPath = path.join(dir, file)
+
     if (fs.statSync(fullPath).isDirectory()) {
-      transformComponentsInDir(fullPath, transformer, componentName)
+      traverseDir(fullPath, transformFile)
     } else if (fullPath.endsWith(".tsx")) {
       const source = fs.readFileSync(fullPath, "utf8")
       const sourceFile = ts.createSourceFile(
@@ -26,17 +26,33 @@ export const transformComponentsInDir = (
         ts.ScriptTarget.Latest,
         true
       )
-      const tagName = getTagName(sourceFile, componentName)
 
-      if (tagName) {
-        const updatedSourceFile = transformSource({
-          sourceFile,
-          astTransformer: transformer,
-          tagName,
-        })
-
-        fs.writeFileSync(fullPath, updatedSourceFile, "utf8")
-      }
+      transformFile(fullPath, sourceFile)
     }
   })
 }
+
+/** Walks the directory and runs the AST transformer on the given component name */
+export const transformComponentsInDir = (
+  dir: string,
+  transformer: TransformConfig["astTransformer"],
+  componentName: string
+): void => {
+  const transformFile = (
+    componentFilePath: string,
+    sourceFile: ts.SourceFile
+  ): void => {
+    const tagName = getKaioTagName(sourceFile, componentName)
+    if (tagName) {
+      const updatedSourceFile = transformSource({
+        sourceFile,
+        astTransformer: transformer,
+        tagName,
+      })
+
+      fs.writeFileSync(componentFilePath, updatedSourceFile, "utf8")
+    }
+  }
+
+  traverseDir(dir, transformFile)
+}
diff --git a/packages/components/codemods/utils/transformSource.ts b/packages/components/codemods/utils/transformSource.ts
index 87916e1f6b2..96756fc3f53 100644
--- a/packages/components/codemods/utils/transformSource.ts
+++ b/packages/components/codemods/utils/transformSource.ts
@@ -1,21 +1,26 @@
 import ts from "typescript"
+import { ImportModuleNameTagsMap } from "./getKaioTagName"
 import { printAst } from "./printAst"
 
-export type TransformConfig = {
+export type TransformConfig<
+  TagName extends string | ImportModuleNameTagsMap = string,
+> = {
   sourceFile: ts.SourceFile
   astTransformer: (
     context: ts.TransformationContext,
-    tagName: string
+    tagName: TagName
   ) => (rootNode: ts.Node) => ts.Node
-  tagName: string
+  tagName: TagName
 }
 
 /** Transforms the source file with the transformer and target import alias provided */
-export const transformSource = ({
+export const transformSource = <
+  TagName extends string | ImportModuleNameTagsMap,
+>({
   sourceFile,
   astTransformer,
   tagName,
-}: TransformConfig): string => {
+}: TransformConfig<TagName>): string => {
   const result = ts.transform(sourceFile, [
     context => astTransformer(context, tagName),
   ])
diff --git a/packages/components/codemods/utils/updateJsxElementWithNewProps.ts b/packages/components/codemods/utils/updateJsxElementWithNewProps.ts
index 74a279ece46..0d71c404e0b 100644
--- a/packages/components/codemods/utils/updateJsxElementWithNewProps.ts
+++ b/packages/components/codemods/utils/updateJsxElementWithNewProps.ts
@@ -2,19 +2,20 @@ import ts from "typescript"
 
 export const updateJsxElementWithNewProps = (
   node: ts.Node,
-  newAttributes: ts.JsxAttributeLike[]
+  newAttributes: ts.JsxAttributeLike[],
+  newTagName?: string
 ): ts.Node => {
   if (ts.isJsxOpeningElement(node)) {
     return ts.factory.updateJsxOpeningElement(
       node,
-      node.tagName,
+      newTagName ? ts.factory.createIdentifier(newTagName) : node.tagName,
       node.typeArguments,
       ts.factory.createJsxAttributes(newAttributes)
     )
   } else if (ts.isJsxSelfClosingElement(node)) {
     return ts.factory.updateJsxSelfClosingElement(
       node,
-      node.tagName,
+      newTagName ? ts.factory.createIdentifier(newTagName) : node.tagName,
       node.typeArguments,
       ts.factory.createJsxAttributes(newAttributes)
     )
diff --git a/packages/components/codemods/utils/updateKaioImports.spec.ts b/packages/components/codemods/utils/updateKaioImports.spec.ts
new file mode 100644
index 00000000000..7ca1fae6659
--- /dev/null
+++ b/packages/components/codemods/utils/updateKaioImports.spec.ts
@@ -0,0 +1,223 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils"
+import { updateKaioImports, UpdateKaioImportsArgs } from "./updateKaioImports"
+import { printAst } from "."
+
+const transformInput =
+  (sourceFile: ts.SourceFile) =>
+  (imports: UpdateKaioImportsArgs): string => {
+    const result = ts.transform(sourceFile, [updateKaioImports(imports)])
+    const transformedSource = result.transformed[0] as ts.SourceFile
+    return printAst(transformedSource)
+  }
+
+describe("updateKaioImports()", () => {
+  describe("remove imports", () => {
+    it("removes listed named imports", () => {
+      const inputAst = parseJsx(`
+        import { Card, Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("removes listed named aliased imports", () => {
+      const inputAst = parseJsx(`
+        import { Card as KzCard, Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("removes import statement when all named imports are removed", () => {
+      const inputAst = parseJsx(`
+        import { Card } from "@kaizen/components"
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does nothing if the import does not exist", () => {
+      const inputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToRemove: new Map([["@kaizen/components", new Set(["Card"])]]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+  })
+
+  describe("add imports", () => {
+    it("creates a new import declaration for new imports", () => {
+      const inputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+        import { Card } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("creates a new import declaration for new aliased imports", () => {
+      const inputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+      `)
+      const outputAst = parseJsx(`
+        import { Well } from "@kaizen/components"
+        import { Card as KzCard } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card", alias: "KzCard" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("does not add a new named import if it already exists", () => {
+      const inputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Icon } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Icon", { componentName: "Icon" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    it("updates existing import declaration with new imports", () => {
+      const inputAst = parseJsx(`
+        import { Select } from "@kaizen/components/future"
+      `)
+      const outputAst = parseJsx(`
+        import { Select, Card } from "@kaizen/components/future"
+      `)
+      expect(
+        transformInput(inputAst)({
+          importsToAdd: new Map([
+            [
+              "@kaizen/components/future",
+              new Map([["Card", { componentName: "Card" }]]),
+            ],
+          ]),
+        })
+      ).toEqual(printAst(outputAst))
+    })
+
+    describe("insert position", () => {
+      it("inserts the new import below @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        const outputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components"
+          import { Card } from "@kaizen/components/future"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+
+      it("inserts the new import below the first subpath of @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components/v1"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        const outputAst = parseJsx(`
+          import React from "react"
+          import { Well } from "@kaizen/components/v1"
+          import { Card } from "@kaizen/components/future"
+          import styles from "@kaizen/components/dist/styles.css"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+
+      it("inserts at the top of the file if no pre-existing import of @kaizen/components", () => {
+        const inputAst = parseJsx(`
+          import React from "react"
+        `)
+        const outputAst = parseJsx(`
+          import { Card } from "@kaizen/components/future"
+          import React from "react"
+        `)
+        expect(
+          transformInput(inputAst)({
+            importsToAdd: new Map([
+              [
+                "@kaizen/components/future",
+                new Map([["Card", { componentName: "Card" }]]),
+              ],
+            ]),
+          })
+        ).toEqual(printAst(outputAst))
+      })
+    })
+  })
+})
diff --git a/packages/components/codemods/utils/updateKaioImports.ts b/packages/components/codemods/utils/updateKaioImports.ts
new file mode 100644
index 00000000000..2d88e9a86ad
--- /dev/null
+++ b/packages/components/codemods/utils/updateKaioImports.ts
@@ -0,0 +1,233 @@
+import ts from "typescript"
+
+type ImportsToRemove = Set<string>
+
+const removeNamedImports = (
+  factory: ts.NodeFactory,
+  node: ts.ImportDeclaration,
+  importsToRemove: ImportsToRemove
+): ts.ImportDeclaration | null => {
+  const namedBindings = node.importClause?.namedBindings
+  if (namedBindings && ts.isNamedImports(namedBindings)) {
+    const namedImports = namedBindings.elements.filter(importSpecifier => {
+      const componentName =
+        importSpecifier.propertyName?.getText() ??
+        importSpecifier.name.getText()
+      return !importsToRemove.has(componentName)
+    })
+
+    if (namedImports.length === 0) return null
+
+    return factory.updateImportDeclaration(
+      node,
+      node.modifiers,
+      factory.updateImportClause(
+        node.importClause,
+        node.importClause.isTypeOnly,
+        node.importClause.name,
+        factory.updateNamedImports(namedBindings, namedImports)
+      ),
+      node.moduleSpecifier,
+      node.attributes
+    )
+  }
+
+  return node
+}
+
+type NewImportAttributes = { componentName: string; alias?: string }
+type ImportsToAdd = Map<string, NewImportAttributes>
+
+const createImportDeclaration = (
+  factory: ts.NodeFactory,
+  importsToAdd: ImportsToAdd,
+  moduleSpecifier: string
+): ts.ImportDeclaration => {
+  const namedImports = Array.from(importsToAdd.values()).map(
+    ({ componentName, alias }) =>
+      factory.createImportSpecifier(
+        false,
+        alias ? factory.createIdentifier(componentName) : undefined,
+        factory.createIdentifier(alias ?? componentName)
+      )
+  )
+
+  return factory.createImportDeclaration(
+    undefined,
+    factory.createImportClause(
+      false,
+      undefined,
+      factory.createNamedImports(namedImports)
+    ),
+    factory.createStringLiteral(moduleSpecifier)
+  )
+}
+
+const updateNamedImports = (
+  factory: ts.NodeFactory,
+  node: ts.ImportDeclaration,
+  importsToAdd: ImportsToAdd
+): ts.ImportDeclaration => {
+  if (!node.importClause) return node
+
+  const existingNamedImportNames = new Set<string>()
+  const importSpecifiers: ts.ImportSpecifier[] = []
+
+  const namedBindings = node.importClause.namedBindings
+  if (namedBindings && ts.isNamedImports(namedBindings)) {
+    namedBindings.elements.forEach(importSpecifier => {
+      existingNamedImportNames.add(importSpecifier.name.getText())
+      importSpecifiers.push(importSpecifier)
+    })
+  }
+
+  Array.from(importsToAdd.values()).forEach(({ alias, componentName }) => {
+    const newImport = factory.createImportSpecifier(
+      false,
+      alias ? factory.createIdentifier(componentName) : undefined,
+      factory.createIdentifier(alias ?? componentName)
+    )
+
+    if (!existingNamedImportNames.has(componentName)) {
+      importSpecifiers.push(newImport)
+    }
+  })
+
+  return factory.updateImportDeclaration(
+    node,
+    node.modifiers,
+    factory.updateImportClause(
+      node.importClause,
+      node.importClause.isTypeOnly,
+      node.importClause.name,
+      factory.createNamedImports(importSpecifiers)
+    ),
+    node.moduleSpecifier,
+    node.attributes
+  )
+}
+
+// Key is module specifier (eg. "@kaizen/components")
+type ImportsToRemoveMap = Map<string, ImportsToRemove>
+// Key is module specifier (eg. "@kaizen/components")
+type ImportsToAddMap = Map<string, ImportsToAdd>
+
+export type UpdateKaioImportsArgs = {
+  importsToRemove?: ImportsToRemoveMap
+  importsToAdd?: ImportsToAddMap
+}
+
+export const updateKaioImports =
+  ({ importsToRemove, importsToAdd }: UpdateKaioImportsArgs) =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    if (!ts.isSourceFile(rootNode)) return rootNode
+
+    if (!importsToRemove && !importsToAdd) return rootNode
+
+    const { factory } = context
+
+    const statements = Array.from(rootNode.statements)
+
+    if (importsToRemove) {
+      Array.from(importsToRemove.keys()).forEach(moduleSpecifier => {
+        const importIndex = statements.findIndex(
+          s =>
+            ts.isImportDeclaration(s) &&
+            (s.moduleSpecifier as ts.StringLiteral).text === moduleSpecifier
+        )
+
+        if (importIndex === -1) return
+
+        const importDeclaration = statements[
+          importIndex
+        ] as ts.ImportDeclaration
+
+        const updatedImportDeclaration = removeNamedImports(
+          factory,
+          importDeclaration,
+          importsToRemove.get(moduleSpecifier)!
+        )
+
+        if (updatedImportDeclaration === null) {
+          // Remove import statement as there are no more imports
+          statements.splice(importIndex, 1)
+          return
+        }
+
+        // Update import statement
+        statements[importIndex] = updatedImportDeclaration
+      })
+    }
+
+    if (importsToAdd) {
+      Array.from(importsToAdd.keys()).forEach(newModuleSpecifier => {
+        const importIndex = statements.findIndex(
+          s =>
+            ts.isImportDeclaration(s) &&
+            (s.moduleSpecifier as ts.StringLiteral).text === newModuleSpecifier
+        )
+
+        if (importIndex === -1) {
+          const fallbackKaioImportIdx = statements.findIndex(
+            s =>
+              ts.isImportDeclaration(s) &&
+              (s.moduleSpecifier as ts.StringLiteral).text.includes(
+                "@kaizen/components"
+              )
+          )
+
+          const newImport = createImportDeclaration(
+            factory,
+            importsToAdd.get(newModuleSpecifier)!,
+            newModuleSpecifier
+          )
+          statements.splice(fallbackKaioImportIdx + 1, 0, newImport)
+          return
+        }
+
+        const importDeclaration = statements[
+          importIndex
+        ] as ts.ImportDeclaration
+
+        const updatedImportDeclaration = updateNamedImports(
+          factory,
+          importDeclaration,
+          importsToAdd.get(newModuleSpecifier)!
+        )
+
+        // Update import statement
+        statements[importIndex] = updatedImportDeclaration
+      })
+    }
+
+    return factory.updateSourceFile(rootNode, statements)
+  }
+
+/* Transformer helpers to generate `importsToRemove` and `importsToAdd` for `updateKaioImports` */
+export const setImportToRemove = (
+  map: ImportsToRemoveMap,
+  moduleSpecifier: string,
+  componentName: string
+): void => {
+  if (!map.has(moduleSpecifier)) {
+    map.set(moduleSpecifier, new Set([componentName]))
+  }
+  map.get(moduleSpecifier)?.add(componentName)
+}
+
+export const setImportToAdd = (
+  map: ImportsToAddMap,
+  moduleSpecifier: string,
+  importAttributes: NewImportAttributes
+): void => {
+  if (!map.has(moduleSpecifier)) {
+    map.set(
+      moduleSpecifier,
+      new Map([[importAttributes.componentName, importAttributes]])
+    )
+  }
+  map
+    .get(moduleSpecifier)
+    ?.set(importAttributes.componentName, importAttributes)
+}
diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs
index b6b1dd70ec7..5321d37411b 100644
--- a/packages/components/rollup.config.mjs
+++ b/packages/components/rollup.config.mjs
@@ -16,10 +16,6 @@ export default rollupConfig({
   },
   plugins: pluginsSharedUi,
   alias: {
-    entries: [
-      { find: "~types", replacement: "src/types" },
-      { find: "~utils", replacement: "src/utils" },
-      { find: "~components", replacement: "src" },
-    ],
+    entries: [{ find: "~components", replacement: "src" }],
   },
 })
diff --git a/packages/components/src/Avatar/Avatar.module.scss b/packages/components/src/Avatar/Avatar.module.scss
index 265a9e94abc..8ca15197516 100644
--- a/packages/components/src/Avatar/Avatar.module.scss
+++ b/packages/components/src/Avatar/Avatar.module.scss
@@ -106,28 +106,26 @@ $avatar-xxl: 7.75rem;
 
 .fallbackIcon {
   color: rgba($color-purple-800-rgb, 0.7);
-  width: 28px;
+  font-size: var(--avatar-fallback-icon-size);
 
   .xxlarge & {
-    width: 75px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
   }
 
   .xlarge & {
-    width: 60px;
+    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
   }
 
   .large & {
-    width: 35px;
+    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
   }
 
   .medium & {
-    width: 25px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
   }
 
   .small & {
-    width: 10px;
-    margin-bottom: -1px;
+    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
   }
 }
 
diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
index 2992a513c53..175634f2d81 100644
--- a/packages/components/src/Avatar/Avatar.tsx
+++ b/packages/components/src/Avatar/Avatar.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Textfit } from "react-textfit"
-import { UserIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Avatar.module.scss"
 
@@ -76,12 +76,21 @@ const getMaxFontSizePixels: (size: AvatarSizes) => number = size => {
   return 22
 }
 
-const fallbackIcon = (alt: string): JSX.Element => {
+const FallbackIcon = ({ alt }: { alt: string }): JSX.Element => {
   if (alt) {
-    return <UserIcon inheritSize role="img" aria-label={alt} />
+    return (
+      <Icon name="person" alt={alt} isFilled className={styles.fallbackIcon} />
+    )
   }
 
-  return <UserIcon inheritSize role="presentation" />
+  return (
+    <Icon
+      name="person"
+      isPresentational
+      isFilled
+      className={styles.fallbackIcon}
+    />
+  )
 }
 
 const renderInitials = (
@@ -95,7 +104,7 @@ const renderInitials = (
   const renderFallback = disableInitials || initials === ""
 
   return renderFallback ? (
-    <span className={styles.fallbackIcon}>{fallbackIcon(alt)}</span>
+    <FallbackIcon alt={alt} />
   ) : (
     <abbr
       className={classnames(styles.initials, isLongName && styles.longName)}
diff --git a/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx b/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx
index 1acefeb35a7..c96ff9c1196 100644
--- a/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx
+++ b/packages/components/src/BrandMoment/_docs/BrandMoment.stories.tsx
@@ -2,11 +2,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
-import {
-  ArrowRightIcon,
-  EmailIcon,
-  FeedbackClassifyIcon,
-} from "~components/Icon"
 import {
   BrandMomentCaptureIntro,
   BrandMomentPositiveOutro,
@@ -14,6 +9,7 @@ import {
   AnimatedSceneProps,
 } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { BrandMoment } from "../index"
 import {
   MinimalBasic,
@@ -65,7 +61,7 @@ export const Informative: Story = {
     primaryAction: {
       label: "Get started",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
   },
@@ -98,12 +94,12 @@ export const Success: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Rate this survey",
-      icon: <FeedbackClassifyIcon role="presentation" />,
+      icon: <Icon name="reviews" isPresentational isFilled />,
     },
   },
 }
@@ -132,12 +128,12 @@ export const Warning: Story = {
     primaryAction: {
       label: "Go to Home",
       href: "#",
-      icon: <ArrowRightIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     },
     secondaryAction: {
       label: "Contact support",
-      icon: <EmailIcon role="presentation" />,
+      icon: <Icon name="mail" isPresentational isFilled />,
     },
   },
 }
diff --git a/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx b/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx
index 37fe30e8c60..5534af5634d 100644
--- a/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx
+++ b/packages/components/src/BrandMoment/_docs/ExampleHeaders.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { assetUrl } from "~components/utils/hostedAssets"
 import styles from "./ExampleHeaders.module.scss"
 
@@ -18,7 +18,7 @@ export const MinimalBasic = (): JSX.Element => (
       <Button
         href="#"
         label="Exit"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
       />
       <div className={styles.logoContainer}>
diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx
index 5dd1ca175ce..3e9031bb284 100644
--- a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx
+++ b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerRangeProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate } from "../utils"
@@ -55,8 +55,12 @@ export const CalendarRange = ({
         defaultMonth={selectedMonth}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         numberOfMonths={2}
         locale={locale}
diff --git a/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx b/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx
index 3f1f5d8b0b1..50b7c7eeada 100644
--- a/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx
+++ b/packages/components/src/Calendar/CalendarSingle/CalendarSingle.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from "react"
 import { enAU } from "date-fns/locale"
 import { DayPicker, DayPickerSingleProps } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -53,8 +53,12 @@ export const CalendarSingle = ({
         }
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
         {...restProps}
diff --git a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
index 0330983a757..380c0147737 100644
--- a/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
+++ b/packages/components/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx
@@ -7,7 +7,7 @@ import {
   Matcher,
   DayPickerRangeProps,
 } from "react-day-picker"
-import { ArrowBackwardIcon, ArrowForwardIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { baseCalendarClassNames } from "../baseCalendarClassNames"
 import { DayOfWeek } from "../enums"
 import { isInvalidDate, isValidWeekStartsOn } from "../utils"
@@ -62,8 +62,12 @@ export const LegacyCalendarRange = ({
         onDayClick={onDayChange}
         classNames={classNames}
         components={{
-          IconRight: () => <ArrowForwardIcon role="presentation" />,
-          IconLeft: () => <ArrowBackwardIcon role="presentation" />,
+          IconRight: () => (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
+          IconLeft: () => (
+            <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+          ),
         }}
         locale={locale}
       />
diff --git a/packages/components/src/Calendar/baseCalendarClassNames.module.scss b/packages/components/src/Calendar/baseCalendarClassNames.module.scss
index 7b35f7d3e98..438f02479fc 100644
--- a/packages/components/src/Calendar/baseCalendarClassNames.module.scss
+++ b/packages/components/src/Calendar/baseCalendarClassNames.module.scss
@@ -99,10 +99,6 @@ $rdp-cell-size: 40px;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  [dir="rtl"] & {
-    transform: scale(-1, 1);
-  }
 }
 
 .table {
diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss b/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
index be98340ac94..ad67b28aa84 100644
--- a/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
+++ b/packages/components/src/Checkbox/Checkbox/Checkbox.module.scss
@@ -4,7 +4,6 @@
 @import "../../../styles/utils/form-variables";
 
 $checkbox-size: 24px;
-$icon-size: 24px;
 $focus-ring-offset: 2px;
 
 $dt-color-checkbox-background-color-checked: $color-gray-500;
@@ -23,14 +22,7 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  // .icon is inside .box so .box's border-box rule means
-  // .icon sits to the right of .box's left-side border
-  left: calc(-1 * #{$border-solid-border-width});
   color: $color-white;
 }
 
diff --git a/packages/components/src/Checkbox/Checkbox/Checkbox.tsx b/packages/components/src/Checkbox/Checkbox/Checkbox.tsx
index be18baa2099..e9df9e4ced6 100644
--- a/packages/components/src/Checkbox/Checkbox/Checkbox.tsx
+++ b/packages/components/src/Checkbox/Checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -22,13 +22,11 @@ const renderCheckOrMixedIcon = (
   if (status === "off") return
 
   return (
-    <span className={classnames(styles.icon, reversed && styles.reversed)}>
-      {status === "on" ? (
-        <CheckIcon role="presentation" inheritSize />
-      ) : (
-        <MinusIcon role="presentation" inheritSize />
-      )}
-    </span>
+    <Icon
+      name={status === "on" ? "check" : "remove"}
+      isPresentational
+      className={classnames(styles.icon, reversed && styles.reversed)}
+    />
   )
 }
 
diff --git a/packages/components/src/ClearButton/ClearButton.tsx b/packages/components/src/ClearButton/ClearButton.tsx
index 21f0b7bbb05..cd71c2e7fd9 100644
--- a/packages/components/src/ClearButton/ClearButton.tsx
+++ b/packages/components/src/ClearButton/ClearButton.tsx
@@ -1,6 +1,6 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ClearButton.module.scss"
 
@@ -23,7 +23,7 @@ export const ClearButton = ({
     )}
     {...restProps}
   >
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </button>
 )
 
diff --git a/packages/components/src/Collapsible/Collapsible/Collapsible.tsx b/packages/components/src/Collapsible/Collapsible/Collapsible.tsx
index 056d89af656..74588ed9947 100644
--- a/packages/components/src/Collapsible/Collapsible/Collapsible.tsx
+++ b/packages/components/src/Collapsible/Collapsible/Collapsible.tsx
@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useId, useState } from "react"
 import classnames from "classnames"
 import AnimateHeight from "react-animate-height"
 import { Heading } from "~components/Heading"
-import { ChevronUpIcon, ChevronDownIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Sticky } from "../types"
 import styles from "./Collapsible.module.scss"
@@ -117,11 +117,10 @@ export const Collapsible = ({
           <IconButton
             label={title}
             icon={
-              isOpen ? (
-                <ChevronUpIcon role="presentation" />
-              ) : (
-                <ChevronDownIcon role="presentation" />
-              )
+              <Icon
+                name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+                isPresentational
+              />
             }
             type="button"
             aria-expanded={isOpen}
diff --git a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx
index 29db0efce90..ee1228cc160 100644
--- a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx
+++ b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
-import { AddIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { Collapsible } from "../index"
 
 const meta = {
@@ -76,7 +76,7 @@ export const CustomHeader: Story = {
       renderHeader={title => (
         <Heading variant="heading-4" tag="span">
           <span className="flex gap-8 items-center">
-            <AddIcon role="presentation" /> {title}
+            <Icon name="potted_plant" isPresentational /> {title}
           </span>
         </Heading>
       )}
diff --git a/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss b/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss
index f2b9597f9b2..864af02ec2f 100644
--- a/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss
+++ b/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss
@@ -9,8 +9,8 @@ $input-disabled-opacity: 0.3;
 .iconButton {
   @include button-reset;
 
-  display: inherit;
-  padding: 0.25rem $spacing-xs;
+  display: flex;
+  padding: var(--spacing-6);
   border: $border-solid-border-width $border-solid-border-style transparent;
   border-radius: $border-solid-border-radius;
   position: relative;
@@ -35,11 +35,6 @@ $input-disabled-opacity: 0.3;
     background-color: $color-blue-100;
     color: $color-blue-500;
   }
-
-  svg {
-    position: relative;
-    top: 2px;
-  }
 }
 
 .calendarActive {
diff --git a/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx b/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx
index 2833b8fddc4..6aa753a17b9 100644
--- a/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx
+++ b/packages/components/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import classnames from "classnames"
-import { DateStartIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { DateInput, DateInputProps } from "../DateInput"
 import styles from "./DateInputWithIconButton.module.scss"
@@ -39,7 +39,7 @@ export const DateInputWithIconButton = React.forwardRef<
         disabled && styles.disabled
       )}
     >
-      <DateStartIcon role="presentation" />
+      <Icon name="today" isPresentational isFilled />
     </button>
   )
 
diff --git a/packages/components/src/DateRangePicker/DateRangePicker.tsx b/packages/components/src/DateRangePicker/DateRangePicker.tsx
index a4010908654..1c1d1040eaf 100644
--- a/packages/components/src/DateRangePicker/DateRangePicker.tsx
+++ b/packages/components/src/DateRangePicker/DateRangePicker.tsx
@@ -13,9 +13,9 @@ import {
   LegacyCalendarRange,
   LegacyCalendarRangeProps,
 } from "~components/Calendar/LegacyCalendarRange"
-import { DateStartIcon } from "~components/Icon"
 import { Label } from "~components/Label"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./DateRangePicker.module.scss"
 
 export type DateRangePickerProps = {
@@ -168,7 +168,7 @@ export const DateRangePicker = ({
           {...inputProps}
         >
           <div className={styles.startIconAdornment}>
-            <DateStartIcon role="presentation" />
+            <Icon name="today" isPresentational isFilled />
           </div>
           <span className={styles.value}>
             {selectedDateRange?.from ? value : undefined}
diff --git a/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx b/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx
index d44c20cbd55..774b6fcce45 100644
--- a/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx
+++ b/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta } from "@storybook/react"
 import isChromatic from "chromatic"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -85,7 +85,13 @@ const StickerSheetTemplate: StickerSheetStory = {
                 >
                   <Button
                     label="Label"
-                    icon={<ChevronRightIcon role="presentation" />}
+                    icon={
+                      <Icon
+                        name="chevron_right"
+                        isPresentational
+                        shouldMirrorInRTL
+                      />
+                    }
                     iconPosition="end"
                   />
                 </EmptyStateWrapper>
diff --git a/packages/components/src/EmptyState/_docs/EmptyState.stories.tsx b/packages/components/src/EmptyState/_docs/EmptyState.stories.tsx
index 3a08c35c8c3..5080bf25946 100644
--- a/packages/components/src/EmptyState/_docs/EmptyState.stories.tsx
+++ b/packages/components/src/EmptyState/_docs/EmptyState.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronRightIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { EmptyState } from "../index"
 
 const meta = {
@@ -17,7 +17,9 @@ const meta = {
         "Button (chevron right)": (
           <Button
             label="Label"
-            icon={<ChevronRightIcon role="presentation" />}
+            icon={
+              <Icon name="chevron_right" isPresentational shouldMirrorInRTL />
+            }
             iconPosition="end"
           />
         ),
diff --git a/packages/components/src/ErrorPage/ErrorPage.tsx b/packages/components/src/ErrorPage/ErrorPage.tsx
index fe60068acd5..8d5d2167b33 100644
--- a/packages/components/src/ErrorPage/ErrorPage.tsx
+++ b/packages/components/src/ErrorPage/ErrorPage.tsx
@@ -2,9 +2,9 @@ import React, { HTMLAttributes } from "react"
 import { FormattedMessage, useIntl } from "@cultureamp/i18n-react-intl"
 import classNames from "classnames"
 import { BrandMoment } from "~components/BrandMoment"
-import { ArrowRightIcon, EmailIcon } from "~components/Icon"
 import { BrandMomentError } from "~components/Illustration"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { ErrorStatuses, useErrorMessages } from "./hooks"
 import styles from "./ErrorPage.module.scss"
@@ -67,7 +67,9 @@ export const ErrorPage = ({
         variant="warning"
         primaryAction={{
           ...actions.primary,
-          icon: <ArrowRightIcon role="presentation" />,
+          icon: (
+            <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />
+          ),
           iconPosition: "end",
           label: formatMessage({
             id: "kzErrorPage.goToHome",
@@ -77,7 +79,7 @@ export const ErrorPage = ({
         }}
         secondaryAction={{
           ...actions.secondary,
-          icon: <EmailIcon role="presentation" />,
+          icon: <Icon name="mail" isPresentational isFilled />,
           label: formatMessage({
             id: "kzErrorPage",
             defaultMessage: "Contact support",
diff --git a/packages/components/src/FieldMessage/FieldMessage.tsx b/packages/components/src/FieldMessage/FieldMessage.tsx
index ed1e5a06396..91bd73253b1 100644
--- a/packages/components/src/FieldMessage/FieldMessage.tsx
+++ b/packages/components/src/FieldMessage/FieldMessage.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
-import { CautionWhiteIcon, ExclamationWhiteIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./FieldMessage.module.scss"
 
@@ -45,19 +45,11 @@ export const FieldMessage = ({
     >
       {(status === "error" || status === "caution") && (
         <span className={styles.warningIcon}>
-          {status === "error" ? (
-            <ExclamationWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          ) : (
-            <CautionWhiteIcon
-              role="img"
-              inheritSize={false}
-              aria-label={`${status} message`}
-            />
-          )}
+          <Icon
+            name={status === "error" ? "error" : "warning"}
+            isFilled
+            alt={`${status} message`}
+          />
         </span>
       )}
       <div className={styles.message}>
diff --git a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
index 770f079148b..1fafb1db965 100644
--- a/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
+++ b/packages/components/src/Filter/FilterBar/FilterBar.spec.tsx
@@ -313,7 +313,7 @@ describe("<FilterBar />", () => {
           />
         )
         await waitForI18nContent()
-        expect(getByTestId("testid__values").textContent).toEqual(
+        expect(getByTestId("testid__values").textContent).toBe(
           JSON.stringify({})
         )
       })
@@ -580,7 +580,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Long Black" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Long Black")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Long Black")
         })
         const iceButton = getByRole("button", { name: "Ice" })
         expect(iceButton).toBeVisible()
@@ -590,7 +590,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Latte" }))
 
         await waitFor(() => {
-          expect(coffeeButton.textContent).toBe("Coffee:Latte")
+          expect(coffeeButton).toHaveAccessibleName("Coffee : Latte")
         })
         const milkButton = getByRole("button", { name: "Milk" })
         expect(milkButton).toBeVisible()
@@ -600,7 +600,7 @@ describe("<FilterBar />", () => {
         await user.click(getByRole("option", { name: "Oat" }))
 
         await waitFor(() => {
-          expect(milkButton.textContent).toBe("Milk:Oat")
+          expect(milkButton).toHaveAccessibleName("Milk : Oat")
         })
         expect(addFiltersButton).not.toBeDisabled()
 
@@ -657,16 +657,16 @@ describe("<FilterBar />", () => {
       })
       const iceLevelButton = getByRole("button", { name: "Ice Level : 100%" })
 
-      expect(flavourButton.textContent).toBe("Flavour:Jasmine Milk Tea")
-      expect(sugarLevelButton.textContent).toBe("Sugar Level:50%")
-      expect(iceLevelButton.textContent).toBe("Ice Level:100%")
+      expect(flavourButton).toHaveAccessibleName("Flavour : Jasmine Milk Tea")
+      expect(sugarLevelButton).toHaveAccessibleName("Sugar Level : 50%")
+      expect(iceLevelButton).toHaveAccessibleName("Ice Level : 100%")
 
       await user.click(getByRole("button", { name: "Clear all filters" }))
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toBe("Flavour")
-        expect(sugarLevelButton.textContent).toBe("Sugar Level")
-        expect(iceLevelButton.textContent).toBe("Ice Level")
+        expect(flavourButton).toHaveAccessibleName("Flavour")
+        expect(sugarLevelButton).toHaveAccessibleName("Sugar Level")
+        expect(iceLevelButton).toHaveAccessibleName("Ice Level")
       })
     })
 
@@ -744,14 +744,14 @@ describe("<FilterBar />", () => {
       await waitForI18nContent()
 
       const flavourButton = getByRole("button", { name: "Flavour" })
-      expect(flavourButton.textContent).toEqual("Flavour")
+      expect(flavourButton).toHaveAccessibleName("Flavour")
 
       await user.click(
         getByRole("button", { name: "Update Flavour to honey-milk-tea" })
       )
 
       await waitFor(() => {
-        expect(flavourButton.textContent).toEqual("Flavour:Honey Milk Tea")
+        expect(flavourButton).toHaveAccessibleName("Flavour : Honey Milk Tea")
       })
     })
 
diff --git a/packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx b/packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx
index ed80394376b..8d567a84d78 100644
--- a/packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx
+++ b/packages/components/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
-import { AddIcon } from "~components/Icon"
 import { Menu, MenuList, MenuItem, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 
 export const AddFiltersMenu = (): JSX.Element => {
@@ -24,7 +24,7 @@ export const AddFiltersMenu = (): JSX.Element => {
           label={menuButtonLabel}
           secondary
           disabled={inactiveFilters.length === 0}
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
         />
       }
     >
diff --git a/packages/components/src/Filter/FilterButton/FilterButton/FilterButton.tsx b/packages/components/src/Filter/FilterButton/FilterButton/FilterButton.tsx
index da53fc676b6..edcb2078291 100644
--- a/packages/components/src/Filter/FilterButton/FilterButton/FilterButton.tsx
+++ b/packages/components/src/Filter/FilterButton/FilterButton/FilterButton.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { isRefObject } from "~components/utils/isRefObject"
 import { FilterTriggerRef } from "../../Filter/types"
 import {
@@ -45,11 +45,10 @@ export const FilterButton = forwardRef<FilterTriggerRef, FilterButtonProps>(
             label
           )}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" />
-        ) : (
-          <ChevronDownIcon role="presentation" />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+        />
       </FilterButtonBase>
     )
   }
diff --git a/packages/components/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx b/packages/components/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx
index 2bf87728410..e3b2e7460a5 100644
--- a/packages/components/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx
+++ b/packages/components/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
-import { ClearIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { DataAttributes } from "~components/types/DataAttributes"
 import { isRefObject } from "~components/utils/isRefObject"
@@ -50,7 +50,7 @@ export const FilterButtonRemovable = forwardRef<
       <FilterButton ref={ref} {...triggerButtonProps} />
       <Tooltip text={removeButtonLabel} display="inline-block" position="below">
         <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
-          <ClearIcon role="img" aria-label={removeButtonLabel} />
+          <Icon name="cancel" alt={removeButtonLabel} isFilled />
         </FilterButtonBase>
       </Tooltip>
     </ButtonGroup>
diff --git a/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx
index 544a5fe3fe9..5893fc6e9b6 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/FilterDateRangePicker.spec.tsx
@@ -115,7 +115,6 @@ describe("<FilterDateRangePicker />", () => {
 
       await waitFor(() => {
         expect(inputEndDate).not.toHaveFocus()
-        expect(filterButton.textContent).toEqual("Dates")
       })
     }, 10000)
   })
diff --git a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx
index 1aace323dc4..0d82d3c600b 100644
--- a/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx
+++ b/packages/components/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.spec.tsx
@@ -67,7 +67,8 @@ describe("<DateRangeInputField />", () => {
     const inputStart = screen.getByRole("textbox", { name: "Date from" })
     await waitFor(() => {
       expect(inputStart).toHaveAccessibleDescription(
-        "Date Start has an error Input format : dd/mm/yyyy"
+        // React Testing Library bug: Icon should be showing aria-label "error message" instead
+        "error Date Start has an error Input format : dd/mm/yyyy"
       )
       expect(screen.getByText("Date Start has an error")).toBeVisible()
     })
diff --git a/packages/components/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx b/packages/components/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx
index f8a8a2cc564..06907bc066a 100644
--- a/packages/components/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx
+++ b/packages/components/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx
@@ -4,8 +4,8 @@ import { useOption } from "@react-aria/listbox"
 import { mergeProps } from "@react-aria/utils"
 import classnames from "classnames"
 import { Badge } from "~components/Badge"
-import { CheckIcon } from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import { useSelectionContext } from "../../context"
 import { MultiSelectItem } from "../../types"
 import styles from "./MultiSelectOption.module.scss"
@@ -50,7 +50,7 @@ export const MultiSelectOption = ({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
       {/* can also be item.value since 'rendered' is defined as item.value in SelectionProvider*/}
       {item.rendered}
diff --git a/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx b/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
index c04e092049b..b593b639831 100644
--- a/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
+++ b/packages/components/src/Filter/FilterSelect/FilterSelect.spec.tsx
@@ -198,16 +198,15 @@ describe("<FilterSelect>", () => {
     it("changes the value within the button when an option is selected", async () => {
       render(
         <FilterSelectWrapper
-          isOpen
           renderTrigger={(triggerButtonProps): JSX.Element => (
-            <FilterButton data-testid="test__trigger" {...triggerButtonProps} />
+            <FilterButton {...triggerButtonProps} />
           )}
         />
       )
-      // Use testid because when the filter is open, the button is inaccessible
-      expect(screen.getByTestId("test__trigger").textContent).toBe("Coffee")
 
-      await user.tab()
+      const button = screen.getByRole("button", { name: "Coffee" })
+
+      await user.click(button)
       await waitFor(() => {
         expect(screen.queryByRole("listbox")).toBeVisible()
       })
diff --git a/packages/components/src/GuidanceBlock/GuidanceBlock.tsx b/packages/components/src/GuidanceBlock/GuidanceBlock.tsx
index 3602e10c52f..05f289c6891 100644
--- a/packages/components/src/GuidanceBlock/GuidanceBlock.tsx
+++ b/packages/components/src/GuidanceBlock/GuidanceBlock.tsx
@@ -2,10 +2,10 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import Media from "react-media"
 import { Heading, HeadingProps } from "~components/Heading"
-import { ArrowForwardIcon } from "~components/Icon"
 import { SceneProps, SpotProps } from "~components/Illustration"
 import { Text } from "~components/Text"
 import { Button, ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip, TooltipProps } from "~components/__overlays__/Tooltip/v1"
 import { VariantType } from "./types"
 import styles from "./GuidanceBlock.module.scss"
@@ -223,7 +223,11 @@ export const GuidanceBlock = ({
                     <Button
                       icon={
                         withActionButtonArrow ? (
-                          <ArrowForwardIcon role="presentation" />
+                          <Icon
+                            name="arrow_forward"
+                            isPresentational
+                            shouldMirrorInRTL
+                          />
                         ) : undefined
                       }
                       iconPosition="end"
diff --git a/packages/components/src/Icon/_docs/Icon.stories.tsx b/packages/components/src/Icon/_docs/Icon.docs.stories.tsx
similarity index 98%
rename from packages/components/src/Icon/_docs/Icon.stories.tsx
rename to packages/components/src/Icon/_docs/Icon.docs.stories.tsx
index f60cc281307..c813bc1ea76 100644
--- a/packages/components/src/Icon/_docs/Icon.stories.tsx
+++ b/packages/components/src/Icon/_docs/Icon.docs.stories.tsx
@@ -7,7 +7,7 @@ import { AddIcon } from "../index"
 import styles from "./icon.module.scss"
 
 const meta = {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   component: AddIcon,
   args: {
     role: "presentation",
diff --git a/packages/components/src/Icon/_docs/Icon.mdx b/packages/components/src/Icon/_docs/Icon.mdx
index c4bdbfbcc17..6ca4f889e3a 100644
--- a/packages/components/src/Icon/_docs/Icon.mdx
+++ b/packages/components/src/Icon/_docs/Icon.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta, Story } from "@storybook/blocks"
 import { ResourceLinks } from "~storybook/components"
-import * as IconStories from "./Icon.stories"
+import * as IconStories from "./Icon.docs.stories"
 
 <Meta of={IconStories} />
 
@@ -8,7 +8,6 @@ import * as IconStories from "./Icon.stories"
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons"
-
 />
 
 ## Installation
diff --git a/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx b/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx
index c8e0c18f7bf..47054ca7dfa 100644
--- a/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx
+++ b/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx
@@ -7,7 +7,7 @@ import {
 } from "~storybook/components/StickerSheet"
 
 export default {
-  title: "Components/Icons",
+  title: "Illustrations/Icon",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
diff --git a/packages/components/src/Illustration/utils/usePausePlay.tsx b/packages/components/src/Illustration/utils/usePausePlay.tsx
index 1cc99f625de..ae00c6db583 100644
--- a/packages/components/src/Illustration/utils/usePausePlay.tsx
+++ b/packages/components/src/Illustration/utils/usePausePlay.tsx
@@ -1,5 +1,5 @@
 import React, { useState, RefObject } from "react"
-import { LaunchIcon, PauseIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 
 export type usePausePlayHook = {
   toggle: () => void
@@ -24,10 +24,12 @@ export const usePausePlay = (
         videoRef.current.pause()
       }
     },
-    icon: isPaused ? (
-      <LaunchIcon role="presentation" />
-    ) : (
-      <PauseIcon role="presentation" />
+    icon: (
+      <Icon
+        name={isPaused ? "play_circle" : "pause"}
+        isPresentational
+        isFilled
+      />
     ),
     label: isPaused ? "Play animation" : "Pause animation",
   }
diff --git a/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx b/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx
index b969b53e6ca..e84abd71bf0 100644
--- a/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx
+++ b/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { MeatballsIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -35,16 +35,18 @@ const InputExampleGroup = (props: InputProps): JSX.Element => (
           value={type}
           type={type}
           startIconAdornment={
-            <WritingIcon
-              role="presentation"
+            <Icon
+              name="edit"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }
             />
           }
           endIconAdornment={
-            <MeatballsIcon
-              role="presentation"
+            <Icon
+              name="close"
+              isPresentational
               data-sb-a11y-color-contrast-disable={
                 props.disabled ? "true" : "false"
               }
diff --git a/packages/components/src/Input/Input/_docs/Input.stories.tsx b/packages/components/src/Input/Input/_docs/Input.stories.tsx
index 51544aea441..da2de024ac3 100644
--- a/packages/components/src/Input/Input/_docs/Input.stories.tsx
+++ b/packages/components/src/Input/Input/_docs/Input.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { UserAddIcon, WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Input } from "../index"
 
 const meta = {
@@ -87,14 +87,16 @@ export const Icons: Story = {
         <Input
           type="text"
           value="Start Icon"
-          startIconAdornment={<UserAddIcon role="presentation" />}
+          startIconAdornment={
+            <Icon name="person_add" isPresentational isFilled />
+          }
         />
       </li>
       <li>
         <Input
           type="text"
           value="End Icon"
-          endIconAdornment={<WritingIcon role="presentation" />}
+          endIconAdornment={<Icon name="edit" isPresentational isFilled />}
         />
       </li>
     </ul>
diff --git a/packages/components/src/Input/InputSearch/InputSearch.tsx b/packages/components/src/Input/InputSearch/InputSearch.tsx
index 2a0390a1bb7..c7ecac1754a 100644
--- a/packages/components/src/Input/InputSearch/InputSearch.tsx
+++ b/packages/components/src/Input/InputSearch/InputSearch.tsx
@@ -2,8 +2,8 @@ import React, { InputHTMLAttributes, useRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
-import { SearchIcon } from "~components/Icon/SearchIcon"
 import { LoadingSpinner } from "~components/Loading"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./InputSearch.module.scss"
 
@@ -63,7 +63,7 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
             classNameOverride={styles.loadingSpinner}
           />
         ) : (
-          <SearchIcon role="presentation" />
+          <Icon name="search" isPresentational />
         )}
       </div>
 
diff --git a/packages/components/src/Label/Label.module.scss b/packages/components/src/Label/Label.module.scss
index 103ba238976..b27577a4adf 100644
--- a/packages/components/src/Label/Label.module.scss
+++ b/packages/components/src/Label/Label.module.scss
@@ -5,6 +5,10 @@
 
 $label-start-margin: $spacing-xs;
 
+.label {
+  --icon-vertical-align: text-bottom;
+}
+
 .label,
 :global(.ideal-sans) .label {
   // override Murmur global styles :(
diff --git a/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.tsx b/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.tsx
index bb2ef72f68b..5854cdcdcea 100644
--- a/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.tsx
+++ b/packages/components/src/LikertScaleLegacy/LikertScaleLegacy.tsx
@@ -1,8 +1,8 @@
 import React, { createRef, useState } from "react"
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
-import { CheckIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { ScaleValue, Scale, ScaleItem, ColorSchema } from "./types"
 import determineSelectionFromKeyPress from "./utils/determineSelectionFromKeyPress"
 import styles from "./LikertScaleLegacy.module.scss"
@@ -29,7 +29,7 @@ export type LikertScaleProps = {
 }
 
 const SelectedItemIcon = (): JSX.Element => (
-  <CheckIcon role="presentation" classNameOverride={styles.check} />
+  <Icon name="check" isPresentational className={styles.check} />
 )
 
 /**
diff --git a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx
index f6a025efd68..295c9b7d460 100644
--- a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx
+++ b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Avatar } from "~components/Avatar"
-import { ConfigureIcon } from "~components/Icon"
 import { BrandMomentPositiveOutro, Informative } from "~components/Illustration"
+import { Icon } from "~components/__future__/Icon"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { LoadingGraphic } from "../index"
 
@@ -49,7 +49,7 @@ export const Size: Story = {
       <StickerSheet.Body>
         <StickerSheet.Row rowTitle="Icon (small)">
           <LoadingGraphic size="small" />
-          <ConfigureIcon aria-label="Aliens approaching!" role="img" />
+          <Icon name="build" alt="Aliens approaching!" isFilled />
         </StickerSheet.Row>
         <StickerSheet.Row rowTitle="Avatar (medium)">
           <LoadingGraphic size="medium" />
diff --git a/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss b/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss
index a1df3ccb11d..123baf11048 100644
--- a/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss
+++ b/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.module.scss
@@ -47,6 +47,8 @@
   }
 
   .spotIcon {
+    --icon-size: 30;
+
     width: 30px;
     height: 30px;
 
diff --git a/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.tsx b/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.tsx
index 67b0024f7c7..e81ae91f9db 100644
--- a/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.tsx
+++ b/packages/components/src/Modal/ConfirmationModal/ConfirmationModal.tsx
@@ -1,12 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import {
-  CautionWhiteIcon,
-  ExclamationWhiteIcon,
-  InformationWhiteIcon,
-  SuccessWhiteIcon,
-} from "~components/Icon"
 import {
   Assertive,
   Cautionary,
@@ -23,6 +17,7 @@ import {
   ModalBody,
 } from "~components/Modal/GenericModal"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ConfirmationModal.module.scss"
 
 type Mood = "positive" | "informative" | "negative" | "cautionary" | "assertive"
@@ -77,46 +72,48 @@ type ConfirmationModalVariants = {
 export type ConfirmationModalProps = BaseConfirmationModalProps &
   (ConfirmationModalMoods | ConfirmationModalVariants)
 
-const getIcon = (
-  variantName: Mood | Variant,
-  isProminent: boolean
-): JSX.Element => {
+const getIconName = (variantName: Mood | Variant): string => {
   switch (variantName) {
     case "cautionary":
-      return isProminent ? (
-        <Cautionary />
-      ) : (
-        <CautionWhiteIcon inheritSize role="presentation" />
-      )
+      return "warning"
     case "informative":
-      return isProminent ? (
-        <Informative />
-      ) : (
-        <InformationWhiteIcon inheritSize role="presentation" />
-      )
+      return "info"
     case "negative":
     case "warning":
-      return isProminent ? (
-        <Negative />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
     case "positive":
     case "success":
-      return isProminent ? (
-        <Positive />
-      ) : (
-        <SuccessWhiteIcon inheritSize role="presentation" />
-      )
+      return "check_circle"
     case "assertive":
-      return isProminent ? (
-        <Assertive />
-      ) : (
-        <ExclamationWhiteIcon inheritSize role="presentation" />
-      )
+      return "error"
   }
 }
 
+const getIcon = (
+  variantName: Mood | Variant,
+  isProminent: boolean
+): JSX.Element => {
+  if (isProminent) {
+    switch (variantName) {
+      case "cautionary":
+        return <Cautionary />
+      case "informative":
+        return <Informative />
+      case "negative":
+      case "warning":
+        return <Negative />
+      case "positive":
+      case "success":
+        return <Positive />
+      case "assertive":
+        return <Assertive />
+    }
+  }
+
+  const iconName = getIconName(variantName)
+  return <Icon name={iconName} isPresentational isFilled />
+}
+
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093114/Modal Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
diff --git a/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx b/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx
index 515a2add79f..cb5bcadda51 100644
--- a/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx
+++ b/packages/components/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { ModalBody } from "../ModalBody"
 import styles from "./ModalHeader.module.scss"
 
@@ -20,7 +20,7 @@ export const ModalHeader = ({
     <div className={styles.dismissButton}>
       <IconButton
         label="Dismiss"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         reversed={reversed}
         onClick={onDismiss}
         disabled={onDismiss == undefined}
diff --git a/packages/components/src/MultiSelect/MultiSelect.spec.tsx b/packages/components/src/MultiSelect/MultiSelect.spec.tsx
index f095bf124fe..ec71e188cfc 100644
--- a/packages/components/src/MultiSelect/MultiSelect.spec.tsx
+++ b/packages/components/src/MultiSelect/MultiSelect.spec.tsx
@@ -350,6 +350,7 @@ describe("Has validation status", () => {
     )
     expect(screen.getByText("No waffles are available")).toBeInTheDocument()
   })
+
   it("describes the Toggle", () => {
     render(
       <MultiSelectWrapper
@@ -364,13 +365,16 @@ describe("Has validation status", () => {
     expect(
       screen.getByRole("button", {
         name: "Breakfast menu",
-        description: "Only four waffles remain",
+        // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+        description: "warning Only four waffles remain",
       })
     ).toBeInTheDocument()
   })
+
   it("announces the validation message before the Toggle's description", () => {
-    const description = "Choose you breakfast."
-    const validationMessage = "Only four waffles remain."
+    const description = "Choose your breakfast."
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
+    const validationMessage = "warning Only four waffles remain."
 
     render(
       <MultiSelectWrapper
diff --git a/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss b/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss
index 264981e6f22..b376adea6b1 100644
--- a/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss
+++ b/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.module.scss
@@ -68,11 +68,5 @@ $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});
 }
 
 .icon {
-  height: $checkbox-size;
-  width: $checkbox-size;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
   color: $color-white;
 }
diff --git a/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx b/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx
index 46852b12439..737566d2edd 100644
--- a/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx
+++ b/packages/components/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon, MinusIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Checkbox.module.scss"
 
@@ -25,14 +25,15 @@ export type CheckboxProps = {
   >
 
 const renderIcon = (status: CheckedStatus): JSX.Element | null => {
-  switch (status) {
-    case "indeterminate":
-      return <MinusIcon role="presentation" classNameOverride={styles.icon} />
-    case "checked":
-      return <CheckIcon role="presentation" classNameOverride={styles.icon} />
-    default:
-      return null
-  }
+  if (status === "unchecked") return null
+
+  return (
+    <Icon
+      name={status === "checked" ? "check" : "remove"}
+      isPresentational
+      className={styles.icon}
+    />
+  )
 }
 
 export const Checkbox = ({
diff --git a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx
index 8f4a722fb14..a9e0151ad29 100644
--- a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx
+++ b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, waitFor, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { vi } from "vitest"
 import {
@@ -83,10 +83,10 @@ describe("<MultiSelectOptions />", () => {
     })
 
     it("returns updated selected values when selecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper selectedValues={new Set(["pancakes"])} />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(1)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).not.toBeChecked()
@@ -96,17 +96,19 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes", "waffle"]))
         expect(waffleOption).toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          2
+        )
       })
     })
 
     it("returns updated selected values when unselecting an option", async () => {
-      const { getByRole, queryAllByRole } = render(
+      const { getByRole } = render(
         <MultiSelectOptionsWrapper
           selectedValues={new Set(["pancakes", "waffle"])}
         />
       )
-      expect(queryAllByRole("presentation", { hidden: true }).length).toBe(2)
+      expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(2)
 
       const waffleOption = getByRole("checkbox", { name: "Waffle" })
       expect(waffleOption).toBeChecked()
@@ -116,7 +118,9 @@ describe("<MultiSelectOptions />", () => {
       await waitFor(() => {
         expect(onChange).toBeCalledWith(new Set(["pancakes"]))
         expect(waffleOption).not.toBeChecked()
-        expect(queryAllByRole("presentation", { hidden: true }).length).toBe(1)
+        expect(screen.getAllByRole("checkbox", { checked: true }).length).toBe(
+          1
+        )
       })
     })
   })
diff --git a/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx b/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx
index 89d7a6870ee..0b31ccacf9b 100644
--- a/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx
+++ b/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx
@@ -2,8 +2,7 @@ import React, { HTMLAttributes, forwardRef, useId } from "react"
 import classnames from "classnames"
 import { ClearButton } from "~components/ClearButton"
 import { FieldMessageProps } from "~components/FieldMessage"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
-import { RemovableTag } from "~components/__future__"
+import { Icon, RemovableTag } from "~components/__future__"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { MultiSelectOption } from "../../types"
 import styles from "./MultiSelectToggle.module.scss"
@@ -70,11 +69,10 @@ export const MultiSelectToggle = forwardRef<
               onClick(e)
             }}
           >
-            {isOpen ? (
-              <ChevronUpIcon role="presentation" />
-            ) : (
-              <ChevronDownIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+              isPresentational
+            />
           </button>
 
           <div
diff --git a/packages/components/src/Notification/subcomponents/CancelButton/CancelButton.tsx b/packages/components/src/Notification/subcomponents/CancelButton/CancelButton.tsx
index 393b54760e1..0b8f889c043 100644
--- a/packages/components/src/Notification/subcomponents/CancelButton/CancelButton.tsx
+++ b/packages/components/src/Notification/subcomponents/CancelButton/CancelButton.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { CloseIcon } from "~components/Icon/CloseIcon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../GenericNotification/GenericNotification.module.scss"
 
 type CancelButtonProps = {
@@ -14,7 +14,7 @@ export const CancelButton = ({ onClick }: CancelButtonProps): JSX.Element => (
     data-testid="close-button"
     aria-label="Close notification"
   >
-    <CloseIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 
diff --git a/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss b/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
index 6b0a53261a3..49aa134d901 100644
--- a/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
+++ b/packages/components/src/Notification/subcomponents/GenericNotification/_mixins.scss
@@ -165,12 +165,14 @@ $notification-slide-right: transform 300ms ease-out;
   %ca-notification---toast & {
     width: 22px;
     height: 22px;
+    font-size: 22px;
     margin-top: $spacing-6;
   }
 
   %ca-notification---global & {
     width: 24px;
     height: 24px;
+    font-size: 24px;
   }
 }
 
diff --git a/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css b/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css
new file mode 100644
index 00000000000..c2f1921d8a7
--- /dev/null
+++ b/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.module.css
@@ -0,0 +1,3 @@
+.notificationIcon {
+  font-size: inherit;
+}
diff --git a/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx b/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx
index 73249062cb1..2b467a20150 100644
--- a/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx
+++ b/packages/components/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx
@@ -1,13 +1,19 @@
 import React from "react"
-import { CautionIcon } from "~components/Icon/CautionIcon"
-import { ExclamationIcon } from "~components/Icon/ExclamationIcon"
-import { InformationIcon } from "~components/Icon/InformationIcon"
-import { SecurityTipIcon } from "~components/Icon/SecurityTipIcon"
-import { SuccessIcon } from "~components/Icon/SuccessIcon"
 import {
   NotificationType,
   NotificationVariant,
 } from "~components/Notification/types"
+import { Icon } from "~components/__future__"
+import styles from "./NotificationIcon.module.css"
+
+const NotificationIcon = ({ name }: { name: string }): JSX.Element => (
+  <Icon
+    name={name}
+    isFilled
+    isPresentational
+    className={styles.notificationIcon}
+  />
+)
 
 export type NotificationIconTypeProps = {
   type: NotificationType
@@ -18,17 +24,17 @@ export const NotificationIconType = ({
 }: NotificationIconTypeProps): JSX.Element => {
   switch (type) {
     case "positive":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "negative":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
     default:
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
   }
 }
 
@@ -43,15 +49,15 @@ export const NotificationIconVariant = ({
 }: NotificationIconVariantProps): JSX.Element => {
   switch (variant) {
     case "success":
-      return <SuccessIcon role="presentation" inheritSize />
+      return <NotificationIcon name="check_circle" />
     case "warning":
-      return <ExclamationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="error" />
     case "cautionary":
-      return <CautionIcon role="presentation" inheritSize />
+      return <NotificationIcon name="warning" />
     case "informative":
-      return <InformationIcon role="presentation" inheritSize />
+      return <NotificationIcon name="info" />
     case "security":
-      return <SecurityTipIcon role="presentation" inheritSize />
+      return <NotificationIcon name="privacy_tip" />
   }
 }
 
diff --git a/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss
index 755e5ecb5fc..c1054e3110b 100644
--- a/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss
+++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss
@@ -4,10 +4,6 @@
 @import "../../../__actions__/Button/v1/utils/variables";
 
 %directional-link {
-  [dir="rtl"] & {
-    transform: rotate(180deg);
-  }
-
   border: $border-solid-border-width solid $color-blue-300;
 
   @include enabled-pseudo-states-variant($color-blue-100, $color-blue-400);
diff --git a/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx
index dd33ab86582..af4946554e0 100644
--- a/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx
+++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx
@@ -1,14 +1,9 @@
 import React from "react"
-import {
-  ArrowBackwardIcon,
-  ArrowForwardIcon,
-  EndIcon,
-  StartIcon,
-} from "~components/Icon"
 import {
   GenericButton,
   GenericProps,
 } from "~components/__actions__/Button/v2/GenericButton"
+import { Icon } from "~components/__future__/Icon"
 
 export type DirectionalLinkProps = {
   label: string
@@ -16,11 +11,11 @@ export type DirectionalLinkProps = {
   direction: "prev" | "next" | "start" | "end"
 } & GenericProps
 
-const iconMap = {
-  prev: <ArrowBackwardIcon role="presentation" />,
-  next: <ArrowForwardIcon role="presentation" />,
-  start: <StartIcon role="presentation" />,
-  end: <EndIcon role="presentation" />,
+const iconNameMap = {
+  prev: "arrow_back",
+  next: "arrow_forward",
+  start: "keyboard_tab_rtl",
+  end: "keyboard_tab",
 }
 
 /**
@@ -38,7 +33,13 @@ export const DirectionalLink = ({
     {...otherProps}
     iconButton
     directionalLink
-    icon={iconMap[otherProps.direction]}
+    icon={
+      <Icon
+        name={iconNameMap[otherProps.direction]}
+        isPresentational
+        shouldMirrorInRTL
+      />
+    }
   />
 )
 
diff --git a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss
index 2205ce3ed06..6e5d60a8276 100644
--- a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss
+++ b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss
@@ -4,7 +4,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
   width: 36px;
   background-color: transparent;
   color: rgba($color-purple-800-rgb, 0.7);
diff --git a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx
index 312e0854413..b60f0a5ae34 100644
--- a/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx
+++ b/packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { EllipsisIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TruncateIndicator.module.scss"
 
 export const TruncateIndicator = (): JSX.Element => (
@@ -7,6 +7,6 @@ export const TruncateIndicator = (): JSX.Element => (
     className={styles.truncateIndicatorWrapper}
     data-testid="truncate-indicator"
   >
-    <EllipsisIcon role="presentation" />
+    <Icon name="more_horiz" isPresentational />
   </div>
 )
diff --git a/packages/components/src/Popover/Popover.module.scss b/packages/components/src/Popover/Popover.module.scss
index 5bfc545bbf3..0fbe5903b66 100644
--- a/packages/components/src/Popover/Popover.module.scss
+++ b/packages/components/src/Popover/Popover.module.scss
@@ -140,15 +140,15 @@ $cautionary-box-border-color: var(--color-yellow-700);
 }
 
 .informativeIcon {
-  color: $color-blue-500;
+  color: var(--color-blue-500);
 }
 
 .positiveIcon {
-  color: $color-green-400;
+  color: var(--color-green-500);
 }
 
 .negativeIcon {
-  color: $color-red-500;
+  color: var(--color-red-500);
 }
 
 .cautionaryIcon {
diff --git a/packages/components/src/Popover/Popover.tsx b/packages/components/src/Popover/Popover.tsx
index 154123a1210..92872a606d4 100644
--- a/packages/components/src/Popover/Popover.tsx
+++ b/packages/components/src/Popover/Popover.tsx
@@ -2,8 +2,8 @@ import React, { HTMLAttributes, useMemo, useState } from "react"
 import classnames from "classnames"
 import { usePopper } from "react-popper"
 import { Heading } from "~components/Heading"
-import { CloseIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { Placement, PopoverSize, PopoverVariant } from "./types"
 import {
@@ -140,7 +140,7 @@ export const Popover = ({
                 type="button"
                 aria-label="close"
               >
-                <CloseIcon role="presentation" />
+                <Icon name="close" isPresentational isFilled />
               </button>
             )}
           </div>
diff --git a/packages/components/src/Popover/utils/classMappers.tsx b/packages/components/src/Popover/utils/classMappers.tsx
index cc3ed10047f..a167f5a868a 100644
--- a/packages/components/src/Popover/utils/classMappers.tsx
+++ b/packages/components/src/Popover/utils/classMappers.tsx
@@ -1,10 +1,5 @@
 import React from "react"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../Popover.module.scss"
 import { PopoverVariant, PopoverSize } from "../types"
 
@@ -43,15 +38,15 @@ export const mapVariantToIconClass = (
 export const mapVariantToIcon = (variant: PopoverVariant): JSX.Element => {
   switch (variant) {
     case "informative":
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
     case "positive":
-      return <SuccessIcon role="presentation" />
+      return <Icon name="check_circle" isPresentational isFilled />
     case "negative":
-      return <ExclamationIcon role="presentation" />
+      return <Icon name="error" isPresentational isFilled />
     case "cautionary":
-      return <CautionIcon role="presentation" />
+      return <Icon name="warning" isPresentational isFilled />
     default:
-      return <InformationIcon role="presentation" />
+      return <Icon name="info" isPresentational isFilled />
   }
 }
 
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx
index 1f4356b5e1b..9ffabbfcc85 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx
+++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -25,36 +25,36 @@ const ToggleIconButtonGroup = ({
   <StickerSheet.Row rowTitle={rowTitle}>
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="hover"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       isActive
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       data-sb-pseudo-styles="focus"
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
     />
     <ToggleIconButton
       label="bold"
-      icon={<BoldIcon role="presentation" />}
+      icon={<Icon name="format_bold" isPresentational />}
       {...props}
       disabled
       data-sb-pseudo-styles="focus"
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx
index 62d84f93afb..27fbf418bb5 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx
+++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx
@@ -1,13 +1,13 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 
 const meta = {
   title: "Components/RichTextEditor/Subcomponents/ToggleIconButton",
   component: ToggleIconButton,
   args: {
-    icon: <BoldIcon role="presentation" />,
+    icon: <Icon name="format_bold" isPresentational />,
     label: "Bold",
   },
   argTypes: {
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx
index 4975c1534a7..454c9805c90 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx
+++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
-import { BoldIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../ToggleIconButton"
 import { ToolbarSection } from "../ToolbarSection"
 import { Toolbar } from "."
@@ -11,14 +11,17 @@ const user = userEvent.setup()
 const ExampleToolbar = (): JSX.Element => (
   <Toolbar aria-label="Toolbar" aria-controls="editable-id">
     <ToolbarSection>
-      <ToggleIconButton label="Bold" icon={<BoldIcon role="presentation" />} />
+      <ToggleIconButton
+        label="Bold"
+        icon={<Icon name="format_bold" isPresentational />}
+      />
       <ToggleIconButton
         label="Italic"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_italic" isPresentational />}
       />
       <ToggleIconButton
         label="Underline"
-        icon={<BoldIcon role="presentation" />}
+        icon={<Icon name="format_underlined" isPresentational />}
       />
     </ToolbarSection>
   </Toolbar>
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx
index 0c09ccc1915..f716dcd244a 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx
+++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx
@@ -1,12 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import {
-  BoldIcon,
-  BullettedListIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToggleIconButton } from "../../ToggleIconButton"
 import { ToolbarSection } from "../../ToolbarSection"
 import { Toolbar } from "../index"
@@ -22,25 +16,37 @@ const meta = {
         <ToolbarSection>
           <ToggleIconButton
             label="Bold"
-            icon={<BoldIcon role="presentation" />}
+            icon={<Icon name="format_bold" isPresentational />}
           />
           <ToggleIconButton
             label="Italic"
-            icon={<ItalicsIcon role="presentation" />}
+            icon={<Icon name="format_italic" isPresentational />}
           />
           <ToggleIconButton
             label="Underline"
-            icon={<UnderlineIcon role="presentation" />}
+            icon={<Icon name="format_underlined" isPresentational />}
           />
         </ToolbarSection>
         <ToolbarSection>
           <ToggleIconButton
             label="Bullet list"
-            icon={<BullettedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_bulleted"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
           <ToggleIconButton
             label="Numbered list"
-            icon={<NumberedListIcon role="presentation" />}
+            icon={
+              <Icon
+                name="format_list_numbered"
+                isPresentational
+                shouldMirrorInRTL
+              />
+            }
           />
         </ToolbarSection>
       </>
diff --git a/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx b/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx
index ca5772864e2..1edf51f9b1c 100644
--- a/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx
+++ b/packages/components/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx
@@ -1,14 +1,5 @@
 import React from "react"
-import {
-  AddLinkIcon,
-  BoldIcon,
-  BullettedListIcon,
-  DecreaseIndentIcon,
-  IncreaseIndentIcon,
-  ItalicsIcon,
-  NumberedListIcon,
-  UnderlineIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { ToolbarItems, ToolbarControlTypes } from "../../types"
 import { listIsActive, markIsActive } from "../../utils/commands"
 import {
@@ -210,7 +201,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Bold",
-      icon: <BoldIcon role="presentation" />,
+      icon: <Icon name="format_bold" isPresentational />,
     })
   }
 
@@ -221,7 +212,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Italic",
-      icon: <ItalicsIcon role="presentation" />,
+      icon: <Icon name="format_italic" isPresentational />,
     })
   }
 
@@ -232,7 +223,7 @@ export const buildControlMap = (
       isActive: markIsActive(editorState, type),
       action: createToggleMarkCommand(type),
       label: "Underline",
-      icon: <UnderlineIcon role="presentation" />,
+      icon: <Icon name="format_underlined" isPresentational />,
     })
   }
 
@@ -243,7 +234,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Bullet List",
-      icon: <BullettedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_bulleted" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -254,7 +247,9 @@ export const buildControlMap = (
       action: createToggleListCommand(type),
       isActive: listIsActive(editorState, type, listNodes),
       label: "Numbered List",
-      icon: <NumberedListIcon role="presentation" />,
+      icon: (
+        <Icon name="format_list_numbered" isPresentational shouldMirrorInRTL />
+      ),
     })
   }
 
@@ -270,14 +265,26 @@ export const buildControlMap = (
         disabled: liftListIsDisabled(editorState),
         isActive: false,
         label: "Decrease indent",
-        icon: <DecreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_decrease"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       },
       {
         action: createIndentListCommand(),
         disabled: indentListIsDisabled(editorState),
         isActive: false,
         label: "Increase indent",
-        icon: <IncreaseIndentIcon role="presentation" />,
+        icon: (
+          <Icon
+            name="format_indent_increase"
+            isPresentational
+            shouldMirrorInRTL
+          />
+        ),
       }
     )
   }
@@ -290,7 +297,7 @@ export const buildControlMap = (
       disabled: editorState.selection.empty,
       isActive: false,
       label: "Link",
-      icon: <AddLinkIcon role="presentation" />,
+      icon: <Icon name="add_link" isPresentational />,
     })
   }
 
diff --git a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx
index 4a338b78ad7..cb5348e12c7 100644
--- a/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx
+++ b/packages/components/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx
@@ -1,7 +1,7 @@
 import React from "react"
-import { EditIcon, ExternalLinkIcon, RemoveLinkIcon } from "~components/Icon"
 import { usePopover } from "~components/Popover"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { SelectionPosition } from "../../types"
 import { Positioner } from "./Positioner"
 import styles from "./LinkPopover.module.scss"
@@ -26,7 +26,7 @@ export const LinkPopover = ({
       <Positioner ref={ElementRef} {...selectionPosition} />
       <Popover size="large">
         <div className={styles.popoverContent}>
-          <ExternalLinkIcon role="presentation" />
+          <Icon name="open_in_new" isPresentational />
           <div className={styles.popoverLinkContainer}>
             <Text
               variant="body"
@@ -44,13 +44,9 @@ export const LinkPopover = ({
             </Text>
           </div>
           <div className={styles.popoverActions}>
-            <EditIcon role="img" onClick={onEdit} aria-label="Edit link" />
+            <Icon name="edit" onClick={onEdit} alt="Edit link" />
           </div>
-          <RemoveLinkIcon
-            role="img"
-            onClick={onRemove}
-            aria-label="Remove link"
-          />
+          <Icon name="link_off" onClick={onRemove} alt="Remove link" />
         </div>
       </Popover>
     </>
diff --git a/packages/components/src/Select/Select.module.scss b/packages/components/src/Select/Select.module.scss
index e30da73917d..7d3760cbad3 100644
--- a/packages/components/src/Select/Select.module.scss
+++ b/packages/components/src/Select/Select.module.scss
@@ -345,6 +345,8 @@ $focus-border-color: $color-blue-500;
     }
 
     .dropdownIndicator {
+      --icon-size: 14;
+
       padding-top: 0;
       padding-bottom: 0;
       transform: translateY(1px);
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 9b691dbe1a3..bb99d54a07f 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -7,9 +7,9 @@ import ReactSelect, {
 } from "react-select"
 import Async, { AsyncProps as ReactAsyncSelectProps } from "react-select/async"
 import { FieldMessage } from "~components/FieldMessage"
-import { ChevronDownIcon, ChevronUpIcon, ClearIcon } from "~components/Icon"
 import { Label } from "~components/Label"
 import { Tag } from "~components/Tag"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./Select.module.scss"
 
 export type SelectProps = {
@@ -183,11 +183,14 @@ const Placeholder: typeof components.Placeholder = props => (
 
 const DropdownIndicator: typeof components.DropdownIndicator = props => (
   <components.DropdownIndicator {...props} className={styles.dropdownIndicator}>
-    {props.selectProps.menuIsOpen ? (
-      <ChevronUpIcon role="presentation" />
-    ) : (
-      <ChevronDownIcon role="presentation" />
-    )}
+    <Icon
+      name={
+        props.selectProps.menuIsOpen
+          ? "keyboard_arrow_up"
+          : "keyboard_arrow_down"
+      }
+      isPresentational
+    />
   </components.DropdownIndicator>
 )
 
@@ -258,6 +261,6 @@ const ValueContainer: typeof components.ValueContainer = props => (
 )
 const ClearIndicator: typeof components.ClearIndicator = props => (
   <components.ClearIndicator {...props} className={styles.clearIndicator}>
-    <ClearIcon role="presentation" />
+    <Icon name="cancel" isPresentational isFilled />
   </components.ClearIndicator>
 )
diff --git a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx
index 7f8df96e2f9..bdb02ba5415 100644
--- a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx
+++ b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.spec.tsx
@@ -7,20 +7,19 @@ const DropdownButtonWrapper = (
 ): JSX.Element => <DropdownButton {...props} />
 
 describe("<DropdownButton />", () => {
-  it("renders icon with default aria-label", async () => {
+  it("has default accessible name", async () => {
     render(<DropdownButtonWrapper />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Additional actions" })
-      expect(button.getAttribute("aria-label")).toBe("Additional actions")
-      expect(button.firstChild?.nodeName).toEqual("svg")
+      expect(button).toBeInTheDocument()
     })
   })
 
-  it("renders custom aria-label", async () => {
+  it("can customise accessible name", async () => {
     render(<DropdownButtonWrapper aria-label="Custom aria label" />)
     await waitFor(() => {
       const button = screen.getByRole("button", { name: "Custom aria label" })
-      expect(button.getAttribute("aria-label")).toBe("Custom aria label")
+      expect(button).toBeInTheDocument()
     })
   })
 })
diff --git a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx
index 48fcdae7922..947a9a2a707 100644
--- a/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx
+++ b/packages/components/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
 import classnames from "classnames"
-import { ChevronDownIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { BaseButton, BaseButtonProps } from "../BaseButton"
 import styles from "./DropdownButton.module.scss"
 
@@ -23,7 +23,7 @@ export const DropdownButton = ({
           description: "Label for a dropdown menu holding additional actions",
         })
       }
-      icon={<ChevronDownIcon role="presentation" />}
+      icon={<Icon name="keyboard_arrow_down" isPresentational />}
       classNameOverride={classnames(styles.dropdownButton, classNameOverride)}
       {...restProps}
     />
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
index 1bf4dd7757c..9333d4394c0 100644
--- a/packages/components/src/Table/Table.tsx
+++ b/packages/components/src/Table/Table.tsx
@@ -2,11 +2,7 @@ import React, { cloneElement, HTMLAttributes, ReactElement } from "react"
 import classnames from "classnames"
 import { Checkbox, CheckedStatus } from "~components/Checkbox"
 import { Heading } from "~components/Heading"
-import {
-  ExclamationIcon,
-  SortAscendingIcon,
-  SortDescendingIcon,
-} from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { Tooltip } from "~components/__overlays__/Tooltip/v1"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./Table.module.scss"
@@ -169,7 +165,7 @@ export const TableHeaderRowCell = ({
       )}
       {tooltipInfo != null && !isTooltipIconHidden ? (
         <div className={styles.headerRowCellTooltipIcon}>
-          <ExclamationIcon role="presentation" />
+          <Icon name="error" isPresentational isFilled />
         </div>
       ) : null}
       {/* If an "icon" is supplied, the label is displayed inside the icon aria title instead */}
@@ -192,9 +188,9 @@ export const TableHeaderRowCell = ({
           )}
         >
           {sorting === "ascending" || sortingArrowsOnHover === "ascending" ? (
-            <SortAscendingIcon role="presentation" />
+            <Icon name="arrow_drop_up" isPresentational />
           ) : (
-            <SortDescendingIcon role="presentation" />
+            <Icon name="arrow_drop_down" isPresentational />
           )}
         </div>
       )}
diff --git a/packages/components/src/Table/_docs/Table.stickersheet.stories.tsx b/packages/components/src/Table/_docs/Table.stickersheet.stories.tsx
index 5c8acab5750..0c872c19524 100644
--- a/packages/components/src/Table/_docs/Table.stickersheet.stories.tsx
+++ b/packages/components/src/Table/_docs/Table.stickersheet.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
-import { EffectivenessIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import { StickerSheetStory } from "~storybook/components/StickerSheet"
 import {
   TableCard,
@@ -178,7 +178,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               width={4 / 12}
               sorting="descending"
               onClick={action("header 1")}
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
             <TableHeaderRowCell
               reversed={isReversed}
@@ -187,7 +187,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               sorting="ascending"
               onClick={action("header 3")}
               data-sb-pseudo-styles="hover"
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
             <TableHeaderRowCell
               reversed={isReversed}
@@ -196,7 +196,7 @@ const TableTemplate: StoryObj<StickerSheetStory> = {
               sorting="ascending"
               onClick={action("header 2")}
               data-sb-pseudo-styles="focus-visible"
-              icon={<EffectivenessIcon role="img" aria-label="Focus" />}
+              icon={<Icon name="potted_plant" alt="Focus" isFilled />}
             />
           </TableRow>
         </TableHeader>
diff --git a/packages/components/src/Table/_docs/Table.stories.tsx b/packages/components/src/Table/_docs/Table.stories.tsx
index 7756c865bb5..89c7c27e1d8 100644
--- a/packages/components/src/Table/_docs/Table.stories.tsx
+++ b/packages/components/src/Table/_docs/Table.stories.tsx
@@ -3,8 +3,8 @@ import { action } from "@storybook/addon-actions"
 import { Meta, StoryObj } from "@storybook/react"
 import { Checkbox } from "~components/Checkbox"
 import { Divider } from "~components/Divider"
-import { EffectivenessIcon } from "~components/Icon"
 import { Text } from "~components/Text"
+import { Icon } from "~components/__future__/Icon"
 import {
   TableCard,
   TableCardProps,
@@ -331,12 +331,12 @@ export const IconVariant: StoryObj<TableStoryProps> = {
   args: {
     headerRowCells: [
       {
-        icon: <EffectivenessIcon role="presentation" />,
+        icon: <Icon name="potted_plant" isPresentational isFilled />,
         labelText: "Resource name",
         width: 3 / 12,
       },
       {
-        icon: <EffectivenessIcon role="presentation" />,
+        icon: <Icon name="potted_plant" isPresentational isFilled />,
         labelText: "Supplementary information",
         width: 3 / 12,
       },
diff --git a/packages/components/src/Tag/Tag.module.scss b/packages/components/src/Tag/Tag.module.scss
index b5f290ba5a5..ddd607e303e 100644
--- a/packages/components/src/Tag/Tag.module.scss
+++ b/packages/components/src/Tag/Tag.module.scss
@@ -55,6 +55,8 @@ $small: $spacing-md;
 }
 
 .iconWrapper {
+  --icon-size: 16;
+
   position: relative;
   height: 16px;
   width: 16px;
diff --git a/packages/components/src/Tag/Tag.tsx b/packages/components/src/Tag/Tag.tsx
index bf715bf6800..6f6beb418c4 100644
--- a/packages/components/src/Tag/Tag.tsx
+++ b/packages/components/src/Tag/Tag.tsx
@@ -1,14 +1,8 @@
 import React from "react"
 import classnames from "classnames"
 import { Avatar, AvatarProps } from "~components/Avatar"
-import {
-  CautionIcon,
-  ClearIcon,
-  ExclamationIcon,
-  InformationIcon,
-  LiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
+import { LiveIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TagVariants } from "./types"
 import styles from "./Tag.module.scss"
 
@@ -85,25 +79,25 @@ export const Tag = (props: TagProps): JSX.Element => {
                 case "validationPositive":
                   return (
                     <span className={styles.validationIcon}>
-                      <SuccessIcon role="presentation" />
+                      <Icon name="check_circle" isPresentational isFilled />
                     </span>
                   )
                 case "validationNegative":
                   return (
                     <span className={styles.validationIcon}>
-                      <ExclamationIcon role="presentation" />
+                      <Icon name="error" isPresentational isFilled />
                     </span>
                   )
                 case "validationCautionary":
                   return (
                     <span className={styles.validationIcon}>
-                      <CautionIcon role="presentation" />
+                      <Icon name="warning" isPresentational isFilled />
                     </span>
                   )
                 case "validationInformative":
                   return (
                     <span className={styles.validationIcon}>
-                      <InformationIcon role="presentation" />
+                      <Icon name="info" isPresentational isFilled />
                     </span>
                   )
                 case "profile":
@@ -137,7 +131,7 @@ export const Tag = (props: TagProps): JSX.Element => {
                 onMouseLeave={onMouseLeave}
               >
                 <div className={styles.iconWrapper}>
-                  <ClearIcon inheritSize role="img" aria-label="Dismiss" />
+                  <Icon name="cancel" alt="Dismiss" isFilled />
                 </div>
               </button>
             </>
diff --git a/packages/components/src/Text/Text.module.scss b/packages/components/src/Text/Text.module.scss
index a28439c821c..e0dfa81047a 100644
--- a/packages/components/src/Text/Text.module.scss
+++ b/packages/components/src/Text/Text.module.scss
@@ -2,6 +2,8 @@
 @import "~@kaizen/design-tokens/sass/typography";
 
 .text {
+  --icon-vertical-align: text-bottom;
+
   margin: 0;
 
   strong {
diff --git a/packages/components/src/TextField/TextField.spec.tsx b/packages/components/src/TextField/TextField.spec.tsx
index c6febc04320..818ab6a0def 100644
--- a/packages/components/src/TextField/TextField.spec.tsx
+++ b/packages/components/src/TextField/TextField.spec.tsx
@@ -26,25 +26,30 @@ describe("<TextField />", () => {
       <TextField
         {...defaultProps}
         description={undefined}
-        validationMessage="Error message"
+        status="caution"
+        validationMessage="Revision required"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "caution message" instead
     const input = getByRole("textbox", {
-      description: "Error message",
+      description: "warning Revision required",
     })
 
     expect(input).toBeInTheDocument()
   })
+
   it("renders correct aria-describedby when both description and validation message provided", () => {
     const { getByRole } = render(
       <TextField
         {...defaultProps}
         description="Description text"
-        validationMessage="Error message"
+        status="error"
+        validationMessage="Something went wrong"
       />
     )
+    // React Testing Library bug: Icon should be showing aria-label "error message" instead
     const input = getByRole("textbox", {
-      description: "Description text Error message",
+      description: "Description text error Something went wrong",
     })
 
     expect(input).toBeInTheDocument()
diff --git a/packages/components/src/TextField/TextField.tsx b/packages/components/src/TextField/TextField.tsx
index c636b04ff59..a4c6c06c458 100644
--- a/packages/components/src/TextField/TextField.tsx
+++ b/packages/components/src/TextField/TextField.tsx
@@ -2,9 +2,9 @@ import React, { useId } from "react"
 import classnames from "classnames"
 import { FieldGroup } from "~components/FieldGroup"
 import { FieldMessage } from "~components/FieldMessage"
-import { SuccessIcon } from "~components/Icon"
 import { Input, InputProps } from "~components/Input"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./TextField.module.scss"
 
 type OmittedInputProps =
@@ -92,7 +92,7 @@ export const TextField = ({
                 disabled && styles.disabled
               )}
             >
-              <SuccessIcon role="presentation" />
+              <Icon name="check_circle" isPresentational isFilled />
             </div>
           )
         }
diff --git a/packages/components/src/TextField/_docs/TextField.stories.tsx b/packages/components/src/TextField/_docs/TextField.stories.tsx
index 4beedb3078c..0862fc348a3 100644
--- a/packages/components/src/TextField/_docs/TextField.stories.tsx
+++ b/packages/components/src/TextField/_docs/TextField.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { WritingIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TextField } from "../index"
 
 const meta = {
@@ -40,8 +40,9 @@ export const Types: Story = {
   },
 }
 
-export const Icon: Story = {
-  args: { icon: <WritingIcon role="presentation" /> },
+export const IconStory: Story = {
+  name: "Icon",
+  args: { icon: <Icon name="edit" isPresentational isFilled /> },
 }
 
 export const Description: Story = {
diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx
index ee18d066d4e..47ae00f2e43 100644
--- a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx
+++ b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx
@@ -1,10 +1,10 @@
 import React, { HTMLAttributes, useState } from "react"
 import classnames from "classnames"
 import { AllowedHeadingTags, Heading } from "~components/Heading"
-import { ArrowBackwardIcon, InformationIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { GenericButtonProps } from "~components/__actions__/Button/v1/GenericButton"
 import { IconButton, Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./GenericTile.module.scss"
 
@@ -81,7 +81,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<InformationIcon role="presentation" />}
+            icon={<Icon name="info" isPresentational isFilled />}
             onClick={(): void => setIsFlipped(true)}
             disabled={isFlipped}
             aria-hidden={isFlipped}
@@ -140,7 +140,7 @@ export const GenericTile = ({
         <div className={styles.informationBtn}>
           <IconButton
             label="Information"
-            icon={<ArrowBackwardIcon role="presentation" />}
+            icon={<Icon name="arrow_back" isPresentational />}
             onClick={(): void => setIsFlipped(false)}
             disabled={!isFlipped}
             aria-hidden={!isFlipped}
diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
index 23d06eca1a3..6ee198fd601 100644
--- a/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
+++ b/packages/components/src/TitleBlockZen/TitleBlockZen.module.scss
@@ -525,6 +525,7 @@ $tab-container-height-medium-and-small-collapsed: 0;
   align-items: center;
   top: 50%;
   transform: translateY(-50%);
+  text-decoration: none;
 
   @include ca-position(
     $start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid})
diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.spec.tsx b/packages/components/src/TitleBlockZen/TitleBlockZen.spec.tsx
index 8e14bd512e8..51be274c4b3 100644
--- a/packages/components/src/TitleBlockZen/TitleBlockZen.spec.tsx
+++ b/packages/components/src/TitleBlockZen/TitleBlockZen.spec.tsx
@@ -258,7 +258,7 @@ describe("<TitleBlockZen />", () => {
         </TitleBlockZen>
       )
       const btn = getByTestId("title-block-primary-action-button")
-      expect(btn.textContent).toEqual(primaryActionAsMenu.label)
+      expect(btn).toHaveAccessibleName(primaryActionAsMenu.label)
       await user.click(btn)
 
       await waitFor(() => {
diff --git a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx
index ff175b72090..bc3cf90a98d 100644
--- a/packages/components/src/TitleBlockZen/TitleBlockZen.tsx
+++ b/packages/components/src/TitleBlockZen/TitleBlockZen.tsx
@@ -2,10 +2,10 @@ import React from "react"
 import classnames from "classnames"
 import { Avatar } from "~components/Avatar"
 import { Heading } from "~components/Heading"
-import { ArrowLeftIcon, ArrowRightIcon, HamburgerIcon } from "~components/Icon"
 import { Select } from "~components/Select"
 import { Tag } from "~components/Tag"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { useMediaQueries } from "~components/utils/useMediaQueries"
 import { MainActions } from "./subcomponents/MainActions"
 import { MobileActions } from "./subcomponents/MobileActions"
@@ -157,15 +157,12 @@ const Breadcrumb = ({
   textDirection,
 }: TitleBlockBreadcrumbProps): JSX.Element => {
   const { path, handleClick, text, render } = breadcrumb
-  const icon =
-    textDirection === "rtl" ? (
-      <ArrowRightIcon role="presentation" />
-    ) : (
-      <ArrowLeftIcon role="presentation" />
-    )
+
   const InnerContents = (): JSX.Element => (
     <>
-      <div className={styles.circle}>{icon}</div>
+      <div className={styles.circle}>
+        <Icon name="arrow_back" isPresentational shouldMirrorInRTL />
+      </div>
       <span
         className={styles.breadcrumbTextLink}
         data-automation-id={textAutomationId}
@@ -318,7 +315,7 @@ export const TitleBlockZen = ({
                       <div className={styles.hamburger}>
                         <IconButton
                           onClick={handleHamburgerClick}
-                          icon={<HamburgerIcon role="presentation" />}
+                          icon={<Icon name="menu" isPresentational />}
                           label="Open menu"
                           reversed={isReversed(variant)}
                         />
diff --git a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx
index 4877010d7a9..f09a3a83430 100644
--- a/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx
+++ b/packages/components/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, StarOnIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { assetUrl } from "~components/utils/hostedAssets"
 import { StickerSheet } from "~storybook/components/StickerSheet"
 import { NavigationTab, TitleBlockZen } from "../index"
@@ -16,7 +16,7 @@ const SECONDARY_ACTIONS = [
       {
         onClick: (): void => alert("test"),
         label: "Secondary menu action 2",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
     ],
   },
@@ -41,7 +41,7 @@ const meta = {
     },
     primaryAction: {
       label: "Primary link",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
       disabled: true,
       href: "#",
     },
@@ -53,11 +53,11 @@ const meta = {
     secondaryOverflowMenuItems: [
       {
         label: "Overflow action 1",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
       {
         label: "Overflow link 1",
-        icon: <StarOnIcon role="presentation" />,
+        icon: <Icon name="star" isPresentational isFilled />,
       },
     ],
     handleHamburgerClick: (): void => alert("Hamburger clicked"),
diff --git a/packages/components/src/TitleBlockZen/subcomponents/MainActions.tsx b/packages/components/src/TitleBlockZen/subcomponents/MainActions.tsx
index 7bd71abc5b5..87b30cf2bdb 100644
--- a/packages/components/src/TitleBlockZen/subcomponents/MainActions.tsx
+++ b/packages/components/src/TitleBlockZen/subcomponents/MainActions.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
@@ -71,7 +71,9 @@ export const MainActions = ({
                       label={primaryAction.label}
                       primary
                       reversed={reversed}
-                      icon={<ChevronDownIcon role="presentation" />}
+                      icon={
+                        <Icon name="keyboard_arrow_down" isPresentational />
+                      }
                       iconPosition="end"
                       data-automation-id="title-block-primary-action-button"
                       data-testid="title-block-primary-action-button"
@@ -162,7 +164,7 @@ export const MainActions = ({
                 id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
                 label="Open secondary menu"
                 reversed={reversed}
-                icon={<MeatballsIcon role="presentation" />}
+                icon={<Icon name="more_horiz" isPresentational />}
               />
             }
           >
diff --git a/packages/components/src/TitleBlockZen/subcomponents/MobileActions.tsx b/packages/components/src/TitleBlockZen/subcomponents/MobileActions.tsx
index 7a222bd4a33..9f3422630cd 100644
--- a/packages/components/src/TitleBlockZen/subcomponents/MobileActions.tsx
+++ b/packages/components/src/TitleBlockZen/subcomponents/MobileActions.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from "react"
 import classnames from "classnames"
 import { FocusOn } from "react-focus-on"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import {
   MenuItem,
   MenuList,
   MenuHeading,
   ButtonProps,
 } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from "../constants"
 import {
   DefaultActionProps,
@@ -352,11 +352,10 @@ const DrawerHandle = ({
           >
             {primaryAction.label}
             <span className={styles.mobileActionsChevronSquare}>
-              {isOpen ? (
-                <ChevronDownIcon role="presentation" />
-              ) : (
-                <ChevronUpIcon role="presentation" />
-              )}
+              <Icon
+                name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+                isPresentational
+              />
             </span>
           </button>
         </div>
@@ -407,11 +406,10 @@ const DrawerHandle = ({
             id={TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID}
             aria-label="Other actions"
           >
-            {isOpen ? (
-              <ChevronDownIcon role="presentation" />
-            ) : (
-              <ChevronUpIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+              isPresentational
+            />
           </button>
         )}
       </div>
@@ -440,11 +438,10 @@ const DrawerHandle = ({
         >
           {renderDrawerHandleLabel("Other actions")}
           <span className={styles.mobileActionsChevronSquare}>
-            {isOpen ? (
-              <ChevronDownIcon role="presentation" />
-            ) : (
-              <ChevronUpIcon role="presentation" />
-            )}
+            <Icon
+              name={isOpen ? "keyboard_arrow_down" : "keyboard_arrow_up"}
+              isPresentational
+            />
           </span>
         </button>
       </div>
diff --git a/packages/components/src/TitleBlockZen/subcomponents/SecondaryActions.tsx b/packages/components/src/TitleBlockZen/subcomponents/SecondaryActions.tsx
index ba2646b4d5a..8072b1e62b1 100644
--- a/packages/components/src/TitleBlockZen/subcomponents/SecondaryActions.tsx
+++ b/packages/components/src/TitleBlockZen/subcomponents/SecondaryActions.tsx
@@ -1,6 +1,6 @@
 import React from "react"
-import { ChevronDownIcon, MeatballsIcon } from "~components/Icon"
 import { Menu, MenuList, Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import styles from "../TitleBlockZen.module.scss"
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from "../constants"
 import { SecondaryActionsProps, TitleBlockMenuItemProps } from "../types"
@@ -25,7 +25,7 @@ const renderSecondaryOverflowMenu = (
         <IconButton
           label="Open secondary menu"
           reversed={reversed}
-          icon={<MeatballsIcon role="presentation" />}
+          icon={<Icon name="more_horiz" isPresentational />}
           id={TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID}
         />
       }
@@ -63,7 +63,7 @@ export const SecondaryActions = ({
                     secondary
                     label={action.label}
                     reversed={reversed}
-                    icon={<ChevronDownIcon role="presentation" />}
+                    icon={<Icon name="keyboard_arrow_down" isPresentational />}
                     iconPosition="end"
                   />
                 }
diff --git a/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss b/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss
index b97f7e504bb..0e4235fa1d6 100644
--- a/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss
+++ b/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss
@@ -51,9 +51,6 @@ $focus-ring-offset: 1px;
   background-color: $color-white;
   border: $border-borderless-border-width $border-borderless-border-style
     $border-borderless-border-color;
-  box-sizing: content-box;
-  width: calc(#{$spacing-md} * 0.9);
-  height: calc(#{$spacing-md} * 0.9);
   border-radius: $spacing-md;
   transition:
     left $animation-timing,
diff --git a/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx b/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx
index 2843b0377d4..e8c5d953797 100644
--- a/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx
+++ b/packages/components/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx
@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from "react"
 import classnames from "classnames"
-import { CheckIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./ToggleSwitch.module.scss"
 
@@ -41,7 +41,7 @@ export const ToggleSwitch = ({
       />
       <span className={styles.track}>
         <span className={styles.thumb}>
-          <CheckIcon classNameOverride={styles.checkIcon} role="presentation" />
+          <Icon name="check" isPresentational className={styles.checkIcon} />
         </span>
       </span>
     </span>
diff --git a/packages/components/src/Workflow/_docs/Workflow.stories.tsx b/packages/components/src/Workflow/_docs/Workflow.stories.tsx
index 5e79c7b25e8..27701e3ec84 100644
--- a/packages/components/src/Workflow/_docs/Workflow.stories.tsx
+++ b/packages/components/src/Workflow/_docs/Workflow.stories.tsx
@@ -1,11 +1,10 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { Heading } from "~components/Heading"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
 import { Button } from "~components/__actions__/v2"
-import { Tag } from "~components/__future__"
+import { Icon, Tag } from "~components/__future__"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
@@ -55,7 +54,7 @@ const meta = {
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
       />,
@@ -85,14 +84,14 @@ export const MultipleActions: Story = {
       <Button
         key="would-use-uui-1"
         label="Preview"
-        icon={<VisibleIcon role="presentation" />}
+        icon={<Icon name="visibility" isPresentational isFilled />}
         secondary
         iconPosition="start"
       />,
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}
diff --git a/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx b/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx
index 3b60bdafb69..9dfa8601191 100644
--- a/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx
+++ b/packages/components/src/Workflow/_docs/WorkflowHeader.stories.tsx
@@ -1,8 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
-import { Tag } from "~components/__future__"
+import { Icon, Tag } from "~components/__future__"
 import { Workflow } from "../"
 import { WorkflowControls } from "./controls"
 
@@ -20,7 +19,7 @@ const meta = {
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}
@@ -51,14 +50,14 @@ export const MultipleActions: Story = {
       <Button
         key="would-use-uui-1"
         label="Preview"
-        icon={<VisibleIcon role="presentation" />}
+        icon={<Icon name="visibility" isPresentational isFilled />}
         secondary
         iconPosition="start"
       />,
       <Button
         key="would-use-uui-2"
         label="Save and close"
-        icon={<CloseIcon role="presentation" />}
+        icon={<Icon name="close" isPresentational />}
         secondary
         iconPosition="end"
         onClick={(): void => alert("mock example of a save action")}
diff --git a/packages/components/src/Workflow/_docs/controls/controls.tsx b/packages/components/src/Workflow/_docs/controls/controls.tsx
index e1654e7f5a3..da529aa9dcd 100644
--- a/packages/components/src/Workflow/_docs/controls/controls.tsx
+++ b/packages/components/src/Workflow/_docs/controls/controls.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { ArgTypes } from "@storybook/react"
-import { CloseIcon, VisibleIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {
@@ -14,7 +14,7 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
@@ -23,14 +23,14 @@ export const WorkflowControls: Partial<ArgTypes> = {
         <Button
           key="would-use-uui-1"
           label="Close"
-          icon={<CloseIcon role="presentation" />}
+          icon={<Icon name="close" isPresentational />}
           secondary
           iconPosition="end"
         />,
         <Button
           key="would-use-uui-2"
           label="Preview"
-          icon={<VisibleIcon role="presentation" />}
+          icon={<Icon name="visibility" isPresentational isFilled />}
           secondary
           iconPosition="start"
         />,
diff --git a/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx b/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx
index 5f807acb560..cf445bea72b 100644
--- a/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx
+++ b/packages/components/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx
@@ -1,11 +1,7 @@
 import React from "react"
 import classnames from "classnames"
-import {
-  IndicatorActiveIcon,
-  IndicatorInactiveIcon,
-  SuccessIcon,
-} from "~components/Icon"
 import { VisuallyHidden } from "~components/VisuallyHidden"
+import { Icon } from "~components/__future__/Icon"
 import styles from "./ProgressStepper.module.css"
 
 export type Step = {
@@ -34,39 +30,18 @@ const getStepStatus = (
 } => {
   if (isComplete) {
     return {
-      icon: (
-        <SuccessIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="success"
-        />
-      ),
+      icon: <Icon key={index} name="check_circle" isPresentational isFilled />,
       accessibleName: `Completed: ${step.label}`,
     }
   }
   if (isCurrentStep) {
     return {
-      icon: (
-        <IndicatorActiveIcon
-          key={index}
-          inheritSize
-          role="presentation"
-          classNameOverride="active"
-        />
-      ),
+      icon: <Icon key={index} name="radio_button_checked" isPresentational />,
       accessibleName: `Current: ${step.label}`,
     }
   }
   return {
-    icon: (
-      <IndicatorInactiveIcon
-        key={index}
-        inheritSize
-        classNameOverride="incomplete"
-        role="presentation"
-      />
-    ),
+    icon: <Icon key={index} name="radio_button_unchecked" isPresentational />,
     accessibleName: `Not started: ${step.label}`,
   }
 }
@@ -91,7 +66,7 @@ export const ProgressStepper = ({
         {steps.map((step, index: number) => {
           const isCurrentStep = currentStepIndex === index
           const isCompletedStep = index < currentStepIndex || isComplete
-          const { accessibleName, icon: Icon } = getStepStatus(
+          const { accessibleName, icon } = getStepStatus(
             isCompletedStep,
             isCurrentStep,
             step,
@@ -122,7 +97,7 @@ export const ProgressStepper = ({
                       [styles.isCompleted]: isCompletedStep,
                     })}
                   >
-                    {Icon}
+                    {icon}
                   </span>
                 </div>
                 {index < steps.length - 1 && (
diff --git a/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx b/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx
index 38cf1497214..a118a7c7080 100644
--- a/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx
+++ b/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stickersheet.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { AddIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -69,12 +69,12 @@ const StickerSheetTemplate: StickerSheetStory = {
 
     const ICON_LEFT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const ICON_RIGHT_PROPS: ButtonProps = {
       label: "Label",
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 
@@ -84,12 +84,12 @@ const StickerSheetTemplate: StickerSheetStory = {
     }
     const BADGE_LEFT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="add" isPresentational />,
     }
 
     const BADGE_RIGHT_PROPS: ButtonProps = {
       ...BADGE_PROPS,
-      icon: <AddIcon role="presentation" />,
+      icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
       iconPosition: "end",
     }
 
diff --git a/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx b/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx
index e9e117eba7e..a215169070d 100644
--- a/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx
+++ b/packages/components/src/__actions__/Button/v1/Button/_docs/Button.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { AddIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, AddIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<AddIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="add" isPresentational />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <AddIcon role="presentation" />,
+    icon: <Icon name="add" isPresentational />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }
diff --git a/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx b/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx
index fadbce25f96..260279de835 100644
--- a/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx
+++ b/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stickersheet.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { FilterIcon, MeatballsIcon, TrashIcon } from "~components/Icon"
 import { ButtonProps } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -30,14 +30,14 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Default",
     props: {
       label: "Default label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
     },
   },
   {
     title: "Primary",
     props: {
       label: "Primary label",
-      icon: <MeatballsIcon role="presentation" />,
+      icon: <Icon name="more_horiz" isPresentational />,
       primary: true,
     },
   },
@@ -45,7 +45,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Destructive",
     props: {
       label: "Label",
-      icon: <TrashIcon role="presentation" />,
+      icon: <Icon name="delete" isPresentational isFilled />,
       destructive: true,
     },
   },
@@ -53,7 +53,7 @@ const REVERSED__VARIANT_PROPS: Array<{
     title: "Secondary",
     props: {
       label: "Label",
-      icon: <FilterIcon role="presentation" />,
+      icon: <Icon name="tune" isPresentational />,
       secondary: true,
     },
   },
@@ -72,7 +72,7 @@ const StickerSheetTemplate: StickerSheetStory = {
             title: "Secondary Destructive",
             props: {
               label: "Label",
-              icon: <TrashIcon role="presentation" />,
+              icon: <Icon name="delete" isPresentational isFilled />,
               secondary: true,
               destructive: true,
             },
diff --git a/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx b/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx
index 750b5838872..b3b9289b5b6 100644
--- a/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx
+++ b/packages/components/src/__actions__/Button/v1/IconButton/_docs/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
@@ -11,14 +11,14 @@ const meta = {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 
diff --git a/packages/components/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx b/packages/components/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx
index d7c1c12ac81..d29b647b0b1 100644
--- a/packages/components/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx
+++ b/packages/components/src/__actions__/Button/v2/Button/_docs/Button.stories.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react"
 import { StoryObj, Meta } from "@storybook/react"
-import { ArrowForwardIcon, ArrowRightIcon } from "~components/Icon"
 import { LoadingInput } from "~components/Loading"
 import { TextField } from "~components/TextField"
+import { Icon } from "~components/__future__/Icon"
 import { Button } from "../index"
 
 const meta = {
@@ -65,12 +65,13 @@ export const Disabled: Story = {
 const sourceCodeIcon = `
 import { Button, ArrowForwardIcon } from "@kaizen/components"
 
-<Button label="Label" icon={<ArrowForwardIcon role="presentation" />} />
+<Button label="Label" icon={<Icon name="arrow_forward" isPresentational shouldMirrorInRTL />} />
 `
 
-export const Icon: Story = {
+export const IconStory: Story = {
+  name: "Icon",
   args: {
-    icon: <ArrowForwardIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
   },
   parameters: {
     docs: { source: { code: sourceCodeIcon } },
@@ -79,7 +80,7 @@ export const Icon: Story = {
 
 export const IconPosition: Story = {
   args: {
-    icon: <ArrowRightIcon role="presentation" />,
+    icon: <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
     iconPosition: "end",
   },
 }
diff --git a/packages/components/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx b/packages/components/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx
index 6bc1d4fcaf0..b74ab60ace8 100644
--- a/packages/components/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx
+++ b/packages/components/src/__actions__/Button/v2/IconButton/_docs/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AddIcon, MeatballsIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { IconButton } from "../index"
 
 const meta = {
@@ -11,14 +11,14 @@ const meta = {
       options: ["MeatballsIcon", "AddIcon"],
       control: { type: "radio" },
       mapping: {
-        MeatballsIcon: <MeatballsIcon role="presentation" />,
-        AddIcon: <AddIcon role="presentation" />,
+        MeatballsIcon: <Icon name="more_horiz" isPresentational />,
+        AddIcon: <Icon name="add" isPresentational />,
       },
     },
   },
   args: {
     label: "icon button",
-    icon: <MeatballsIcon role="presentation" />,
+    icon: <Icon name="more_horiz" isPresentational />,
   },
 } satisfies Meta<typeof IconButton>
 
diff --git a/packages/components/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx b/packages/components/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx
index 4290912da35..9f92c28b5c4 100644
--- a/packages/components/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v1/_docs/Menu.stickersheet.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { ChevronDownIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -30,7 +30,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }
@@ -45,7 +45,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               button={
                 <Button
                   label="Menu"
-                  icon={<ChevronDownIcon role="presentation" />}
+                  icon={<Icon name="keyboard_arrow_down" isPresentational />}
                   iconPosition="end"
                 />
               }
diff --git a/packages/components/src/__actions__/Menu/v1/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v1/_docs/Menu.stories.tsx
index 460f76191fc..adadea59803 100644
--- a/packages/components/src/__actions__/Menu/v1/_docs/Menu.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v1/_docs/Menu.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Menu } from "../index"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
@@ -14,7 +14,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -24,7 +24,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>
diff --git a/packages/components/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx b/packages/components/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx
index 1537b546121..c9d2f4032f6 100644
--- a/packages/components/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx
+++ b/packages/components/src/__actions__/Menu/v1/_docs/MenuContentExample.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { DuplicateIcon, EditIcon, TrashIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuHeading } from "../subcomponents/MenuHeading"
 import { MenuItem } from "../subcomponents/MenuItem"
 import { MenuList } from "../subcomponents/MenuList"
@@ -34,7 +34,7 @@ export const MenuContentExample = ({
               alert("Hello")
               e.preventDefault()
             }}
-            icon={<EditIcon role="presentation" />}
+            icon={<Icon name="edit" isPresentational isFilled />}
             label="Menu button"
           />
           <MenuItem
@@ -46,7 +46,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<DuplicateIcon role="presentation" />}
+            icon={<Icon name="content_copy" isPresentational isFilled />}
             label="Menu button but the label is too long"
           />
           <MenuItem
@@ -58,7 +58,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             destructive
             label="Destructive Menu button"
           />
@@ -71,7 +71,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             label="Disabled Menu button"
           />
@@ -84,7 +84,7 @@ export const MenuContentExample = ({
             ): void => {
               e.preventDefault()
             }}
-            icon={<TrashIcon role="presentation" />}
+            icon={<Icon name="delete" isPresentational isFilled />}
             disabled
             destructive
             label="Disabled Destructive Menu button"
diff --git a/packages/components/src/__actions__/Menu/v1/_docs/examples.tsx b/packages/components/src/__actions__/Menu/v1/_docs/examples.tsx
index a2bd55255c5..8070a45921f 100644
--- a/packages/components/src/__actions__/Menu/v1/_docs/examples.tsx
+++ b/packages/components/src/__actions__/Menu/v1/_docs/examples.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { action } from "@storybook/addon-actions"
-import { DuplicateIcon, EditIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { MenuItem, MenuList } from "../"
 
 export const exampleActionButtonPropsButton = {
@@ -16,12 +16,12 @@ export const exampleActionButtonPropsAnchor = {
 export const exampleDropdownContentEnabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       onClick={action("clicked")}
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>
@@ -30,12 +30,12 @@ export const exampleDropdownContentEnabled = (
 export const exampleDropdownContentOneDisabled = (
   <MenuList>
     <MenuItem
-      icon={<EditIcon role="presentation" />}
+      icon={<Icon name="edit" isPresentational isFilled />}
       label="Menu Item 1"
       disabled
     />
     <MenuItem
-      icon={<DuplicateIcon role="presentation" />}
+      icon={<Icon name="content_copy" isPresentational isFilled />}
       label="Menu Item 2"
     />
   </MenuList>
diff --git a/packages/components/src/__actions__/Menu/v2/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v2/_docs/Menu.stories.tsx
index 396a84280d3..b4f832cfe6d 100644
--- a/packages/components/src/__actions__/Menu/v2/_docs/Menu.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v2/_docs/Menu.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { ChevronDownIcon, DuplicateIcon } from "~components/Icon"
 import { Button } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import * as MenuV1Stories from "../../v1/_docs/Menu.stories"
 import { Menu, MenuList, MenuItem, MenuHeading } from "../index"
 
@@ -12,7 +12,7 @@ const meta = {
     button: (
       <Button
         label="Actions"
-        icon={<ChevronDownIcon role="presentation" />}
+        icon={<Icon name="keyboard_arrow_down" isPresentational />}
         iconPosition="end"
       />
     ),
@@ -22,7 +22,7 @@ const meta = {
           onClick={() => {
             alert("Duplicated!")
           }}
-          icon={<DuplicateIcon role="presentation" />}
+          icon={<Icon name="content_copy" isPresentational isFilled />}
           label="Duplicate item"
         />
         <MenuList heading={<MenuHeading>Extra links</MenuHeading>}>
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
index be34226ba0d..7a6aeffa67a 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx
@@ -42,7 +42,7 @@ import * as exampleStories from "./Menu.stories"
   of={exampleStories.Basic}
   source={{code: `
 <MenuTrigger>
-  <Button><MeatballsIcon aria-label="Actions" /></Button>
+  <Button><Icon name="more_horiz" alt="Actions" /></Button>
   <Popover>
     <Menu>
       <MenuItem href="#">Menu Item</MenuItem>
@@ -94,5 +94,3 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled}  />
-
-
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
index e8a3e72191f..ec7c26d645b 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.docs.stories.tsx
@@ -2,17 +2,8 @@ import React, { FunctionComponent, ReactNode } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Popover } from "react-aria-components"
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  BookmarkOffIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  EditIcon,
-  MeatballsIcon,
-  TrashIcon,
-} from "~components/Icon"
 import { Button } from "~components/__actions__/v3"
+import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuItem, MenuTrigger } from "../index"
 
 const meta = {
@@ -31,19 +22,27 @@ type Story = StoryObj<typeof meta>
 
 const DefaultMenuItems = (): ReactNode => (
   <>
-    <MenuItem icon={<BookmarkOffIcon role="presentation" />}>Save</MenuItem>
-    <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
-    <MenuItem icon={<ArrowUpIcon role="presentation" />}>Move up</MenuItem>
-    <MenuItem icon={<ArrowDownIcon role="presentation" />}>Move down</MenuItem>
-    <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+    <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
+    <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
+      Edit
+    </MenuItem>
+    <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>
+      Move up
+    </MenuItem>
+    <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
+      Move down
+    </MenuItem>
+    <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+      Delete
+    </MenuItem>
   </>
 )
 
 export const Actions: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -60,8 +59,8 @@ export const Actions: Story = {
 export const ItemsDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -75,12 +74,14 @@ export const ItemsDo: Story = {
 export const ItemsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
-          <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+          <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+            Delete
+          </MenuItem>
         </Menu>
       </Popover>
     </MenuTrigger>
@@ -90,13 +91,13 @@ export const ItemsDont: Story = {
 export const SelectionDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Sort by
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu>
-          <MenuItem icon={<CheckIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="check" isPresentational />}>
             Recommended
           </MenuItem>
           <MenuItem>Most recent</MenuItem>
@@ -110,9 +111,9 @@ export const LabelChevronDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
+      <Button className="[--icon-size:24]">
         Edit item
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu>
@@ -139,9 +140,9 @@ export const LabelChevronDont: Story = {
 export const LabelDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Actions [visually hidden], conversation with Harper[/visually hidden]
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -155,9 +156,9 @@ export const LabelDo: Story = {
 export const LabelDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
+      <Button className="[--icon-size:24]">
         Open menu
-        <ChevronDownIcon role="presentation" />
+        <Icon name="keyboard_arrow_down" isPresentational />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -171,15 +172,15 @@ export const LabelDont: Story = {
 export const IconsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
-          <MenuItem icon={<EditIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
             Edit &lsquo;Strengths&rsquo;
           </MenuItem>
-          <MenuItem icon={<EditIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
             Edit &lsquo;Weaknesses&rsquo;
           </MenuItem>
           <MenuItem>Export PDF</MenuItem>
@@ -193,8 +194,8 @@ export const IconsDont: Story = {
 export const MenuItemLabelsDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -211,8 +212,8 @@ export const SentenceCaseDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -229,8 +230,8 @@ export const SentenceCaseDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -247,8 +248,8 @@ export const ElipsesDo: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
@@ -265,8 +266,8 @@ export const ElipsesDont: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu {...args}>
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx
index 3b1d66c6675..15e7424a760 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.mdx
@@ -34,7 +34,7 @@ import * as MenuStories from "./Menu.stories"
   source={{code: `
 <TooltipTrigger>
   <Button>
-    <MeatballsIcon role="img" aria-label="Additional actions" />
+    <Icon name="more_horiz" alt="Additional actions" />
   </Button>
   <Popover>
     <Menu>
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx
index 2fbae637b1b..8bf3a61fdd4 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.spec.stories.tsx
@@ -3,17 +3,8 @@ import { Meta, StoryObj } from "@storybook/react"
 import { expect, userEvent, waitFor, within, fn } from "@storybook/test"
 import isChromatic from "chromatic"
 import { Popover, Header, Section } from "react-aria-components"
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  BookmarkOffIcon,
-  CautionIcon,
-  EditIcon,
-  ExternalLinkIcon,
-  MeatballsIcon,
-  TrashIcon,
-} from "~components/Icon"
 import { Button } from "~components/__actions__/v3"
+import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuItem, MenuTrigger } from "../index"
 
 const meta = {
@@ -46,31 +37,38 @@ export const KitchenSink: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
       <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
           <Section>
             <Header>Section One</Header>
             <MenuItem
-              icon={<BookmarkOffIcon role="presentation" />}
+              icon={<Icon name="bookmark" isPresentational />}
               href="https://cultureamp.com"
             >
               Save
             </MenuItem>
-            <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
+            <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
+              Edit
+            </MenuItem>
           </Section>
           <Section>
-            <MenuItem icon={<ArrowUpIcon role="presentation" />}>
+            <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>
               Move Up
             </MenuItem>
-            <MenuItem icon={<ArrowDownIcon role="presentation" />}>
+            <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
               Menu item with a longer label
             </MenuItem>
           </Section>
           <Section>
-            <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
-            <MenuItem icon={<TrashIcon role="presentation" />} isDisabled>
+            <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+              Delete
+            </MenuItem>
+            <MenuItem
+              icon={<Icon name="delete" isPresentational isFilled />}
+              isDisabled
+            >
               Delete but disabled
             </MenuItem>
             <MenuItem>Other action</MenuItem>
@@ -87,18 +85,18 @@ export const Basic: Story = {
   render: ({ defaultOpen, ...args }) => (
     <MenuTrigger defaultOpen={defaultOpen} {...args}>
       <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
           <MenuItem
-            icon={<CautionIcon role="presentation" />}
+            icon={<Icon name="warning" isPresentational isFilled />}
             onAction={() => alert("Menu item pressed")}
           >
             Trigger an alert
           </MenuItem>
           <MenuItem
-            icon={<ExternalLinkIcon role="presentation" />}
+            icon={<Icon name="open_in_new" isPresentational />}
             href="https://cultureamp.com"
             target="_blank"
           >
@@ -168,7 +166,7 @@ export const DisabledItems: Story = {
   render: () => (
     <MenuTrigger>
       <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -208,7 +206,7 @@ export const WithSections: Story = {
   render: () => (
     <MenuTrigger>
       <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
@@ -240,7 +238,7 @@ export const Controlled: Story = {
         </button>
         <MenuTrigger isOpen={isOpen} onOpenChange={setOpen}>
           <Button>
-            <MeatballsIcon role="img" aria-label="Additional actions" />
+            <Icon name="more_horiz" alt="Additional actions" />
           </Button>
           <Popover>
             <Menu>
diff --git a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
index 760edc7fedf..4faf0a4c49d 100644
--- a/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
+++ b/packages/components/src/__actions__/Menu/v3/_docs/Menu.stories.tsx
@@ -2,15 +2,8 @@ import React, { FunctionComponent } from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Popover } from "react-aria-components"
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  BookmarkOffIcon,
-  EditIcon,
-  MeatballsIcon,
-  TrashIcon,
-} from "~components/Icon"
 import { Button } from "~components/__actions__/v3"
+import { Icon } from "~components/__future__/Icon"
 import { Menu, MenuTrigger, MenuItem } from "../index"
 import * as testStories from "./Menu.spec.stories"
 
@@ -32,22 +25,26 @@ export const Playground: Story = {
   render: ({ defaultOpen: _, ...args }) => (
     <MenuTrigger {...args}>
       {/* Replace with Kaizen Button once we have v3 or backwards compatibility */}
-      <Button>
-        <MeatballsIcon role="img" aria-label="Additional actions" />
+      <Button className="[--icon-size:24]">
+        <Icon name="more_horiz" alt="Additional actions" />
       </Button>
       <Popover>
         <Menu>
-          <MenuItem icon={<BookmarkOffIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="bookmark" isPresentational />}>
             Save
           </MenuItem>
-          <MenuItem icon={<EditIcon role="presentation" />}>Edit</MenuItem>
-          <MenuItem icon={<ArrowUpIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>
+            Edit
+          </MenuItem>
+          <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>
             Move up
           </MenuItem>
-          <MenuItem icon={<ArrowDownIcon role="presentation" />}>
+          <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
             Move down
           </MenuItem>
-          <MenuItem icon={<TrashIcon role="presentation" />}>Delete</MenuItem>
+          <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>
+            Delete
+          </MenuItem>
         </Menu>
       </Popover>
     </MenuTrigger>
diff --git a/packages/components/src/__future__/Icon/Icon.module.css b/packages/components/src/__future__/Icon/Icon.module.css
new file mode 100644
index 00000000000..9cd47aff851
--- /dev/null
+++ b/packages/components/src/__future__/Icon/Icon.module.css
@@ -0,0 +1,35 @@
+.icon {
+  font-size: calc(1px * var(--icon-size, 20));
+  font-weight: var(--icon-font-weight, 400);
+  vertical-align: var(--icon-vertical-align);
+
+  /* Must use vars otherwise whole attribute must be set again */
+  font-variation-settings:
+    "FILL" var(--icon-fill, 0),
+    "GRAD" var(--icon-grade, 0),
+    "opsz" var(--icon-optical-size, var(--icon-size, 20));
+}
+
+.filled {
+  --icon-fill: 1;
+}
+
+.shouldMirrorInRTL {
+  [dir="rtl"] & {
+    transform: scale(-1, 1);
+  }
+}
+
+.iconLTR {
+  [dir="rtl"] & {
+    display: none;
+  }
+}
+
+.iconRTL {
+  display: none;
+
+  [dir="rtl"] & {
+    display: inherit;
+  }
+}
diff --git a/packages/components/src/__future__/Icon/Icon.spec.tsx b/packages/components/src/__future__/Icon/Icon.spec.tsx
new file mode 100644
index 00000000000..4a1bbc94ca8
--- /dev/null
+++ b/packages/components/src/__future__/Icon/Icon.spec.tsx
@@ -0,0 +1,36 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { Icon } from "./Icon"
+
+describe("<Icon />", () => {
+  it("sets required attributes for a presentational icon", () => {
+    render(<Icon data-testid="test__icon" name="star" isPresentational />)
+    const icon = screen.getByTestId("test__icon")
+
+    expect(icon).toHaveAttribute("aria-hidden", "true")
+    expect(icon).not.toHaveAttribute("role")
+    expect(icon).not.toHaveAttribute("aria-label")
+  })
+
+  it("sets required attributes for a meaningful icon", () => {
+    render(<Icon data-testid="test__icon" name="star" alt="Favourite" />)
+    const icon = screen.getByTestId("test__icon")
+
+    expect(icon).not.toHaveAttribute("aria-hidden")
+    expect(icon).toHaveAttribute("role", "img")
+    expect(icon).toHaveAttribute("aria-label", "Favourite")
+  })
+
+  describe("shouldMirrorInRTL", () => {
+    it("does not show icon name in accessible name for switched icons", () => {
+      render(
+        <button type="button">
+          <Icon name="format_list_numbered" shouldMirrorInRTL alt="Pancakes" />
+        </button>
+      )
+      const button = screen.getByRole("button")
+
+      expect(button).toHaveAccessibleName("Pancakes")
+    })
+  })
+})
diff --git a/packages/components/src/__future__/Icon/Icon.tsx b/packages/components/src/__future__/Icon/Icon.tsx
new file mode 100644
index 00000000000..2c5f2a1de0c
--- /dev/null
+++ b/packages/components/src/__future__/Icon/Icon.tsx
@@ -0,0 +1,85 @@
+import React, { HTMLAttributes } from "react"
+import classNames from "classnames"
+import { StringSuggestions } from "~components/types/StringSuggestions"
+import { handledRtlIcons } from "./constants"
+import { IconNames } from "./types"
+import styles from "./Icon.module.css"
+
+type PresentationalIcon = {
+  isPresentational: true
+  alt?: never
+}
+
+type MeaningfulIcon = {
+  isPresentational?: false
+  alt: string
+}
+
+type BaseIconProps = {
+  isFilled?: boolean
+} & HTMLAttributes<HTMLSpanElement> &
+  (PresentationalIcon | MeaningfulIcon)
+
+type MaterialIconProps = BaseIconProps & {
+  children: React.ReactNode
+}
+
+const MaterialIcon = ({
+  children,
+  isFilled,
+  isPresentational,
+  alt,
+  className,
+  ...restProps
+}: MaterialIconProps): JSX.Element => (
+  <span
+    className={classNames(
+      "material-symbols-outlined",
+      styles.icon,
+      isFilled && styles.filled,
+      className
+    )}
+    aria-hidden={isPresentational}
+    role={isPresentational ? undefined : "img"}
+    aria-label={alt}
+    {...restProps}
+  >
+    {children}
+  </span>
+)
+
+export type IconProps = BaseIconProps & {
+  /** Options available at https://fonts.google.com/icons */
+  name: StringSuggestions<IconNames>
+  shouldMirrorInRTL?: boolean
+}
+
+export const Icon = ({
+  name,
+  shouldMirrorInRTL,
+  ...restProps
+}: IconProps): JSX.Element => {
+  if (!shouldMirrorInRTL) {
+    return <MaterialIcon {...restProps}>{name}</MaterialIcon>
+  }
+
+  if (Object.keys(handledRtlIcons).includes(name)) {
+    return (
+      <MaterialIcon {...restProps}>
+        <span className={styles.iconLTR}>{name}</span>
+        <span className={styles.iconRTL}>
+          {handledRtlIcons[name as keyof typeof handledRtlIcons]}
+        </span>
+      </MaterialIcon>
+    )
+  }
+
+  return (
+    <MaterialIcon
+      {...restProps}
+      className={classNames(styles.shouldMirrorInRTL, restProps.className)}
+    >
+      {name}
+    </MaterialIcon>
+  )
+}
diff --git a/packages/components/src/__future__/Icon/_docs/Icon--api-specification.mdx b/packages/components/src/__future__/Icon/_docs/Icon--api-specification.mdx
new file mode 100644
index 00000000000..4208ecfa8b4
--- /dev/null
+++ b/packages/components/src/__future__/Icon/_docs/Icon--api-specification.mdx
@@ -0,0 +1,98 @@
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as IconStories from "./Icon.docs.stories"
+
+<Meta title="Illustrations/Icon/Icon (Future)/API Specification" />
+
+# Icon API Specification (Future)
+
+Updated September 4, 2024
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__v2__/Icon"
+  designGuidelines="/?path=/docs/illustrations-icon-v2-usage-guidelines--docs"
+/>
+
+<KAIOInstallation exportNames="Icon" isFuture />
+
+### Set up
+
+Add the following (CDN for the variable icon font) to your Storybook `preview-head.html` and to the `<head>` of your apps.
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0" />
+```
+
+## Overview
+
+Icon extends [Material Symbols](https://fonts.google.com/icons), utilising the CDN.
+
+<Canvas of={IconStories.Playground} />
+<Controls of={IconStories.Playground} />
+
+## API
+
+### Name
+
+See [Material Symbols](https://fonts.google.com/icons) for all valid options.
+
+### Filled
+
+<Canvas of={IconStories.Filled} />
+
+### Mirror in RTL
+
+The `shouldMirrorInRTL` prop mirrors the Icon in `dir="rtl"`.
+
+Use this for directional icons based on your usage context (eg. forwards in LTR will point right, whilst in RTL will point left).
+
+Read more about bidirectionality from [Material Design](https://m2.material.io/design/usability/bidirectionality.html#mirroring-elements).
+
+<Canvas of={IconStories.MirrorInRTL} />
+
+### Accessibility
+
+#### Meaningful icon
+
+Icons without accompanying text need to convey their intent to the screen reader.
+Add `alt` text for these use cases.
+
+<Canvas of={IconStories.MeaningfulIcon} />
+
+#### Presentational icon
+
+For icons which are purely presentational, add `isPresentational` to hide it from the screen reader.
+
+<Canvas of={IconStories.PresentationalIcon} />
+
+### Customisation
+
+#### Color
+
+The Icon component inherits the color from its parent by default. You may also change the color using `className`.
+
+<Canvas of={IconStories.Color} />
+
+#### Size
+
+There are two ways to change the size of the icon:
+
+1. (Recommended) Change the value of the `--icon-size` CSS variable (eg. in Tailwind - `[--icon-size:48]`).
+This option will also scale the [optical size](https://m3.material.io/styles/icons/applying-icons#b41cbc01-9b49-4a44-a525-d153d1ea1425) of the icon.
+Note that the value must be a whole number value without units.
+
+2. Override the `font-size` CSS attribute (eg. in Tailwind - `text-[1em]`).
+This option will not scale the optical size of the icon for you, so you will need to combine it with also
+overriding the `--icon-optical-size` CSS variable (eg. in Tailwind - `[--icon-optical-size:48]`).
+
+<Canvas of={IconStories.Size} />
+
+## Default icon set
+
+Whilst you have access to all Material Symbols, the following icons match the default set we have in Figma.
+
+Tip: Click on the icon you want for a quick copy!
+
+<Story of={IconStories.DefaultIconSet} />
diff --git a/packages/components/src/__future__/Icon/_docs/Icon--usage-guidelines.mdx b/packages/components/src/__future__/Icon/_docs/Icon--usage-guidelines.mdx
new file mode 100644
index 00000000000..579fd6d3330
--- /dev/null
+++ b/packages/components/src/__future__/Icon/_docs/Icon--usage-guidelines.mdx
@@ -0,0 +1,145 @@
+import { Canvas, Meta, Controls, Story } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from "~storybook/components"
+import * as IconStories from "./Icon.docs.stories"
+
+<Meta title="Illustrations/Icon/Icon (Future)/Usage Guidelines" />
+
+# Icon (Future)
+
+Updated September 13, 2024
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/v3"
+  apiSpecification="/?path=/docs/illustrations-icon-v3-api-specification--docs"
+  figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-3974"
+/>
+
+<KAIOInstallation exportNames="Icon" isFuture />
+
+## Overview
+
+Icons are simplified visual symbols that represent ideas, objects, or actions. They improve comprehension, guide interactivity, and draw attention to important information.
+
+<Canvas of={IconStories.Playground} />
+<Controls of={IconStories.Playground} include={["name", "isFilled"]} />
+
+### When to use
+
+- To support comprehension of an idea, object, or action.
+- To provide visual cues and improving navigation.
+
+### When not to use
+
+- When the meaning of the icon is not immediately clear or could be misinterpreted.
+- When text is necessary to convey specific or detailed information.
+- When using too many icons could clutter the interface and overwhelm the user.
+- When accessibility is a concern and the icon does not have appropriate alternative text or support.
+- When the icon does not align with the overall design language or style of the application.
+
+### Specs
+
+When you need a new icon, use [Google's Material Symbols set](https://fonts.google.com/icons) via the [Figma plugin](https://www.figma.com/community/plugin/1088610476491668236/material-symbols) to add the relevant icons in:
+- **Outlined**
+- **Weight**: 400
+- **Grade**: Normal (0)
+- **Fill**: On or Off
+
+#### Do use icons consistently
+
+Consistent use of icons helps users quickly recognize and understand their function, improving overall usability.
+Refer to the [default set](#default-icon-set) for icons commonly used across the platform.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.ConsistentDo} />
+</DosAndDonts>
+
+#### Do use the appropriate fill for the icon context and state
+
+Filled icons can indicate an active state or selection. Unfilled icons often represent a default or inactive state. Not all icons change appearance when toggled between filled and unfilled, so use this distinction thoughtfully.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.FilledUnfilledDo} />
+</DosAndDonts>
+
+#### Do use the correct optical size
+
+Scale the optical size to match the size of the icon - do not mix icon sizes with a different optical size.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.OpticalSizeDo} />
+  <DoOrDont story={IconStories.OpticalSizeDont} isDont />
+</DosAndDonts>
+
+#### Do align the icon vertically
+
+Vertically center the icon by shifting down the baseline of symbols to approximately 11.5% of the type size.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.AlignmentDo} />
+  <DoOrDont story={IconStories.AlignmentDont} isDont />
+</DosAndDonts>
+
+#### Do use icon colors that meet 3:1 contrast ratios with their background
+
+Icons should be easily distinguishable and clearly visible against their background to ensure they are accessible to all users, including those with visual impairments.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.ContrastDo} />
+  <DoOrDont story={IconStories.ContrastDont} isDont />
+</DosAndDonts>
+
+#### Do use color purposefully
+
+Where suitable, color can be used to highlight an icon or reinforce its meaning, such as using green for success or red for errors.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.ColorPurposefulDo} />
+</DosAndDonts>
+
+#### Don't rely on color alone
+
+Ensure that icons are distinguishable by varying the icon, fill, or labels. Relying only on color can make the interface less accessible to colorblind users.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.DistinguishDo} />
+  <DoOrDont story={IconStories.DistinguishDont} isDont />
+</DosAndDonts>
+
+#### Don't overload your interface with too many icons
+
+Overusing icons can create visual clutter and overwhelm users. Use them sparingly to highlight important actions or information.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.InterfaceDont} isDont />
+</DosAndDonts>
+
+#### Don't rely on icons alone for conveying important information
+
+Icons should support, not replace, text labels, especially for accessibility. Screen readers and other assistive technologies may not always interpret icons correctly.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.ImportantInformationDo} />
+  <DoOrDont story={IconStories.ImportantInformationDont} isDont />
+</DosAndDonts>
+
+#### Do use appropriate states on interactive icons
+
+If the icon is interactive, it should have a base, hover, and focus state.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.InteractiveStatesDo} />
+</DosAndDonts>
+
+#### Don't rely on tooltips to covey icon meaning
+
+Important information can be hidden if it's only explained in tooltips, leading to poor user experience. Whenever possible, include a text label or other contextual information alongside the icon to clearly convey its meaning.
+
+<DosAndDonts>
+  <DoOrDont story={IconStories.TooltipDont} isDont />
+</DosAndDonts>
+
+## Default icon set
+
+Whilst you have access to all Material Symbols, the following icons match the default set we have in Figma.
+
+<Story of={IconStories.DefaultIconSet} />
diff --git a/packages/components/src/__future__/Icon/_docs/Icon.docs.module.css b/packages/components/src/__future__/Icon/_docs/Icon.docs.module.css
new file mode 100644
index 00000000000..94d19241cab
--- /dev/null
+++ b/packages/components/src/__future__/Icon/_docs/Icon.docs.module.css
@@ -0,0 +1,17 @@
+.interactiveIcon {
+  position: relative;
+  background: none;
+  padding: 0;
+  color: var(--color-blue-500);
+
+  &:hover {
+    color: var(--color-blue-400);
+  }
+}
+
+.interactiveIcon:focus::after {
+  position: absolute;
+  content: "";
+  border: var(--border-focus-ring-border-width) solid var(--color-blue-500);
+  inset: -2px;
+}
diff --git a/packages/components/src/__future__/Icon/_docs/Icon.docs.stories.tsx b/packages/components/src/__future__/Icon/_docs/Icon.docs.stories.tsx
new file mode 100644
index 00000000000..57e593e8652
--- /dev/null
+++ b/packages/components/src/__future__/Icon/_docs/Icon.docs.stories.tsx
@@ -0,0 +1,524 @@
+import React, { useState } from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import classnames from "classnames"
+import { InlineNotification } from "~components/Notification"
+import {
+  TableCard,
+  TableContainer,
+  TableHeader,
+  TableHeaderRowCell,
+  TableRow,
+  TableRowCell,
+} from "~components/Table"
+import { Text } from "~components/Text"
+import { ToggleSwitchField } from "~components/ToggleSwitch"
+import { Button } from "~components/__actions__/v3"
+import { Tag } from "~components/__future__/Tag"
+import { StickerSheet } from "~storybook/components/StickerSheet"
+import { iconDefaultSet } from "../constants"
+import { Icon } from "../index"
+import imgInterfaceDont from "./assets/interface-dont.png"
+import imgTooltipDont from "./assets/tooltip-dont.png"
+import styles from "./Icon.docs.module.css"
+
+const meta = {
+  title: "Illustrations/Icon/Icon (Future)",
+  component: Icon,
+  args: {
+    name: "star",
+    isPresentational: true,
+  },
+  argTypes: {
+    name: { type: "string" },
+    alt: {
+      description: "Set this value when `isPresentational={false}`",
+    },
+  },
+} satisfies Meta<typeof Icon>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  render: args => {
+    if (args.isPresentational) return <Icon {...args} alt={undefined} />
+    return <Icon {...args} alt={args.alt ?? "Fallback string"} />
+  },
+}
+
+export const Filled: Story = {
+  args: { isFilled: true },
+}
+
+export const MirrorInRTL: Story = {
+  render: args => (
+    <StickerSheet>
+      <StickerSheet.Header
+        headings={['dir=["ltr"]', 'dir=["rtl"]']}
+        hasVerticalHeadings
+      />
+      <StickerSheet.Body>
+        <StickerSheet.Row rowTitle="arrow_forward">
+          <div dir="ltr" className="text-center">
+            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+          </div>
+          <div dir="rtl" className="text-center">
+            <Icon {...args} name="arrow_forward" shouldMirrorInRTL />
+          </div>
+        </StickerSheet.Row>
+        <StickerSheet.Row rowTitle="format_list_numbered">
+          <div dir="ltr" className="text-center">
+            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+          </div>
+          <div dir="rtl" className="text-center">
+            <Icon {...args} name="format_list_numbered" shouldMirrorInRTL />
+          </div>
+        </StickerSheet.Row>
+      </StickerSheet.Body>
+    </StickerSheet>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<div dir="ltr" className="text-center">
+  <Icon {...props} name="arrow_forward" shouldMirrorInRTL />
+</div>
+<div dir="rtl" className="text-center">
+  <Icon {...props} name="arrow_forward" shouldMirrorInRTL />
+</div>
+<div dir="ltr" className="text-center">
+  <Icon {...props} name="format_list_numbered" shouldMirrorInRTL />
+</div>
+<div dir="rtl" className="text-center">
+  <Icon {...props} name="format_list_numbered" shouldMirrorInRTL />
+</div>
+        `,
+      },
+    },
+  },
+}
+
+export const Color: Story = {
+  render: args => (
+    <div className="flex gap-16">
+      <div className="text-green-500">
+        <Icon {...args} />
+      </div>
+      <Icon {...args} className="text-blue-500" />
+    </div>
+  ),
+}
+
+export const Size: Story = {
+  render: args => (
+    <div className="flex gap-16">
+      <Icon {...args} className="[--icon-size:48]" />
+      <div className="text-[48px]">
+        <Icon {...args} className="text-[1em] [--icon-optical-size:48]" />
+      </div>
+    </div>
+  ),
+}
+
+export const MeaningfulIcon: Story = {
+  render: args => (
+    <Button>
+      <Icon {...args} />
+    </Button>
+  ),
+  args: { isPresentational: false, alt: "Favourite" },
+}
+
+export const PresentationalIcon: Story = {
+  render: args => (
+    <Button>
+      <Icon {...args} /> Favourite
+    </Button>
+  ),
+  args: { isPresentational: true },
+}
+
+const IconSetButton = ({
+  iconName,
+  isFilled,
+}: {
+  iconName: string
+  isFilled: boolean
+}): JSX.Element => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = (): void => {
+    const snippet = isFilled
+      ? `<Icon name="${iconName}" isPresentational isFilled />`
+      : `<Icon name="${iconName}" isPresentational />`
+    navigator.clipboard.writeText(snippet)
+
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1000)
+  }
+
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={classnames(
+          "flex flex-col justify-center items-center gap-16",
+          "cursor-pointer h-full w-full p-16 rounded",
+          "bg-gray-100 hover:bg-gray-200"
+        )}
+      >
+        {copied ? (
+          <Tag color="green" classNameOverride="border-1 border-green-500">
+            Copied!
+          </Tag>
+        ) : (
+          <>
+            <Icon name={iconName} isPresentational isFilled={isFilled} />
+            <Text variant="small" tag="span">
+              {iconName}
+            </Text>
+          </>
+        )}
+      </button>
+    </li>
+  )
+}
+
+export const DefaultIconSet: Story = {
+  render: () => {
+    const [isFilled, setIsFilled] = useState(false)
+
+    return (
+      <div className="flex flex-col gap-8">
+        <ToggleSwitchField
+          labelText="Filled"
+          toggledStatus={isFilled ? "on" : "off"}
+          onToggle={() => setIsFilled(!isFilled)}
+        />
+        <ul
+          className="grid list-none gap-16 m-0 p-0"
+          style={{ gridTemplateColumns: "repeat(auto-fit, minmax(11em, 1fr))" }}
+        >
+          {iconDefaultSet.map(iconName => (
+            <IconSetButton
+              key={iconName}
+              iconName={iconName}
+              isFilled={isFilled}
+            />
+          ))}
+        </ul>
+      </div>
+    )
+  },
+}
+
+export const ConsistentDo: Story = {
+  render: () => (
+    <Text variant="body">
+      Edit <Icon name="edit" isPresentational />
+    </Text>
+  ),
+}
+
+export const FilledUnfilledDo: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <div className="flex items-center gap-4">
+        <Text variant="body">Default state</Text>
+        <Icon name="thumb_up" isPresentational />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">Selected</Text>
+        <Icon name="thumb_up" isPresentational isFilled />
+      </div>
+    </div>
+  ),
+}
+
+export const OpticalSizeDo: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <div className="flex items-center gap-4">
+        <Text variant="body">20/20</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[20px] [--icon-optical-size:20]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">24/24</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[24px] [--icon-optical-size:24]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">40/40</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[40px] [--icon-optical-size:40]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">48/48</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[48px] [--icon-optical-size:48]"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const OpticalSizeDont: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <div className="flex items-center gap-4">
+        <Text variant="body">20/48</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[20px] [--icon-optical-size:48]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">24/40</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[24px] [--icon-optical-size:40]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">40/24</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[40px] [--icon-optical-size:24]"
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">48/20</Text>
+        <Icon
+          name="star"
+          isPresentational
+          className="text-[48px] [--icon-optical-size:20]"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const AlignmentDo: Story = {
+  render: () => (
+    <img
+      src="https://lh3.googleusercontent.com/twRAsK6vahc7l_yuhhlBzVp1yR_8tsspDL16Xry73IrhYE3ItxmKSqHC6MznHq9EZKfrOgP_a3RDNGLK28JmhHeFiDmiwYrbhBtpxjodrsw=s0"
+      alt="Symbol baseline set lower in relation to symbol."
+      className="w-full"
+    />
+  ),
+}
+
+export const AlignmentDont: Story = {
+  render: () => (
+    <img
+      src="https://lh3.googleusercontent.com/MePU5NYnrFy96fiDdULne6XwFlboyznBeVWD5CTrFwzNdzsMjrvg_ySLfXJVdUNxSkeUT4UH28_Orz916LRN78bhneYBA0dL8YpCQswiERo=s0"
+      alt="Both symbol and text set on same baseline."
+      className="w-full"
+    />
+  ),
+}
+
+export const ContrastDo: Story = {
+  render: () => (
+    <div className="bg-yellow-100 p-16">
+      <Icon name="star" isPresentational className="text-yellow-700" />
+    </div>
+  ),
+}
+
+export const ContrastDont: Story = {
+  render: () => (
+    <div className="bg-yellow-100 p-16">
+      <Icon name="star" isPresentational className="text-yellow-500" />
+    </div>
+  ),
+}
+
+export const ColorPurposefulDo: Story = {
+  render: () => (
+    <>
+      <InlineNotification variant="success">Success</InlineNotification>
+      <InlineNotification variant="warning" noBottomMargin>
+        Error
+      </InlineNotification>
+    </>
+  ),
+}
+
+export const DistinguishDo: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <div className="flex items-center gap-4">
+        <Text variant="body">Default state</Text>
+        <Icon name="thumb_up" isPresentational />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">Selected</Text>
+        <Icon name="thumb_up" isPresentational isFilled />
+      </div>
+    </div>
+  ),
+}
+
+export const DistinguishDont: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <div className="flex items-center gap-4">
+        <Text variant="body">Default state</Text>
+        <Icon name="thumb_up" isPresentational />
+      </div>
+      <div className="flex items-center gap-4">
+        <Text variant="body">Selected</Text>
+        <Icon name="thumb_up" isPresentational className="text-blue-500" />
+      </div>
+    </div>
+  ),
+}
+
+export const InterfaceDont: Story = {
+  render: () => (
+    <img
+      src={imgInterfaceDont}
+      alt="Example of a bad interface"
+      className="block m-auto max-w-[600px]"
+    />
+  ),
+}
+
+export const ImportantInformationDo: Story = {
+  render: () => (
+    <TableContainer>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderRowCell
+            labelText="Flag for review"
+            sorting="ascending"
+            width={4 / 12}
+          />
+          <TableHeaderRowCell labelText="Employee" sorting="ascending" />
+        </TableRow>
+      </TableHeader>
+      <TableCard>
+        <TableRow>
+          <TableRowCell width={4 / 12}>
+            <Icon name="flag" alt="Flag" />
+          </TableRowCell>
+          <TableRowCell>
+            <Text tag="div" variant="body">
+              John Johnson
+            </Text>
+          </TableRowCell>
+        </TableRow>
+      </TableCard>
+      <TableCard>
+        <TableRow>
+          <TableRowCell width={4 / 12}>
+            <Icon name="flag" alt="Flag" />
+          </TableRowCell>
+          <TableRowCell>
+            <Text tag="div" variant="body">
+              Michelle Summer
+            </Text>
+          </TableRowCell>
+        </TableRow>
+      </TableCard>
+    </TableContainer>
+  ),
+}
+
+export const ImportantInformationDont: Story = {
+  render: () => (
+    <TableContainer>
+      <TableHeader>
+        <TableRow>
+          <TableHeaderRowCell labelText="" sorting="ascending" />
+          <TableHeaderRowCell labelText="Employee" sorting="ascending" />
+        </TableRow>
+      </TableHeader>
+      <TableCard>
+        <TableRow>
+          <TableRowCell>
+            <Icon name="flag" alt="Flag" />
+          </TableRowCell>
+          <TableRowCell>
+            <Text tag="div" variant="body">
+              John Johnson
+            </Text>
+          </TableRowCell>
+        </TableRow>
+      </TableCard>
+      <TableCard>
+        <TableRow>
+          <TableRowCell>
+            <Icon name="flag" alt="Flag" />
+          </TableRowCell>
+          <TableRowCell>
+            <Text tag="div" variant="body">
+              Michelle Summer
+            </Text>
+          </TableRowCell>
+        </TableRow>
+      </TableCard>
+    </TableContainer>
+  ),
+  parameters: {
+    a11y: { disable: true }, // accessible label fix to be addressed in a separate PR
+  },
+}
+
+const InteractiveIcon = (props: Record<string, any>): JSX.Element => (
+  <button type="button" className={styles.interactiveIcon} {...props}>
+    <Icon name="info" isPresentational isFilled />
+  </button>
+)
+
+export const InteractiveStatesDo: Story = {
+  render: () => (
+    <div className="flex gap-16">
+      <Text variant="body">
+        Base <InteractiveIcon />
+      </Text>
+      <Text variant="body">
+        Hover <InteractiveIcon data-sb-pseudo-styles="hover" />
+      </Text>
+      <Text variant="body">
+        Focus <InteractiveIcon data-sb-pseudo-styles="focus" />
+      </Text>
+    </div>
+  ),
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
+}
+
+export const TooltipDont: Story = {
+  render: () => (
+    <img
+      src={imgTooltipDont}
+      alt="Example of a bad use of a tooltip on an icon"
+      className="block m-auto max-w-[600px]"
+    />
+  ),
+}
diff --git a/packages/components/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx b/packages/components/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx
new file mode 100644
index 00000000000..be43d3afb08
--- /dev/null
+++ b/packages/components/src/__future__/Icon/_docs/Icon.stickersheet.stories.tsx
@@ -0,0 +1,126 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import { CheckboxField } from "~components/Checkbox"
+import { Label } from "~components/Label"
+import { Text } from "~components/Text"
+import { Button as ButtonV2 } from "~components/__actions__/v2"
+import { Button as ButtonV3 } from "~components/__actions__/v3"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { handledRtlIcons, iconDefaultSet } from "../constants"
+import { Icon, IconProps } from "../index"
+
+export default {
+  title: "Illustrations/Icon/Icon (Future)",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => {
+    const defaultProps = {
+      name: "star",
+      isPresentational: true,
+    } satisfies IconProps
+
+    const mirrorInRTL = [
+      "arrow_forward",
+      "arrow_back",
+      ...Object.keys(handledRtlIcons),
+    ] satisfies Array<IconProps["name"]>
+
+    return (
+      <>
+        <StickerSheet heading="Icon" isReversed={isReversed}>
+          <StickerSheet.Header
+            headings={["Outlined", "Filled", "Color"]}
+            hasVerticalHeadings
+          />
+          <StickerSheet.Body>
+            {iconDefaultSet.map(name => (
+              <StickerSheet.Row key={name} rowTitle={name}>
+                <Icon {...defaultProps} name={name} />
+                <Icon {...defaultProps} name={name} isFilled />
+                <Icon {...defaultProps} name={name} className="text-blue-500" />
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet heading="shouldMirrorInRTL" isReversed={isReversed}>
+          <StickerSheet.Header
+            headings={[
+              'true; dir=["ltr"]',
+              'true; dir=["rtl"]',
+              'false; dir=["rtl"]',
+            ]}
+            hasVerticalHeadings
+          />
+          <StickerSheet.Body>
+            {mirrorInRTL.map(name => (
+              <StickerSheet.Row key={name} rowTitle={name}>
+                <div dir="ltr" className="text-center">
+                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+                </div>
+                <div dir="rtl" className="text-center">
+                  <Icon {...defaultProps} name={name} shouldMirrorInRTL />
+                </div>
+                <div dir="rtl" className="text-center">
+                  <Icon {...defaultProps} name={name} />
+                </div>
+              </StickerSheet.Row>
+            ))}
+          </StickerSheet.Body>
+        </StickerSheet>
+
+        <StickerSheet
+          heading="Alignment as children within other components"
+          isReversed={isReversed}
+        >
+          <StickerSheet.Body>
+            <StickerSheet.Row rowTitle="Text">
+              <Text variant="body">
+                Showcase alignment of an icon <Icon {...defaultProps} /> within
+                a sentence
+              </Text>
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Label">
+              <Label>
+                Field label <Icon {...defaultProps} />
+              </Label>
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="CheckboxField">
+              <CheckboxField
+                labelText={
+                  <>
+                    Checkbox label <Icon {...defaultProps} />
+                  </>
+                }
+              />
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Button (v2)">
+              <ButtonV2
+                label="Button label"
+                icon={<Icon {...defaultProps} />}
+              />
+            </StickerSheet.Row>
+            <StickerSheet.Row rowTitle="Button (v3)">
+              <ButtonV3>
+                <Icon {...defaultProps} /> Button label
+              </ButtonV3>
+            </StickerSheet.Row>
+          </StickerSheet.Body>
+        </StickerSheet>
+      </>
+    )
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
diff --git a/packages/components/src/__future__/Icon/_docs/assets/interface-dont.png b/packages/components/src/__future__/Icon/_docs/assets/interface-dont.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa374ff467c7a74f953aa7e07355af21641a3ceb
GIT binary patch
literal 6479
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
Y#YtdAB1YW*e_YT?^6GLmGL~Wg1^kh49RL6T

literal 0
HcmV?d00001

diff --git a/packages/components/src/__future__/Icon/_docs/assets/tooltip-dont.png b/packages/components/src/__future__/Icon/_docs/assets/tooltip-dont.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b7ae786d14262d1285e9306a5877579feb42d68
GIT binary patch
literal 37421
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

literal 0
HcmV?d00001

diff --git a/packages/components/src/__future__/Icon/constants.ts b/packages/components/src/__future__/Icon/constants.ts
new file mode 100644
index 00000000000..bf6affdde26
--- /dev/null
+++ b/packages/components/src/__future__/Icon/constants.ts
@@ -0,0 +1,149 @@
+import type { IconNames } from "./types"
+
+/* eslint-disable camelcase */
+export const handledRtlIcons = {
+  checklist: "checklist_rtl",
+  format_list_numbered: "format_list_numbered_rtl",
+} satisfies Partial<Record<IconNames, IconNames>>
+/* eslint-enable camelcase */
+
+export const iconDefaultSet = [
+  "add",
+  "add_a_photo",
+  "add_comment",
+  "add_link",
+  "arrow_back",
+  "arrow_downward",
+  "arrow_drop_down",
+  "arrow_drop_up",
+  "arrow_forward",
+  "arrow_upward",
+  "assignment",
+  "assignment_add",
+  "assignment_ind",
+  "assignment_returned",
+  "assignment_turned_in",
+  "auto_awesome",
+  "backup",
+  "bar_chart",
+  "bookmark",
+  "brush",
+  "build",
+  "cached",
+  "cancel",
+  "chat_apps_script",
+  "chat_error",
+  "chat_paste_go",
+  "check",
+  "check_circle",
+  "chevron_left",
+  "chevron_right",
+  "close",
+  "close_fullscreen",
+  "cloud_download",
+  "comment_bank",
+  "content_copy",
+  "dashboard",
+  "date_range",
+  "delete",
+  "domain",
+  "draft",
+  "drag_indicator",
+  "edit",
+  "error",
+  "event",
+  "favorite",
+  "find_in_page",
+  "flag",
+  "flash_on",
+  "format_bold",
+  "format_indent_decrease",
+  "format_indent_increase",
+  "format_italic",
+  "format_list_bulleted",
+  "format_list_numbered",
+  "format_underlined",
+  "forum",
+  "forward",
+  "front_hand",
+  "grade",
+  "group",
+  "groups",
+  "help",
+  "history",
+  "home",
+  "horizontal_rule",
+  "info",
+  "key",
+  "keyboard_arrow_down",
+  "keyboard_arrow_up",
+  "keyboard_tab",
+  "keyboard_tab_rtl",
+  "label",
+  "lan",
+  "lightbulb",
+  "link_off",
+  "list",
+  "local_fire_department",
+  "lock",
+  "logout",
+  "mail",
+  "manage_accounts",
+  "menu",
+  "mms",
+  "more_horiz",
+  "more_vert",
+  "north_east",
+  "note_alt",
+  "notifications_active",
+  "open_in_full",
+  "open_in_new",
+  "pause",
+  "percent",
+  "person",
+  "person_add",
+  "person_cancel",
+  "person_check",
+  "play_circle",
+  "playlist_add_check",
+  "potted_plant",
+  "power",
+  "power_settings_new",
+  "print",
+  "privacy_tip",
+  "psychology_alt",
+  "radio_button_checked",
+  "radio_button_unchecked",
+  "rate_review",
+  "redo",
+  "reduce_capacity",
+  "refresh",
+  "remove",
+  "reviews",
+  "schedule",
+  "school",
+  "search",
+  "send",
+  "sensors",
+  "sentiment_dissatisfied",
+  "sentiment_neutral",
+  "sentiment_satisfied",
+  "sentiment_very_satisfied",
+  "settings",
+  "sms",
+  "south_east",
+  "star",
+  "support",
+  "thumb_down",
+  "thumb_up",
+  "today",
+  "translate",
+  "tune",
+  "undo",
+  "user_attributes",
+  "visibility",
+  "visibility_off",
+  "warning",
+  "zoom_in",
+  "zoom_out",
+] satisfies IconNames[]
diff --git a/packages/components/src/__future__/Icon/index.ts b/packages/components/src/__future__/Icon/index.ts
new file mode 100644
index 00000000000..03d66fa88a2
--- /dev/null
+++ b/packages/components/src/__future__/Icon/index.ts
@@ -0,0 +1 @@
+export * from "./Icon"
diff --git a/packages/components/src/__future__/Icon/material-symbols-metadata.json b/packages/components/src/__future__/Icon/material-symbols-metadata.json
new file mode 100644
index 00000000000..443bbe9e9c8
--- /dev/null
+++ b/packages/components/src/__future__/Icon/material-symbols-metadata.json
@@ -0,0 +1,3370 @@
+{
+  "123": 291,
+  "360": 291,
+  "10k": 291,
+  "10mp": 291,
+  "11mp": 291,
+  "12mp": 291,
+  "13mp": 291,
+  "14mp": 291,
+  "15mp": 291,
+  "16mp": 291,
+  "17mp": 291,
+  "18_up_rating": 291,
+  "18mp": 291,
+  "19mp": 291,
+  "1k": 291,
+  "1k_plus": 291,
+  "1x_mobiledata": 291,
+  "1x_mobiledata_badge": 291,
+  "20mp": 291,
+  "21mp": 291,
+  "22mp": 291,
+  "23mp": 291,
+  "24fps_select": 291,
+  "24mp": 291,
+  "2d": 291,
+  "2k": 291,
+  "2k_plus": 291,
+  "2mp": 291,
+  "30fps": 291,
+  "30fps_select": 291,
+  "3d_rotation": 291,
+  "3g_mobiledata": 291,
+  "3g_mobiledata_badge": 291,
+  "3k": 291,
+  "3k_plus": 291,
+  "3mp": 291,
+  "3p": 291,
+  "4g_mobiledata": 291,
+  "4g_mobiledata_badge": 291,
+  "4g_plus_mobiledata": 291,
+  "4k": 291,
+  "4k_plus": 291,
+  "4mp": 291,
+  "50mp": 291,
+  "5g": 291,
+  "5g_mobiledata_badge": 291,
+  "5k": 291,
+  "5k_plus": 291,
+  "5mp": 291,
+  "60fps": 291,
+  "60fps_select": 291,
+  "6_ft_apart": 291,
+  "6k": 291,
+  "6k_plus": 291,
+  "6mp": 291,
+  "7k": 291,
+  "7k_plus": 291,
+  "7mp": 291,
+  "8k": 291,
+  "8k_plus": 291,
+  "8mp": 291,
+  "9k": 291,
+  "9k_plus": 291,
+  "9mp": 291,
+  "abc": 291,
+  "ac_unit": 291,
+  "accessibility": 291,
+  "accessibility_new": 291,
+  "accessible": 291,
+  "accessible_forward": 291,
+  "account_balance": 291,
+  "account_balance_wallet": 291,
+  "account_box": 291,
+  "account_child": 291,
+  "account_child_invert": 291,
+  "account_circle": 291,
+  "account_circle_off": 291,
+  "account_tree": 291,
+  "action_key": 291,
+  "activity_zone": 291,
+  "acute": 291,
+  "ad": 291,
+  "ad_group": 291,
+  "ad_group_off": 291,
+  "ad_off": 291,
+  "ad_units": 291,
+  "adaptive_audio_mic": 291,
+  "adaptive_audio_mic_off": 291,
+  "adb": 291,
+  "add": 291,
+  "add_a_photo": 291,
+  "add_ad": 291,
+  "add_alert": 291,
+  "add_box": 291,
+  "add_business": 291,
+  "add_call": 291,
+  "add_card": 291,
+  "add_chart": 291,
+  "add_circle": 291,
+  "add_column_left": 291,
+  "add_column_right": 291,
+  "add_comment": 291,
+  "add_diamond": 291,
+  "add_home": 291,
+  "add_home_work": 291,
+  "add_link": 291,
+  "add_location": 291,
+  "add_location_alt": 291,
+  "add_moderator": 291,
+  "add_notes": 291,
+  "add_photo_alternate": 291,
+  "add_reaction": 291,
+  "add_road": 291,
+  "add_row_above": 291,
+  "add_row_below": 291,
+  "add_shopping_cart": 291,
+  "add_task": 291,
+  "add_to_drive": 291,
+  "add_to_home_screen": 291,
+  "add_to_photos": 291,
+  "add_to_queue": 291,
+  "add_triangle": 291,
+  "adf_scanner": 291,
+  "adjust": 291,
+  "admin_meds": 291,
+  "admin_panel_settings": 291,
+  "ads_click": 291,
+  "agender": 291,
+  "agriculture": 291,
+  "air": 291,
+  "air_freshener": 291,
+  "air_purifier": 291,
+  "air_purifier_gen": 291,
+  "airline_seat_flat": 291,
+  "airline_seat_flat_angled": 291,
+  "airline_seat_individual_suite": 291,
+  "airline_seat_legroom_extra": 291,
+  "airline_seat_legroom_normal": 291,
+  "airline_seat_legroom_reduced": 291,
+  "airline_seat_recline_extra": 291,
+  "airline_seat_recline_normal": 291,
+  "airline_stops": 291,
+  "airlines": 291,
+  "airplane_ticket": 291,
+  "airplanemode_inactive": 291,
+  "airplay": 291,
+  "airport_shuttle": 291,
+  "airware": 291,
+  "airwave": 291,
+  "alarm": 291,
+  "alarm_add": 291,
+  "alarm_off": 291,
+  "alarm_on": 291,
+  "alarm_smart_wake": 291,
+  "album": 291,
+  "align_center": 291,
+  "align_end": 291,
+  "align_flex_center": 291,
+  "align_flex_end": 291,
+  "align_flex_start": 291,
+  "align_horizontal_center": 291,
+  "align_horizontal_left": 291,
+  "align_horizontal_right": 291,
+  "align_items_stretch": 291,
+  "align_justify_center": 291,
+  "align_justify_flex_end": 291,
+  "align_justify_flex_start": 291,
+  "align_justify_space_around": 291,
+  "align_justify_space_between": 291,
+  "align_justify_space_even": 291,
+  "align_justify_stretch": 291,
+  "align_self_stretch": 291,
+  "align_space_around": 291,
+  "align_space_between": 291,
+  "align_space_even": 291,
+  "align_start": 291,
+  "align_stretch": 291,
+  "align_vertical_bottom": 291,
+  "align_vertical_center": 291,
+  "align_vertical_top": 291,
+  "all_inbox": 291,
+  "all_inclusive": 291,
+  "all_match": 291,
+  "all_out": 291,
+  "allergies": 291,
+  "allergy": 291,
+  "alt_route": 291,
+  "alternate_email": 291,
+  "altitude": 291,
+  "ambulance": 291,
+  "amend": 291,
+  "amp_stories": 291,
+  "analytics": 291,
+  "anchor": 291,
+  "android": 291,
+  "animated_images": 291,
+  "animation": 291,
+  "aod": 291,
+  "aod_tablet": 291,
+  "aod_watch": 291,
+  "apartment": 291,
+  "api": 291,
+  "apk_document": 291,
+  "apk_install": 291,
+  "app_badging": 291,
+  "app_blocking": 291,
+  "app_promo": 291,
+  "app_registration": 291,
+  "app_shortcut": 291,
+  "apparel": 291,
+  "approval": 291,
+  "approval_delegation": 291,
+  "apps": 291,
+  "apps_outage": 291,
+  "aq": 291,
+  "aq_indoor": 291,
+  "ar_on_you": 291,
+  "ar_stickers": 291,
+  "architecture": 291,
+  "archive": 291,
+  "area_chart": 291,
+  "arming_countdown": 291,
+  "arrow_and_edge": 291,
+  "arrow_back": 291,
+  "arrow_back_2": 291,
+  "arrow_back_ios": 291,
+  "arrow_back_ios_new": 291,
+  "arrow_circle_down": 291,
+  "arrow_circle_left": 291,
+  "arrow_circle_right": 291,
+  "arrow_circle_up": 291,
+  "arrow_cool_down": 291,
+  "arrow_downward": 291,
+  "arrow_downward_alt": 291,
+  "arrow_drop_down": 291,
+  "arrow_drop_down_circle": 291,
+  "arrow_drop_up": 291,
+  "arrow_forward": 291,
+  "arrow_forward_ios": 291,
+  "arrow_insert": 291,
+  "arrow_left": 291,
+  "arrow_left_alt": 291,
+  "arrow_or_edge": 291,
+  "arrow_outward": 291,
+  "arrow_range": 291,
+  "arrow_right": 291,
+  "arrow_right_alt": 291,
+  "arrow_selector_tool": 291,
+  "arrow_split": 291,
+  "arrow_top_left": 291,
+  "arrow_top_right": 291,
+  "arrow_upload_progress": 291,
+  "arrow_upload_ready": 291,
+  "arrow_upward": 291,
+  "arrow_upward_alt": 291,
+  "arrow_warm_up": 291,
+  "arrows_more_down": 291,
+  "arrows_more_up": 291,
+  "arrows_outward": 291,
+  "art_track": 291,
+  "article": 291,
+  "article_shortcut": 291,
+  "artist": 291,
+  "aspect_ratio": 291,
+  "assignment": 291,
+  "assignment_add": 291,
+  "assignment_ind": 291,
+  "assignment_late": 291,
+  "assignment_return": 291,
+  "assignment_returned": 291,
+  "assignment_turned_in": 291,
+  "assist_walker": 291,
+  "assistant_device": 291,
+  "assistant_direction": 291,
+  "assistant_navigation": 291,
+  "assistant_on_hub": 291,
+  "assured_workload": 291,
+  "asterisk": 291,
+  "atm": 291,
+  "atr": 291,
+  "attach_email": 291,
+  "attach_file": 291,
+  "attach_file_add": 291,
+  "attach_file_off": 291,
+  "attach_money": 291,
+  "attachment": 291,
+  "attractions": 291,
+  "attribution": 291,
+  "audio_description": 291,
+  "audio_file": 291,
+  "audio_video_receiver": 291,
+  "auto_awesome_mosaic": 291,
+  "auto_awesome_motion": 291,
+  "auto_delete": 291,
+  "auto_read_pause": 291,
+  "auto_read_play": 291,
+  "auto_stories": 291,
+  "auto_towing": 291,
+  "auto_transmission": 291,
+  "autofps_select": 291,
+  "automation": 291,
+  "autopause": 291,
+  "autoplay": 291,
+  "autorenew": 291,
+  "autostop": 291,
+  "av1": 291,
+  "av_timer": 291,
+  "avc": 291,
+  "avg_pace": 291,
+  "avg_time": 291,
+  "award_star": 291,
+  "azm": 291,
+  "baby_changing_station": 291,
+  "back_hand": 291,
+  "back_to_tab": 291,
+  "background_dot_large": 291,
+  "background_dot_small": 291,
+  "background_grid_small": 291,
+  "background_replace": 291,
+  "backlight_high": 291,
+  "backlight_high_off": 291,
+  "backlight_low": 291,
+  "backpack": 291,
+  "backspace": 291,
+  "backup": 291,
+  "backup_table": 291,
+  "badge": 291,
+  "badge_critical_battery": 291,
+  "bakery_dining": 291,
+  "balance": 291,
+  "balcony": 291,
+  "ballot": 291,
+  "bar_chart": 291,
+  "bar_chart_4_bars": 291,
+  "bar_chart_off": 291,
+  "barcode": 291,
+  "barcode_reader": 291,
+  "barcode_scanner": 291,
+  "barefoot": 291,
+  "batch_prediction": 291,
+  "bath_outdoor": 291,
+  "bath_private": 291,
+  "bath_public_large": 291,
+  "bathroom": 291,
+  "bathtub": 291,
+  "battery_0_bar": 291,
+  "battery_1_bar": 291,
+  "battery_2_bar": 291,
+  "battery_3_bar": 291,
+  "battery_4_bar": 291,
+  "battery_5_bar": 291,
+  "battery_6_bar": 291,
+  "battery_alert": 291,
+  "battery_change": 291,
+  "battery_charging_20": 291,
+  "battery_charging_30": 291,
+  "battery_charging_50": 291,
+  "battery_charging_60": 291,
+  "battery_charging_80": 291,
+  "battery_charging_90": 291,
+  "battery_charging_full": 291,
+  "battery_error": 291,
+  "battery_full": 291,
+  "battery_full_alt": 291,
+  "battery_horiz_000": 291,
+  "battery_horiz_050": 291,
+  "battery_horiz_075": 291,
+  "battery_low": 291,
+  "battery_plus": 291,
+  "battery_profile": 291,
+  "battery_saver": 291,
+  "battery_share": 291,
+  "battery_status_good": 291,
+  "battery_unknown": 291,
+  "battery_very_low": 291,
+  "beach_access": 291,
+  "bed": 291,
+  "bedroom_baby": 291,
+  "bedroom_child": 291,
+  "bedroom_parent": 291,
+  "bedtime": 291,
+  "bedtime_off": 291,
+  "beenhere": 291,
+  "bento": 291,
+  "bia": 291,
+  "bid_landscape": 291,
+  "bid_landscape_disabled": 291,
+  "bigtop_updates": 291,
+  "bike_dock": 291,
+  "bike_lane": 291,
+  "bike_scooter": 291,
+  "biotech": 291,
+  "blanket": 291,
+  "blender": 291,
+  "blind": 291,
+  "blinds": 291,
+  "blinds_closed": 291,
+  "block": 291,
+  "blood_pressure": 291,
+  "bloodtype": 291,
+  "bluetooth": 291,
+  "bluetooth_connected": 291,
+  "bluetooth_disabled": 291,
+  "bluetooth_drive": 291,
+  "bluetooth_searching": 291,
+  "blur_circular": 291,
+  "blur_linear": 291,
+  "blur_medium": 291,
+  "blur_off": 291,
+  "blur_on": 291,
+  "blur_short": 291,
+  "body_fat": 291,
+  "body_system": 291,
+  "bolt": 291,
+  "bomb": 291,
+  "book": 291,
+  "book_2": 291,
+  "book_3": 291,
+  "book_4": 291,
+  "book_5": 291,
+  "book_online": 291,
+  "bookmark": 291,
+  "bookmark_add": 291,
+  "bookmark_added": 291,
+  "bookmark_bag": 291,
+  "bookmark_check": 291,
+  "bookmark_flag": 291,
+  "bookmark_heart": 291,
+  "bookmark_manager": 291,
+  "bookmark_remove": 291,
+  "bookmark_star": 291,
+  "bookmarks": 291,
+  "border_all": 291,
+  "border_bottom": 291,
+  "border_clear": 291,
+  "border_color": 291,
+  "border_horizontal": 291,
+  "border_inner": 291,
+  "border_left": 291,
+  "border_outer": 291,
+  "border_right": 291,
+  "border_style": 291,
+  "border_top": 291,
+  "border_vertical": 291,
+  "borg": 291,
+  "bottom_app_bar": 291,
+  "bottom_drawer": 291,
+  "bottom_navigation": 291,
+  "bottom_panel_close": 291,
+  "bottom_panel_open": 291,
+  "bottom_right_click": 291,
+  "bottom_sheets": 291,
+  "box": 291,
+  "box_add": 291,
+  "box_edit": 291,
+  "boy": 291,
+  "brand_awareness": 291,
+  "brand_family": 291,
+  "branding_watermark": 291,
+  "breakfast_dining": 291,
+  "breaking_news": 291,
+  "breaking_news_alt_1": 291,
+  "breastfeeding": 291,
+  "brightness_1": 291,
+  "brightness_2": 291,
+  "brightness_3": 291,
+  "brightness_4": 291,
+  "brightness_5": 291,
+  "brightness_6": 291,
+  "brightness_7": 291,
+  "brightness_alert": 291,
+  "brightness_auto": 291,
+  "brightness_empty": 291,
+  "brightness_high": 291,
+  "brightness_low": 291,
+  "brightness_medium": 291,
+  "bring_your_own_ip": 291,
+  "broadcast_on_home": 291,
+  "broadcast_on_personal": 291,
+  "broken_image": 291,
+  "browse": 291,
+  "browse_activity": 291,
+  "browse_gallery": 291,
+  "browser_updated": 291,
+  "brunch_dining": 291,
+  "brush": 291,
+  "bubble": 291,
+  "bubble_chart": 291,
+  "bubbles": 291,
+  "bug_report": 291,
+  "build": 291,
+  "build_circle": 291,
+  "bungalow": 291,
+  "burst_mode": 291,
+  "bus_alert": 291,
+  "business_center": 291,
+  "business_chip": 291,
+  "business_messages": 291,
+  "buttons_alt": 291,
+  "cabin": 291,
+  "cable": 291,
+  "cable_car": 291,
+  "cached": 291,
+  "cadence": 291,
+  "cake": 291,
+  "cake_add": 291,
+  "calculate": 291,
+  "calendar_add_on": 291,
+  "calendar_apps_script": 291,
+  "calendar_clock": 291,
+  "calendar_month": 291,
+  "calendar_today": 291,
+  "calendar_view_day": 291,
+  "calendar_view_month": 291,
+  "calendar_view_week": 291,
+  "call": 291,
+  "call_end": 291,
+  "call_log": 291,
+  "call_made": 291,
+  "call_merge": 291,
+  "call_missed": 291,
+  "call_missed_outgoing": 291,
+  "call_quality": 291,
+  "call_received": 291,
+  "call_split": 291,
+  "call_to_action": 291,
+  "camera": 291,
+  "camera_front": 291,
+  "camera_indoor": 291,
+  "camera_outdoor": 291,
+  "camera_rear": 291,
+  "camera_roll": 291,
+  "camera_video": 291,
+  "cameraswitch": 291,
+  "campaign": 291,
+  "camping": 291,
+  "cancel": 291,
+  "cancel_presentation": 291,
+  "cancel_schedule_send": 291,
+  "candle": 291,
+  "candlestick_chart": 291,
+  "captive_portal": 291,
+  "capture": 291,
+  "car_crash": 291,
+  "car_rental": 291,
+  "car_repair": 291,
+  "car_tag": 291,
+  "card_membership": 291,
+  "card_travel": 291,
+  "cardio_load": 291,
+  "cardiology": 291,
+  "cards": 291,
+  "carpenter": 291,
+  "carry_on_bag": 291,
+  "carry_on_bag_checked": 291,
+  "carry_on_bag_inactive": 291,
+  "carry_on_bag_question": 291,
+  "cases": 291,
+  "casino": 291,
+  "cast": 291,
+  "cast_connected": 291,
+  "cast_for_education": 291,
+  "cast_pause": 291,
+  "cast_warning": 291,
+  "castle": 291,
+  "category": 291,
+  "category_search": 291,
+  "celebration": 291,
+  "cell_merge": 291,
+  "cell_tower": 291,
+  "cell_wifi": 291,
+  "center_focus_strong": 291,
+  "center_focus_weak": 291,
+  "chair": 291,
+  "chair_alt": 291,
+  "chalet": 291,
+  "change_circle": 291,
+  "change_history": 291,
+  "charger": 291,
+  "charging_station": 291,
+  "chart_data": 291,
+  "chat": 291,
+  "chat_add_on": 291,
+  "chat_apps_script": 291,
+  "chat_bubble": 291,
+  "chat_error": 291,
+  "chat_info": 291,
+  "chat_paste_go": 291,
+  "check": 291,
+  "check_box": 291,
+  "check_box_outline_blank": 291,
+  "check_circle": 291,
+  "check_in_out": 291,
+  "check_indeterminate_small": 291,
+  "check_small": 291,
+  "checkbook": 291,
+  "checked_bag": 291,
+  "checked_bag_question": 291,
+  "checklist": 291,
+  "checklist_rtl": 291,
+  "checkroom": 291,
+  "cheer": 291,
+  "chess": 291,
+  "chevron_backward": 291,
+  "chevron_forward": 291,
+  "chevron_left": 291,
+  "chevron_right": 291,
+  "child_care": 291,
+  "child_friendly": 291,
+  "chip_extraction": 291,
+  "chips": 291,
+  "chrome_reader_mode": 291,
+  "chromecast_2": 291,
+  "chromecast_device": 291,
+  "chronic": 291,
+  "church": 291,
+  "cinematic_blur": 291,
+  "circle": 291,
+  "circle_notifications": 291,
+  "circles": 291,
+  "circles_ext": 291,
+  "clarify": 291,
+  "clean_hands": 291,
+  "cleaning": 291,
+  "cleaning_bucket": 291,
+  "cleaning_services": 291,
+  "clear_all": 291,
+  "clear_day": 291,
+  "climate_mini_split": 291,
+  "clinical_notes": 291,
+  "clock_loader_10": 291,
+  "clock_loader_20": 291,
+  "clock_loader_40": 291,
+  "clock_loader_60": 291,
+  "clock_loader_80": 291,
+  "clock_loader_90": 291,
+  "close": 291,
+  "close_fullscreen": 291,
+  "close_small": 291,
+  "closed_caption": 291,
+  "closed_caption_add": 291,
+  "closed_caption_disabled": 291,
+  "cloud": 291,
+  "cloud_circle": 291,
+  "cloud_done": 291,
+  "cloud_download": 291,
+  "cloud_off": 291,
+  "cloud_sync": 291,
+  "cloud_upload": 291,
+  "cloudy_snowing": 291,
+  "co2": 291,
+  "co_present": 291,
+  "code": 291,
+  "code_blocks": 291,
+  "code_off": 291,
+  "coffee": 291,
+  "coffee_maker": 291,
+  "cognition": 291,
+  "collapse_all": 291,
+  "collapse_content": 291,
+  "collections_bookmark": 291,
+  "colorize": 291,
+  "colors": 291,
+  "combine_columns": 291,
+  "comedy_mask": 291,
+  "comic_bubble": 291,
+  "comment": 291,
+  "comment_bank": 291,
+  "comments_disabled": 291,
+  "commit": 291,
+  "communication": 291,
+  "communities": 291,
+  "commute": 291,
+  "compare": 291,
+  "compare_arrows": 291,
+  "compass_calibration": 291,
+  "component_exchange": 291,
+  "compost": 291,
+  "compress": 291,
+  "computer": 291,
+  "concierge": 291,
+  "conditions": 291,
+  "confirmation_number": 291,
+  "congenital": 291,
+  "connect_without_contact": 291,
+  "connected_tv": 291,
+  "connecting_airports": 291,
+  "construction": 291,
+  "contact_emergency": 291,
+  "contact_mail": 291,
+  "contact_page": 291,
+  "contact_phone": 291,
+  "contact_support": 291,
+  "contactless": 291,
+  "contactless_off": 291,
+  "contacts": 291,
+  "contacts_product": 291,
+  "content_copy": 291,
+  "content_cut": 291,
+  "content_paste": 291,
+  "content_paste_go": 291,
+  "content_paste_off": 291,
+  "content_paste_search": 291,
+  "contextual_token": 291,
+  "contextual_token_add": 291,
+  "contract": 291,
+  "contract_delete": 291,
+  "contract_edit": 291,
+  "contrast": 291,
+  "contrast_circle": 291,
+  "contrast_rtl_off": 291,
+  "contrast_square": 291,
+  "control_camera": 291,
+  "control_point_duplicate": 291,
+  "controller_gen": 291,
+  "conversion_path": 291,
+  "conversion_path_off": 291,
+  "convert_to_text": 291,
+  "conveyor_belt": 291,
+  "cookie": 291,
+  "cookie_off": 291,
+  "cooking": 291,
+  "cool_to_dry": 291,
+  "copy_all": 291,
+  "copyright": 291,
+  "coronavirus": 291,
+  "corporate_fare": 291,
+  "cottage": 291,
+  "counter_0": 291,
+  "counter_1": 291,
+  "counter_2": 291,
+  "counter_3": 291,
+  "counter_4": 291,
+  "counter_5": 291,
+  "counter_6": 291,
+  "counter_7": 291,
+  "counter_8": 291,
+  "counter_9": 291,
+  "countertops": 291,
+  "create_new_folder": 291,
+  "credit_card": 291,
+  "credit_card_clock": 291,
+  "credit_card_gear": 291,
+  "credit_card_heart": 291,
+  "credit_card_off": 291,
+  "credit_score": 291,
+  "crib": 291,
+  "crisis_alert": 291,
+  "crop": 291,
+  "crop_16_9": 291,
+  "crop_3_2": 291,
+  "crop_5_4": 291,
+  "crop_7_5": 291,
+  "crop_9_16": 291,
+  "crop_free": 291,
+  "crop_landscape": 291,
+  "crop_portrait": 291,
+  "crop_rotate": 291,
+  "crop_square": 291,
+  "crossword": 291,
+  "crowdsource": 291,
+  "cruelty_free": 291,
+  "css": 291,
+  "csv": 291,
+  "currency_bitcoin": 291,
+  "currency_exchange": 291,
+  "currency_franc": 291,
+  "currency_lira": 291,
+  "currency_pound": 291,
+  "currency_ruble": 291,
+  "currency_rupee": 291,
+  "currency_rupee_circle": 291,
+  "currency_yen": 291,
+  "currency_yuan": 291,
+  "curtains": 291,
+  "curtains_closed": 291,
+  "custom_typography": 291,
+  "cycle": 291,
+  "cyclone": 291,
+  "dangerous": 291,
+  "dark_mode": 291,
+  "dashboard": 291,
+  "dashboard_customize": 291,
+  "data_alert": 291,
+  "data_array": 291,
+  "data_check": 291,
+  "data_exploration": 291,
+  "data_info_alert": 291,
+  "data_loss_prevention": 291,
+  "data_object": 291,
+  "data_saver_on": 291,
+  "data_table": 291,
+  "data_thresholding": 291,
+  "data_usage": 291,
+  "database": 291,
+  "database_off": 291,
+  "dataset": 291,
+  "dataset_linked": 291,
+  "date_range": 291,
+  "deblur": 291,
+  "deceased": 291,
+  "decimal_decrease": 291,
+  "decimal_increase": 291,
+  "deck": 291,
+  "dehaze": 291,
+  "delete": 291,
+  "delete_forever": 291,
+  "delete_history": 291,
+  "delete_sweep": 291,
+  "demography": 291,
+  "density_large": 291,
+  "density_medium": 291,
+  "density_small": 291,
+  "dentistry": 291,
+  "departure_board": 291,
+  "deployed_code": 291,
+  "deployed_code_account": 291,
+  "deployed_code_alert": 291,
+  "deployed_code_history": 291,
+  "deployed_code_update": 291,
+  "dermatology": 291,
+  "description": 291,
+  "deselect": 291,
+  "design_services": 291,
+  "desk": 291,
+  "deskphone": 291,
+  "desktop_access_disabled": 291,
+  "desktop_landscape": 291,
+  "desktop_landscape_add": 291,
+  "desktop_mac": 291,
+  "desktop_portrait": 291,
+  "desktop_windows": 291,
+  "destruction": 291,
+  "details": 291,
+  "detection_and_zone": 291,
+  "detector": 291,
+  "detector_alarm": 291,
+  "detector_battery": 291,
+  "detector_co": 291,
+  "detector_offline": 291,
+  "detector_smoke": 291,
+  "detector_status": 291,
+  "developer_board": 291,
+  "developer_board_off": 291,
+  "developer_guide": 291,
+  "developer_mode": 291,
+  "developer_mode_tv": 291,
+  "device_hub": 291,
+  "device_thermostat": 291,
+  "device_unknown": 291,
+  "devices": 291,
+  "devices_fold": 291,
+  "devices_fold_2": 291,
+  "devices_off": 291,
+  "devices_other": 291,
+  "devices_wearables": 291,
+  "dew_point": 291,
+  "diagnosis": 291,
+  "diagonal_line": 291,
+  "dialer_sip": 291,
+  "dialogs": 291,
+  "dialpad": 291,
+  "diamond": 291,
+  "dictionary": 291,
+  "difference": 291,
+  "digital_out_of_home": 291,
+  "digital_wellbeing": 291,
+  "dining": 291,
+  "dinner_dining": 291,
+  "directions": 291,
+  "directions_alt": 291,
+  "directions_alt_off": 291,
+  "directions_bike": 291,
+  "directions_boat": 291,
+  "directions_bus": 291,
+  "directions_car": 291,
+  "directions_off": 291,
+  "directions_railway": 291,
+  "directions_railway_2": 291,
+  "directions_run": 291,
+  "directions_subway": 291,
+  "directions_walk": 291,
+  "directory_sync": 291,
+  "dirty_lens": 291,
+  "disabled_by_default": 291,
+  "disabled_visible": 291,
+  "disc_full": 291,
+  "discover_tune": 291,
+  "dishwasher": 291,
+  "dishwasher_gen": 291,
+  "display_external_input": 291,
+  "display_settings": 291,
+  "distance": 291,
+  "diversity_1": 291,
+  "diversity_2": 291,
+  "diversity_3": 291,
+  "diversity_4": 291,
+  "dns": 291,
+  "do_not_disturb_off": 291,
+  "do_not_disturb_on": 291,
+  "do_not_disturb_on_total_silence": 291,
+  "do_not_step": 291,
+  "do_not_touch": 291,
+  "dock": 291,
+  "dock_to_bottom": 291,
+  "dock_to_left": 291,
+  "dock_to_right": 291,
+  "docs_add_on": 291,
+  "docs_apps_script": 291,
+  "document_scanner": 291,
+  "domain": 291,
+  "domain_add": 291,
+  "domain_disabled": 291,
+  "domain_verification": 291,
+  "domain_verification_off": 291,
+  "domino_mask": 291,
+  "done_all": 291,
+  "done_outline": 291,
+  "donut_large": 291,
+  "donut_small": 291,
+  "door_back": 291,
+  "door_front": 291,
+  "door_open": 291,
+  "door_sensor": 291,
+  "door_sliding": 291,
+  "doorbell": 291,
+  "doorbell_3p": 291,
+  "doorbell_chime": 291,
+  "double_arrow": 291,
+  "downhill_skiing": 291,
+  "download": 291,
+  "download_2": 291,
+  "download_done": 291,
+  "download_for_offline": 291,
+  "downloading": 291,
+  "draft": 291,
+  "draft_orders": 291,
+  "drafts": 291,
+  "drag_click": 291,
+  "drag_handle": 291,
+  "drag_indicator": 291,
+  "drag_pan": 291,
+  "draw": 291,
+  "draw_abstract": 291,
+  "draw_collage": 291,
+  "dresser": 291,
+  "drive_export": 291,
+  "drive_file_move": 291,
+  "drive_folder_upload": 291,
+  "dropdown": 291,
+  "dry": 291,
+  "dry_cleaning": 291,
+  "dual_screen": 291,
+  "duo": 291,
+  "dvr": 291,
+  "dynamic_feed": 291,
+  "dynamic_form": 291,
+  "e911_avatar": 291,
+  "e911_emergency": 291,
+  "e_mobiledata": 291,
+  "e_mobiledata_badge": 291,
+  "earbuds": 291,
+  "earbuds_battery": 291,
+  "early_on": 291,
+  "earthquake": 291,
+  "east": 291,
+  "ecg": 291,
+  "ecg_heart": 291,
+  "eco": 291,
+  "eda": 291,
+  "edgesensor_high": 291,
+  "edgesensor_low": 291,
+  "edit": 291,
+  "edit_attributes": 291,
+  "edit_audio": 291,
+  "edit_calendar": 291,
+  "edit_document": 291,
+  "edit_location": 291,
+  "edit_location_alt": 291,
+  "edit_note": 291,
+  "edit_notifications": 291,
+  "edit_off": 291,
+  "edit_road": 291,
+  "edit_square": 291,
+  "editor_choice": 291,
+  "egg": 291,
+  "egg_alt": 291,
+  "eject": 291,
+  "elderly": 291,
+  "elderly_woman": 291,
+  "electric_bike": 291,
+  "electric_bolt": 291,
+  "electric_car": 291,
+  "electric_meter": 291,
+  "electric_moped": 291,
+  "electric_rickshaw": 291,
+  "electric_scooter": 291,
+  "electrical_services": 291,
+  "elevation": 291,
+  "elevator": 291,
+  "emergency": 291,
+  "emergency_heat": 291,
+  "emergency_heat_2": 291,
+  "emergency_home": 291,
+  "emergency_recording": 291,
+  "emergency_share": 291,
+  "emergency_share_off": 291,
+  "emoji_events": 291,
+  "emoji_food_beverage": 291,
+  "emoji_language": 291,
+  "emoji_nature": 291,
+  "emoji_objects": 291,
+  "emoji_people": 291,
+  "emoji_symbols": 291,
+  "emoji_transportation": 291,
+  "emoticon": 291,
+  "empty_dashboard": 291,
+  "enable": 291,
+  "encrypted": 291,
+  "encrypted_add": 291,
+  "encrypted_add_circle": 291,
+  "encrypted_minus_circle": 291,
+  "encrypted_off": 291,
+  "endocrinology": 291,
+  "energy": 291,
+  "energy_program_saving": 291,
+  "energy_program_time_used": 291,
+  "energy_savings_leaf": 291,
+  "engineering": 291,
+  "enhanced_encryption": 291,
+  "ent": 291,
+  "enterprise": 291,
+  "enterprise_off": 291,
+  "equal": 291,
+  "equalizer": 291,
+  "eraser_size_1": 291,
+  "eraser_size_2": 291,
+  "eraser_size_3": 291,
+  "eraser_size_4": 291,
+  "eraser_size_5": 291,
+  "error": 291,
+  "error_med": 291,
+  "escalator": 291,
+  "escalator_warning": 291,
+  "euro": 291,
+  "euro_symbol": 291,
+  "ev_charger": 291,
+  "ev_mobiledata_badge": 291,
+  "ev_shadow": 291,
+  "ev_shadow_add": 291,
+  "ev_shadow_minus": 291,
+  "ev_station": 291,
+  "event": 291,
+  "event_available": 291,
+  "event_busy": 291,
+  "event_list": 291,
+  "event_note": 291,
+  "event_repeat": 291,
+  "event_seat": 291,
+  "event_upcoming": 291,
+  "exclamation": 291,
+  "exercise": 291,
+  "exit_to_app": 291,
+  "expand": 291,
+  "expand_all": 291,
+  "expand_circle_down": 291,
+  "expand_circle_right": 291,
+  "expand_circle_up": 291,
+  "expand_content": 291,
+  "experiment": 291,
+  "explicit": 291,
+  "explore": 291,
+  "explore_nearby": 291,
+  "explore_off": 291,
+  "explosion": 291,
+  "export_notes": 291,
+  "exposure": 291,
+  "exposure_neg_1": 291,
+  "exposure_neg_2": 291,
+  "exposure_plus_1": 291,
+  "exposure_plus_2": 291,
+  "exposure_zero": 291,
+  "extension": 291,
+  "extension_off": 291,
+  "eye_tracking": 291,
+  "eyeglasses": 291,
+  "face": 291,
+  "face_2": 291,
+  "face_3": 291,
+  "face_4": 291,
+  "face_5": 291,
+  "face_6": 291,
+  "face_down": 291,
+  "face_left": 291,
+  "face_nod": 291,
+  "face_retouching_off": 291,
+  "face_right": 291,
+  "face_shake": 291,
+  "face_up": 291,
+  "fact_check": 291,
+  "factory": 291,
+  "falling": 291,
+  "familiar_face_and_zone": 291,
+  "family_history": 291,
+  "family_home": 291,
+  "family_link": 291,
+  "family_restroom": 291,
+  "family_star": 291,
+  "farsight_digital": 291,
+  "fast_forward": 291,
+  "fast_rewind": 291,
+  "fastfood": 291,
+  "faucet": 291,
+  "favorite": 291,
+  "fax": 291,
+  "feature_search": 291,
+  "featured_play_list": 291,
+  "featured_seasonal_and_gifts": 291,
+  "featured_video": 291,
+  "feedback": 291,
+  "female": 291,
+  "femur": 291,
+  "femur_alt": 291,
+  "fence": 291,
+  "fertile": 291,
+  "festival": 291,
+  "fiber_dvr": 291,
+  "fiber_manual_record": 291,
+  "fiber_new": 291,
+  "fiber_pin": 291,
+  "fiber_smart_record": 291,
+  "file_copy": 291,
+  "file_copy_off": 291,
+  "file_download_off": 291,
+  "file_map": 291,
+  "file_open": 291,
+  "file_present": 291,
+  "file_save": 291,
+  "file_save_off": 291,
+  "file_upload_off": 291,
+  "filter": 291,
+  "filter_1": 291,
+  "filter_2": 291,
+  "filter_3": 291,
+  "filter_4": 291,
+  "filter_5": 291,
+  "filter_6": 291,
+  "filter_7": 291,
+  "filter_8": 291,
+  "filter_9": 291,
+  "filter_9_plus": 291,
+  "filter_alt": 291,
+  "filter_alt_off": 291,
+  "filter_b_and_w": 291,
+  "filter_center_focus": 291,
+  "filter_drama": 291,
+  "filter_frames": 291,
+  "filter_hdr": 291,
+  "filter_list": 291,
+  "filter_list_off": 291,
+  "filter_none": 291,
+  "filter_retrolux": 291,
+  "filter_tilt_shift": 291,
+  "filter_vintage": 291,
+  "finance": 291,
+  "finance_chip": 291,
+  "finance_mode": 291,
+  "find_in_page": 291,
+  "find_replace": 291,
+  "fingerprint": 291,
+  "fingerprint_off": 291,
+  "fire_extinguisher": 291,
+  "fire_hydrant": 291,
+  "fire_truck": 291,
+  "fireplace": 291,
+  "first_page": 291,
+  "fit_page": 291,
+  "fit_screen": 291,
+  "fit_width": 291,
+  "fitness_center": 291,
+  "fitness_tracker": 291,
+  "flag": 291,
+  "flag_2": 291,
+  "flag_circle": 291,
+  "flaky": 291,
+  "flare": 291,
+  "flash_auto": 291,
+  "flash_off": 291,
+  "flash_on": 291,
+  "flashlight_off": 291,
+  "flashlight_on": 291,
+  "flatware": 291,
+  "flex_direction": 291,
+  "flex_no_wrap": 291,
+  "flex_wrap": 291,
+  "flight": 291,
+  "flight_class": 291,
+  "flight_land": 291,
+  "flight_takeoff": 291,
+  "flights_and_hotels": 291,
+  "flip": 291,
+  "flip_camera_android": 291,
+  "flip_camera_ios": 291,
+  "flip_to_back": 291,
+  "flip_to_front": 291,
+  "float_landscape_2": 291,
+  "float_portrait_2": 291,
+  "flood": 291,
+  "floor": 291,
+  "floor_lamp": 291,
+  "flowsheet": 291,
+  "fluid": 291,
+  "fluid_balance": 291,
+  "fluid_med": 291,
+  "fluorescent": 291,
+  "flutter": 291,
+  "flutter_dash": 291,
+  "flyover": 291,
+  "fmd_bad": 291,
+  "foggy": 291,
+  "folded_hands": 291,
+  "folder": 291,
+  "folder_copy": 291,
+  "folder_data": 291,
+  "folder_delete": 291,
+  "folder_limited": 291,
+  "folder_managed": 291,
+  "folder_off": 291,
+  "folder_open": 291,
+  "folder_shared": 291,
+  "folder_special": 291,
+  "folder_supervised": 291,
+  "folder_zip": 291,
+  "follow_the_signs": 291,
+  "font_download": 291,
+  "font_download_off": 291,
+  "food_bank": 291,
+  "foot_bones": 291,
+  "footprint": 291,
+  "for_you": 291,
+  "forest": 291,
+  "fork_left": 291,
+  "fork_right": 291,
+  "forklift": 291,
+  "format_align_center": 291,
+  "format_align_justify": 291,
+  "format_align_left": 291,
+  "format_align_right": 291,
+  "format_bold": 291,
+  "format_clear": 291,
+  "format_color_fill": 291,
+  "format_color_reset": 291,
+  "format_color_text": 291,
+  "format_h1": 291,
+  "format_h2": 291,
+  "format_h3": 291,
+  "format_h4": 291,
+  "format_h5": 291,
+  "format_h6": 291,
+  "format_image_left": 291,
+  "format_image_right": 291,
+  "format_indent_decrease": 291,
+  "format_indent_increase": 291,
+  "format_ink_highlighter": 291,
+  "format_italic": 291,
+  "format_letter_spacing": 291,
+  "format_letter_spacing_2": 291,
+  "format_letter_spacing_standard": 291,
+  "format_letter_spacing_wide": 291,
+  "format_letter_spacing_wider": 291,
+  "format_line_spacing": 291,
+  "format_list_bulleted": 291,
+  "format_list_bulleted_add": 291,
+  "format_list_numbered": 291,
+  "format_list_numbered_rtl": 291,
+  "format_overline": 291,
+  "format_paint": 291,
+  "format_paragraph": 291,
+  "format_quote": 291,
+  "format_quote_off": 291,
+  "format_shapes": 291,
+  "format_size": 291,
+  "format_strikethrough": 291,
+  "format_text_clip": 291,
+  "format_text_overflow": 291,
+  "format_text_wrap": 291,
+  "format_textdirection_l_to_r": 291,
+  "format_textdirection_r_to_l": 291,
+  "format_textdirection_vertical": 291,
+  "format_underlined": 291,
+  "format_underlined_squiggle": 291,
+  "forms_add_on": 291,
+  "forms_apps_script": 291,
+  "fort": 291,
+  "forum": 291,
+  "forward": 291,
+  "forward_10": 291,
+  "forward_30": 291,
+  "forward_5": 291,
+  "forward_circle": 291,
+  "forward_media": 291,
+  "forward_to_inbox": 291,
+  "foundation": 291,
+  "frame_inspect": 291,
+  "frame_person": 291,
+  "frame_person_mic": 291,
+  "frame_person_off": 291,
+  "frame_reload": 291,
+  "frame_source": 291,
+  "free_cancellation": 291,
+  "front_hand": 291,
+  "front_loader": 291,
+  "full_coverage": 291,
+  "full_hd": 291,
+  "full_stacked_bar_chart": 291,
+  "fullscreen": 291,
+  "fullscreen_exit": 291,
+  "fullscreen_portrait": 291,
+  "function": 291,
+  "functions": 291,
+  "funicular": 291,
+  "g_mobiledata": 291,
+  "g_mobiledata_badge": 291,
+  "g_translate": 291,
+  "gallery_thumbnail": 291,
+  "gamepad": 291,
+  "garage": 291,
+  "garage_door": 291,
+  "garage_home": 291,
+  "garden_cart": 291,
+  "gas_meter": 291,
+  "gastroenterology": 291,
+  "gate": 291,
+  "gavel": 291,
+  "general_device": 291,
+  "genetics": 291,
+  "genres": 291,
+  "gesture": 291,
+  "gesture_select": 291,
+  "gif": 291,
+  "gif_2": 291,
+  "gif_box": 291,
+  "girl": 291,
+  "gite": 291,
+  "glass_cup": 291,
+  "globe": 291,
+  "globe_asia": 291,
+  "globe_uk": 291,
+  "glucose": 291,
+  "glyphs": 291,
+  "go_to_line": 291,
+  "golf_course": 291,
+  "gondola_lift": 291,
+  "google_home_devices": 291,
+  "google_tv_remote": 291,
+  "google_wifi": 291,
+  "gpp_bad": 291,
+  "gpp_maybe": 291,
+  "grade": 291,
+  "gradient": 291,
+  "grading": 291,
+  "grain": 291,
+  "graphic_eq": 291,
+  "grass": 291,
+  "grid_3x3": 291,
+  "grid_3x3_off": 291,
+  "grid_4x4": 291,
+  "grid_goldenratio": 291,
+  "grid_guides": 291,
+  "grid_off": 291,
+  "grid_on": 291,
+  "grid_view": 291,
+  "grocery": 291,
+  "group": 291,
+  "group_add": 291,
+  "group_off": 291,
+  "group_remove": 291,
+  "group_work": 291,
+  "grouped_bar_chart": 291,
+  "groups": 291,
+  "groups_2": 291,
+  "groups_3": 291,
+  "guardian": 291,
+  "gynecology": 291,
+  "h_mobiledata": 291,
+  "h_mobiledata_badge": 291,
+  "h_plus_mobiledata": 291,
+  "h_plus_mobiledata_badge": 291,
+  "hail": 291,
+  "hallway": 291,
+  "hand_bones": 291,
+  "hand_gesture": 291,
+  "hand_gesture_off": 291,
+  "handheld_controller": 291,
+  "handshake": 291,
+  "handyman": 291,
+  "hangout_video": 291,
+  "hangout_video_off": 291,
+  "hard_drive": 291,
+  "hard_drive_2": 291,
+  "hardware": 291,
+  "hd": 291,
+  "hdr_auto": 291,
+  "hdr_auto_select": 291,
+  "hdr_enhanced_select": 291,
+  "hdr_off": 291,
+  "hdr_off_select": 291,
+  "hdr_on": 291,
+  "hdr_on_select": 291,
+  "hdr_plus": 291,
+  "hdr_plus_off": 291,
+  "hdr_strong": 291,
+  "hdr_weak": 291,
+  "head_mounted_device": 291,
+  "headphones": 291,
+  "headphones_battery": 291,
+  "headset_mic": 291,
+  "headset_off": 291,
+  "healing": 291,
+  "health_and_beauty": 291,
+  "health_and_safety": 291,
+  "health_metrics": 291,
+  "heap_snapshot_large": 291,
+  "heap_snapshot_multiple": 291,
+  "heap_snapshot_thumbnail": 291,
+  "hearing": 291,
+  "hearing_aid": 291,
+  "hearing_disabled": 291,
+  "heart_broken": 291,
+  "heart_check": 291,
+  "heart_minus": 291,
+  "heart_plus": 291,
+  "heat": 291,
+  "heat_pump": 291,
+  "heat_pump_balance": 291,
+  "height": 291,
+  "helicopter": 291,
+  "help": 291,
+  "help_center": 291,
+  "help_clinic": 291,
+  "hematology": 291,
+  "hevc": 291,
+  "hexagon": 291,
+  "hide": 291,
+  "hide_image": 291,
+  "hide_source": 291,
+  "high_density": 291,
+  "high_quality": 291,
+  "high_res": 291,
+  "highlight": 291,
+  "highlight_keyboard_focus": 291,
+  "highlight_mouse_cursor": 291,
+  "highlight_text_cursor": 291,
+  "highlighter_size_1": 291,
+  "highlighter_size_2": 291,
+  "highlighter_size_3": 291,
+  "highlighter_size_4": 291,
+  "highlighter_size_5": 291,
+  "hiking": 291,
+  "history": 291,
+  "history_edu": 291,
+  "history_off": 291,
+  "history_toggle_off": 291,
+  "hive": 291,
+  "hls": 291,
+  "hls_off": 291,
+  "holiday_village": 291,
+  "home": 291,
+  "home_and_garden": 291,
+  "home_app_logo": 291,
+  "home_health": 291,
+  "home_improvement_and_tools": 291,
+  "home_iot_device": 291,
+  "home_max": 291,
+  "home_max_dots": 291,
+  "home_mini": 291,
+  "home_pin": 291,
+  "home_repair_service": 291,
+  "home_speaker": 291,
+  "home_storage": 291,
+  "home_work": 291,
+  "horizontal_distribute": 291,
+  "horizontal_rule": 291,
+  "horizontal_split": 291,
+  "hot_tub": 291,
+  "hotel": 291,
+  "hotel_class": 291,
+  "hourglass": 291,
+  "hourglass_bottom": 291,
+  "hourglass_disabled": 291,
+  "hourglass_empty": 291,
+  "hourglass_top": 291,
+  "house": 291,
+  "house_siding": 291,
+  "house_with_shield": 291,
+  "houseboat": 291,
+  "household_supplies": 291,
+  "hov": 291,
+  "how_to_reg": 291,
+  "how_to_vote": 291,
+  "hr_resting": 291,
+  "html": 291,
+  "http": 291,
+  "hub": 291,
+  "humerus": 291,
+  "humerus_alt": 291,
+  "humidity_high": 291,
+  "humidity_indoor": 291,
+  "humidity_low": 291,
+  "humidity_mid": 291,
+  "humidity_percentage": 291,
+  "hvac": 291,
+  "ice_skating": 291,
+  "icecream": 291,
+  "id_card": 291,
+  "ifl": 291,
+  "iframe": 291,
+  "iframe_off": 291,
+  "image": 291,
+  "image_aspect_ratio": 291,
+  "image_search": 291,
+  "imagesearch_roller": 291,
+  "imagesmode": 291,
+  "immunology": 291,
+  "import_contacts": 291,
+  "important_devices": 291,
+  "in_home_mode": 291,
+  "inactive_order": 291,
+  "inbox": 291,
+  "inbox_customize": 291,
+  "incomplete_circle": 291,
+  "indeterminate_check_box": 291,
+  "indeterminate_question_box": 291,
+  "info": 291,
+  "info_i": 291,
+  "infrared": 291,
+  "ink_eraser": 291,
+  "ink_eraser_off": 291,
+  "ink_highlighter": 291,
+  "ink_highlighter_move": 291,
+  "ink_marker": 291,
+  "ink_pen": 291,
+  "inpatient": 291,
+  "input": 291,
+  "input_circle": 291,
+  "insert_chart": 291,
+  "insert_page_break": 291,
+  "insert_text": 291,
+  "install_desktop": 291,
+  "install_mobile": 291,
+  "instant_mix": 291,
+  "integration_instructions": 291,
+  "interactive_space": 291,
+  "interests": 291,
+  "interpreter_mode": 291,
+  "inventory": 291,
+  "inventory_2": 291,
+  "invert_colors": 291,
+  "invert_colors_off": 291,
+  "ios": 291,
+  "ios_share": 291,
+  "iron": 291,
+  "jamboard_kiosk": 291,
+  "javascript": 291,
+  "join": 291,
+  "join_inner": 291,
+  "join_left": 291,
+  "join_right": 291,
+  "joystick": 291,
+  "jump_to_element": 291,
+  "kayaking": 291,
+  "kebab_dining": 291,
+  "keep": 291,
+  "keep_off": 291,
+  "keep_public": 291,
+  "kettle": 291,
+  "key": 291,
+  "key_off": 291,
+  "key_vertical": 291,
+  "key_visualizer": 291,
+  "keyboard": 291,
+  "keyboard_alt": 291,
+  "keyboard_arrow_down": 291,
+  "keyboard_arrow_left": 291,
+  "keyboard_arrow_right": 291,
+  "keyboard_arrow_up": 291,
+  "keyboard_backspace": 291,
+  "keyboard_capslock": 291,
+  "keyboard_capslock_badge": 291,
+  "keyboard_command_key": 291,
+  "keyboard_control_key": 291,
+  "keyboard_double_arrow_down": 291,
+  "keyboard_double_arrow_left": 291,
+  "keyboard_double_arrow_right": 291,
+  "keyboard_double_arrow_up": 291,
+  "keyboard_external_input": 291,
+  "keyboard_full": 291,
+  "keyboard_hide": 291,
+  "keyboard_keys": 291,
+  "keyboard_lock": 291,
+  "keyboard_lock_off": 291,
+  "keyboard_off": 291,
+  "keyboard_onscreen": 291,
+  "keyboard_option_key": 291,
+  "keyboard_previous_language": 291,
+  "keyboard_return": 291,
+  "keyboard_tab": 291,
+  "keyboard_tab_rtl": 291,
+  "kid_star": 291,
+  "king_bed": 291,
+  "kitchen": 291,
+  "kitesurfing": 291,
+  "lab_panel": 291,
+  "lab_profile": 291,
+  "lab_research": 291,
+  "label": 291,
+  "label_important": 291,
+  "label_off": 291,
+  "labs": 291,
+  "lan": 291,
+  "landscape": 291,
+  "landscape_2": 291,
+  "landscape_2_off": 291,
+  "landslide": 291,
+  "language": 291,
+  "language_chinese_array": 291,
+  "language_chinese_cangjie": 291,
+  "language_chinese_dayi": 291,
+  "language_chinese_pinyin": 291,
+  "language_chinese_quick": 291,
+  "language_chinese_wubi": 291,
+  "language_french": 291,
+  "language_gb_english": 291,
+  "language_international": 291,
+  "language_japanese_kana": 291,
+  "language_korean_latin": 291,
+  "language_pinyin": 291,
+  "language_spanish": 291,
+  "language_us": 291,
+  "language_us_colemak": 291,
+  "language_us_dvorak": 291,
+  "laps": 291,
+  "laptop_chromebook": 291,
+  "laptop_mac": 291,
+  "laptop_windows": 291,
+  "lasso_select": 291,
+  "last_page": 291,
+  "laundry": 291,
+  "layers": 291,
+  "layers_clear": 291,
+  "lda": 291,
+  "leaderboard": 291,
+  "leak_add": 291,
+  "leak_remove": 291,
+  "left_click": 291,
+  "left_panel_close": 291,
+  "left_panel_open": 291,
+  "legend_toggle": 291,
+  "lens_blur": 291,
+  "letter_switch": 291,
+  "library_add": 291,
+  "library_add_check": 291,
+  "library_books": 291,
+  "library_music": 291,
+  "license": 291,
+  "lift_to_talk": 291,
+  "light": 291,
+  "light_group": 291,
+  "light_mode": 291,
+  "light_off": 291,
+  "lightbulb": 291,
+  "lightbulb_circle": 291,
+  "lightning_stand": 291,
+  "line_axis": 291,
+  "line_curve": 291,
+  "line_end": 291,
+  "line_end_arrow": 291,
+  "line_end_arrow_notch": 291,
+  "line_end_circle": 291,
+  "line_end_diamond": 291,
+  "line_end_square": 291,
+  "line_start": 291,
+  "line_start_arrow": 291,
+  "line_start_arrow_notch": 291,
+  "line_start_circle": 291,
+  "line_start_diamond": 291,
+  "line_start_square": 291,
+  "line_style": 291,
+  "line_weight": 291,
+  "linear_scale": 291,
+  "link": 291,
+  "link_off": 291,
+  "linked_camera": 291,
+  "linked_services": 291,
+  "liquor": 291,
+  "list": 291,
+  "list_alt": 291,
+  "list_alt_add": 291,
+  "lists": 291,
+  "live_help": 291,
+  "live_tv": 291,
+  "living": 291,
+  "local_activity": 291,
+  "local_atm": 291,
+  "local_bar": 291,
+  "local_cafe": 291,
+  "local_car_wash": 291,
+  "local_convenience_store": 291,
+  "local_dining": 291,
+  "local_drink": 291,
+  "local_fire_department": 291,
+  "local_florist": 291,
+  "local_gas_station": 291,
+  "local_hospital": 291,
+  "local_laundry_service": 291,
+  "local_library": 291,
+  "local_mall": 291,
+  "local_parking": 291,
+  "local_pharmacy": 291,
+  "local_pizza": 291,
+  "local_police": 291,
+  "local_post_office": 291,
+  "local_see": 291,
+  "local_shipping": 291,
+  "local_taxi": 291,
+  "location_away": 291,
+  "location_chip": 291,
+  "location_city": 291,
+  "location_disabled": 291,
+  "location_home": 291,
+  "location_off": 291,
+  "location_on": 291,
+  "location_searching": 291,
+  "lock": 291,
+  "lock_clock": 291,
+  "lock_open": 291,
+  "lock_open_right": 291,
+  "lock_person": 291,
+  "lock_reset": 291,
+  "login": 291,
+  "logo_dev": 291,
+  "logout": 291,
+  "looks": 291,
+  "looks_3": 291,
+  "looks_4": 291,
+  "looks_5": 291,
+  "looks_6": 291,
+  "looks_one": 291,
+  "looks_two": 291,
+  "loupe": 291,
+  "low_density": 291,
+  "low_priority": 291,
+  "lowercase": 291,
+  "loyalty": 291,
+  "lte_mobiledata": 291,
+  "lte_mobiledata_badge": 291,
+  "lte_plus_mobiledata": 291,
+  "lte_plus_mobiledata_badge": 291,
+  "luggage": 291,
+  "lunch_dining": 291,
+  "lyrics": 291,
+  "macro_auto": 291,
+  "macro_off": 291,
+  "magnification_large": 291,
+  "magnification_small": 291,
+  "magnify_docked": 291,
+  "magnify_fullscreen": 291,
+  "mail": 291,
+  "mail_lock": 291,
+  "mail_off": 291,
+  "male": 291,
+  "man": 291,
+  "man_2": 291,
+  "man_3": 291,
+  "man_4": 291,
+  "manage_accounts": 291,
+  "manage_history": 291,
+  "manage_search": 291,
+  "manga": 291,
+  "manufacturing": 291,
+  "map": 291,
+  "maps_ugc": 291,
+  "margin": 291,
+  "mark_as_unread": 291,
+  "mark_chat_read": 291,
+  "mark_chat_unread": 291,
+  "mark_email_read": 291,
+  "mark_email_unread": 291,
+  "mark_unread_chat_alt": 291,
+  "markdown": 291,
+  "markdown_copy": 291,
+  "markdown_paste": 291,
+  "markunread_mailbox": 291,
+  "masked_transitions": 291,
+  "masked_transitions_add": 291,
+  "masks": 291,
+  "match_case": 291,
+  "match_word": 291,
+  "matter": 291,
+  "maximize": 291,
+  "measuring_tape": 291,
+  "media_bluetooth_off": 291,
+  "media_bluetooth_on": 291,
+  "media_link": 291,
+  "media_output": 291,
+  "media_output_off": 291,
+  "mediation": 291,
+  "medical_information": 291,
+  "medical_mask": 291,
+  "medical_services": 291,
+  "medication": 291,
+  "medication_liquid": 291,
+  "meeting_room": 291,
+  "memory": 291,
+  "memory_alt": 291,
+  "menstrual_health": 291,
+  "menu": 291,
+  "menu_book": 291,
+  "menu_open": 291,
+  "merge": 291,
+  "merge_type": 291,
+  "metabolism": 291,
+  "metro": 291,
+  "mfg_nest_yale_lock": 291,
+  "mic": 291,
+  "mic_double": 291,
+  "mic_external_off": 291,
+  "mic_external_on": 291,
+  "mic_off": 291,
+  "microbiology": 291,
+  "microwave": 291,
+  "microwave_gen": 291,
+  "military_tech": 291,
+  "mimo": 291,
+  "mimo_disconnect": 291,
+  "mindfulness": 291,
+  "minimize": 291,
+  "minor_crash": 291,
+  "mintmark": 291,
+  "missed_video_call": 291,
+  "missing_controller": 291,
+  "mist": 291,
+  "mitre": 291,
+  "mixture_med": 291,
+  "mms": 291,
+  "mobile_friendly": 291,
+  "mobile_off": 291,
+  "mobile_screen_share": 291,
+  "mobiledata_off": 291,
+  "mode_comment": 291,
+  "mode_cool": 291,
+  "mode_cool_off": 291,
+  "mode_dual": 291,
+  "mode_fan": 291,
+  "mode_fan_off": 291,
+  "mode_heat": 291,
+  "mode_heat_cool": 291,
+  "mode_heat_off": 291,
+  "mode_night": 291,
+  "mode_of_travel": 291,
+  "mode_off_on": 291,
+  "mode_standby": 291,
+  "model_training": 291,
+  "money": 291,
+  "money_off": 291,
+  "monitor": 291,
+  "monitor_heart": 291,
+  "monitor_weight": 291,
+  "monitor_weight_gain": 291,
+  "monitor_weight_loss": 291,
+  "monitoring": 291,
+  "monochrome_photos": 291,
+  "monorail": 291,
+  "mood": 291,
+  "mood_bad": 291,
+  "mop": 291,
+  "more": 291,
+  "more_down": 291,
+  "more_horiz": 291,
+  "more_time": 291,
+  "more_up": 291,
+  "more_vert": 291,
+  "mosque": 291,
+  "motion_blur": 291,
+  "motion_mode": 291,
+  "motion_photos_auto": 291,
+  "motion_photos_off": 291,
+  "motion_photos_on": 291,
+  "motion_photos_paused": 291,
+  "motion_play": 291,
+  "motion_sensor_active": 291,
+  "motion_sensor_alert": 291,
+  "motion_sensor_idle": 291,
+  "motion_sensor_urgent": 291,
+  "motorcycle": 291,
+  "mountain_flag": 291,
+  "mouse": 291,
+  "mouse_lock": 291,
+  "mouse_lock_off": 291,
+  "move": 291,
+  "move_down": 291,
+  "move_group": 291,
+  "move_item": 291,
+  "move_location": 291,
+  "move_selection_down": 291,
+  "move_selection_left": 291,
+  "move_selection_right": 291,
+  "move_selection_up": 291,
+  "move_to_inbox": 291,
+  "move_up": 291,
+  "moved_location": 291,
+  "movie": 291,
+  "movie_edit": 291,
+  "movie_info": 291,
+  "movie_off": 291,
+  "moving": 291,
+  "moving_beds": 291,
+  "moving_ministry": 291,
+  "mp": 291,
+  "multicooker": 291,
+  "multiline_chart": 291,
+  "multimodal_hand_eye": 291,
+  "multiple_stop": 291,
+  "museum": 291,
+  "music_cast": 291,
+  "music_note": 291,
+  "music_off": 291,
+  "music_video": 291,
+  "my_location": 291,
+  "mystery": 291,
+  "nat": 291,
+  "nature": 291,
+  "nature_people": 291,
+  "navigation": 291,
+  "near_me": 291,
+  "near_me_disabled": 291,
+  "nearby": 291,
+  "nearby_error": 291,
+  "nearby_off": 291,
+  "nephrology": 291,
+  "nest_audio": 291,
+  "nest_cam_floodlight": 291,
+  "nest_cam_indoor": 291,
+  "nest_cam_iq": 291,
+  "nest_cam_iq_outdoor": 291,
+  "nest_cam_magnet_mount": 291,
+  "nest_cam_outdoor": 291,
+  "nest_cam_stand": 291,
+  "nest_cam_wall_mount": 291,
+  "nest_cam_wired_stand": 291,
+  "nest_clock_farsight_analog": 291,
+  "nest_clock_farsight_digital": 291,
+  "nest_connect": 291,
+  "nest_detect": 291,
+  "nest_display": 291,
+  "nest_display_max": 291,
+  "nest_doorbell_visitor": 291,
+  "nest_eco_leaf": 291,
+  "nest_farsight_weather": 291,
+  "nest_found_savings": 291,
+  "nest_gale_wifi": 291,
+  "nest_heat_link_e": 291,
+  "nest_heat_link_gen_3": 291,
+  "nest_hello_doorbell": 291,
+  "nest_mini": 291,
+  "nest_multi_room": 291,
+  "nest_protect": 291,
+  "nest_remote": 291,
+  "nest_remote_comfort_sensor": 291,
+  "nest_secure_alarm": 291,
+  "nest_sunblock": 291,
+  "nest_tag": 291,
+  "nest_thermostat": 291,
+  "nest_thermostat_e_eu": 291,
+  "nest_thermostat_gen_3": 291,
+  "nest_thermostat_sensor": 291,
+  "nest_thermostat_sensor_eu": 291,
+  "nest_thermostat_zirconium_eu": 291,
+  "nest_true_radiant": 291,
+  "nest_wake_on_approach": 291,
+  "nest_wake_on_press": 291,
+  "nest_wifi_point": 291,
+  "nest_wifi_pro": 291,
+  "nest_wifi_pro_2": 291,
+  "nest_wifi_router": 291,
+  "network_cell": 291,
+  "network_check": 291,
+  "network_intelligence_history": 291,
+  "network_intelligence_update": 291,
+  "network_locked": 291,
+  "network_manage": 291,
+  "network_node": 291,
+  "network_ping": 291,
+  "network_wifi": 291,
+  "network_wifi_1_bar": 291,
+  "network_wifi_1_bar_locked": 291,
+  "network_wifi_2_bar": 291,
+  "network_wifi_2_bar_locked": 291,
+  "network_wifi_3_bar": 291,
+  "network_wifi_3_bar_locked": 291,
+  "network_wifi_locked": 291,
+  "neurology": 291,
+  "new_label": 291,
+  "new_releases": 291,
+  "new_window": 291,
+  "news": 291,
+  "newsmode": 291,
+  "newspaper": 291,
+  "newsstand": 291,
+  "next_plan": 291,
+  "next_week": 291,
+  "nfc": 291,
+  "night_shelter": 291,
+  "night_sight_auto": 291,
+  "night_sight_auto_off": 291,
+  "night_sight_max": 291,
+  "nightlife": 291,
+  "nightlight": 291,
+  "nights_stay": 291,
+  "no_accounts": 291,
+  "no_adult_content": 291,
+  "no_backpack": 291,
+  "no_crash": 291,
+  "no_drinks": 291,
+  "no_encryption": 291,
+  "no_flash": 291,
+  "no_food": 291,
+  "no_luggage": 291,
+  "no_meals": 291,
+  "no_meeting_room": 291,
+  "no_photography": 291,
+  "no_sim": 291,
+  "no_sound": 291,
+  "no_stroller": 291,
+  "no_transfer": 291,
+  "noise_aware": 291,
+  "noise_control_off": 291,
+  "noise_control_on": 291,
+  "nordic_walking": 291,
+  "north": 291,
+  "north_east": 291,
+  "north_west": 291,
+  "not_accessible": 291,
+  "not_accessible_forward": 291,
+  "not_listed_location": 291,
+  "not_started": 291,
+  "note_add": 291,
+  "note_alt": 291,
+  "note_stack": 291,
+  "note_stack_add": 291,
+  "notes": 291,
+  "notification_add": 291,
+  "notification_important": 291,
+  "notification_multiple": 291,
+  "notifications": 291,
+  "notifications_active": 291,
+  "notifications_off": 291,
+  "notifications_paused": 291,
+  "notifications_unread": 291,
+  "numbers": 291,
+  "nutrition": 291,
+  "ods": 291,
+  "odt": 291,
+  "offline_bolt": 291,
+  "offline_pin": 291,
+  "offline_pin_off": 291,
+  "offline_share": 291,
+  "oil_barrel": 291,
+  "on_device_training": 291,
+  "on_hub_device": 291,
+  "oncology": 291,
+  "online_prediction": 291,
+  "onsen": 291,
+  "opacity": 291,
+  "open_in_browser": 291,
+  "open_in_full": 291,
+  "open_in_new": 291,
+  "open_in_new_down": 291,
+  "open_in_new_off": 291,
+  "open_in_phone": 291,
+  "open_jam": 291,
+  "open_run": 291,
+  "open_with": 291,
+  "ophthalmology": 291,
+  "oral_disease": 291,
+  "orbit": 291,
+  "order_approve": 291,
+  "order_play": 291,
+  "orders": 291,
+  "orthopedics": 291,
+  "other_admission": 291,
+  "other_houses": 291,
+  "outbound": 291,
+  "outbox": 291,
+  "outbox_alt": 291,
+  "outdoor_garden": 291,
+  "outdoor_grill": 291,
+  "outgoing_mail": 291,
+  "outlet": 291,
+  "outpatient": 291,
+  "outpatient_med": 291,
+  "output": 291,
+  "output_circle": 291,
+  "oven": 291,
+  "oven_gen": 291,
+  "overview": 291,
+  "overview_key": 291,
+  "oxygen_saturation": 291,
+  "p2p": 291,
+  "pace": 291,
+  "pacemaker": 291,
+  "package": 291,
+  "package_2": 291,
+  "padding": 291,
+  "page_control": 291,
+  "page_info": 291,
+  "pageless": 291,
+  "pages": 291,
+  "pageview": 291,
+  "paid": 291,
+  "palette": 291,
+  "pallet": 291,
+  "pan_tool": 291,
+  "pan_tool_alt": 291,
+  "pan_zoom": 291,
+  "panorama": 291,
+  "panorama_horizontal": 291,
+  "panorama_photosphere": 291,
+  "panorama_vertical": 291,
+  "panorama_wide_angle": 291,
+  "paragliding": 291,
+  "park": 291,
+  "partly_cloudy_day": 291,
+  "partly_cloudy_night": 291,
+  "partner_exchange": 291,
+  "partner_reports": 291,
+  "party_mode": 291,
+  "passkey": 291,
+  "password": 291,
+  "password_2": 291,
+  "password_2_off": 291,
+  "patient_list": 291,
+  "pattern": 291,
+  "pause": 291,
+  "pause_circle": 291,
+  "pause_presentation": 291,
+  "payments": 291,
+  "pedal_bike": 291,
+  "pediatrics": 291,
+  "pen_size_1": 291,
+  "pen_size_2": 291,
+  "pen_size_3": 291,
+  "pen_size_4": 291,
+  "pen_size_5": 291,
+  "pending": 291,
+  "pending_actions": 291,
+  "pentagon": 291,
+  "percent": 291,
+  "pergola": 291,
+  "perm_camera_mic": 291,
+  "perm_contact_calendar": 291,
+  "perm_data_setting": 291,
+  "perm_device_information": 291,
+  "perm_media": 291,
+  "perm_phone_msg": 291,
+  "perm_scan_wifi": 291,
+  "person": 291,
+  "person_2": 291,
+  "person_3": 291,
+  "person_4": 291,
+  "person_add": 291,
+  "person_add_disabled": 291,
+  "person_alert": 291,
+  "person_apron": 291,
+  "person_book": 291,
+  "person_cancel": 291,
+  "person_celebrate": 291,
+  "person_check": 291,
+  "person_edit": 291,
+  "person_off": 291,
+  "person_pin": 291,
+  "person_pin_circle": 291,
+  "person_play": 291,
+  "person_raised_hand": 291,
+  "person_remove": 291,
+  "person_search": 291,
+  "personal_bag": 291,
+  "personal_bag_off": 291,
+  "personal_bag_question": 291,
+  "personal_injury": 291,
+  "personal_places": 291,
+  "pest_control": 291,
+  "pest_control_rodent": 291,
+  "pet_supplies": 291,
+  "pets": 291,
+  "phishing": 291,
+  "phone_android": 291,
+  "phone_bluetooth_speaker": 291,
+  "phone_callback": 291,
+  "phone_disabled": 291,
+  "phone_enabled": 291,
+  "phone_forwarded": 291,
+  "phone_in_talk": 291,
+  "phone_iphone": 291,
+  "phone_locked": 291,
+  "phone_missed": 291,
+  "phone_paused": 291,
+  "phonelink_erase": 291,
+  "phonelink_lock": 291,
+  "phonelink_off": 291,
+  "phonelink_ring": 291,
+  "phonelink_ring_off": 291,
+  "phonelink_setup": 291,
+  "photo": 291,
+  "photo_album": 291,
+  "photo_auto_merge": 291,
+  "photo_camera": 291,
+  "photo_camera_back": 291,
+  "photo_camera_front": 291,
+  "photo_frame": 291,
+  "photo_library": 291,
+  "photo_prints": 291,
+  "photo_size_select_large": 291,
+  "photo_size_select_small": 291,
+  "php": 291,
+  "physical_therapy": 291,
+  "piano": 291,
+  "piano_off": 291,
+  "picture_as_pdf": 291,
+  "picture_in_picture": 291,
+  "picture_in_picture_alt": 291,
+  "picture_in_picture_center": 291,
+  "picture_in_picture_large": 291,
+  "picture_in_picture_medium": 291,
+  "picture_in_picture_mobile": 291,
+  "picture_in_picture_off": 291,
+  "picture_in_picture_small": 291,
+  "pie_chart": 291,
+  "pill": 291,
+  "pill_off": 291,
+  "pin": 291,
+  "pin_drop": 291,
+  "pin_end": 291,
+  "pin_invoke": 291,
+  "pinch": 291,
+  "pinch_zoom_in": 291,
+  "pinch_zoom_out": 291,
+  "pip": 291,
+  "pip_exit": 291,
+  "pivot_table_chart": 291,
+  "place_item": 291,
+  "plagiarism": 291,
+  "planner_banner_ad_pt": 291,
+  "planner_review": 291,
+  "play_arrow": 291,
+  "play_circle": 291,
+  "play_disabled": 291,
+  "play_for_work": 291,
+  "play_lesson": 291,
+  "play_pause": 291,
+  "playing_cards": 291,
+  "playlist_add": 291,
+  "playlist_add_check": 291,
+  "playlist_add_check_circle": 291,
+  "playlist_add_circle": 291,
+  "playlist_play": 291,
+  "playlist_remove": 291,
+  "plumbing": 291,
+  "podcasts": 291,
+  "podiatry": 291,
+  "podium": 291,
+  "point_of_sale": 291,
+  "point_scan": 291,
+  "poker_chip": 291,
+  "policy": 291,
+  "policy_alert": 291,
+  "polyline": 291,
+  "polymer": 291,
+  "pool": 291,
+  "portable_wifi_off": 291,
+  "position_bottom_left": 291,
+  "position_bottom_right": 291,
+  "position_top_right": 291,
+  "post": 291,
+  "post_add": 291,
+  "potted_plant": 291,
+  "power": 291,
+  "power_input": 291,
+  "power_off": 291,
+  "power_settings_circle": 291,
+  "power_settings_new": 291,
+  "prayer_times": 291,
+  "precision_manufacturing": 291,
+  "pregnancy": 291,
+  "pregnant_woman": 291,
+  "preliminary": 291,
+  "prescriptions": 291,
+  "present_to_all": 291,
+  "preview": 291,
+  "preview_off": 291,
+  "price_change": 291,
+  "price_check": 291,
+  "print": 291,
+  "print_add": 291,
+  "print_connect": 291,
+  "print_disabled": 291,
+  "print_error": 291,
+  "print_lock": 291,
+  "priority": 291,
+  "priority_high": 291,
+  "privacy": 291,
+  "privacy_tip": 291,
+  "private_connectivity": 291,
+  "problem": 291,
+  "procedure": 291,
+  "process_chart": 291,
+  "production_quantity_limits": 291,
+  "productivity": 291,
+  "progress_activity": 291,
+  "prompt_suggestion": 291,
+  "propane": 291,
+  "propane_tank": 291,
+  "psychiatry": 291,
+  "psychology": 291,
+  "psychology_alt": 291,
+  "public": 291,
+  "public_off": 291,
+  "publish": 291,
+  "published_with_changes": 291,
+  "pulmonology": 291,
+  "pulse_alert": 291,
+  "punch_clock": 291,
+  "qr_code": 291,
+  "qr_code_2": 291,
+  "qr_code_2_add": 291,
+  "qr_code_scanner": 291,
+  "query_stats": 291,
+  "question_exchange": 291,
+  "question_mark": 291,
+  "queue_music": 291,
+  "queue_play_next": 291,
+  "quick_phrases": 291,
+  "quick_reference": 291,
+  "quick_reference_all": 291,
+  "quick_reorder": 291,
+  "quickreply": 291,
+  "quiz": 291,
+  "r_mobiledata": 291,
+  "radar": 291,
+  "radio": 291,
+  "radio_button_checked": 291,
+  "radio_button_partial": 291,
+  "radio_button_unchecked": 291,
+  "radiology": 291,
+  "railway_alert": 291,
+  "railway_alert_2": 291,
+  "rainy": 291,
+  "rainy_heavy": 291,
+  "rainy_light": 291,
+  "rainy_snow": 291,
+  "ramen_dining": 291,
+  "ramp_left": 291,
+  "ramp_right": 291,
+  "range_hood": 291,
+  "rate_review": 291,
+  "raven": 291,
+  "raw_off": 291,
+  "raw_on": 291,
+  "read_more": 291,
+  "readiness_score": 291,
+  "real_estate_agent": 291,
+  "rear_camera": 291,
+  "rebase": 291,
+  "rebase_edit": 291,
+  "receipt": 291,
+  "receipt_long": 291,
+  "receipt_long_off": 291,
+  "recent_actors": 291,
+  "recent_patient": 291,
+  "recenter": 291,
+  "recommend": 291,
+  "record_voice_over": 291,
+  "rectangle": 291,
+  "recycling": 291,
+  "redeem": 291,
+  "redo": 291,
+  "reduce_capacity": 291,
+  "refresh": 291,
+  "regular_expression": 291,
+  "relax": 291,
+  "release_alert": 291,
+  "remember_me": 291,
+  "reminder": 291,
+  "remote_gen": 291,
+  "remove": 291,
+  "remove_done": 291,
+  "remove_from_queue": 291,
+  "remove_moderator": 291,
+  "remove_road": 291,
+  "remove_selection": 291,
+  "remove_shopping_cart": 291,
+  "reopen_window": 291,
+  "reorder": 291,
+  "repartition": 291,
+  "repeat": 291,
+  "repeat_on": 291,
+  "repeat_one": 291,
+  "repeat_one_on": 291,
+  "replace_audio": 291,
+  "replace_image": 291,
+  "replace_video": 291,
+  "replay": 291,
+  "replay_10": 291,
+  "replay_30": 291,
+  "replay_5": 291,
+  "reply": 291,
+  "reply_all": 291,
+  "report": 291,
+  "report_off": 291,
+  "request_page": 291,
+  "request_quote": 291,
+  "reset_brightness": 291,
+  "reset_focus": 291,
+  "reset_image": 291,
+  "reset_iso": 291,
+  "reset_settings": 291,
+  "reset_shadow": 291,
+  "reset_shutter_speed": 291,
+  "reset_tv": 291,
+  "reset_white_balance": 291,
+  "reset_wrench": 291,
+  "resize": 291,
+  "respiratory_rate": 291,
+  "responsive_layout": 291,
+  "restart_alt": 291,
+  "restaurant": 291,
+  "restore_from_trash": 291,
+  "restore_page": 291,
+  "resume": 291,
+  "reviews": 291,
+  "rewarded_ads": 291,
+  "rheumatology": 291,
+  "rib_cage": 291,
+  "rice_bowl": 291,
+  "right_click": 291,
+  "right_panel_close": 291,
+  "right_panel_open": 291,
+  "ring_volume": 291,
+  "ripples": 291,
+  "road": 291,
+  "robot": 291,
+  "robot_2": 291,
+  "rocket": 291,
+  "rocket_launch": 291,
+  "roller_shades": 291,
+  "roller_shades_closed": 291,
+  "roller_skating": 291,
+  "roofing": 291,
+  "room_preferences": 291,
+  "room_service": 291,
+  "rotate_90_degrees_ccw": 291,
+  "rotate_90_degrees_cw": 291,
+  "rotate_auto": 291,
+  "rotate_left": 291,
+  "rotate_right": 291,
+  "roundabout_left": 291,
+  "roundabout_right": 291,
+  "rounded_corner": 291,
+  "route": 291,
+  "router": 291,
+  "routine": 291,
+  "rowing": 291,
+  "rss_feed": 291,
+  "rsvp": 291,
+  "rtt": 291,
+  "rubric": 291,
+  "rule": 291,
+  "rule_folder": 291,
+  "rule_settings": 291,
+  "run_circle": 291,
+  "running_with_errors": 291,
+  "rv_hookup": 291,
+  "safety_check": 291,
+  "safety_check_off": 291,
+  "safety_divider": 291,
+  "sailing": 291,
+  "salinity": 291,
+  "sanitizer": 291,
+  "satellite": 291,
+  "satellite_alt": 291,
+  "sauna": 291,
+  "save": 291,
+  "save_as": 291,
+  "saved_search": 291,
+  "savings": 291,
+  "scale": 291,
+  "scan": 291,
+  "scan_delete": 291,
+  "scanner": 291,
+  "scatter_plot": 291,
+  "scene": 291,
+  "schedule": 291,
+  "schedule_send": 291,
+  "schema": 291,
+  "school": 291,
+  "science": 291,
+  "science_off": 291,
+  "scooter": 291,
+  "score": 291,
+  "scoreboard": 291,
+  "screen_lock_landscape": 291,
+  "screen_lock_portrait": 291,
+  "screen_lock_rotation": 291,
+  "screen_record": 291,
+  "screen_rotation": 291,
+  "screen_rotation_alt": 291,
+  "screen_rotation_up": 291,
+  "screen_search_desktop": 291,
+  "screen_share": 291,
+  "screenshot": 291,
+  "screenshot_frame": 291,
+  "screenshot_keyboard": 291,
+  "screenshot_monitor": 291,
+  "screenshot_region": 291,
+  "screenshot_tablet": 291,
+  "script": 291,
+  "scrollable_header": 291,
+  "scuba_diving": 291,
+  "sd": 291,
+  "sd_card": 291,
+  "sd_card_alert": 291,
+  "sdk": 291,
+  "search": 291,
+  "search_check": 291,
+  "search_check_2": 291,
+  "search_hands_free": 291,
+  "search_insights": 291,
+  "search_off": 291,
+  "security": 291,
+  "security_key": 291,
+  "security_update_good": 291,
+  "security_update_warning": 291,
+  "segment": 291,
+  "select": 291,
+  "select_all": 291,
+  "select_check_box": 291,
+  "select_to_speak": 291,
+  "select_window": 291,
+  "select_window_2": 291,
+  "select_window_off": 291,
+  "self_care": 291,
+  "self_improvement": 291,
+  "sell": 291,
+  "send": 291,
+  "send_and_archive": 291,
+  "send_money": 291,
+  "send_time_extension": 291,
+  "send_to_mobile": 291,
+  "sensor_door": 291,
+  "sensor_occupied": 291,
+  "sensor_window": 291,
+  "sensors": 291,
+  "sensors_krx": 291,
+  "sensors_krx_off": 291,
+  "sensors_off": 291,
+  "sentiment_calm": 291,
+  "sentiment_content": 291,
+  "sentiment_dissatisfied": 291,
+  "sentiment_excited": 291,
+  "sentiment_extremely_dissatisfied": 291,
+  "sentiment_frustrated": 291,
+  "sentiment_neutral": 291,
+  "sentiment_sad": 291,
+  "sentiment_satisfied": 291,
+  "sentiment_stressed": 291,
+  "sentiment_very_dissatisfied": 291,
+  "sentiment_very_satisfied": 291,
+  "sentiment_worried": 291,
+  "serif": 291,
+  "service_toolbox": 291,
+  "set_meal": 291,
+  "settings": 291,
+  "settings_accessibility": 291,
+  "settings_account_box": 291,
+  "settings_alert": 291,
+  "settings_applications": 291,
+  "settings_b_roll": 291,
+  "settings_backup_restore": 291,
+  "settings_bluetooth": 291,
+  "settings_brightness": 291,
+  "settings_cell": 291,
+  "settings_cinematic_blur": 291,
+  "settings_ethernet": 291,
+  "settings_heart": 291,
+  "settings_input_antenna": 291,
+  "settings_input_component": 291,
+  "settings_input_hdmi": 291,
+  "settings_input_svideo": 291,
+  "settings_motion_mode": 291,
+  "settings_night_sight": 291,
+  "settings_overscan": 291,
+  "settings_panorama": 291,
+  "settings_phone": 291,
+  "settings_photo_camera": 291,
+  "settings_power": 291,
+  "settings_remote": 291,
+  "settings_slow_motion": 291,
+  "settings_system_daydream": 291,
+  "settings_timelapse": 291,
+  "settings_video_camera": 291,
+  "settings_voice": 291,
+  "settop_component": 291,
+  "severe_cold": 291,
+  "shadow": 291,
+  "shadow_add": 291,
+  "shadow_minus": 291,
+  "shape_line": 291,
+  "shapes": 291,
+  "share": 291,
+  "share_location": 291,
+  "share_off": 291,
+  "share_reviews": 291,
+  "share_windows": 291,
+  "sheets_rtl": 291,
+  "shelf_auto_hide": 291,
+  "shelf_position": 291,
+  "shelves": 291,
+  "shield": 291,
+  "shield_lock": 291,
+  "shield_locked": 291,
+  "shield_moon": 291,
+  "shield_person": 291,
+  "shield_question": 291,
+  "shield_with_heart": 291,
+  "shield_with_house": 291,
+  "shift": 291,
+  "shift_lock": 291,
+  "shift_lock_off": 291,
+  "shop": 291,
+  "shop_two": 291,
+  "shopping_bag": 291,
+  "shopping_basket": 291,
+  "shopping_cart": 291,
+  "shopping_cart_checkout": 291,
+  "shopping_cart_off": 291,
+  "shoppingmode": 291,
+  "short_stay": 291,
+  "short_text": 291,
+  "show_chart": 291,
+  "shower": 291,
+  "shuffle": 291,
+  "shuffle_on": 291,
+  "shutter_speed": 291,
+  "shutter_speed_add": 291,
+  "shutter_speed_minus": 291,
+  "sick": 291,
+  "side_navigation": 291,
+  "sign_language": 291,
+  "signal_cellular_0_bar": 291,
+  "signal_cellular_1_bar": 291,
+  "signal_cellular_2_bar": 291,
+  "signal_cellular_3_bar": 291,
+  "signal_cellular_4_bar": 291,
+  "signal_cellular_add": 291,
+  "signal_cellular_alt": 291,
+  "signal_cellular_alt_1_bar": 291,
+  "signal_cellular_alt_2_bar": 291,
+  "signal_cellular_connected_no_internet_0_bar": 291,
+  "signal_cellular_connected_no_internet_4_bar": 291,
+  "signal_cellular_nodata": 291,
+  "signal_cellular_null": 291,
+  "signal_cellular_off": 291,
+  "signal_cellular_pause": 291,
+  "signal_disconnected": 291,
+  "signal_wifi_0_bar": 291,
+  "signal_wifi_4_bar": 291,
+  "signal_wifi_bad": 291,
+  "signal_wifi_off": 291,
+  "signal_wifi_statusbar_not_connected": 291,
+  "signal_wifi_statusbar_null": 291,
+  "signature": 291,
+  "signpost": 291,
+  "sim_card": 291,
+  "sim_card_download": 291,
+  "single_bed": 291,
+  "sip": 291,
+  "skateboarding": 291,
+  "skeleton": 291,
+  "skillet": 291,
+  "skillet_cooktop": 291,
+  "skip_next": 291,
+  "skip_previous": 291,
+  "skull": 291,
+  "slab_serif": 291,
+  "sledding": 291,
+  "sleep_score": 291,
+  "slide_library": 291,
+  "sliders": 291,
+  "slideshow": 291,
+  "slow_motion_video": 291,
+  "smart_card_reader": 291,
+  "smart_card_reader_off": 291,
+  "smart_display": 291,
+  "smart_outlet": 291,
+  "smart_screen": 291,
+  "smart_toy": 291,
+  "smartphone": 291,
+  "smartphone_camera": 291,
+  "smb_share": 291,
+  "smoke_free": 291,
+  "smoking_rooms": 291,
+  "sms": 291,
+  "snippet_folder": 291,
+  "snooze": 291,
+  "snowboarding": 291,
+  "snowing": 291,
+  "snowing_heavy": 291,
+  "snowmobile": 291,
+  "snowshoeing": 291,
+  "soap": 291,
+  "social_distance": 291,
+  "social_leaderboard": 291,
+  "solar_power": 291,
+  "sort": 291,
+  "sort_by_alpha": 291,
+  "sos": 291,
+  "sound_detection_dog_barking": 291,
+  "sound_detection_glass_break": 291,
+  "sound_detection_loud_sound": 291,
+  "sound_sampler": 291,
+  "soup_kitchen": 291,
+  "source_environment": 291,
+  "source_notes": 291,
+  "south": 291,
+  "south_america": 291,
+  "south_east": 291,
+  "south_west": 291,
+  "spa": 291,
+  "space_bar": 291,
+  "space_dashboard": 291,
+  "spatial_audio": 291,
+  "spatial_audio_off": 291,
+  "spatial_speaker": 291,
+  "spatial_tracking": 291,
+  "speaker": 291,
+  "speaker_group": 291,
+  "speaker_notes": 291,
+  "speaker_notes_off": 291,
+  "speaker_phone": 291,
+  "special_character": 291,
+  "specific_gravity": 291,
+  "speech_to_text": 291,
+  "speed": 291,
+  "speed_0_25": 291,
+  "speed_0_2x": 291,
+  "speed_0_5": 291,
+  "speed_0_5x": 291,
+  "speed_0_75": 291,
+  "speed_0_7x": 291,
+  "speed_1_2": 291,
+  "speed_1_25": 291,
+  "speed_1_2x": 291,
+  "speed_1_5": 291,
+  "speed_1_5x": 291,
+  "speed_1_75": 291,
+  "speed_1_7x": 291,
+  "speed_2x": 291,
+  "speed_camera": 291,
+  "spellcheck": 291,
+  "splitscreen": 291,
+  "splitscreen_add": 291,
+  "splitscreen_bottom": 291,
+  "splitscreen_landscape": 291,
+  "splitscreen_left": 291,
+  "splitscreen_portrait": 291,
+  "splitscreen_right": 291,
+  "splitscreen_top": 291,
+  "splitscreen_vertical_add": 291,
+  "spo2": 291,
+  "spoke": 291,
+  "sports": 291,
+  "sports_and_outdoors": 291,
+  "sports_bar": 291,
+  "sports_baseball": 291,
+  "sports_basketball": 291,
+  "sports_cricket": 291,
+  "sports_esports": 291,
+  "sports_football": 291,
+  "sports_golf": 291,
+  "sports_gymnastics": 291,
+  "sports_handball": 291,
+  "sports_hockey": 291,
+  "sports_kabaddi": 291,
+  "sports_martial_arts": 291,
+  "sports_mma": 291,
+  "sports_motorsports": 291,
+  "sports_rugby": 291,
+  "sports_score": 291,
+  "sports_soccer": 291,
+  "sports_tennis": 291,
+  "sports_volleyball": 291,
+  "sprinkler": 291,
+  "sprint": 291,
+  "square": 291,
+  "square_foot": 291,
+  "ssid_chart": 291,
+  "stack": 291,
+  "stack_hexagon": 291,
+  "stack_off": 291,
+  "stack_star": 291,
+  "stacked_bar_chart": 291,
+  "stacked_email": 291,
+  "stacked_inbox": 291,
+  "stacked_line_chart": 291,
+  "stacks": 291,
+  "stadia_controller": 291,
+  "stadium": 291,
+  "stairs": 291,
+  "stairs_2": 291,
+  "star": 291,
+  "star_half": 291,
+  "star_rate": 291,
+  "star_rate_half": 291,
+  "stars": 291,
+  "start": 291,
+  "stat_0": 291,
+  "stat_1": 291,
+  "stat_2": 291,
+  "stat_3": 291,
+  "stat_minus_1": 291,
+  "stat_minus_2": 291,
+  "stat_minus_3": 291,
+  "stay_current_landscape": 291,
+  "stay_current_portrait": 291,
+  "stay_primary_landscape": 291,
+  "stay_primary_portrait": 291,
+  "step": 291,
+  "step_into": 291,
+  "step_out": 291,
+  "step_over": 291,
+  "steppers": 291,
+  "steps": 291,
+  "stethoscope": 291,
+  "stethoscope_arrow": 291,
+  "stethoscope_check": 291,
+  "sticky_note": 291,
+  "sticky_note_2": 291,
+  "stock_media": 291,
+  "stockpot": 291,
+  "stop": 291,
+  "stop_circle": 291,
+  "stop_screen_share": 291,
+  "storage": 291,
+  "store": 291,
+  "storefront": 291,
+  "storm": 291,
+  "straight": 291,
+  "straighten": 291,
+  "strategy": 291,
+  "stream": 291,
+  "stream_apps": 291,
+  "streetview": 291,
+  "stress_management": 291,
+  "strikethrough_s": 291,
+  "stroke_full": 291,
+  "stroke_partial": 291,
+  "stroller": 291,
+  "style": 291,
+  "styler": 291,
+  "stylus": 291,
+  "stylus_laser_pointer": 291,
+  "stylus_note": 291,
+  "subdirectory_arrow_left": 291,
+  "subdirectory_arrow_right": 291,
+  "subheader": 291,
+  "subject": 291,
+  "subscript": 291,
+  "subscriptions": 291,
+  "subtitles": 291,
+  "subtitles_off": 291,
+  "subway": 291,
+  "summarize": 291,
+  "sunny": 291,
+  "sunny_snowing": 291,
+  "superscript": 291,
+  "supervised_user_circle": 291,
+  "supervised_user_circle_off": 291,
+  "supervisor_account": 291,
+  "support": 291,
+  "support_agent": 291,
+  "surfing": 291,
+  "surgical": 291,
+  "surround_sound": 291,
+  "swap_calls": 291,
+  "swap_driving_apps": 291,
+  "swap_driving_apps_wheel": 291,
+  "swap_horiz": 291,
+  "swap_horizontal_circle": 291,
+  "swap_vert": 291,
+  "swap_vertical_circle": 291,
+  "sweep": 291,
+  "swipe": 291,
+  "swipe_down": 291,
+  "swipe_down_alt": 291,
+  "swipe_left": 291,
+  "swipe_left_alt": 291,
+  "swipe_right": 291,
+  "swipe_right_alt": 291,
+  "swipe_up": 291,
+  "swipe_up_alt": 291,
+  "swipe_vertical": 291,
+  "switch": 291,
+  "switch_access": 291,
+  "switch_access_2": 291,
+  "switch_access_shortcut": 291,
+  "switch_access_shortcut_add": 291,
+  "switch_account": 291,
+  "switch_camera": 291,
+  "switch_left": 291,
+  "switch_right": 291,
+  "switch_video": 291,
+  "switches": 291,
+  "sword_rose": 291,
+  "swords": 291,
+  "symptoms": 291,
+  "synagogue": 291,
+  "sync": 291,
+  "sync_alt": 291,
+  "sync_desktop": 291,
+  "sync_disabled": 291,
+  "sync_lock": 291,
+  "sync_problem": 291,
+  "sync_saved_locally": 291,
+  "syringe": 291,
+  "system_update": 291,
+  "system_update_alt": 291,
+  "tab": 291,
+  "tab_close": 291,
+  "tab_close_right": 291,
+  "tab_duplicate": 291,
+  "tab_group": 291,
+  "tab_inactive": 291,
+  "tab_move": 291,
+  "tab_new_right": 291,
+  "tab_recent": 291,
+  "tab_unselected": 291,
+  "table": 291,
+  "table_bar": 291,
+  "table_chart": 291,
+  "table_chart_view": 291,
+  "table_eye": 291,
+  "table_lamp": 291,
+  "table_restaurant": 291,
+  "table_rows": 291,
+  "table_rows_narrow": 291,
+  "table_view": 291,
+  "tablet": 291,
+  "tablet_android": 291,
+  "tablet_camera": 291,
+  "tablet_mac": 291,
+  "tabs": 291,
+  "tactic": 291,
+  "tag": 291,
+  "takeout_dining": 291,
+  "tamper_detection_off": 291,
+  "tamper_detection_on": 291,
+  "tap_and_play": 291,
+  "tapas": 291,
+  "target": 291,
+  "task": 291,
+  "task_alt": 291,
+  "taunt": 291,
+  "taxi_alert": 291,
+  "team_dashboard": 291,
+  "temp_preferences_eco": 291,
+  "temple_buddhist": 291,
+  "temple_hindu": 291,
+  "tenancy": 291,
+  "terminal": 291,
+  "text_ad": 291,
+  "text_decrease": 291,
+  "text_fields": 291,
+  "text_fields_alt": 291,
+  "text_format": 291,
+  "text_increase": 291,
+  "text_rotate_up": 291,
+  "text_rotate_vertical": 291,
+  "text_rotation_angledown": 291,
+  "text_rotation_angleup": 291,
+  "text_rotation_down": 291,
+  "text_rotation_none": 291,
+  "text_select_end": 291,
+  "text_select_jump_to_beginning": 291,
+  "text_select_jump_to_end": 291,
+  "text_select_move_back_character": 291,
+  "text_select_move_back_word": 291,
+  "text_select_move_down": 291,
+  "text_select_move_forward_character": 291,
+  "text_select_move_forward_word": 291,
+  "text_select_move_up": 291,
+  "text_select_start": 291,
+  "text_snippet": 291,
+  "text_to_speech": 291,
+  "text_up": 291,
+  "texture": 291,
+  "texture_add": 291,
+  "texture_minus": 291,
+  "theater_comedy": 291,
+  "theaters": 291,
+  "thermometer": 291,
+  "thermometer_add": 291,
+  "thermometer_gain": 291,
+  "thermometer_loss": 291,
+  "thermometer_minus": 291,
+  "thermostat": 291,
+  "thermostat_auto": 291,
+  "thermostat_carbon": 291,
+  "things_to_do": 291,
+  "thread_unread": 291,
+  "thumb_down": 291,
+  "thumb_up": 291,
+  "thumbnail_bar": 291,
+  "thumbs_up_down": 291,
+  "thunderstorm": 291,
+  "tibia": 291,
+  "tibia_alt": 291,
+  "time_auto": 291,
+  "timelapse": 291,
+  "timeline": 291,
+  "timer": 291,
+  "timer_10": 291,
+  "timer_10_alt_1": 291,
+  "timer_10_select": 291,
+  "timer_3": 291,
+  "timer_3_alt_1": 291,
+  "timer_3_select": 291,
+  "timer_5": 291,
+  "timer_5_shutter": 291,
+  "timer_off": 291,
+  "timer_pause": 291,
+  "timer_play": 291,
+  "tire_repair": 291,
+  "title": 291,
+  "titlecase": 291,
+  "toast": 291,
+  "toc": 291,
+  "today": 291,
+  "toggle_off": 291,
+  "toggle_on": 291,
+  "token": 291,
+  "toll": 291,
+  "tonality": 291,
+  "toolbar": 291,
+  "tools_flat_head": 291,
+  "tools_installation_kit": 291,
+  "tools_ladder": 291,
+  "tools_level": 291,
+  "tools_phillips": 291,
+  "tools_pliers_wire_stripper": 291,
+  "tools_power_drill": 291,
+  "tooltip": 291,
+  "top_panel_close": 291,
+  "top_panel_open": 291,
+  "topic": 291,
+  "tornado": 291,
+  "total_dissolved_solids": 291,
+  "touch_app": 291,
+  "touchpad_mouse": 291,
+  "touchpad_mouse_off": 291,
+  "tour": 291,
+  "toys": 291,
+  "toys_and_games": 291,
+  "toys_fan": 291,
+  "track_changes": 291,
+  "trackpad_input": 291,
+  "trackpad_input_2": 291,
+  "trackpad_input_3": 291,
+  "traffic": 291,
+  "traffic_jam": 291,
+  "trail_length": 291,
+  "trail_length_medium": 291,
+  "trail_length_short": 291,
+  "train": 291,
+  "tram": 291,
+  "transcribe": 291,
+  "transfer_within_a_station": 291,
+  "transform": 291,
+  "transgender": 291,
+  "transit_enterexit": 291,
+  "transit_ticket": 291,
+  "transition_chop": 291,
+  "transition_dissolve": 291,
+  "transition_fade": 291,
+  "transition_push": 291,
+  "transition_slide": 291,
+  "translate": 291,
+  "transportation": 291,
+  "travel": 291,
+  "travel_explore": 291,
+  "travel_luggage_and_bags": 291,
+  "trending_down": 291,
+  "trending_flat": 291,
+  "trending_up": 291,
+  "trip": 291,
+  "trip_origin": 291,
+  "trolley": 291,
+  "trolley_cable_car": 291,
+  "trophy": 291,
+  "troubleshoot": 291,
+  "tsunami": 291,
+  "tsv": 291,
+  "tty": 291,
+  "tune": 291,
+  "turn_left": 291,
+  "turn_right": 291,
+  "turn_sharp_left": 291,
+  "turn_sharp_right": 291,
+  "turn_slight_left": 291,
+  "turn_slight_right": 291,
+  "tv": 291,
+  "tv_gen": 291,
+  "tv_guide": 291,
+  "tv_off": 291,
+  "tv_options_edit_channels": 291,
+  "tv_options_input_settings": 291,
+  "tv_remote": 291,
+  "tv_signin": 291,
+  "tv_with_assistant": 291,
+  "two_pager": 291,
+  "two_wheeler": 291,
+  "type_specimen": 291,
+  "u_turn_left": 291,
+  "u_turn_right": 291,
+  "ulna_radius": 291,
+  "ulna_radius_alt": 291,
+  "umbrella": 291,
+  "unarchive": 291,
+  "undo": 291,
+  "unfold_less": 291,
+  "unfold_less_double": 291,
+  "unfold_more": 291,
+  "unfold_more_double": 291,
+  "ungroup": 291,
+  "universal_currency": 291,
+  "universal_currency_alt": 291,
+  "universal_local": 291,
+  "unknown_2": 291,
+  "unknown_5": 291,
+  "unknown_7": 291,
+  "unknown_document": 291,
+  "unknown_med": 291,
+  "unlicense": 291,
+  "unpaved_road": 291,
+  "unpublished": 291,
+  "unsubscribe": 291,
+  "upcoming": 291,
+  "update": 291,
+  "update_disabled": 291,
+  "upgrade": 291,
+  "upload": 291,
+  "upload_2": 291,
+  "upload_file": 291,
+  "uppercase": 291,
+  "urology": 291,
+  "usb": 291,
+  "usb_off": 291,
+  "user_attributes": 291,
+  "vaccines": 291,
+  "vacuum": 291,
+  "valve": 291,
+  "vape_free": 291,
+  "vaping_rooms": 291,
+  "variable_add": 291,
+  "variable_insert": 291,
+  "variable_remove": 291,
+  "variables": 291,
+  "ventilator": 291,
+  "verified": 291,
+  "verified_user": 291,
+  "vertical_align_bottom": 291,
+  "vertical_align_center": 291,
+  "vertical_align_top": 291,
+  "vertical_distribute": 291,
+  "vertical_shades": 291,
+  "vertical_shades_closed": 291,
+  "vertical_split": 291,
+  "vibration": 291,
+  "video_call": 291,
+  "video_camera_back": 291,
+  "video_camera_back_add": 291,
+  "video_camera_front": 291,
+  "video_camera_front_off": 291,
+  "video_chat": 291,
+  "video_file": 291,
+  "video_label": 291,
+  "video_library": 291,
+  "video_search": 291,
+  "video_settings": 291,
+  "video_stable": 291,
+  "videocam": 291,
+  "videocam_off": 291,
+  "videogame_asset": 291,
+  "videogame_asset_off": 291,
+  "view_agenda": 291,
+  "view_array": 291,
+  "view_carousel": 291,
+  "view_column": 291,
+  "view_column_2": 291,
+  "view_comfy": 291,
+  "view_comfy_alt": 291,
+  "view_compact": 291,
+  "view_compact_alt": 291,
+  "view_cozy": 291,
+  "view_day": 291,
+  "view_headline": 291,
+  "view_in_ar": 291,
+  "view_in_ar_off": 291,
+  "view_kanban": 291,
+  "view_list": 291,
+  "view_module": 291,
+  "view_object_track": 291,
+  "view_quilt": 291,
+  "view_real_size": 291,
+  "view_sidebar": 291,
+  "view_stream": 291,
+  "view_timeline": 291,
+  "view_week": 291,
+  "vignette": 291,
+  "villa": 291,
+  "visibility": 291,
+  "visibility_lock": 291,
+  "visibility_off": 291,
+  "vital_signs": 291,
+  "vo2_max": 291,
+  "voice_chat": 291,
+  "voice_over_off": 291,
+  "voice_selection": 291,
+  "voice_selection_off": 291,
+  "voicemail": 291,
+  "volcano": 291,
+  "volume_down": 291,
+  "volume_down_alt": 291,
+  "volume_mute": 291,
+  "volume_off": 291,
+  "volume_up": 291,
+  "volunteer_activism": 291,
+  "voting_chip": 291,
+  "vpn_key": 291,
+  "vpn_key_alert": 291,
+  "vpn_key_off": 291,
+  "vpn_lock": 291,
+  "vr180_create2d": 291,
+  "vr180_create2d_off": 291,
+  "vrpano": 291,
+  "wall_art": 291,
+  "wall_lamp": 291,
+  "wallet": 291,
+  "wallpaper": 291,
+  "wallpaper_slideshow": 291,
+  "ward": 291,
+  "warehouse": 291,
+  "warning": 291,
+  "warning_off": 291,
+  "wash": 291,
+  "watch": 291,
+  "watch_button_press": 291,
+  "watch_check": 291,
+  "watch_off": 291,
+  "watch_screentime": 291,
+  "watch_vibration": 291,
+  "watch_wake": 291,
+  "water": 291,
+  "water_bottle": 291,
+  "water_bottle_large": 291,
+  "water_damage": 291,
+  "water_do": 291,
+  "water_drop": 291,
+  "water_ec": 291,
+  "water_full": 291,
+  "water_heater": 291,
+  "water_lock": 291,
+  "water_loss": 291,
+  "water_lux": 291,
+  "water_medium": 291,
+  "water_orp": 291,
+  "water_ph": 291,
+  "water_pump": 291,
+  "water_voc": 291,
+  "waterfall_chart": 291,
+  "waves": 291,
+  "waving_hand": 291,
+  "wb_auto": 291,
+  "wb_incandescent": 291,
+  "wb_iridescent": 291,
+  "wb_shade": 291,
+  "wb_sunny": 291,
+  "wb_twilight": 291,
+  "wc": 291,
+  "weather_hail": 291,
+  "weather_mix": 291,
+  "weather_snowy": 291,
+  "web": 291,
+  "web_asset": 291,
+  "web_asset_off": 291,
+  "web_stories": 291,
+  "web_traffic": 291,
+  "webhook": 291,
+  "weekend": 291,
+  "weight": 291,
+  "west": 291,
+  "whatshot": 291,
+  "wheelchair_pickup": 291,
+  "where_to_vote": 291,
+  "widgets": 291,
+  "width": 291,
+  "width_full": 291,
+  "width_normal": 291,
+  "width_wide": 291,
+  "wifi": 291,
+  "wifi_1_bar": 291,
+  "wifi_2_bar": 291,
+  "wifi_add": 291,
+  "wifi_calling": 291,
+  "wifi_calling_bar_1": 291,
+  "wifi_calling_bar_2": 291,
+  "wifi_calling_bar_3": 291,
+  "wifi_channel": 291,
+  "wifi_find": 291,
+  "wifi_home": 291,
+  "wifi_lock": 291,
+  "wifi_notification": 291,
+  "wifi_off": 291,
+  "wifi_password": 291,
+  "wifi_protected_setup": 291,
+  "wifi_proxy": 291,
+  "wifi_tethering": 291,
+  "wifi_tethering_error": 291,
+  "wifi_tethering_off": 291,
+  "wind_power": 291,
+  "window": 291,
+  "window_closed": 291,
+  "window_open": 291,
+  "window_sensor": 291,
+  "wine_bar": 291,
+  "woman": 291,
+  "woman_2": 291,
+  "work": 291,
+  "work_alert": 291,
+  "work_history": 291,
+  "work_update": 291,
+  "workspace_premium": 291,
+  "workspaces": 291,
+  "wounds_injuries": 291,
+  "wrap_text": 291,
+  "wrist": 291,
+  "wrong_location": 291,
+  "wysiwyg": 291,
+  "yard": 291,
+  "your_trips": 291,
+  "youtube_activity": 291,
+  "youtube_searched_for": 291,
+  "zone_person_alert": 291,
+  "zone_person_idle": 291,
+  "zone_person_urgent": 291,
+  "zoom_in": 291,
+  "zoom_in_map": 291,
+  "zoom_out": 291,
+  "zoom_out_map": 291
+}
diff --git a/packages/components/src/__future__/Icon/types.ts b/packages/components/src/__future__/Icon/types.ts
new file mode 100644
index 00000000000..bcd476c504f
--- /dev/null
+++ b/packages/components/src/__future__/Icon/types.ts
@@ -0,0 +1,11 @@
+import iconsMetadata from "./material-symbols-metadata.json"
+
+// Icon names are from https://github.com/marella/material-symbols/blob/main/metadata/versions.json
+// Update `material-symbols-metadata.json` for new icons.
+// Last updated: 28 Aug 2024
+type MaterialIconNames = keyof typeof iconsMetadata
+
+// `auto_awesome` is not listed as part of Material Symbols, however is
+// available in Material Icons, which appears to still work.
+// https://fonts.google.com/icons?icon.query=auto+awesome&icon.set=Material+Icons&icon.size=20&icon.color=%23000000&selected=Material+Icons+Outlined:auto_awesome:
+export type IconNames = MaterialIconNames | "auto_awesome"
diff --git a/packages/components/src/__future__/Select/subcomponents/Option/Option.tsx b/packages/components/src/__future__/Select/subcomponents/Option/Option.tsx
index 1fb6ea283f0..197a5454fda 100644
--- a/packages/components/src/__future__/Select/subcomponents/Option/Option.tsx
+++ b/packages/components/src/__future__/Select/subcomponents/Option/Option.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from "react"
 import { FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
 import { mergeProps, useFocusRing, useOption } from "react-aria"
-import { CheckIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import { useSelectContext } from "../../context"
 import { SelectOption, SelectOptionNode } from "../../types"
@@ -56,7 +56,7 @@ export const Option = <Option extends SelectOption = SelectOption>({
       <span
         className={classnames(styles.icon, isSelected && styles.isSelected)}
       >
-        {isSelected && <CheckIcon inheritSize role="presentation" />}
+        {isSelected && <Icon name="check" isPresentational />}
       </span>
     </li>
   )
diff --git a/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss b/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss
index bac2426c5c4..4002876b0f4 100644
--- a/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss
+++ b/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.module.scss
@@ -9,7 +9,6 @@
 }
 
 .icon {
-  margin-inline-start: $spacing-12;
   color: $color-gray-500;
 }
 
@@ -145,4 +144,5 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-inline-end: var(--spacing-12);
 }
diff --git a/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx b/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx
index 07282ce31e5..5c60ee87631 100644
--- a/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx
+++ b/packages/components/src/__future__/Select/subcomponents/SelectToggle/SelectToggle.tsx
@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from "react"
 import { DOMAttributes, FocusableElement } from "@react-types/shared"
 import classnames from "classnames"
-import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Label } from "~components/Label"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
 import styles from "./SelectToggle.module.scss"
 
@@ -69,14 +69,11 @@ export const SelectToggle = React.forwardRef<
         <span {...valueProps} className={styles.value}>
           {value ?? placeholder}
         </span>
-        {isOpen ? (
-          <ChevronUpIcon role="presentation" classNameOverride={styles.icon} />
-        ) : (
-          <ChevronDownIcon
-            role="presentation"
-            classNameOverride={styles.icon}
-          />
-        )}
+        <Icon
+          name={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          isPresentational
+          className={styles.icon}
+        />
       </button>
     </div>
   )
diff --git a/packages/components/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx b/packages/components/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx
index f745a0a66bd..6626792d1c6 100644
--- a/packages/components/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx
+++ b/packages/components/src/__future__/Tag/RemovableTag/_docs/RemovableTag.stories.tsx
@@ -1,6 +1,4 @@
 import { Meta, StoryObj } from "@storybook/react"
-// import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
-// import { TagColorKeys } from "../../Tag/types"
 import { RemovableTag } from "../RemovableTag"
 
 const meta = {
@@ -20,19 +18,6 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Playground: Story = {
-  // This can be added when we add Icon support
-  // argTypes: {
-  // icon: {
-  // options: ["AcademyIcon", "ActionOffIcon", "AddIcon", "TagIcon"],
-  // control: { type: "radio" },
-  // mapping: {
-  // AcademyIcon: <AcademyIcon role="presentation" />,
-  // ActionOffIcon: <ActionOffIcon role="presentation" />,
-  // AddIcon: <AddIcon role="presentation" />,
-  // TagIcon: <TagIcon role="presentation" />,
-  // },
-  // },
-  // },
   parameters: {
     docs: {
       canvas: {
@@ -46,68 +31,6 @@ export const Children: Story = {
   args: { children: "This text is the children" },
 }
 
-// Colors and Icons may be added in at a later time.
-//
-// export const Color: Story = {
-// render: () => (
-// <>
-// {TagColorKeys.map(color => (
-// <RemovableTag
-// color={color}
-// icon={<TagIcon role="presentation" />}
-// key={color}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// {color}
-// </RemovableTag>
-// ))}
-// </>
-// ),
-// parameters: {
-// docs: {
-// source: { type: "dynamic" },
-// },
-// },
-// }
-// export const Icon: Story = {
-// render: () => (
-// <>
-// <RemovableTag
-// icon={<AcademyIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AcademyIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="yellow"
-// icon={<ActionOffIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// ActionOffIcon
-// </RemovableTag>
-// <RemovableTag
-/// / color="green"
-// icon={<AddIcon role="presentation" />}
-// removeButtonProps={{
-// ariaLabel: "close",
-// onClick: () => alert("Clicked"),
-// }}
-// >
-// AddIcon
-// </RemovableTag>
-// </>
-// ),
-// }
-
 export const ClassNameOverride: Story = {
   args: {
     classNameOverride: "border-red-500 border-solid border-",
diff --git a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
index c0553c7f6d0..a64b6d23480 100644
--- a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
+++ b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss
@@ -44,59 +44,3 @@
     color: $color-purple-800;
   }
 }
-
-// .gray {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-gray-600-rgb, 0.2);
-// }
-// }
-
-// .blue {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-blue-500-rgb, 0.3);
-// }
-// }
-
-// .green {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-green-500-rgb, 0.3);
-// }
-// }
-
-// .yellow {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-yellow-500-rgb, 0.5);
-// }
-// }
-
-// .orange {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-orange-500-rgb, 0.3);
-// }
-// }
-
-// .red {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-red-500-rgb, 0.3);
-// }
-// }
-
-// .purple {
-// &:hover,
-// &:focus,
-// &:focus-visible {
-// background-color: rgba($color-purple-500-rgb, 0.3);
-// }
-// }
diff --git a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx
index 3568780a2ff..1d9524eb58b 100644
--- a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx
+++ b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveButton.tsx
@@ -1,20 +1,10 @@
 import React, { ButtonHTMLAttributes } from "react"
 import classnames from "classnames"
+import { Icon } from "~components/__future__/Icon"
 import { OverrideClassName } from "~components/types/OverrideClassName"
-import { RemoveTagIcon } from "./RemoveTagIcon"
 import styles from "./RemoveButton.module.scss"
 
-// type RemoveButtonColor =
-// | "gray"
-// | "blue"
-// | "green"
-// | "yellow"
-// | "orange"
-// | "red"
-// | "purple"
-
 export type RemoveButtonBaseProps = {
-  // color?: RemoveButtonColor
   ariaLabel: string
   onClick: () => void
 }
@@ -37,7 +27,7 @@ export const RemoveButton = ({
     onClick={onClick}
     {...restProps}
   >
-    <RemoveTagIcon role="presentation" />
+    <Icon name="close" isPresentational />
   </button>
 )
 
diff --git a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx b/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx
deleted file mode 100644
index d72b2661cbf..00000000000
--- a/packages/components/src/__future__/Tag/RemovableTag/subcomponents/RemoveTagIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react"
-import { SVG } from "~components/Icon/subcomponents/SVG"
-import type { IconProps } from "~components/Icon/types"
-
-export const RemoveTagIcon = (props: IconProps): JSX.Element => {
-  const svgContent = (
-    <>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.97304 10.0337L5.05893 13.9478L6.11959 15.0085L10.0337 11.0944L13.9478 15.0085L15.0085 13.9478L11.0944 10.0337L15.0085 6.11959L13.9478 5.05893L10.0337 8.97304L6.11959 5.05893L5.05893 6.11959L8.97304 10.0337Z"
-        fill="currentColor"
-      />
-    </>
-  )
-  return (
-    <SVG {...props} viewBox="0 0 20 20">
-      {svgContent}
-    </SVG>
-  )
-}
diff --git a/packages/components/src/__future__/Tag/Tag/Tag.module.scss b/packages/components/src/__future__/Tag/Tag/Tag.module.scss
index ac55a0d085f..bd78a8e67c0 100644
--- a/packages/components/src/__future__/Tag/Tag/Tag.module.scss
+++ b/packages/components/src/__future__/Tag/Tag/Tag.module.scss
@@ -47,7 +47,7 @@
   color: $color-yellow-700;
 
   .iconContainer {
-    color: $color-yellow-500;
+    color: $color-yellow-700;
   }
 }
 
diff --git a/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx b/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
index 8d935856189..9a458d2cf59 100644
--- a/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
+++ b/packages/components/src/__future__/Tag/Tag/_docs/Tag-migration-guide.stories.tsx
@@ -2,14 +2,9 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 import { Avatar } from "~components/Avatar"
-import {
-  CautionIcon,
-  ExclamationIcon,
-  InformationIcon,
-  SuccessIcon,
-  LiveIcon,
-} from "~components/Icon"
+import { LiveIcon } from "~components/Icon"
 import styles from "~components/Tag/Tag.module.scss"
+import { Icon } from "~components/__future__/Icon"
 import { Tag, RemovableTag } from "../.."
 
 const meta = {
@@ -148,25 +143,19 @@ export const ValidationMigration: StoryObj = {
     <>
       <Tag
         color="green"
-        icon={<SuccessIcon role="img" aria-label="Success," />}
+        icon={<Icon name="check_circle" isFilled alt="Success," />}
       >
         Tag
       </Tag>
-      <Tag
-        color="blue"
-        icon={<InformationIcon role="img" aria-label="Note," />}
-      >
+      <Tag color="blue" icon={<Icon name="info" isFilled alt="Note," />}>
         Tag
       </Tag>
-      <Tag
-        color="red"
-        icon={<ExclamationIcon role="img" aria-label="Error," />}
-      >
+      <Tag color="red" icon={<Icon name="error" isFilled alt="Error," />}>
         Tag
       </Tag>
       <Tag
         color="yellow"
-        icon={<CautionIcon role="img" aria-label="Warning," />}
+        icon={<Icon name="warning" isFilled alt="Warning," />}
       >
         Tag
       </Tag>
diff --git a/packages/components/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx b/packages/components/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx
index a2ff545706f..099747609f0 100644
--- a/packages/components/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx
+++ b/packages/components/src/__future__/Tag/Tag/_docs/Tag.stickersheet.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -26,7 +26,10 @@ const StickerSheetTemplate: StickerSheetStory = {
             <Tag color={color}>
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
-            <Tag icon={<TagIcon role="presentation" />} color={color}>
+            <Tag
+              icon={<Icon name="label" isPresentational isFilled />}
+              color={color}
+            >
               {color.charAt(0).toUpperCase() + color.slice(1)}
             </Tag>
           </StickerSheet.Row>
diff --git a/packages/components/src/__future__/Tag/Tag/_docs/Tag.stories.tsx b/packages/components/src/__future__/Tag/Tag/_docs/Tag.stories.tsx
index 679fba5bc54..14a656c55a7 100644
--- a/packages/components/src/__future__/Tag/Tag/_docs/Tag.stories.tsx
+++ b/packages/components/src/__future__/Tag/Tag/_docs/Tag.stories.tsx
@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
-import { AcademyIcon, ActionOffIcon, AddIcon, TagIcon } from "~components/Icon"
+import { Icon } from "~components/__future__/Icon"
 import { TagColorKeys } from "../types"
 import { Tag } from ".."
 
@@ -34,7 +34,11 @@ export const Color: StoryObj = {
   render: () => (
     <div className="flex gap-16">
       {TagColorKeys.map(color => (
-        <Tag color={color} icon={<TagIcon role="presentation" />} key={color}>
+        <Tag
+          color={color}
+          icon={<Icon name="label" isPresentational isFilled />}
+          key={color}
+        >
           {color}
         </Tag>
       ))}
@@ -47,14 +51,17 @@ export const Color: StoryObj = {
   },
 }
 
-export const Icon: StoryObj = {
+export const IconStory: StoryObj = {
+  name: "Icon",
   render: () => (
     <div className="flex gap-16">
-      <Tag icon={<AcademyIcon role="presentation" />}>AcademyIcon</Tag>
-      <Tag color="yellow" icon={<ActionOffIcon role="presentation" />}>
+      <Tag icon={<Icon name="school" isPresentational isFilled />}>
+        AcademyIcon
+      </Tag>
+      <Tag color="yellow" icon={<Icon name="flash_on" isPresentational />}>
         ActionOffIcon
       </Tag>
-      <Tag color="green" icon={<AddIcon role="presentation" />}>
+      <Tag color="green" icon={<Icon name="add" isPresentational />}>
         AddIcon
       </Tag>
     </div>
diff --git a/packages/components/src/__future__/index.ts b/packages/components/src/__future__/index.ts
index 0ed320204bc..6bcfbd224d5 100644
--- a/packages/components/src/__future__/index.ts
+++ b/packages/components/src/__future__/index.ts
@@ -1,3 +1,4 @@
+export * from "./Icon"
 export * from "./Select"
 export * from "./Tag"
 export * from "./Tabs"
diff --git a/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx b/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx
index 8cd8d4b40e9..b59ad0c6ca6 100644
--- a/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx
+++ b/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stickersheet.stories.tsx
@@ -1,8 +1,8 @@
 import React from "react"
 import { Decorator, Meta } from "@storybook/react"
 import isChromatic from "chromatic/isChromatic"
-import { MeatballsIcon } from "~components/Icon"
 import { IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import {
   StickerSheet,
   StickerSheetStory,
@@ -38,7 +38,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="above" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -46,7 +46,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="below" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -54,7 +54,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} position="left" text="Tooltip label">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -67,7 +67,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               >
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -90,7 +90,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="default">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -98,7 +98,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="informative">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -106,7 +106,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="positive">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -114,7 +114,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="highlight">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
@@ -122,7 +122,7 @@ const StickerSheetTemplate: StickerSheetStory = {
               <Tooltip {...props} text="Tooltip label" mood="cautionary">
                 <IconButton
                   label="Label"
-                  icon={<MeatballsIcon role="presentation" />}
+                  icon={<Icon name="more_horiz" isPresentational />}
                 />
               </Tooltip>
             </StickerSheet.Cell>
diff --git a/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx b/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx
index 24e7a18ccb1..1266b85bee5 100644
--- a/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx
+++ b/packages/components/src/__overlays__/Tooltip/v1/_docs/Tooltip.stories.tsx
@@ -3,7 +3,6 @@ import { Meta, StoryObj } from "@storybook/react"
 import { ButtonGroup } from "~components/ButtonGroup"
 import { CheckboxField } from "~components/Checkbox"
 import { FilterButtonBase } from "~components/Filter/FilterButton/subcomponents/FilterButtonBase"
-import { InformationIcon, RemoveLinkIcon, QuestionIcon } from "~components/Icon"
 import {
   TableContainer,
   TableHeader,
@@ -12,6 +11,7 @@ import {
 } from "~components/Table"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { Tag } from "~components/__future__/Tag"
 import { Tooltip } from "../index"
 
@@ -106,7 +106,7 @@ export const OverflowScroll: Story = {
             }}
           >
             <Tooltip {...props} display="inline" text="Tooltip label">
-              <InformationIcon role="img" aria-label="Info" />
+              <Icon name="info" alt="Info" isFilled />
             </Tooltip>
           </div>
         </div>
@@ -159,12 +159,15 @@ export const ButtonsWithTooltip: Story = {
   render: args => (
     <>
       <Tooltip {...args} text="Contact customer support.">
-        <Button label="Help" icon={<QuestionIcon role="presentation" />} />
+        <Button
+          label="Help"
+          icon={<Icon name="help" isPresentational isFilled />}
+        />
       </Tooltip>
       <Tooltip {...args} text="Remove the link from current selection.">
         <IconButton
           label="Remove link"
-          icon={<RemoveLinkIcon role="presentation" />}
+          icon={<Icon name="link_off" isPresentational />}
         />
       </Tooltip>
     </>
diff --git a/packages/components/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx b/packages/components/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx
index bf271523f98..660ffb3f445 100644
--- a/packages/components/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx
+++ b/packages/components/src/__overlays__/Tooltip/v1/utils/isSemanticElement.spec.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { vi } from "vitest"
-import { ArrowRightIcon } from "~components/Icon"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__"
 import { isSemanticElement } from "./isSemanticElement"
+
 describe("isSemanticElement", () => {
   it("returns true if provided a native element with a semantic role", () => {
     expect(
@@ -48,15 +49,7 @@ describe("isSemanticElement", () => {
   })
 
   it("returns false if provided an element using a role 'presentation' or 'none'", () => {
-    expect(isSemanticElement(<ArrowRightIcon role="presentation" />)).toBe(
-      false
-    )
-    expect(
-      isSemanticElement(
-        <span role="none">
-          <ArrowRightIcon role="presentation" />
-        </span>
-      )
-    ).toBe(false)
+    expect(isSemanticElement(<Icon name="add" isPresentational />)).toBe(false)
+    expect(isSemanticElement(<span role="none">Hello</span>)).toBe(false)
   })
 })
diff --git a/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx b/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx
index 523b7806934..8338f3c509f 100644
--- a/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx
+++ b/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.docs.stories.tsx
@@ -2,11 +2,11 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { FieldMessage } from "~components/FieldMessage"
-import { AddIcon, QuestionIcon } from "~components/Icon"
 import { Input } from "~components/Input"
 import { Label } from "~components/Label"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
 import * as TestStories from "./Tooltip.spec.stories"
@@ -49,7 +49,7 @@ export const Primary: Story = {
     <TooltipTrigger>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it
@@ -86,12 +86,12 @@ export const DontFieldTooltip: Story = {
         <Focusable>
           <Label>
             Password{" "}
-            <span className="inline-flex align-middle">
-              <QuestionIcon
-                classNameOverride="w-[15px] m-auto"
-                role="presentation"
-              />
-            </span>
+            <Icon
+              name="help"
+              isPresentational
+              isFilled
+              className="text-paragraph"
+            />
           </Label>
         </Focusable>
         <Tooltip>Password must be at least 8 characters</Tooltip>
@@ -114,7 +114,7 @@ export const DoConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add topic"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it
@@ -137,7 +137,7 @@ export const DontConcise: Story = {
       <TooltipTrigger>
         <IconButton
           label="Add something"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           // Negate the aria description (added by RAC) as it should be the
           // same as the accessible name, therefore no need to duplicate it
diff --git a/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx b/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx
index e3746e0e166..82b8cb00e79 100644
--- a/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx
+++ b/packages/components/src/__overlays__/Tooltip/v3/_docs/Tooltip.spec.stories.tsx
@@ -2,10 +2,10 @@ import React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 import { expect, userEvent, waitFor, within } from "@storybook/test"
 import isChromatic from "chromatic"
-import { AddIcon } from "~components/Icon"
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "~components/Tabs"
 import { Text } from "~components/Text"
 import { Button, IconButton } from "~components/__actions__/v2"
+import { Icon } from "~components/__future__/Icon"
 import { Tag } from "~components/__future__/Tag"
 import { Focusable } from "~components/__overlays__/v3"
 import { Tooltip, TooltipTrigger } from "../index"
@@ -87,7 +87,7 @@ export const OnButtonWithDesc: Story = {
       <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
         <IconButton
           label="(TESTING) Add label"
-          icon={<AddIcon role="presentation" />}
+          icon={<Icon name="add" isPresentational />}
           primary
           aria-describedby="blah"
         />
@@ -105,7 +105,7 @@ export const OnIconButton: Story = {
     <TooltipTrigger defaultOpen={defaultOpen} isOpen={isOpen}>
       <IconButton
         label="Add something"
-        icon={<AddIcon role="presentation" />}
+        icon={<Icon name="add" isPresentational />}
         primary
         // Negate the aria description (added by RAC) as it should be the
         // same as the accessible name, therefore no need to duplicate it
diff --git a/packages/components/types.d.ts b/packages/components/types.d.ts
index ca837cbe9c4..83509ded6e5 100644
--- a/packages/components/types.d.ts
+++ b/packages/components/types.d.ts
@@ -12,3 +12,8 @@ declare module "*?raw" {
   const content: string
   export default content
 }
+
+declare module "*.png" {
+  const content: string
+  export default content
+}
diff --git a/packages/tailwind/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx b/packages/tailwind/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx
index 5e4c1814250..8789a923e27 100644
--- a/packages/tailwind/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx
+++ b/packages/tailwind/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { ClosedIcon, SurveysIcon } from "~components/Icon"
+import { Icon } from "~components/__future__"
 
 type Props = {
   text: string
@@ -25,9 +25,9 @@ export const CodeSnippet = ({ text, onCopy }: Props): React.ReactElement => {
         <span>{text}</span>
         <span className="text-underline text-white">
           {copyIconIsChecked ? (
-            <ClosedIcon role="img" aria-label="copied" />
+            <Icon name="assignment_turned_in" alt="Copied" isFilled />
           ) : (
-            <SurveysIcon role="img" aria-label="copy" />
+            <Icon name="assignment" alt="Copy" isFilled />
           )}
         </span>
       </p>