Repository: scaleway/ultraviolet
Pull request #5100: refactor(Navigation): deprecated and change some types category icon items
Author: login: matthprost
Labels: name: refactor
description: Refactor without breaking changes
Created: 2025-05-06T08:41:35Z | Merged: 2025-05-07T09:32:16Z

## Summary

## Type

- Refactor

### Summarise concisely:

#### What is expected?


⚠️ BREAKING CHANGES:

`Navigation.Item`: change in the types and deprecated category icon props:
  - `categoryIcon`: type switch from union type to react node to allow you adding your own category icon.
  ```tsx
  // Before
  <Navigation.Item categoryIcon="useCase" />
  
  // After
  import { UseCaseCategoryIcon } from '@ultraviolet/icons/category'
  
  <Navigation.Item categoryIcon={<UseCaseCategoryIcon />} />
  ```
  - `categoryIconVariant`: has been removed. Use the variant of the icon component itself.
  ```tsx
  // Before
  <Navigation.Item categoryIcon="useCase" categoryIconVariant="neutral" />
  
  // After
  import { UseCaseCategoryIcon } from '@ultraviolet/icons/category'
  
  <Navigation.Item categoryIcon={<UseCaseCategoryIcon variant="neutral" />} />
  ```



Diff:
diff --git a/.changeset/nine-teeth-wave.md b/.changeset/nine-teeth-wave.md
new file mode 100644
index 0000000000..92486196d6
--- /dev/null
+++ b/.changeset/nine-teeth-wave.md
@@ -0,0 +1,27 @@
+---
+"@ultraviolet/plus": minor
+---
+
+⚠️ BREAKING CHANGES:
+
+`Navigation.Item`: change in the types and deprecated category icon props:
+  - `categoryIcon`: type switch from union type to react node to allow you adding your own category icon.
+  ```tsx
+  // Before
+  <Navigation.Item categoryIcon="useCase" />
+  
+  // After
+  import { UseCaseCategoryIcon } from '@ultraviolet/icons/category'
+  
+  <Navigation.Item categoryIcon={<UseCaseCategoryIcon />} />
+  ```
+  - `categoryIconVariant`: has been removed. Use the variant of the icon component itself.
+  ```tsx
+  // Before
+  <Navigation.Item categoryIcon="useCase" categoryIconVariant="neutral" />
+  
+  // After
+  import { UseCaseCategoryIcon } from '@ultraviolet/icons/category'
+  
+  <Navigation.Item categoryIcon={<UseCaseCategoryIcon variant="neutral" />} />
+  ```
diff --git a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx
index a62e679209..623987767c 100644
--- a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx
+++ b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx
@@ -1,5 +1,15 @@
 import styled from '@emotion/styled'
 import type { StoryFn } from '@storybook/react'
+import {
+  BaremetalCategoryIcon,
+  ConsoleCategoryIcon,
+  DatabaseCategoryIcon,
+  ManagedServicesCategoryIcon,
+  NetworkCategoryIcon,
+  ObservabilityCategoryIcon,
+  SecurityCategoryIcon,
+  UseCaseCategoryIcon,
+} from '@ultraviolet/icons/category'
 import { Stack, fadeIn, fadeOut } from '@ultraviolet/ui'
 import { type ComponentProps, useCallback, useEffect, useState } from 'react'
 import { Navigation, NavigationProvider, useNavigation } from '..'
@@ -70,8 +80,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
       <Navigation.Item
         label="Organization Dashboard"
         id="organization-dashboard"
-        categoryIcon="console"
-        categoryIconVariant="neutral"
+        categoryIcon={<ConsoleCategoryIcon variant="neutral" />}
         noPinButton
         active={active === 'Organization Dashboard'}
         onClickPinUnpin={onClickPinUnpin}
@@ -80,8 +89,9 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
       <Navigation.Item
         label="Project Dashboard"
         id="project-dashboard"
