diff --git a/package.json b/package.json
index e6c51ca30..780f23250 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "afterSign": "scripts/notarize.js"
   },
   "dependencies": {
-    "@primer/octicons-react": "^11.2.0",
+    "@primer/octicons-react": "^19.8.0",
     "axios": "=0.27.2",
     "date-fns": "^2.16.1",
     "electron-updater": "^4.3.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 09d72d9a0..b6d470411 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,8 +6,8 @@ settings:
 
 dependencies:
   '@primer/octicons-react':
-    specifier: ^11.2.0
-    version: 11.2.0(react@16.14.0)
+    specifier: ^19.8.0
+    version: 19.8.0(react@16.14.0)
   axios:
     specifier: '=0.27.2'
     version: 0.27.2
@@ -816,11 +816,11 @@ packages:
       fastq: 1.15.0
     dev: true
 
-  /@primer/octicons-react@11.2.0(react@16.14.0):
-    resolution: {integrity: sha512-pi3DT5fUtATw2atMRQ7xCUUbdauA/hYTKfM2ijf3rtipeyQ7Ou3ij/JLhnc9Ke110ljHJh69j/PiINbbKAYegQ==}
+  /@primer/octicons-react@19.8.0(react@16.14.0):
+    resolution: {integrity: sha512-2Z+D7xTloFTLQVRUEbg0pQpe6aTL9RR+8RqBhjkrF+BFuVdM1ENOyjywaGEO7DIkPU5Zxlv0gxSlD85LQxL+sw==}
     engines: {node: '>=8'}
     peerDependencies:
-      react: '>=15'
+      react: '>=16.3'
     dependencies:
       react: 16.14.0
     dev: false
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 5081e077b..0da632a4b 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import * as Octicons from '@primer/octicons-react';
+import { BellIcon } from '@primer/octicons-react';
 import { ipcRenderer, shell } from 'electron';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
@@ -55,7 +55,7 @@ export const Sidebar: React.FC = () => {
           onClick={onOpenGitHubNotifications}
           aria-label={`${notificationsCount} Unread Notifications`}
         >
-          <Octicons.BellIcon size={12} />
+          <BellIcon size={12} />
           {notificationsCount > 0 && notificationsCount}
         </div>
       </div>
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index 18c3181df..1a8fcb8ec 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -8,25 +8,26 @@ Array [
     github.com
     <svg
       aria-hidden="true"
-      className="octicon"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<path fill-rule=\\"evenodd\\" d=\\"M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z\\"></path>",
-        }
-      }
+      className="octicon octicon-chevron-down"
       fill="currentColor"
+      focusable="false"
       height={20}
       role="img"
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
       viewBox="0 0 16 16"
       width={20}
-    />
+    >
+      <path
+        d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"
+      />
+    </svg>
   </div>,
   <div>
     Repository
@@ -41,24 +42,25 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
   github.com
   <svg
     aria-hidden="true"
-    className="octicon"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "<path fill-rule=\\"evenodd\\" d=\\"M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z\\"></path>",
-      }
-    }
+    className="octicon octicon-chevron-left"
     fill="currentColor"
+    focusable="false"
     height={20}
     role="img"
     style={
       Object {
         "display": "inline-block",
+        "overflow": "visible",
         "userSelect": "none",
         "verticalAlign": "text-bottom",
       }
     }
     viewBox="0 0 16 16"
     width={20}
-  />
+  >
+    <path
+      d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
+    />
+  </svg>
 </div>
 `;
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 15fd3fb4d..ac0a03b85 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -10,25 +10,29 @@ exports[`components/Notification.js should render itself & its children 1`] = `
     <svg
       aria-hidden="false"
       aria-label="Issue"
-      className="octicon"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z\\"></path>",
-        }
-      }
+      className="octicon octicon-issue-opened"
       fill="currentColor"
+      focusable="false"
       height={18}
       role="img"
       style={
         Object {
           "display": "inline-block",
+          "overflow": "visible",
           "userSelect": "none",
           "verticalAlign": "text-bottom",
         }
       }
       viewBox="0 0 16 16"
       width={18}
-    />
+    >
+      <path
+        d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+      />
+      <path
+        d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+      />
+    </svg>
   </div>
   <div
     className="flex-1 overflow-hidden"
