diff --git a/UNRELEASED.md b/UNRELEASED.md
index 3b3b42df453..b9fba8c1bfb 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -15,6 +15,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Doesn't render `MenuActions` if no actions are passed to an `actionGroups` item inside `Page` ([2266](https://github.com/Shopify/polaris-react/pull/2266))### Documentation
+- Fixed `recolor-icon` Sass mixin to properly scope `$secondary-color` to the child `svg` ([#2298](https://github.com/Shopify/polaris-react/pull/2298))
 
 ### Development workflow
 
diff --git a/src/styles/shared/_icons.scss b/src/styles/shared/_icons.scss
index 5281a2df065..a4c12166ca5 100644
--- a/src/styles/shared/_icons.scss
+++ b/src/styles/shared/_icons.scss
@@ -5,6 +5,10 @@
 @mixin recolor-icon($fill-color, $secondary-color: null, $filter-color: null) {
   svg {
     fill: $fill-color;
+
+    @if $secondary-color != null {
+      color: $secondary-color;
+    }
   }
 
   @if $filter-color != null {
@@ -12,10 +16,6 @@
       filter: $filter-color;
     }
   }
-
-  @if $secondary-color != null {
-    color: $secondary-color;
-  }
 }
 
 @mixin color-icon($value, $hue: base) {