diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap
index 673cd03d422..7e3155dda6f 100644
--- a/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap
+++ b/webapp/src/components/sidebar/__snapshots__/sidebarBoardItem.test.tsx.snap
@@ -8,25 +8,9 @@ exports[`components/sidebarBoardItem renders default icon if no custom icon set
     <div
       class="octo-sidebar-icon"
     >
-      <svg
-        class="BoardIcon Icon"
-        fill="currentColor"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g
-          opacity="0.8"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M4 4H20V20H4V4ZM2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V20C22 21.1046 21.1046 22 20 22H4C2.89543 22 2 21.1046 2 20V4ZM8 6H6V12H8V6ZM11 6H13V16H11V6ZM18 6H16V9H18V6Z"
-            fill="currentColor"
-            fill-rule="evenodd"
-          />
-        </g>
-      </svg>
+      <i
+        class="CompassIcon icon-product-boards undefined"
+      />
     </div>
     <div
       class="octo-sidebar-title"
diff --git a/webapp/src/components/sidebar/sidebarBoardItem.scss b/webapp/src/components/sidebar/sidebarBoardItem.scss
index e8891c72b9f..aa5dcb22a58 100644
--- a/webapp/src/components/sidebar/sidebarBoardItem.scss
+++ b/webapp/src/components/sidebar/sidebarBoardItem.scss
@@ -153,9 +153,21 @@
         }
     }
 
-    .octo-sidebar-icon > .Icon {
-        width: 19px;
-        vertical-align: top;
+    .octo-sidebar-icon {
+        .CompassIcon {
+            font-size: 18px;
+            margin: 0 -2px 0 -1px;
+
+            &::before {
+                margin: 0;
+            }
+        }
+
+        > .Icon {
+            width: 16px;
+            vertical-align: top;
+            margin-left: -2px;
+        }
     }
 
     .Menu.noselect.left {
diff --git a/webapp/src/components/sidebar/sidebarBoardItem.tsx b/webapp/src/components/sidebar/sidebarBoardItem.tsx
index 14aed53a682..43ce47cbb65 100644
--- a/webapp/src/components/sidebar/sidebarBoardItem.tsx
+++ b/webapp/src/components/sidebar/sidebarBoardItem.tsx
@@ -21,6 +21,7 @@ import {useAppSelector} from '../../store/hooks'
 import {getCurrentBoardViews, getCurrentViewId} from '../../store/views'
 import Folder from '../../widgets/icons/folder'
 import Check from '../../widgets/icons/checkIcon'
+import CompassIcon from '../../widgets/icons/compassIcon'
 import BoardIcon from '../../widgets/icons/board'
 import TableIcon from '../../widgets/icons/table'
 import GalleryIcon from '../../widgets/icons/gallery'
@@ -117,7 +118,7 @@ const SidebarBoardItem = (props: Props) => {
                 ref={boardItemRef}
             >
                 <div className='octo-sidebar-icon'>
-                    {board.icon || <BoardIcon/>}
+                    {board.icon || <CompassIcon icon='product-boards'/>}
                 </div>
                 <div
                     className='octo-sidebar-title'