@@ -60,24 +64,25 @@ exports[`components/Notification.js should render itself & its children 1`] = `
           aria-hidden="false"
           aria-label="Unsubscribe"
           className="hover:text-red-500"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 2.75a.75.75 0 00-1.238-.57L3.472 5H1.75A1.75 1.75 0 000 6.75v2.5C0 10.216.784 11 1.75 11h1.723l3.289 2.82A.75.75 0 008 13.25V2.75zM4.238 6.32L6.5 4.38v7.24L4.238 9.68a.75.75 0 00-.488-.18h-2a.25.25 0 01-.25-.25v-2.5a.25.25 0 01.25-.25h2a.75.75 0 00.488-.18zm7.042-1.1a.75.75 0 10-1.06 1.06L11.94 8l-1.72 1.72a.75.75 0 101.06 1.06L13 9.06l1.72 1.72a.75.75 0 101.06-1.06L14.06 8l1.72-1.72a.75.75 0 00-1.06-1.06L13 6.94l-1.72-1.72z\\"></path>",
-            }
-          }
           fill="currentColor"
+          focusable="false"
           height={13}
           role="img"
           style={
             Object {
               "display": "inline-block",
+              "overflow": "visible",
               "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
           viewBox="0 0 16 16"
           width={13}
-        />
+        >
+          <path
+            d="M8 2.75v10.5a.751.751 0 0 1-1.238.57L3.473 11H1.75A1.75 1.75 0 0 1 0 9.25v-2.5C0 5.784.784 5 1.75 5h1.722l3.29-2.82A.75.75 0 0 1 8 2.75Zm3.28 2.47L13 6.94l1.72-1.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L14.06 8l1.72 1.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L13 9.06l-1.72 1.72a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L11.94 8l-1.72-1.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-7.042 1.1a.752.752 0 0 1-.488.18h-2a.25.25 0 0 0-.25.25v2.5c0 .138.112.25.25.25h2c.179 0 .352.064.488.18L6.5 11.62V4.38Z"
+          />
+        </svg>
       </button>
     </div>
   </div>
@@ -93,24 +98,25 @@ exports[`components/Notification.js should render itself & its children 1`] = `
         aria-hidden="false"
         aria-label="Mark as Read"
         className="hover:text-green-500"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
-          }
-        }
         fill="currentColor"
+        focusable="false"
         height={20}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={20}
-      />
+      >
+        <path
+          d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+        />
+      </svg>
     </button>
   </div>
 </div>
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index d6deac116..54c25a118 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -29,24 +29,25 @@ Array [
           aria-hidden="false"
           aria-label="Mark Repository as Read"
           className="hover:text-green-500"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",
-            }
-          }
           fill="currentColor"
+          focusable="false"
           height={20}
           role="img"
           style={
             Object {
               "display": "inline-block",
+              "overflow": "visible",
               "userSelect": "none",
               "verticalAlign": "text-bottom",
             }
           }
           viewBox="0 0 16 16"
           width={20}
-        />
+        >
+          <path
+            d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"
+          />
+        </svg>
       </button>
     </div>
   </div>,
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 5ff88d128..814aa2c5f 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -59,25 +59,26 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
     >
       <svg
         aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path d=\\"M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z\\"></path>",
-          }
-        }
+        className="octicon octicon-bell"
         fill="currentColor"
+        focusable="false"
         height={12}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={12}
-      />
+      >
+        <path
+          d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+        />
+      </svg>
       4
     </div>
   </div>
@@ -178,25 +179,26 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
     >
       <svg
         aria-hidden="true"
-        className="octicon"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path d=\\"M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z\\"></path>",
-          }
-        }
+        className="octicon octicon-bell"
         fill="currentColor"
+        focusable="false"
         height={12}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={12}
-      />
+      >
+        <path
+          d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"
+        />
+      </svg>
       4
     </div>
   </div>
diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
index a00a315bb..9edc43f32 100644
--- a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
@@ -15,24 +15,25 @@ exports[`routes/LoginEnterprise.js renders correctly 1`] = `
       <svg
         aria-hidden="true"
         className="hover:text-gray-400"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\\"></path>",
-          }
-        }
         fill="currentColor"
+        focusable="false"
         height={20}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={20}
-      />
+      >
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
     </button>
     <h3
       className="text-lg font-semibold"
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
index f591e733d..ede48afea 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
@@ -15,24 +15,25 @@ exports[`routes/LoginWithToken.js renders correctly 1`] = `
       <svg
         aria-hidden="true"
         className="hover:text-gray-400"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\\"></path>",
-          }
-        }
         fill="currentColor"
+        focusable="false"
         height={20}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={20}
-      />
+      >
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
     </button>
     <h3
       className="text-lg font-semibold"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index efa87ffd9..8854ee617 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -15,24 +15,25 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
       <svg
         aria-hidden="true"
         className="hover:text-gray-400"
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "<path fill-rule=\\"evenodd\\" d=\\"M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z\\"></path>",
-          }
-        }
         fill="currentColor"