-        categoryIcon="useCase"
-        categoryIconVariant="neutral"
+        categoryIcon={<UseCaseCategoryIcon variant="neutral" />}
+        badgeText="setup"
+        badgeSentiment="primary"
         noPinButton
         active={active === 'Project Dashboard'}
         onClickPinUnpin={onClickPinUnpin}
@@ -97,7 +107,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
           label="Compute"
           id="compute"
           subLabel="All compute ressources"
-          categoryIcon="baremetal"
+          categoryIcon={<BaremetalCategoryIcon variant="primary" />}
         >
           <Navigation.Item
             label="Instance"
@@ -163,7 +173,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
         <Navigation.Item
           label="Storage"
           id="storage"
-          categoryIcon="managedServices"
+          categoryIcon={<ManagedServicesCategoryIcon variant="primary" />}
         >
           <Navigation.Item
             label="Block Storage"
@@ -185,7 +195,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
         <Navigation.Item
           label="Network with a very long name"
           id="network"
-          categoryIcon="network"
+          categoryIcon={<NetworkCategoryIcon variant="primary" />}
         >
           <Navigation.Item
             label="Load Balancer"
@@ -209,7 +219,11 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
             onToggle={() => setActive('VPC')}
           />
         </Navigation.Item>
-        <Navigation.Item id="database" label="Database" categoryIcon="database">
+        <Navigation.Item
+          id="database"
+          label="Database"
+          categoryIcon={<DatabaseCategoryIcon variant="primary" />}
+        >
           <Navigation.Item
             label="Managed Database"
             id="managed-database"
@@ -235,7 +249,7 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
         <Navigation.Item
           label="Monitoring"
           id="monitoring"
-          categoryIcon="observability"
+          categoryIcon={<ObservabilityCategoryIcon variant="primary" />}
         >
           <Navigation.Item
             label="Logs"
