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 00000000000..fa374ff467c
Binary files /dev/null and b/packages/components/src/__future__/Icon/_docs/assets/interface-dont.png differ
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 00000000000..8b7ae786d14
Binary files /dev/null and b/packages/components/src/__future__/Icon/_docs/assets/tooltip-dont.png differ
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>