diff --git a/UNRELEASED.md b/UNRELEASED.md
index 9196c6a162d..6ecc3efd220 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -24,6 +24,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 ### Code quality
 
+- Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
+- Remove filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650))
 - Remove all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636))
 - Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
 - Removed miscellaneous css custom properties ([#4620](https://github.com/Shopify/polaris-react/pull/4620))
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 177caabd80a..11e76767180 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -208,14 +208,14 @@ $disabled-fade: 0.6;
     @include recolor-icon(
       var(--p-icon-hovered),
       transparent,
-      $filter-color: filter('action')
+      $filter-color: var(--p-action-primary)
     );
     background: var(--p-background-hovered);
 
     @media (-ms-high-contrast: active) {
       @include recolor-icon(
         $fill-color: var(--p-icon-on-interactive),
-        $filter-color: filter('white')
+        $filter-color: var(--p-icon-on-interactive)
       );
     }
   }
@@ -380,13 +380,13 @@ $secondary-item-font-size: rem(15px);
       @media (-ms-high-contrast: active) {
         @include recolor-icon(
           $fill-color: var(--p-icon-on-interactive),
-          $filter-color: filter('white')
+          $filter-color: var(--p-icon-on-interactive)
         );
       }
     }
 
     &:hover {
-      @include recolor-icon($filter-color: filter('action'));
+      @include recolor-icon($filter-color: var(--p-icon-on-interactive));
     }
 
     &:focus {
@@ -421,7 +421,7 @@ $secondary-item-font-size: rem(15px);
     @include recolor-icon(
       var(--p-action-primary),
       null,
-      $filter-color: filter('action')
+      $filter-color: var(--p-icon-on-interactive)
     );
     color: var(--p-text-primary);
   }
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index 3ca76d233e0..64aee2a0374 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -77,7 +77,13 @@ $nav-animation-variables: (
 }
 
 @mixin nav-item-icon-attributes {
-  @include recolor-icon(var(--p-icon), transparent, filter('icon'));
+  // hardcoding this variable for now because we need to rip out all instances
+  // of filter() eventually but can't for this one right now. The value is the
+  // equivalent value for filter('icon').
+  --p-icon-filter: brightness(0) saturate(100%) invert(36%) sepia(13%)
+    saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%);
+
+  @include recolor-icon(var(--p-icon), transparent, var(--p-icon-filter));
   flex-shrink: 0;
   align-self: flex-start;
   width: nav(icon-size);
@@ -93,7 +99,7 @@ $nav-animation-variables: (
 
   .Item:hover &,
   .Item.keyFocused & {
-    @include recolor-icon(var(--p-icon), transparent, filter('icon'));
+    @include recolor-icon(var(--p-icon), transparent, var(--p-icon));
   }
 
   .Item-selected &,
@@ -104,7 +110,7 @@ $nav-animation-variables: (
     @include recolor-icon(
       var(--p-action-primary),
       transparent,
-      filter('action')
+      var(--p-icon-on-interactive)
     );
   }