diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 57ec00c2bae..559f6522ec2 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -7,6 +7,7 @@ $nav-max-width: 360px;
 
 .Navigation {
   --pc-navigation-icon-size: 20px;
+  --pc-navigation-mobile-spacing: calc(var(--p-space-2) + var(--p-space-05));
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -337,7 +338,7 @@ $secondary-item-font-size: 15px;
   list-style: none;
 
   + .Section {
-    padding-top: var(--p-space-2);
+    padding-top: var(--p-space-1);
     padding-bottom: var(--p-space-4);
   }
 }
@@ -347,7 +348,7 @@ $secondary-item-font-size: 15px;
 }
 
 .Section-withSeparator {
-  border-top: var(--p-border-divider);
+  border-top: 1px solid var(--p-divider);
 }
 
 .SectionHeading {
diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md
index 70ae876c5bb..8aa2e70d258 100644
--- a/src/components/Navigation/README.md
+++ b/src/components/Navigation/README.md
@@ -177,18 +177,18 @@ Use to present a navigation menu in the [frame](https://polaris.shopify.com/comp
         {
           url: '/',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
           badge: '15',
         },
         {
           url: '/path/to/place',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
         },
       ]}
     />
@@ -208,25 +208,104 @@ Use to present a secondary action, related to a section and to title the section
         {
           url: '/path/to/place',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
           badge: '15',
+          subNavigationItems: [
+            {
+              url: '/admin/orders/collections',
+              disabled: false,
+              selected: false,
+              label: 'Collections',
+            },
+            {
+              url: '/admin/orders/inventory',
+              disabled: false,
+              label: 'Inventory',
+            },
+          ],
+        },
+        {
+          url: '/path/to/place',
+          label: 'Marketing',
+          icon: MarketingMinor,
+          badge: '15',
+          subNavigationItems: [
+            {
+              url: '/admin/analytics/collections',
+              disabled: false,
+              selected: false,
+              label: 'Reports',
+            },
+            {
+              url: '/admin/analytics/inventory',
+              disabled: false,
+              label: 'Live view',
+            },
+          ],
         },
         {
           url: '/admin/products',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
           selected: true,
           subNavigationItems: [
             {
-              url: '/admin/products',
+              url: '/?path=/story/all-components-navigation--navigation-with-multiple-secondary-navigations',
+              disabled: false,
+              selected: false,
+              label: 'Collections',
+            },
+            {
+              url: '/admin/products/inventory',
               disabled: false,
               selected: true,
-              label: 'All products',
+              label: 'Inventory',
+            },
+          ],
+        },
+      ]}
+    />
+  </Navigation>
+</Frame>
+```
+
+### Navigation with an active root item with secondary navigation items
+
+Use to present a secondary action, related to a section and to title the section.
+
+```jsx
+<Frame>
+  <Navigation location="/">
+    <Navigation.Section
+      duplicateRootItem
+      items={[
+        {
+          url: '/path/to/place',
+          label: 'Home',
+          icon: HomeMinor,
+        },
+        {
+          url: '/path/to/place',
+          label: 'Orders',
+          icon: OrdersMinor,
+          badge: '15',
+        },
+        {
+          url: '/admin/products',
+          label: 'Products',
+          icon: ProductsMinor,
+          selected: true,
+          subNavigationItems: [
+            {
+              url: '/admin/products/collections',
+              disabled: false,
+              selected: false,
+              label: 'Collections',
             },
             {
               url: '/admin/products/inventory',
@@ -253,17 +332,17 @@ Use to present a secondary action, related to a section and to title the section
         {
           url: '/path/to/place',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
         },
         {
           url: '/path/to/place',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
         },
       ]}
     />
@@ -273,7 +352,7 @@ Use to present a secondary action, related to a section and to title the section
         {
           url: '/path/to/place',
           label: 'Online Store',
-          icon: OnlineStoreMajor,
+          icon: OnlineStoreMinor,
         },
       ]}
       action={{
@@ -298,12 +377,12 @@ Use to add a different action for an item than the main action, like to view or
         {
           url: '/path/to/place',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
           secondaryAction: {
             url: '/admin/orders/add',
             accessibilityLabel: 'Add an order',
@@ -313,7 +392,7 @@ Use to add a different action for an item than the main action, like to view or
         {
           url: '/path/to/place',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
         },
       ]}
     />
@@ -333,17 +412,17 @@ Use to show a limited number of items in a section with an option to expand the
         {
           url: '/path/to/place',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
         },
         {
           url: '/path/to/place',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
         },
       ]}
       rollup={{
@@ -369,17 +448,17 @@ Use to add a horizontal line below the section.
         {
           url: '/path/to/place',
           label: 'Home',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
         },
         {
           url: '/path/to/place',
           label: 'Products',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
         },
       ]}
     />
@@ -388,7 +467,7 @@ Use to add a horizontal line below the section.
         {
           url: '/path/to/place',
           label: 'Online Store',
-          icon: OnlineStoreMajor,
+          icon: OnlineStoreMinor,
         },
       ]}
       separator