@@ -259,7 +273,11 @@ const PlaygroundContent = ({ ...props }: ComponentProps<typeof Navigation>) => {
             onToggle={() => setActive('Alerts')}
           />
         </Navigation.Item>
-        <Navigation.Item label="Security" id="security" categoryIcon="security">
+        <Navigation.Item
+          label="Security"
+          id="security"
+          categoryIcon={<SecurityCategoryIcon variant="primary" />}
+        >
           <Navigation.Item
             label="Firewall"
             id="firewall"
@@ -346,7 +364,7 @@ export const Playground: StoryFn<ComponentProps<typeof Navigation>> = props => {
         initialWidth={navigationWidth}
         initialPinned={pinnedItems}
         pinLimit={2}
-        pinnedFeature={false}
+        pinnedFeature
       >
         <PlaygroundContent {...props} />
       </NavigationProvider>
diff --git a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap
index 92c75c6c08..f4a101b580 100644
--- a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap
@@ -473,26 +473,26 @@ exports[`Navigation > click on expand / collapse button 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -502,12 +502,12 @@ exports[`Navigation > click on expand / collapse button 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -618,26 +618,26 @@ exports[`Navigation > click on expand / collapse button 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -647,12 +647,12 @@ exports[`Navigation > click on expand / collapse button 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -1230,22 +1230,6 @@ exports[`Navigation > click on expand / collapse button 1`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-62 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -1282,6 +1266,22 @@ exports[`Navigation > click on expand / collapse button 1`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-81 {
   display: inherit;
 }
@@ -1659,6 +1659,7 @@ exports[`Navigation > click on expand / collapse button 1`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -1772,6 +1773,7 @@ exports[`Navigation > click on expand / collapse button 1`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -1782,7 +1784,7 @@ exports[`Navigation > click on expand / collapse button 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-57 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -1833,6 +1835,7 @@ exports[`Navigation > click on expand / collapse button 1`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -1843,7 +1846,7 @@ exports[`Navigation > click on expand / collapse button 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-72 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -2597,19 +2600,19 @@ exports[`Navigation > click on expand / collapse button 2`] = `
   color: #151a2d;
 }
 
-.emotion-37 .fill {
+.emotion-47 .fill {
   fill: #521094;
 }
 
-.emotion-37 .fillStrong {
+.emotion-47 .fillStrong {
   fill: #a060f6;
 }
 
-.emotion-37 .fill {
+.emotion-47 .fill {
   fill: #521094;
 }
 
-.emotion-37 .fillStrong {
+.emotion-47 .fillStrong {
   fill: #a060f6;
 }
 
@@ -2840,7 +2843,7 @@ exports[`Navigation > click on expand / collapse button 2`] = `
                         class="emotion-18 emotion-19"
                       >
                         <svg
-                          class="emotion-37 emotion-21"
+                          class="emotion-20 emotion-21"
                           height="20"
                           viewBox="0 0 20 20"
                           width="20"
@@ -2890,7 +2893,7 @@ exports[`Navigation > click on expand / collapse button 2`] = `
                         class="emotion-18 emotion-19"
                       >
                         <svg
-                          class="emotion-20 emotion-21"
+                          class="emotion-47 emotion-21"
                           height="20"
                           viewBox="0 0 20 20"
                           width="20"
@@ -3437,26 +3440,26 @@ exports[`Navigation > pin and unpin an item 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -3466,12 +3469,12 @@ exports[`Navigation > pin and unpin an item 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -3582,26 +3585,26 @@ exports[`Navigation > pin and unpin an item 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -3611,12 +3614,12 @@ exports[`Navigation > pin and unpin an item 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -4194,22 +4197,6 @@ exports[`Navigation > pin and unpin an item 1`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-62 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -4246,6 +4233,22 @@ exports[`Navigation > pin and unpin an item 1`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-81 {
   display: inherit;
 }
@@ -4623,6 +4626,7 @@ exports[`Navigation > pin and unpin an item 1`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -4736,6 +4740,7 @@ exports[`Navigation > pin and unpin an item 1`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -4746,7 +4751,7 @@ exports[`Navigation > pin and unpin an item 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-57 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -4797,6 +4802,7 @@ exports[`Navigation > pin and unpin an item 1`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -4807,7 +4813,7 @@ exports[`Navigation > pin and unpin an item 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-72 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -5392,26 +5398,26 @@ exports[`Navigation > pin and unpin an item 2`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -5421,12 +5427,12 @@ exports[`Navigation > pin and unpin an item 2`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -5537,26 +5543,26 @@ exports[`Navigation > pin and unpin an item 2`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -5566,12 +5572,12 @@ exports[`Navigation > pin and unpin an item 2`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -6149,22 +6155,6 @@ exports[`Navigation > pin and unpin an item 2`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-62 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -6201,6 +6191,22 @@ exports[`Navigation > pin and unpin an item 2`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-81 {
   display: inherit;
 }
@@ -6578,6 +6584,7 @@ exports[`Navigation > pin and unpin an item 2`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -6691,6 +6698,7 @@ exports[`Navigation > pin and unpin an item 2`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -6701,7 +6709,7 @@ exports[`Navigation > pin and unpin an item 2`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-57 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -6752,6 +6760,7 @@ exports[`Navigation > pin and unpin an item 2`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -6762,7 +6771,7 @@ exports[`Navigation > pin and unpin an item 2`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-72 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -7387,26 +7396,26 @@ exports[`Navigation > pin and unpin an item 3`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -7416,12 +7425,12 @@ exports[`Navigation > pin and unpin an item 3`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -7532,26 +7541,26 @@ exports[`Navigation > pin and unpin an item 3`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -7561,12 +7570,12 @@ exports[`Navigation > pin and unpin an item 3`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -8045,26 +8054,26 @@ exports[`Navigation > pin and unpin an item 3`] = `
 
 .emotion-37[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-37[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-37[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-37[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-37[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-37:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-37:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -8074,12 +8083,12 @@ exports[`Navigation > pin and unpin an item 3`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-37[data-is-active="true"],
+.emotion-37[data-is-active="true"][data-is-pinnable="true"],
 .emotion-37:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-37[data-is-active="true"]:hover,
+.emotion-37[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-37:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -8394,22 +8403,6 @@ exports[`Navigation > pin and unpin an item 3`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-80 .fill {
-  fill: #521094;
-}
-
-.emotion-80 .fillStrong {
-  fill: #a060f6;
-}
-
-.emotion-80 .fill {
-  fill: #521094;
-}
-
-.emotion-80 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-85 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -8446,6 +8439,22 @@ exports[`Navigation > pin and unpin an item 3`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-95 .fill {
+  fill: #521094;
+}
+
+.emotion-95 .fillStrong {
+  fill: #a060f6;
+}
+
+.emotion-95 .fill {
+  fill: #521094;
+}
+
+.emotion-95 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-113 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -8711,6 +8720,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -8795,6 +8805,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                       data-has-sub-label="false"
                       data-is-active="false"
                       data-is-pinnable="true"
+                      data-pinned-feature="true"
                       draggable="true"
                       id="item1"
                     >
@@ -8886,6 +8897,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -8896,7 +8908,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-80 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -8947,6 +8959,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -8957,7 +8970,7 @@ exports[`Navigation > pin and unpin an item 3`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-95 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -9340,26 +9353,26 @@ exports[`Navigation > render with basic content 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -9369,12 +9382,12 @@ exports[`Navigation > render with basic content 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -9684,14 +9697,6 @@ exports[`Navigation > render with basic content 1`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-62 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -9710,6 +9715,14 @@ exports[`Navigation > render with basic content 1`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-81 {
   display: inherit;
 }
@@ -9918,6 +9931,7 @@ exports[`Navigation > render with basic content 1`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -10031,6 +10045,7 @@ exports[`Navigation > render with basic content 1`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -10041,7 +10056,7 @@ exports[`Navigation > render with basic content 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-57 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -10092,6 +10107,7 @@ exports[`Navigation > render with basic content 1`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -10102,7 +10118,7 @@ exports[`Navigation > render with basic content 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-72 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -10549,26 +10565,26 @@ exports[`Navigation > render without pinnedFeature 1`] = `
 
 .emotion-22[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .e134hokc10 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .e134hokc10 {
   opacity: 0;
 }
 
-.emotion-22[data-has-no-expand="false"]:not([disabled]):hover .e134hokc16,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):focus .e134hokc16,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):active .e134hokc16,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):hover .e134hokc11,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):focus .e134hokc11,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):active .e134hokc11 {
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .e134hokc16,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .e134hokc16,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .e134hokc16,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .e134hokc11,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .e134hokc11,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .e134hokc11 {
   opacity: 1;
 }
 
-.emotion-22[data-has-no-expand="false"]:not([disabled]):hover .e134hokc10,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):focus .e134hokc10,
-.emotion-22[data-has-no-expand="false"]:not([disabled]):active .e134hokc10 {
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .e134hokc10,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .e134hokc10,
+.emotion-22[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .e134hokc10 {
   opacity: 0;
 }
 
-.emotion-22:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-32 {
+.emotion-22:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-32 {
   color: #3f4250;
 }
 
@@ -10578,12 +10594,12 @@ exports[`Navigation > render without pinnedFeature 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-22[data-is-active="true"],
+.emotion-22[data-is-active="true"][data-is-pinnable="true"],
 .emotion-22:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-22[data-is-active="true"]:hover,
+.emotion-22[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-22:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -10673,11 +10689,11 @@ exports[`Navigation > render without pinnedFeature 1`] = `
 }
 
 .emotion-28 .fill {
-  fill: #521094;
+  fill: #151a2d;
 }
 
 .emotion-28 .fillStrong {
-  fill: #a060f6;
+  fill: #b5b7bd;
 }
 
 .emotion-30 {
@@ -10745,11 +10761,11 @@ exports[`Navigation > render without pinnedFeature 1`] = `
 }
 
 .emotion-43 .fill {
-  fill: #151a2d;
+  fill: #521094;
 }
 
 .emotion-43 .fillStrong {
-  fill: #b5b7bd;
+  fill: #a060f6;
 }
 
 .emotion-48 {
@@ -10951,6 +10967,7 @@ exports[`Navigation > render without pinnedFeature 1`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="false"
                   draggable="false"
                   id="item1"
                 >
@@ -11012,6 +11029,7 @@ exports[`Navigation > render without pinnedFeature 1`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="false"
+                  data-pinned-feature="false"
                   draggable="false"
                   id="item1"
                 >
@@ -11580,26 +11598,26 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -11609,12 +11627,12 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -11725,26 +11743,26 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
 
 .emotion-12[data-has-active-children="true"][data-has-no-expand="false"]:not(
       [disabled][data-is-active="true"]
-    )[data-is-pinnable="true"] .emotion-280 {
+    )[data-is-pinnable="true"][data-pinned-feature="true"] .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-286,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-281,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-281 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-286,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-281,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-281 {
   opacity: 1;
 }
 
-.emotion-12[data-has-no-expand="false"]:not([disabled]):hover .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):focus .emotion-280,
-.emotion-12[data-has-no-expand="false"]:not([disabled]):active .emotion-280 {
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):hover .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):focus .emotion-280,
+.emotion-12[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]):active .emotion-280 {
   opacity: 0;
 }
 
-.emotion-12:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) .emotion-22 {
+.emotion-12:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) .emotion-22 {
   color: #3f4250;
 }
 
@@ -11754,12 +11772,12 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
   background-color: #e9eaeb;
 }
 
-.emotion-12[data-is-active="true"],
+.emotion-12[data-is-active="true"][data-is-pinnable="true"],
 .emotion-12:hover[data-has-active="true"] {
   background-color: #f1eefc;
 }
 
-.emotion-12[data-is-active="true"]:hover,
+.emotion-12[data-is-active="true"][data-is-pinnable="true"]:hover,
 .emotion-12:hover[data-has-active="true"]:hover {
   background-color: #e5dbfd;
 }
@@ -12337,22 +12355,6 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
   height: calc(1.25rem + 0.5rem);
 }
 
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
-.emotion-57 .fill {
-  fill: #521094;
-}
-
-.emotion-57 .fillStrong {
-  fill: #a060f6;
-}
-
 .emotion-62 {
   color: #641cb3;
   font-size: 0.875rem;
@@ -12389,6 +12391,22 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
   -webkit-line-clamp: 2;
 }
 
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
+.emotion-72 .fill {
+  fill: #521094;
+}
+
+.emotion-72 .fillStrong {
+  fill: #a060f6;
+}
+
 .emotion-81 {
   display: inherit;
 }
@@ -12766,6 +12784,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
                 data-has-no-expand="false"
                 data-has-sub-label="false"
                 data-is-pinnable="false"
+                data-pinned-feature="true"
                 data-testid="pinned-group"
                 draggable="false"
                 id="pinned-group"
@@ -12879,6 +12898,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
                   data-has-sub-label="false"
                   data-is-active="true"
                   data-is-pinnable="false"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -12889,7 +12909,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-57 emotion-19"
+                        class="emotion-18 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
@@ -12940,6 +12960,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
                   data-has-no-expand="false"
                   data-has-sub-label="false"
                   data-is-pinnable="true"
+                  data-pinned-feature="true"
                   draggable="false"
                   id="item1"
                 >
@@ -12950,7 +12971,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = `
                       class="emotion-16 emotion-17"
                     >
                       <svg
-                        class="emotion-18 emotion-19"
+                        class="emotion-72 emotion-19"
                         height="20"
                         viewBox="0 0 20 20"
                         width="20"
diff --git a/packages/plus/src/components/Navigation/__tests__/index.test.tsx b/packages/plus/src/components/Navigation/__tests__/index.test.tsx
index 05b0ae94af..91b9929b06 100644
--- a/packages/plus/src/components/Navigation/__tests__/index.test.tsx
+++ b/packages/plus/src/components/Navigation/__tests__/index.test.tsx
@@ -1,4 +1,5 @@
 import { screen, waitFor } from '@testing-library/react'
+import { UseCaseCategoryIcon } from '@ultraviolet/icons/category'
 import { renderWithTheme, shouldMatchEmotionSnapshot } from '@utils/test'
 import type { ComponentProps } from 'react'
 import { describe, expect, test } from 'vitest'
@@ -18,16 +19,14 @@ const BasicNavigation = ({ pinnedFeature = true }: BasicNavigationProps) => (
         <Navigation.Item
           label="item1"
           id="item1"
-          categoryIcon="useCase"
-          categoryIconVariant="neutral"
+          categoryIcon={<UseCaseCategoryIcon variant="neutral" />}
           noPinButton
           active
         />
         <Navigation.Item
           label="item1"
           id="item1"
-          categoryIcon="useCase"
-          categoryIconVariant="neutral"
+          categoryIcon={<UseCaseCategoryIcon />}
         />
       </Navigation.Group>
       {/* @ts-expect-error we try to test whe no children is provided */}
diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
index 5a116d6f83..681378a3c5 100644
--- a/packages/plus/src/components/Navigation/components/Item.tsx
+++ b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -10,7 +10,6 @@ import {
   PinOutlineIcon,
   UnpinIcon,
 } from '@ultraviolet/icons'
-import * as CategoryIcon from '@ultraviolet/icons/category'
 import { ConsoleCategoryIcon } from '@ultraviolet/icons/category'
 import {
   Badge,
@@ -39,7 +38,6 @@ import {
   useMemo,
   useReducer,
 } from 'react'
-import type { PascalToCamelCaseWithoutSuffix } from '../../../types'
 import { useNavigation } from '../NavigationProvider'
 import { ANIMATION_DURATION, shrinkHeight } from '../constants'
 import type { PinUnPinType } from '../types'
@@ -104,9 +102,10 @@ const GrabIcon = styled(DragIcon)`
 const StyledBadge = styled(Badge)``
 
 const StyledMenuItem = styled(MenuV2.Item, {
-  shouldForwardProp: prop => !['isPinnable'].includes(prop),
+  shouldForwardProp: prop => !['isPinnable', 'pinnedFeature'].includes(prop),
 })<{
   isPinnable?: boolean
+  pinnedFeature?: boolean
 }>`
   text-align: left;
   &:hover,
@@ -117,7 +116,7 @@ const StyledMenuItem = styled(MenuV2.Item, {
     }
 
     ${StyledBadge} {
-      opacity: ${({ isPinnable }) => (isPinnable ? 0 : 1)};
+      opacity: ${({ isPinnable, pinnedFeature }) => (isPinnable && pinnedFeature ? 0 : 1)};
     }
   }
 `
@@ -181,14 +180,14 @@ const StyledContainer = styled(Stack)`
       opacity: 1;
     }
 
-    &[data-is-pinnable="true"] {
+    &[data-is-pinnable="true"][data-pinned-feature="true"] {
       ${StyledBadge} {
         opacity: 0;
       }
     }
   }
 
-  &[data-has-no-expand="false"]:not([disabled]) {
+  &[data-has-no-expand="false"][data-pinned-feature="true"][data-is-pinnable="true"]:not([disabled]) {
     &:hover,
     &:focus,
     &:active {
@@ -202,7 +201,7 @@ const StyledContainer = styled(Stack)`
     }
   }
 
-  &:hover[data-has-children="false"][data-is-active="false"]:not([disabled]) {
+  &:hover[data-has-children="false"][data-is-active="false"][data-is-pinnable="true"]:not([disabled]) {
     ${WrapText} {
       color: ${({ theme }) => theme.colors.neutral.textWeakHover};
     }
@@ -214,7 +213,7 @@ const StyledContainer = styled(Stack)`
     background-color: ${({ theme }) => theme.colors.neutral.backgroundHover};
   }
 
-  &[data-is-active="true"],
+  &[data-is-active="true"][data-is-pinnable="true"],
   &:hover[data-has-active="true"] {
     background-color: ${({ theme }) => theme.colors.primary.background};
 
@@ -271,13 +270,7 @@ type ItemProps = {
   /**
    * Sets a category icon on the left of the item
    */
-  categoryIcon?: PascalToCamelCaseWithoutSuffix<
-    keyof typeof CategoryIcon,
-    'CategoryIcon'
-  >
-  categoryIconVariant?: ComponentProps<
-    (typeof CategoryIcon)['BaremetalCategoryIcon']
-  >['variant']
+  categoryIcon?: ReactNode
   /**
    * The label of the item that will be shown.
    * It is also used as the key for pinning.
@@ -355,7 +348,6 @@ export const Item = memo(
   ({
     children,
     categoryIcon,
-    categoryIconVariant,
     label,
     subLabel,
     badgeText,
@@ -472,14 +464,6 @@ export const Item = memo(
       [containerTag],
     )
 
-    const CategoryIconUsed = categoryIcon
-      ? CategoryIcon[
-          `${
-            categoryIcon.charAt(0).toUpperCase() + categoryIcon.slice(1)
-          }CategoryIcon` as keyof typeof CategoryIcon
-        ]
-      : null
-
     const ArrowIcon = useMemo(
       () => (internalExpanded ? ArrowDownIcon : ArrowRightIcon),
       [internalExpanded],
@@ -559,6 +543,7 @@ export const Item = memo(
             data-has-children={!!children}
             data-has-active-children={hasActiveChildren}
             data-has-no-expand={noExpand}
+            data-pinned-feature={pinnedFeature}
             disabled={disabled}
             draggable={type === 'pinned' && expanded}
             onDragStart={onDragStart}
@@ -572,15 +557,12 @@ export const Item = memo(
               alignItems={categoryIcon ? 'flex-start' : 'center'}
               justifyContent="center"
             >
-              {CategoryIconUsed ? (
+              {categoryIcon ? (
                 <ContainerCategoryIcon
                   alignItems="center"
                   justifyContent="center"
                 >
-                  <CategoryIconUsed
-                    variant={active ? 'primary' : categoryIconVariant}
-                    disabled={disabled}
-                  />
+                  {categoryIcon}
                 </ContainerCategoryIcon>
               ) : null}
               {type === 'pinned' && expanded ? (
@@ -744,16 +726,14 @@ export const Item = memo(
                   icon={!categoryIcon ? 'dots-horizontal' : undefined}
                   aria-label={label}
                 >
-                  {CategoryIconUsed ? (
+                  {categoryIcon ? (
                     <Stack
                       direction="row"
                       gap={1}
                       alignItems="center"
                       justifyContent="center"
                     >
-                      <CategoryIconUsed
-                        variant={active ? 'primary' : categoryIconVariant}
-                      />
+                      {categoryIcon}
                     </Stack>
                   ) : null}
                 </Button>
@@ -776,13 +756,9 @@ export const Item = memo(
                   alignItems="center"
                   justifyContent="center"
                 >
-                  {CategoryIconUsed ? (
-                    <CategoryIconUsed
-                      variant={active ? 'primary' : categoryIconVariant}
-                    />
-                  ) : (
+                  {categoryIcon || (
                     <ConsoleCategoryIcon
-                      variant={active ? 'primary' : categoryIconVariant}
+                      variant={active ? 'primary' : 'neutral'}
                     />
                   )}
                 </Stack>
@@ -797,6 +773,7 @@ export const Item = memo(
     if (hasParents) {
       return (
         <StyledMenuItem
+          pinnedFeature={pinnedFeature}
           href={href}
           target={target}
           rel={rel}
diff --git a/packages/plus/src/components/Navigation/components/PinnedItems.tsx b/packages/plus/src/components/Navigation/components/PinnedItems.tsx
index ae6441cff5..6e7e0ff098 100644
--- a/packages/plus/src/components/Navigation/components/PinnedItems.tsx
+++ b/packages/plus/src/components/Navigation/components/PinnedItems.tsx
@@ -2,6 +2,7 @@
 
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
+import { PinCategoryIcon } from '@ultraviolet/icons/category'
 import { Text } from '@ultraviolet/ui'
 import type { DragEvent } from 'react'
 import { useCallback } from 'react'
@@ -131,8 +132,7 @@ export const PinnedItems = ({
       <div style={{ width: animation ? '100%' : undefined }}>
         <Item
           label={locales['navigation.pinned.item.group.label']}
-          categoryIcon="pin"
-          categoryIconVariant="neutral"
+          categoryIcon=<PinCategoryIcon variant="neutral" />
           type="pinnedGroup"
           id="pinned-group"
           data-testid="pinned-group"


Reviews:
user: login: philibea
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T08:42:45Z
user: login: philibea
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-06T08:43:15Z
user: login: philibea
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-06T09:02:11Z
user: login: lisalupi
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-05-06T10:51:07Z

Review comments:
diff_hunk: @@ -269,12 +268,13 @@ type ItemType = 'default' | 'pinned' | 'pinnedGroup'
 type ItemProps = {
   children?: ReactNode
   /**
+   * @deprecated `string` for this props is deprecated, please use the icon directly from `@ultraviolet/icons`.\
    * Sets a category icon on the left of the item
    */
-  categoryIcon?: PascalToCamelCaseWithoutSuffix<
-    keyof typeof CategoryIcon,
-    'CategoryIcon'
-  >
+  categoryIcon?: ReactNode
+  /**
+   * @deprecated use the icon directly from `@ultraviolet/icons` with `categoryIcon` prop.
+   */
   categoryIconVariant?: ComponentProps<
path: packages/plus/src/components/Navigation/components/Item.tsx
user: login: philibea
body: to delete 
created_at: 2025-05-06T08:42:45Z
author_association: COLLABORATOR
diff_hunk: @@ -269,12 +268,13 @@ type ItemType = 'default' | 'pinned' | 'pinnedGroup'
 type ItemProps = {
   children?: ReactNode
   /**
+   * @deprecated `string` for this props is deprecated, please use the icon directly from `@ultraviolet/icons`.\
path: packages/plus/src/components/Navigation/components/Item.tsx
user: login: philibea
body: is not deprecated, it's already break
created_at: 2025-05-06T08:43:15Z
author_association: COLLABORATOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-06T08:41:40Z
body: ###  🦋  Changeset detected

Latest commit: efa40f358fc8d528f51a283f6492509cea39f039

**The changes in this PR will be included in the next version bump.**

<details><summary>This PR includes changesets to release 1 package</summary>

  | Name              | Type  |
| ----------------- | ----- |
| @ultraviolet/plus | Minor |

</details>

Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/scaleway/ultraviolet/new/fix/navigation-category-icon?filename=.changeset/stupid-vans-lay.md&value=---%0A%22%40ultraviolet%2Fplus%22%3A%20patch%0A---%0A%0Arefactor(Navigation)%3A%20deprecated%20and%20change%20some%20types%20category%20icon%20items%0A)


author_association: NONE
user: login: codecov[bot]
created_at: 2025-05-07T09:32:57Z
body: ## [Codecov](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 0.00%. Comparing base [(`5730187`)](https://app.codecov.io/gh/scaleway/ultraviolet/commit/5730187ae1675f1661a49767fcae97c1ee7d819c?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway) to head [(`efa40f3`)](https://app.codecov.io/gh/scaleway/ultraviolet/commit/efa40f358fc8d528f51a283f6492509cea39f039?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway).
> Report is 7 commits behind head on main.

<details><summary>Additional details and impacted files</summary>


[![Impacted file tree graph](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100/graphs/tree.svg?width=650&height=150&src=pr&token=X8RGT5FTRT&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway)](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway)

```diff
@@            Coverage Diff             @@
##             main   #5100       +/-   ##
==========================================
- Coverage   88.71%       0   -88.72%     
==========================================
  Files         236       0      -236     
  Lines        8348       0     -8348     
  Branches     3741       0     -3741     
==========================================
- Hits         7406       0     -7406     
+ Misses        942       0      -942     
```

[see 236 files with indirect coverage changes](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway)

------

[Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway). Last update [b062798...efa40f3](https://app.codecov.io/gh/scaleway/ultraviolet/pull/5100?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=scaleway).

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE