diff --git a/.changeset/little-doors-search.md b/.changeset/little-doors-search.md
new file mode 100644
index 00000000000..731527efdf6
--- /dev/null
+++ b/.changeset/little-doors-search.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Added "magic" color to the Icon component's color prop type.
diff --git a/polaris-react/src/components/Icon/Icon.scss b/polaris-react/src/components/Icon/Icon.scss
index 69380ccb375..5478920a7bb 100644
--- a/polaris-react/src/components/Icon/Icon.scss
+++ b/polaris-react/src/components/Icon/Icon.scss
@@ -101,6 +101,11 @@
   @include recolor-icon(var(--p-action-primary));
 }
 
+.colorMagic {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  @include recolor-icon(var(--p-color-icon-magic));
+}
+
 .Svg,
 .Img {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index 80f6a418b67..f72c5e1f4eb 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -21,6 +21,7 @@ export function Colored() {
       <Icon source={CirclePlusMinor} color="success" />
       <Icon source={CirclePlusMinor} color="warning" />
       <Icon source={CirclePlusMinor} color="critical" />
+      <Icon source={CirclePlusMinor} color="magic" />
     </div>
   );
 }
diff --git a/polaris-react/src/components/Icon/Icon.tsx b/polaris-react/src/components/Icon/Icon.tsx
index cc71bb42b03..aca21b34e35 100644
--- a/polaris-react/src/components/Icon/Icon.tsx
+++ b/polaris-react/src/components/Icon/Icon.tsx
@@ -14,7 +14,8 @@ type Color =
   | 'warning'
   | 'highlight'
   | 'success'
-  | 'primary';
+  | 'primary'
+  | 'magic';
 
 const COLORS_WITH_BACKDROPS = [
   'base',