@@ -409,12 +488,12 @@ This example showcases the many elements that can compose a navigation, especial
         {
           url: '/path/to/place',
           label: 'Inactive item',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Item with indicator',
-          icon: HomeMajor,
+          icon: HomeMinor,
           subNavigationItems: [
             {
               url: '/path/to/place/index',
@@ -427,25 +506,25 @@ This example showcases the many elements that can compose a navigation, especial
         {
           url: '/path/to/place',
           label: 'External link item',
-          icon: HomeMajor,
+          icon: HomeMinor,
           external: true,
         },
         {
           url: '/path/to/place',
           label: 'New item',
           new: true,
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Badged item',
           badge: 'Old',
-          icon: HomeMajor,
+          icon: HomeMinor,
         },
         {
           url: '/path/to/place',
           label: 'Active with secondary action',
-          icon: OrdersMajor,
+          icon: OrdersMinor,
           selected: true,
           secondaryAction: {
             url: '/admin/orders/add',
@@ -456,7 +535,7 @@ This example showcases the many elements that can compose a navigation, especial
         {
           url: '/admin/products',
           label: 'Active item with sub navigation',
-          icon: ProductsMajor,
+          icon: ProductsMinor,
           selected: true,
           subNavigationItems: [
             {
@@ -480,13 +559,13 @@ This example showcases the many elements that can compose a navigation, especial
         {
           url: '/path/to/place',
           label: 'Disabled item',
-          icon: CustomersMajor,
+          icon: CustomersMinor,
           disabled: true,
         },
         {
           url: '/path/to/place',
           label: 'Overflow item',
-          icon: MarketingMajor,
+          icon: MarketingMinor,
         },
       ]}
       rollup={{
@@ -502,21 +581,24 @@ This example showcases the many elements that can compose a navigation, especial
         {
           url: '/path/to/place',
           label: 'Icon as svg',
-          icon: OnlineStoreMajor,
+          icon: OnlineStoreMinor,
         },
         {
           url: '/path/to/place',
           label: 'Icon as img',
+          shouldResizeIcon: true,
           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',
+          shouldResizeIcon: true,
           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',
+          shouldResizeIcon: true,
           icon: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M2.771 14.055A8 8 0 1 1 16 8c0 2.385-1.086 4.629-2.704 5.983A7.956 7.956 0 0 1 7.991 16c-.613 0-2.022-.003-5-.01h-.928l.708-1.935zm5.973-6.757c-.554-.302-.837-.565-.837-.92 0-.446.4-.735 1.017-.735a3.62 3.62 0 0 1 1.365.302l.502-1.577S10.328 4 8.963 4C7.057 4 5.73 5.117 5.73 6.68c0 .894.618 1.565 1.442 2.05.67.382.901.658.901 1.065 0 .42-.334.762-.952.762-.915 0-1.79-.486-1.79-.486l-.54 1.577s.797.552 2.15.552c1.956 0 3.373-.986 3.373-2.76-.013-.959-.721-1.642-1.571-2.142z"/></svg>',
           secondaryAction: {
             url: '/path/to/place/view',
@@ -546,23 +628,63 @@ This example shows how to add an aria-labelledby to add a hidden label to the `n
     <VisuallyHidden>
       <p id="label-id">Hidden label</p>
     </VisuallyHidden>
+    <Navigation.Section
+      items={[
+        {
+          url: '/path/to/place',
+          label: 'Home',
+          icon: HomeMinor,
+        },
+        {
+          url: '/path/to/place',
+          label: 'Orders',
+          icon: OrdersMinor,
+          badge: '15',
+        },
+        {
+          url: '/path/to/place',
+          label: 'Products',
+          icon: ProductsMinor,
+        },
+      ]}
+    />
+  </Navigation>
+</Frame>
+```
+
+### Navigation using Major icons
+
+This example shows how to use the shouldResizeIcon prop when using Major icons
+
+```jsx
+<Frame>
+  <Navigation location="/">
     <Navigation.Section
       items={[
         {
           url: '/path/to/place',
           label: 'Home',
           icon: HomeMajor,
+          shouldResizeIcon: true,
         },
         {
           url: '/path/to/place',
           label: 'Orders',
           icon: OrdersMajor,
           badge: '15',
+          shouldResizeIcon: true,
         },
         {
           url: '/path/to/place',
           label: 'Products',
           icon: ProductsMajor,
+          shouldResizeIcon: true,
+        },
+        {
+          url: '/path/to/place',
+          label: 'Customers',
+          icon: CustomersMajor,
+          shouldResizeIcon: true,
         },
       ]}
     />
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index 9581dddfca9..1c7e59d343c 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -63,7 +63,7 @@ $nav-animation-variables: (
 
   @include breakpoint-after(nav-min-window-corrected()) {
     font-size: $item-font-size;
-    font-weight: var(--p-font-weight-semibold);
+    font-weight: var(--p-font-weight-medium);
     line-height: $item-line-height-small;
     padding-left: var(--p-space-3);
   }
@@ -109,9 +109,9 @@ $nav-animation-variables: (
   align-self: flex-start;
   width: nav(icon-size);
   height: nav(icon-size);
-  margin-top: nav(mobile-spacing);
-  margin-right: var(--p-space-4);
-  margin-bottom: nav(mobile-spacing);
+  margin-top: var(--pc-navigation-mobile-spacing);
+  margin-right: var(--p-space-3);
+  margin-bottom: var(--pc-navigation-mobile-spacing);
   @include breakpoint-after(nav-min-window-corrected()) {
     margin-top: nav(desktop-spacing);
     margin-right: var(--p-space-2);
@@ -164,14 +164,14 @@ $nav-animation-variables: (
 
 @mixin nav-item-text-attributes {
   flex: 1 1 auto;
-  margin-top: nav(mobile-spacing);
-  margin-bottom: nav(mobile-spacing);
+  margin-top: var(--pc-navigation-mobile-spacing);
+  margin-bottom: var(--pc-navigation-mobile-spacing);
   line-height: $text-line-height;
   font-size: $item-font-size-small;
 
   @include breakpoint-after(nav-min-window-corrected()) {
-    margin-top: nav(desktop-spacing);
-    margin-bottom: nav(desktop-spacing);
+    margin-top: var(--p-space-1);
+    margin-bottom: var(--p-space-1);
   }
 
   @include breakpoint-before(nav-min-window-corrected()) {