diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 11e76767180..6c8f21029dd 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -190,7 +190,7 @@ $disabled-fade: 0.6;
 }
 
 .SecondaryAction {
-  @include recolor-icon(var(--p-icon));
+  @include recolor-icon($fill-color: var(--p-icon));
   display: flex;
   align-items: center;
   height: nav(mobile-height);
@@ -206,16 +206,15 @@ $disabled-fade: 0.6;
   &:focus,
   &:active {
     @include recolor-icon(
-      var(--p-icon-hovered),
-      transparent,
-      $filter-color: var(--p-action-primary)
+      $fill-color: var(--p-icon-hovered),
+      $filter-color: var(--p-filter-icon-action-primary)
     );
     background: var(--p-background-hovered);
 
     @media (-ms-high-contrast: active) {
       @include recolor-icon(
         $fill-color: var(--p-icon-on-interactive),
-        $filter-color: var(--p-icon-on-interactive)
+        $filter-color: var(--p-filter-icon-on-interactive)
       );
     }
   }
@@ -228,7 +227,7 @@ $disabled-fade: 0.6;
 
   &:active {
     @include no-focus-ring;
-    @include recolor-icon(var(--p-icon-pressed));
+    @include recolor-icon($fill-color: var(--p-icon-pressed));
     background: var(--p-background-pressed);
   }
 
@@ -358,7 +357,7 @@ $secondary-item-font-size: rem(15px);
 
   .Action {
     @include unstyled-button;
-    @include recolor-icon(var(--p-icon));
+    @include recolor-icon($fill-color: var(--p-icon));
     display: flex;
     align-items: center;
     height: nav(mobile-nav-height);
@@ -375,18 +374,18 @@ $secondary-item-font-size: rem(15px);
     &:hover,
     &:focus {
       background: var(--p-background-hovered);
-      @include recolor-icon(var(--p-icon-hovered), transparent);
+      @include recolor-icon($fill-color: var(--p-icon-hovered));
 
       @media (-ms-high-contrast: active) {
         @include recolor-icon(
           $fill-color: var(--p-icon-on-interactive),
-          $filter-color: var(--p-icon-on-interactive)
+          $filter-color: var(--p-filter-icon-on-interactive)
         );
       }
     }
 
     &:hover {
-      @include recolor-icon($filter-color: var(--p-icon-on-interactive));
+      @include recolor-icon($filter-color: var(--p-filter-icon));
     }
 
     &:focus {
@@ -401,7 +400,7 @@ $secondary-item-font-size: rem(15px);
     // stylelint-disable-next-line selector-max-specificity
     &:active,
     &:active:hover {
-      @include recolor-icon(var(--p-icon-pressed));
+      @include recolor-icon($fill-color: var(--p-icon-pressed));
       background: var(--p-background-pressed);
       @include no-focus-ring;
     }
@@ -419,9 +418,8 @@ $secondary-item-font-size: rem(15px);
 
   &:hover {
     @include recolor-icon(
-      var(--p-action-primary),
-      null,
-      $filter-color: var(--p-icon-on-interactive)
+      $fill-color: var(--p-action-primary),
+      $filter-color: var(--p-filter-icon-action-primary)
     );
     color: var(--p-text-primary);
   }
diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md
index dd9c831ce7e..5a5bad386ef 100644
--- a/src/components/Navigation/README.md
+++ b/src/components/Navigation/README.md
@@ -173,7 +173,7 @@ Use to present a navigation menu in the [frame](https://polaris.shopify.com/comp
   <Navigation.Section
     items={[
       {
-        url: '/path/to/place',
+        url: '/',
         label: 'Home',
         icon: HomeMajor,
       },
@@ -202,7 +202,7 @@ Use to present a secondary action, related to a section and to title the section
   <Navigation.Section
     items={[
       {
-        url: '/',
+        url: '/path/to/place',
         label: 'Home',
         icon: HomeMajor,
       },
@@ -495,6 +495,11 @@ This example showcases the many elements that can compose a navigation, especial
         label: 'Icon as img',
         icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.791 2.253l-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"></path><path d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"></path></svg>',
       },
+      {
+        url: '/',
+        label: 'Icon as img – Active',
+        icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M1.791 2.253l-.597 3.583A1 1 0 0 0 2.18 7h.893a1.5 1.5 0 0 0 1.342-.83L5 5l.585 1.17A1.5 1.5 0 0 0 6.927 7h1.146a1.5 1.5 0 0 0 1.342-.83L10 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h1.146a1.5 1.5 0 0 0 1.342-.83L15 5l.585 1.17a1.5 1.5 0 0 0 1.342.83h.893a1 1 0 0 0 .986-1.164l-.597-3.583A1.5 1.5 0 0 0 16.729 1H3.271a1.5 1.5 0 0 0-1.48 1.253zM4 18.5A1.5 1.5 0 0 1 5.5 17H8v-3h4v3h2.5a1.5 1.5 0 0 1 1.5 1.5v.5H4v-.5z"></path><path d="M2 9h2v4h12V9h2v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 13.5V9z"></path></svg>',
+      },
       {
         url: '/path/to/place',
         label: 'Other secondary action',
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index 64aee2a0374..1a02eef61d3 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -80,10 +80,16 @@ $nav-animation-variables: (
   // 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%)
+  --p-filter-icon: 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));
+  --p-filter-icon-action-primary: brightness(0) saturate(100%) invert(20%)
+    sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%) contrast(101%);
+  --p-filter-icon-on-interactive: brightness(0) saturate(100%) invert(100%);
+
+  @include recolor-icon(
+    $fill-color: var(--p-icon),
+    $filter-color: var(--p-filter-icon)
+  );
   flex-shrink: 0;
   align-self: flex-start;
   width: nav(icon-size);
@@ -99,7 +105,10 @@ $nav-animation-variables: (
 
   .Item:hover &,
   .Item.keyFocused & {
-    @include recolor-icon(var(--p-icon), transparent, var(--p-icon));
+    @include recolor-icon(
+      $fill-color: var(--p-icon),
+      $filter-color: var(--p-filter-icon)
+    );
   }
 
   .Item-selected &,
@@ -108,9 +117,8 @@ $nav-animation-variables: (
   .subNavigationActive:hover &,
   .Item-selected.keyFocused & {
     @include recolor-icon(
-      var(--p-action-primary),
-      transparent,
-      var(--p-icon-on-interactive)
+      $fill-color: var(--p-action-primary),
+      $filter-color: var(--p-filter-icon-action-primary)
     );
   }