+        focusable="false"
         height={20}
         role="img"
         style={
           Object {
             "display": "inline-block",
+            "overflow": "visible",
             "userSelect": "none",
             "verticalAlign": "text-bottom",
           }
         }
         viewBox="0 0 16 16"
         width={20}
-      />
+      >
+        <path
+          d="M7.78 12.53a.75.75 0 0 1-1.06 0L2.47 8.28a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L4.81 7h7.44a.75.75 0 0 1 0 1.5H4.81l2.97 2.97a.75.75 0 0 1 0 1.06Z"
+        />
+      </svg>
     </button>
     <h3
       className="text-lg font-semibold"
diff --git a/src/utils/github-api.test.ts b/src/utils/github-api.test.ts
index a8e50d073..89ddbe395 100644
--- a/src/utils/github-api.test.ts
+++ b/src/utils/github-api.test.ts
@@ -19,20 +19,22 @@ describe('./utils/github-api.ts', () => {
   });
 
   it('should get the notification type icon', () => {
-    expect(getNotificationTypeIcon('CheckSuite').name).toBe('SyncIcon');
-    expect(getNotificationTypeIcon('Commit').name).toBe('GitCommitIcon');
-    expect(getNotificationTypeIcon('Discussion').name).toBe(
+    expect(getNotificationTypeIcon('CheckSuite').displayName).toBe('SyncIcon');
+    expect(getNotificationTypeIcon('Commit').displayName).toBe('GitCommitIcon');
+    expect(getNotificationTypeIcon('Discussion').displayName).toBe(
       'CommentDiscussionIcon'
     );
-    expect(getNotificationTypeIcon('Issue').name).toBe('IssueOpenedIcon');
-    expect(getNotificationTypeIcon('PullRequest').name).toBe(
-      'GitPullRequestIcon'
+    expect(getNotificationTypeIcon('Issue').displayName).toBe(
+      'IssueOpenedIcon'
     );
-    expect(getNotificationTypeIcon('Release').name).toBe('TagIcon');
-    expect(getNotificationTypeIcon('RepositoryVulnerabilityAlert').name).toBe(
-      'AlertIcon'
+    expect(getNotificationTypeIcon('PullRequest').displayName).toBe(
+      'GitPullRequestIcon'
     );
-    expect(getNotificationTypeIcon('Unknown' as SubjectType).name).toBe(
+    expect(getNotificationTypeIcon('Release').displayName).toBe('TagIcon');
+    expect(
+      getNotificationTypeIcon('RepositoryVulnerabilityAlert').displayName
+    ).toBe('AlertIcon');
+    expect(getNotificationTypeIcon('Unknown' as SubjectType).displayName).toBe(
       'QuestionIcon'
     );
   });
diff --git a/src/utils/github-api.ts b/src/utils/github-api.ts
index 0cbe2a545..dcb1312a8 100644
--- a/src/utils/github-api.ts
+++ b/src/utils/github-api.ts
@@ -1,5 +1,16 @@
+import {
+  AlertIcon,
+  CommentDiscussionIcon,
+  GitCommitIcon,
+  GitPullRequestIcon,
+  IssueOpenedIcon,
+  MailIcon,
+  OcticonProps,
+  QuestionIcon,
+  SyncIcon,
+  TagIcon,
+} from '@primer/octicons-react';
 import { Reason, StateType, SubjectType } from '../typesGithub';
-import * as Octicons from '@primer/octicons-react';
 
 // prettier-ignore
 const DESCRIPTIONS = {
@@ -55,26 +66,26 @@ export function formatReason(reason: Reason): {
 
 export function getNotificationTypeIcon(
   type: SubjectType
-): React.FC<Octicons.OcticonProps> {
+): React.FC<OcticonProps> {
   switch (type) {
     case 'CheckSuite':
-      return Octicons.SyncIcon;
+      return SyncIcon;
     case 'Commit':
-      return Octicons.GitCommitIcon;
+      return GitCommitIcon;
     case 'Discussion':
-      return Octicons.CommentDiscussionIcon;
+      return CommentDiscussionIcon;
     case 'Issue':
-      return Octicons.IssueOpenedIcon;
+      return IssueOpenedIcon;
     case 'PullRequest':
-      return Octicons.GitPullRequestIcon;
+      return GitPullRequestIcon;
     case 'Release':
-      return Octicons.TagIcon;
+      return TagIcon;
     case 'RepositoryInvitation':
-      return Octicons.MailIcon;
+      return MailIcon;
     case 'RepositoryVulnerabilityAlert':
-      return Octicons.AlertIcon;
+      return AlertIcon;
     default:
-      return Octicons.QuestionIcon;
+      return QuestionIcon;
   }
 }