From 91bb536de5b18ec3c0e2aa3b9ab29c214ff7398e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 15 Dec 2024 14:59:52 +0000
Subject: [PATCH 1/2] chore(deps): update dependency @primer/octicons-react to
 v19.14.0

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d19a2f6c1..dbe8bdde6 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,7 @@
     "@biomejs/biome": "1.9.4",
     "@discordapp/twemoji": "15.1.0",
     "@electron/notarize": "2.5.0",
-    "@primer/octicons-react": "19.13.0",
+    "@primer/octicons-react": "19.14.0",
     "@testing-library/react": "16.1.0",
     "@types/jest": "29.5.14",
     "@types/node": "22.10.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d54ce16f7..f1ef9d279 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,8 +43,8 @@ importers:
         specifier: 2.5.0
         version: 2.5.0
       '@primer/octicons-react':
-        specifier: 19.13.0
-        version: 19.13.0(react@19.0.0)
+        specifier: 19.14.0
+        version: 19.14.0(react@19.0.0)
       '@testing-library/react':
         specifier: 16.1.0
         version: 16.1.0(@testing-library/dom@10.0.0)(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -614,8 +614,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@primer/octicons-react@19.13.0':
-    resolution: {integrity: sha512-EhE/d7SenURyL24iz8+2ZgZtMbT2vYvDzl/e2lAznxcYa2uhP8CWbKCKy2dqW/FPf4ZREGcvN+fecsjqIi8KVQ==}
+  '@primer/octicons-react@19.14.0':
+    resolution: {integrity: sha512-EKeavGV7s2HYac3ybb+6vfyqHGMUeG+OlZAus5ORfEjzXlorDAIjZ59fszVJj9DI6ArfFK/Cvg8V4JRfeUHjcw==}
     engines: {node: '>=8'}
     peerDependencies:
       react: '>=16.3'
@@ -4668,7 +4668,7 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@primer/octicons-react@19.13.0(react@19.0.0)':
+  '@primer/octicons-react@19.14.0(react@19.0.0)':
     dependencies:
       react: 19.0.0
 

From 3e4b460c5effafe9166818e2bc31d7d3b75f92a6 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sun, 15 Dec 2024 16:08:50 +0100
Subject: [PATCH 2/2] update snapshots

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../AccountNotifications.test.tsx.snap        | 276 ++++++++----
 .../__snapshots__/Header.test.tsx.snap        |  24 +-
 .../NotificationRow.test.tsx.snap             | 168 +++++---
 .../RepositoryNotifications.test.tsx.snap     | 114 +++--
 .../__snapshots__/Sidebar.test.tsx.snap       |  64 ++-
 .../__snapshots__/Button.test.tsx.snap        |  12 +-
 .../InteractionButton.test.tsx.snap           |   8 +-
 .../__snapshots__/PillButton.test.tsx.snap    |  12 +-
 .../__snapshots__/SidebarButton.test.tsx.snap |  24 +-
 .../__snapshots__/Tooltip.test.tsx.snap       |  24 +-
 .../AuthMethodIcon.test.tsx.snap              |  24 +-
 .../__snapshots__/AvatarIcon.test.tsx.snap    |  36 +-
 .../__snapshots__/PlatformIcon.test.tsx.snap  |  16 +-
 .../NotificationFooter.test.tsx.snap          | 128 ++++--
 .../__snapshots__/Pills.test.tsx.snap         | 408 ++++++++++++------
 .../__snapshots__/Legend.test.tsx.snap        |   6 +-
 .../__snapshots__/Accounts.test.tsx.snap      | 126 ++++--
 .../__snapshots__/Filters.test.tsx.snap       | 150 ++++---
 .../routes/__snapshots__/Login.test.tsx.snap  |  36 +-
 .../LoginWithOAuthApp.test.tsx.snap           |  60 ++-
 ...LoginWithPersonalAccessToken.test.tsx.snap |  60 ++-
 .../__snapshots__/Settings.test.tsx.snap      |  98 +++--
 22 files changed, 1302 insertions(+), 572 deletions(-)

diff --git a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
index 546aca0cf..28cfdc05f 100644
--- a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -42,10 +42,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -62,11 +64,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -86,11 +90,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -107,11 +113,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
             <svg
               aria-label="No notifications for account"
               class="octicon octicon-chevron-left"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -188,10 +196,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -208,11 +218,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
           <svg
             aria-label="My Issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -232,11 +244,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
           <svg
             aria-label="My Pull Requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -253,11 +267,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
           <svg
             aria-label="No notifications for account"
             class="octicon octicon-chevron-left"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -391,10 +407,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -411,11 +429,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -435,11 +455,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -456,11 +478,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Hide account notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -482,11 +506,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Issue"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -566,12 +592,14 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
               >
                 <svg
                   aria-label="octocat approved these changes"
-                  class="text-green-500"
+                  class="octicon octicon-check text-green-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -588,12 +616,14 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
               >
                 <svg
                   aria-label="gitify-app requested changes"
-                  class="text-red-500"
+                  class="octicon octicon-file-diff text-red-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -617,11 +647,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Mark as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -638,11 +670,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Mark as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -659,11 +693,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Unsubscribe from Thread"
               class="octicon octicon-bell-slash"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -685,11 +721,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Issue"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -741,11 +779,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <div>
               <svg
                 aria-hidden="true"
-                class="text-gray-500 dark:text-gray-300"
+                class="octicon octicon-feed-person text-gray-500 dark:text-gray-300"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="16"
               >
@@ -780,11 +820,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Mark as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -801,11 +843,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Mark as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -822,11 +866,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Unsubscribe from Thread"
               class="octicon octicon-bell-slash"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -877,10 +923,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -897,11 +945,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="My Issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -921,11 +971,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="My Pull Requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -942,11 +994,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Hide account notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -968,11 +1022,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
         <svg
           aria-label="Issue"
           class="octicon octicon-issue-opened"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -1052,12 +1108,14 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             >
               <svg
                 aria-label="octocat approved these changes"
-                class="text-green-500"
+                class="octicon octicon-check text-green-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -1074,12 +1132,14 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             >
               <svg
                 aria-label="gitify-app requested changes"
-                class="text-red-500"
+                class="octicon octicon-file-diff text-red-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -1103,11 +1163,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Mark as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -1124,11 +1186,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Mark as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1145,11 +1209,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Unsubscribe from Thread"
             class="octicon octicon-bell-slash"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1171,11 +1237,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
         <svg
           aria-label="Issue"
           class="octicon octicon-issue-opened"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -1227,11 +1295,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <div>
             <svg
               aria-hidden="true"
-              class="text-gray-500 dark:text-gray-300"
+              class="octicon octicon-feed-person text-gray-500 dark:text-gray-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -1266,11 +1336,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Mark as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -1287,11 +1359,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Mark as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1308,11 +1382,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Unsubscribe from Thread"
             class="octicon octicon-bell-slash"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1420,10 +1496,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1440,11 +1518,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1464,11 +1544,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1485,11 +1567,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
             <svg
               aria-label="Hide account notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -1543,10 +1627,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1563,11 +1649,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="My Issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1587,11 +1675,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="My Pull Requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1608,11 +1698,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
           <svg
             aria-label="Hide account notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -1723,10 +1815,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1743,11 +1837,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1767,11 +1863,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1788,11 +1886,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
             <svg
               aria-label="No notifications for account"
               class="octicon octicon-chevron-left"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -1864,10 +1964,12 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1884,11 +1986,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
           <svg
             aria-label="My Issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1908,11 +2012,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
           <svg
             aria-label="My Pull Requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1929,11 +2035,13 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
           <svg
             aria-label="No notifications for account"
             class="octicon octicon-chevron-left"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -2062,10 +2170,12 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2082,11 +2192,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2106,11 +2218,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2127,11 +2241,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="Show account notifications"
               class="octicon octicon-chevron-right"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -2181,10 +2297,12 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-hidden="true"
               class="octicon octicon-mark-github"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2201,11 +2319,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="My Issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2225,11 +2345,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="My Pull Requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -2246,11 +2368,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
             <svg
               aria-label="Hide account notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -2304,10 +2428,12 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -2324,11 +2450,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
           <svg
             aria-label="My Issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -2348,11 +2476,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
           <svg
             aria-label="My Pull Requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -2369,11 +2499,13 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
           <svg
             aria-label="Hide account notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
diff --git a/src/renderer/components/__snapshots__/Header.test.tsx.snap b/src/renderer/components/__snapshots__/Header.test.tsx.snap
index 57603f895..13f98ed84 100644
--- a/src/renderer/components/__snapshots__/Header.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Header.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/components/Header.tsx should render itself & its children 1`]
         >
           <svg
             aria-label="Go Back"
-            class="hover:text-gray-400"
+            class="octicon octicon-arrow-left hover:text-gray-400"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -38,11 +40,13 @@ exports[`renderer/components/Header.tsx should render itself & its children 1`]
           >
             <svg
               aria-hidden="true"
-              class="mr-2"
+              class="octicon octicon-mark-github mr-2"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -67,12 +71,14 @@ exports[`renderer/components/Header.tsx should render itself & its children 1`]
       >
         <svg
           aria-label="Go Back"
-          class="hover:text-gray-400"
+          class="octicon octicon-arrow-left hover:text-gray-400"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -90,11 +96,13 @@ exports[`renderer/components/Header.tsx should render itself & its children 1`]
         >
           <svg
             aria-hidden="true"
-            class="mr-2"
+            class="octicon octicon-mark-github mr-2"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
diff --git a/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
index 50174ff78..448f5cf4f 100644
--- a/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -16,11 +16,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Issue"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -100,12 +102,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="octocat approved these changes"
-                  class="text-green-500"
+                  class="octicon octicon-check text-green-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -122,12 +126,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="gitify-app requested changes"
-                  class="text-red-500"
+                  class="octicon octicon-file-diff text-red-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -151,11 +157,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -172,11 +180,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -193,11 +203,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Unsubscribe from Thread"
               class="octicon octicon-bell-slash"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -222,11 +234,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
         <svg
           aria-label="Issue"
           class="octicon octicon-issue-opened"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -306,12 +320,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="octocat approved these changes"
-                class="text-green-500"
+                class="octicon octicon-check text-green-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -328,12 +344,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="gitify-app requested changes"
-                class="text-red-500"
+                class="octicon octicon-file-diff text-red-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -357,11 +375,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -378,11 +398,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -399,11 +421,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Unsubscribe from Thread"
             class="octicon octicon-bell-slash"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -485,11 +509,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Issue"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -552,12 +578,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="octocat approved these changes"
-                  class="text-green-500"
+                  class="octicon octicon-check text-green-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -574,12 +602,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="gitify-app requested changes"
-                  class="text-red-500"
+                  class="octicon octicon-file-diff text-red-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -603,11 +633,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -624,11 +656,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -645,11 +679,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Unsubscribe from Thread"
               class="octicon octicon-bell-slash"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -674,11 +710,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
         <svg
           aria-label="Issue"
           class="octicon octicon-issue-opened"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -741,12 +779,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="octocat approved these changes"
-                class="text-green-500"
+                class="octicon octicon-check text-green-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -763,12 +803,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="gitify-app requested changes"
-                class="text-red-500"
+                class="octicon octicon-file-diff text-red-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -792,11 +834,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -813,11 +857,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -834,11 +880,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Unsubscribe from Thread"
             class="octicon octicon-bell-slash"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -920,11 +968,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Issue"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -987,12 +1037,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="octocat approved these changes"
-                  class="text-green-500"
+                  class="octicon octicon-check text-green-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -1009,12 +1061,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
               >
                 <svg
                   aria-label="gitify-app requested changes"
-                  class="text-red-500"
+                  class="octicon octicon-file-diff text-red-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
+                  overflow="visible"
                   role="img"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -1038,11 +1092,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -1059,11 +1115,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Mark as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1080,11 +1138,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             <svg
               aria-label="Unsubscribe from Thread"
               class="octicon octicon-bell-slash"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -1109,11 +1169,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
         <svg
           aria-label="Issue"
           class="octicon octicon-issue-opened"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -1176,12 +1238,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="octocat approved these changes"
-                class="text-green-500"
+                class="octicon octicon-check text-green-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -1198,12 +1262,14 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
             >
               <svg
                 aria-label="gitify-app requested changes"
-                class="text-red-500"
+                class="octicon octicon-file-diff text-red-500"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
+                overflow="visible"
                 role="img"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -1227,11 +1293,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -1248,11 +1316,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Mark as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -1269,11 +1339,13 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
           <svg
             aria-label="Unsubscribe from Thread"
             class="octicon octicon-bell-slash"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
diff --git a/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index d81842f86..310c5f7fc 100644
--- a/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -33,11 +33,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
             <svg
               aria-label="Mark repository as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -54,11 +56,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
             <svg
               aria-label="Mark repository as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -75,11 +79,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
             <svg
               aria-label="Hide repository notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -127,11 +133,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
           <svg
             aria-label="Mark repository as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -148,11 +156,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
           <svg
             aria-label="Mark repository as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -169,11 +179,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
           <svg
             aria-label="Hide repository notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -258,11 +270,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
         >
           <svg
             aria-hidden="true"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -287,11 +301,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Mark repository as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -308,11 +324,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Mark repository as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -329,11 +347,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Show repository notifications"
               class="octicon octicon-chevron-right"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -354,11 +374,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
         >
           <svg
             aria-hidden="true"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -383,11 +405,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Mark repository as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -404,11 +428,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Mark repository as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -425,11 +451,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
             <svg
               aria-label="Hide repository notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -457,11 +485,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
       >
         <svg
           aria-hidden="true"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -486,11 +516,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
           <svg
             aria-label="Mark repository as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -507,11 +539,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
           <svg
             aria-label="Mark repository as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -528,11 +562,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
           <svg
             aria-label="Hide repository notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
@@ -617,11 +653,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
         >
           <svg
             aria-hidden="true"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -646,11 +684,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
             <svg
               aria-label="Mark repository as done"
               class="octicon octicon-check"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -667,11 +707,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
             <svg
               aria-label="Mark repository as read"
               class="octicon octicon-read"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="14"
             >
@@ -688,11 +730,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
             <svg
               aria-label="Hide repository notifications"
               class="octicon octicon-chevron-down"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="14"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 12 12"
               width="14"
             >
@@ -720,11 +764,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
       >
         <svg
           aria-hidden="true"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -749,11 +795,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
           <svg
             aria-label="Mark repository as done"
             class="octicon octicon-check"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -770,11 +818,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
           <svg
             aria-label="Mark repository as read"
             class="octicon octicon-read"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="14"
           >
@@ -791,11 +841,13 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
           <svg
             aria-label="Hide repository notifications"
             class="octicon octicon-chevron-down"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="14"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 12 12"
             width="14"
           >
diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
index 15fa26359..35a1f78ee 100644
--- a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
@@ -69,11 +69,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="4 unread notifications"
               class="octicon octicon-bell"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -90,11 +92,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="My issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -114,11 +118,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="My pull requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -139,11 +145,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="Quit Gitify"
               class="octicon octicon-x-circle"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -221,11 +229,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="4 unread notifications"
             class="octicon octicon-bell"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -242,11 +252,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="My issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -266,11 +278,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="My pull requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -291,11 +305,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="Quit Gitify"
             class="octicon octicon-x-circle"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -430,11 +446,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="4 unread notifications"
               class="octicon octicon-bell"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -451,11 +469,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="My issues"
               class="octicon octicon-issue-opened"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -475,11 +495,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="My pull requests"
               class="octicon octicon-git-pull-request"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -500,11 +522,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
             <svg
               aria-label="Quit Gitify"
               class="octicon octicon-x-circle"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -582,11 +606,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="4 unread notifications"
             class="octicon octicon-bell"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -603,11 +629,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="My issues"
             class="octicon octicon-issue-opened"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -627,11 +655,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="My pull requests"
             class="octicon octicon-git-pull-request"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -652,11 +682,13 @@ exports[`renderer/components/Sidebar.tsx should render itself & its children (lo
           <svg
             aria-label="Quit Gitify"
             class="octicon octicon-x-circle"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
diff --git a/src/renderer/components/buttons/__snapshots__/Button.test.tsx.snap b/src/renderer/components/buttons/__snapshots__/Button.test.tsx.snap
index bce89d3cb..947b0397a 100644
--- a/src/renderer/components/buttons/__snapshots__/Button.test.tsx.snap
+++ b/src/renderer/components/buttons/__snapshots__/Button.test.tsx.snap
@@ -12,11 +12,13 @@ exports[`renderer/components/buttons/Button.tsx should render with icon 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-mark-github mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -36,11 +38,13 @@ exports[`renderer/components/buttons/Button.tsx should render with icon 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="mr-2"
+        class="octicon octicon-mark-github mr-2"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
diff --git a/src/renderer/components/buttons/__snapshots__/InteractionButton.test.tsx.snap b/src/renderer/components/buttons/__snapshots__/InteractionButton.test.tsx.snap
index 15c211d38..6bf8b1322 100644
--- a/src/renderer/components/buttons/__snapshots__/InteractionButton.test.tsx.snap
+++ b/src/renderer/components/buttons/__snapshots__/InteractionButton.test.tsx.snap
@@ -13,11 +13,13 @@ exports[`renderer/components/buttons/InteractionButton.tsx should render 1`] = `
         <svg
           aria-label="Mock Interaction Button"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="14"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="14"
         >
@@ -37,11 +39,13 @@ exports[`renderer/components/buttons/InteractionButton.tsx should render 1`] = `
       <svg
         aria-label="Mock Interaction Button"
         class="octicon octicon-mark-github"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="14"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="14"
       >
diff --git a/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap b/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap
index dec4c232b..ea085941b 100644
--- a/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap
+++ b/src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap
@@ -12,12 +12,14 @@ exports[`renderer/components/buttons/PillButton.tsx should render 1`] = `
       >
         <svg
           aria-label="Mock Pill"
-          class="text-green-500"
+          class="octicon octicon-mark-github text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -37,12 +39,14 @@ exports[`renderer/components/buttons/PillButton.tsx should render 1`] = `
     >
       <svg
         aria-label="Mock Pill"
-        class="text-green-500"
+        class="octicon octicon-mark-github text-green-500"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="12"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="12"
       >
diff --git a/src/renderer/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/renderer/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
index 841b510a7..d2ff2431a 100644
--- a/src/renderer/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
+++ b/src/renderer/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -13,11 +13,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render - with spec
         <svg
           aria-label="Mock Sidebar Button"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -37,11 +39,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render - with spec
       <svg
         aria-label="Mock Sidebar Button"
         class="octicon octicon-mark-github"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
@@ -118,11 +122,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render with metric
         <svg
           aria-label="Mock Sidebar Button"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -143,11 +149,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render with metric
       <svg
         aria-label="Mock Sidebar Button"
         class="octicon octicon-mark-github"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="12"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="12"
       >
@@ -225,11 +233,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render without met
         <svg
           aria-label="Mock Sidebar Button"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -249,11 +259,13 @@ exports[`renderer/components/buttons/SidebarButton.tsx should render without met
       <svg
         aria-label="Mock Sidebar Button"
         class="octicon octicon-mark-github"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="12"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="12"
       >
diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
index c90cd127c..c0bdb1e84 100644
--- a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
@@ -8,11 +8,13 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter /
 >
   <svg
     aria-hidden="true"
-    class="ml-1 text-blue-500"
+    class="octicon octicon-question ml-1 text-blue-500"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height="16"
-    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+    overflow="visible"
+    style="vertical-align: text-bottom;"
     viewBox="0 0 16 16"
     width="16"
   >
@@ -40,11 +42,13 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter /
 >
   <svg
     aria-hidden="true"
-    class="ml-1 text-blue-500"
+    class="octicon octicon-question ml-1 text-blue-500"
+    display="inline-block"
     fill="currentColor"
     focusable="false"
     height="16"
-    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+    overflow="visible"
+    style="vertical-align: text-bottom;"
     viewBox="0 0 16 16"
     width="16"
   >
@@ -67,11 +71,13 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="ml-1 text-blue-500"
+          class="octicon octicon-question ml-1 text-blue-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -90,11 +96,13 @@ exports[`renderer/components/fields/Tooltip.tsx should render 1`] = `
     >
       <svg
         aria-hidden="true"
-        class="ml-1 text-blue-500"
+        class="octicon octicon-question ml-1 text-blue-500"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
diff --git a/src/renderer/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap b/src/renderer/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap
index caa2602a9..862cfdb26 100644
--- a/src/renderer/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap
+++ b/src/renderer/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap
@@ -12,10 +12,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render GitHub App i
         <svg
           aria-hidden="true"
           class="octicon octicon-apps"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -34,10 +36,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render GitHub App i
       <svg
         aria-hidden="true"
         class="octicon octicon-apps"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
@@ -113,10 +117,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render OAuth App ic
         <svg
           aria-hidden="true"
           class="octicon octicon-person"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -135,10 +141,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render OAuth App ic
       <svg
         aria-hidden="true"
         class="octicon octicon-person"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
@@ -214,10 +222,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render Personal Acc
         <svg
           aria-hidden="true"
           class="octicon octicon-key"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -236,10 +246,12 @@ exports[`renderer/components/icons/AuthMethodIcon.tsx should render Personal Acc
       <svg
         aria-hidden="true"
         class="octicon octicon-key"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
diff --git a/src/renderer/components/icons/__snapshots__/AvatarIcon.test.tsx.snap b/src/renderer/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
index e7880e375..7292dd6e7 100644
--- a/src/renderer/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
+++ b/src/renderer/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
@@ -7,11 +7,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default extra sm
     <div>
       <svg
         aria-hidden="true"
-        class="text-gray-500 dark:text-gray-300"
+        class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
@@ -24,11 +26,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default extra sm
   "container": <div>
     <svg
       aria-hidden="true"
-      class="text-gray-500 dark:text-gray-300"
+      class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height="16"
-      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      overflow="visible"
+      style="vertical-align: text-bottom;"
       viewBox="0 0 16 16"
       width="16"
     >
@@ -98,11 +102,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default medium i
     <div>
       <svg
         aria-hidden="true"
-        class="text-gray-500 dark:text-gray-300"
+        class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="24"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 24 24"
         width="24"
       >
@@ -115,11 +121,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default medium i
   "container": <div>
     <svg
       aria-hidden="true"
-      class="text-gray-500 dark:text-gray-300"
+      class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height="24"
-      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      overflow="visible"
+      style="vertical-align: text-bottom;"
       viewBox="0 0 24 24"
       width="24"
     >
@@ -189,11 +197,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default small ic
     <div>
       <svg
         aria-hidden="true"
-        class="text-gray-500 dark:text-gray-300"
+        class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="20"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="20"
       >
@@ -206,11 +216,13 @@ exports[`renderer/components/icons/AvatarIcon.tsx should render default small ic
   "container": <div>
     <svg
       aria-hidden="true"
-      class="text-gray-500 dark:text-gray-300"
+      class="octicon octicon-mark-github text-gray-500 dark:text-gray-300"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height="20"
-      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      overflow="visible"
+      style="vertical-align: text-bottom;"
       viewBox="0 0 16 16"
       width="20"
     >
diff --git a/src/renderer/components/icons/__snapshots__/PlatformIcon.test.tsx.snap b/src/renderer/components/icons/__snapshots__/PlatformIcon.test.tsx.snap
index ac1fdbb19..3ed205a9e 100644
--- a/src/renderer/components/icons/__snapshots__/PlatformIcon.test.tsx.snap
+++ b/src/renderer/components/icons/__snapshots__/PlatformIcon.test.tsx.snap
@@ -12,10 +12,12 @@ exports[`renderer/components/icons/PlatformIcon.tsx should render GitHub Cloud i
         <svg
           aria-hidden="true"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -34,10 +36,12 @@ exports[`renderer/components/icons/PlatformIcon.tsx should render GitHub Cloud i
       <svg
         aria-hidden="true"
         class="octicon octicon-mark-github"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
@@ -113,10 +117,12 @@ exports[`renderer/components/icons/PlatformIcon.tsx should render GitHub Enterpr
         <svg
           aria-hidden="true"
           class="octicon octicon-server"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -135,10 +141,12 @@ exports[`renderer/components/icons/PlatformIcon.tsx should render GitHub Enterpr
       <svg
         aria-hidden="true"
         class="octicon octicon-server"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="16"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        overflow="visible"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="16"
       >
diff --git a/src/renderer/components/notification/__snapshots__/NotificationFooter.test.tsx.snap b/src/renderer/components/notification/__snapshots__/NotificationFooter.test.tsx.snap
index 300b4d59c..7b874f165 100644
--- a/src/renderer/components/notification/__snapshots__/NotificationFooter.test.tsx.snap
+++ b/src/renderer/components/notification/__snapshots__/NotificationFooter.test.tsx.snap
@@ -39,12 +39,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
           >
             <svg
               aria-label="octocat approved these changes"
-              class="text-green-500"
+              class="octicon octicon-check text-green-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -61,12 +63,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
           >
             <svg
               aria-label="gitify-app requested changes"
-              class="text-red-500"
+              class="octicon octicon-file-diff text-red-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -115,12 +119,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -137,12 +143,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -248,12 +256,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
           >
             <svg
               aria-label="octocat approved these changes"
-              class="text-green-500"
+              class="octicon octicon-check text-green-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -270,12 +280,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
           >
             <svg
               aria-label="gitify-app requested changes"
-              class="text-red-500"
+              class="octicon octicon-file-diff text-red-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -324,12 +336,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -346,12 +360,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx security alerts
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -430,10 +446,12 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
           <svg
             aria-hidden="true"
             class="octicon octicon-mark-github"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -462,12 +480,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
           >
             <svg
               aria-label="octocat approved these changes"
-              class="text-green-500"
+              class="octicon octicon-check text-green-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -484,12 +504,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
           >
             <svg
               aria-label="gitify-app requested changes"
-              class="text-red-500"
+              class="octicon octicon-file-diff text-red-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -511,10 +533,12 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
         <svg
           aria-hidden="true"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -543,12 +567,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -565,12 +591,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should default
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -676,12 +704,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
           >
             <svg
               aria-label="octocat approved these changes"
-              class="text-green-500"
+              class="octicon octicon-check text-green-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -698,12 +728,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
           >
             <svg
               aria-label="gitify-app requested changes"
-              class="text-red-500"
+              class="octicon octicon-file-diff text-red-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -752,12 +784,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -774,12 +808,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -885,12 +921,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
           >
             <svg
               aria-label="octocat approved these changes"
-              class="text-green-500"
+              class="octicon octicon-check text-green-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -907,12 +945,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
           >
             <svg
               aria-label="gitify-app requested changes"
-              class="text-red-500"
+              class="octicon octicon-file-diff text-red-500"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -961,12 +1001,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -983,12 +1025,14 @@ exports[`renderer/components/notification/NotificationFooter.tsx should render i
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
diff --git a/src/renderer/components/notification/__snapshots__/Pills.test.tsx.snap b/src/renderer/components/notification/__snapshots__/Pills.test.tsx.snap
index 1e787dfff..c8fbca22b 100644
--- a/src/renderer/components/notification/__snapshots__/Pills.test.tsx.snap
+++ b/src/renderer/components/notification/__snapshots__/Pills.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -40,12 +42,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -62,12 +66,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -84,12 +90,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="1 comment"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -113,12 +121,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -138,12 +148,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -160,12 +172,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -182,12 +196,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="1 comment"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -268,12 +284,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -293,12 +311,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -315,12 +335,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -337,12 +359,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="2 comments"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -366,12 +390,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -391,12 +417,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -413,12 +441,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -435,12 +465,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="2 comments"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -521,12 +553,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -546,12 +580,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -568,12 +604,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -597,12 +635,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -622,12 +662,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -644,12 +686,14 @@ exports[`renderer/components/notification/Pills.tsx comment pills should render
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -730,12 +774,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -755,12 +801,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -777,12 +825,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -799,12 +849,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
         >
           <svg
             aria-label="2 comments"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -823,12 +875,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
           <svg
             aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -852,12 +906,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -877,12 +933,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -899,12 +957,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -921,12 +981,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
       >
         <svg
           aria-label="2 comments"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -945,12 +1007,14 @@ exports[`renderer/components/notification/Pills.tsx label pills should render la
         <svg
           aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1031,12 +1095,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1056,12 +1122,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1078,12 +1146,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1107,12 +1177,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1132,12 +1204,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1154,12 +1228,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1240,12 +1316,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="Linked to issue #1"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1265,12 +1343,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1287,12 +1367,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1316,12 +1398,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="Linked to issue #1"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1341,12 +1425,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1363,12 +1449,14 @@ exports[`renderer/components/notification/Pills.tsx linked issue pills should re
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1449,12 +1537,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1474,12 +1564,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1496,12 +1588,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1518,12 +1612,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="2 comments"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1542,12 +1638,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
           <svg
             aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1564,12 +1662,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="Milestone 1"
-            class="text-red-500"
+            class="octicon octicon-milestone text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1592,12 +1692,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1617,12 +1719,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1639,12 +1743,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1661,12 +1767,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="2 comments"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1685,12 +1793,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         <svg
           aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1707,12 +1817,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="Milestone 1"
-          class="text-red-500"
+          class="octicon octicon-milestone text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1792,12 +1904,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="Linked to issues #1, #2"
-            class="text-green-500"
+            class="octicon octicon-issue-closed text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1817,12 +1931,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="octocat approved these changes"
-            class="text-green-500"
+            class="octicon octicon-check text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1839,12 +1955,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="gitify-app requested changes"
-            class="text-red-500"
+            class="octicon octicon-file-diff text-red-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1861,12 +1979,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="2 comments"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1885,12 +2005,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
           <svg
             aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-            class="text-gray-500 dark:text-gray-300"
+            class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1907,12 +2029,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         >
           <svg
             aria-label="Milestone 1"
-            class="text-green-500"
+            class="octicon octicon-milestone text-green-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="12"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="12"
           >
@@ -1935,12 +2059,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="Linked to issues #1, #2"
-          class="text-green-500"
+          class="octicon octicon-issue-closed text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1960,12 +2086,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="octocat approved these changes"
-          class="text-green-500"
+          class="octicon octicon-check text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -1982,12 +2110,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="gitify-app requested changes"
-          class="text-red-500"
+          class="octicon octicon-file-diff text-red-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -2004,12 +2134,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="2 comments"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-comment text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -2028,12 +2160,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
         <svg
           aria-label="🏷️ enhancement
 🏷️ good-first-issue"
-          class="text-gray-500 dark:text-gray-300"
+          class="octicon octicon-tag text-gray-500 dark:text-gray-300"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
@@ -2050,12 +2184,14 @@ exports[`renderer/components/notification/Pills.tsx milestone pills should rende
       >
         <svg
           aria-label="Milestone 1"
-          class="text-green-500"
+          class="octicon octicon-milestone text-green-500"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="12"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="12"
         >
diff --git a/src/renderer/components/settings/__snapshots__/Legend.test.tsx.snap b/src/renderer/components/settings/__snapshots__/Legend.test.tsx.snap
index 6b4b5e90e..91fbd7c15 100644
--- a/src/renderer/components/settings/__snapshots__/Legend.test.tsx.snap
+++ b/src/renderer/components/settings/__snapshots__/Legend.test.tsx.snap
@@ -8,11 +8,13 @@ exports[`renderer/routes/components/settings/Legend.tsx should render the legend
   >
     <svg
       aria-hidden="true"
-      class="mr-2"
+      class="octicon octicon-person-fill mr-2"
+      display="inline-block"
       fill="currentColor"
       focusable="false"
       height="16"
-      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+      overflow="visible"
+      style="vertical-align: text-bottom;"
       viewBox="0 0 16 16"
       width="16"
     >
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index 2ba0493f3..a58979d0a 100644
--- a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
     >
       <svg
         aria-label="Go Back"
-        class="hover:text-gray-400"
+        class="octicon octicon-arrow-left hover:text-gray-400"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="20"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="20"
       >
@@ -38,11 +40,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-person mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -101,10 +105,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-mark-github"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -129,10 +135,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-key"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -153,12 +161,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star-fill text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -175,12 +185,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Set as primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -197,11 +209,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Refresh octocat"
               class="octicon octicon-sync"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -218,11 +232,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Logout octocat"
               class="octicon octicon-sign-out"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -274,10 +290,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-server"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -302,10 +320,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-person"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -327,12 +347,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star-fill text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -348,12 +370,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Set as primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -370,11 +394,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Refresh octocat"
               class="octicon octicon-sync"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -391,11 +417,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Logout octocat"
               class="octicon octicon-sign-out"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -447,10 +475,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-mark-github"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -475,10 +505,12 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
                 <svg
                   aria-hidden="true"
                   class="octicon octicon-apps"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -500,12 +532,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star-fill text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -521,12 +555,14 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           >
             <svg
               aria-label="Set as primary account"
-              class="text-yellow-500 dark:text-yellow-300"
+              class="octicon octicon-star text-yellow-500 dark:text-yellow-300"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -543,11 +579,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Refresh octocat"
               class="octicon octicon-sync"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -564,11 +602,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
             <svg
               aria-label="Logout octocat"
               class="octicon octicon-sign-out"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -598,11 +638,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         <svg
           aria-label="Login with GitHub App"
           class="octicon octicon-mark-github"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="18"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="18"
         >
@@ -612,11 +654,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </svg>
         <svg
           aria-hidden="true"
-          class="mb-2 ml-1"
+          class="octicon octicon-plus mb-2 ml-1"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="14"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="14"
         >
@@ -633,11 +677,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         <svg
           aria-label="Login with Personal Access Token"
           class="octicon octicon-key"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="18"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="18"
         >
@@ -647,11 +693,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </svg>
         <svg
           aria-hidden="true"
-          class="mb-2 ml-1"
+          class="octicon octicon-plus mb-2 ml-1"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="14"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="14"
         >
@@ -668,11 +716,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         <svg
           aria-label="Login with OAuth App"
           class="octicon octicon-person"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -682,11 +732,13 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </svg>
         <svg
           aria-hidden="true"
-          class="mb-2"
+          class="octicon octicon-plus mb-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="14"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="14"
         >
diff --git a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
index aeb0a794e..16354ad7d 100644
--- a/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Filters.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
     >
       <svg
         aria-label="Go Back"
-        class="hover:text-gray-400"
+        class="octicon octicon-arrow-left hover:text-gray-400"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="20"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="20"
       >
@@ -38,11 +40,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-filter mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -66,11 +70,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-feed-person mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -106,11 +112,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -133,11 +141,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-note mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -178,11 +188,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -221,11 +233,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -264,11 +278,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -307,11 +323,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -350,11 +368,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -393,11 +413,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -436,11 +458,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -479,11 +503,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -522,11 +548,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -565,11 +593,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -608,11 +638,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -651,11 +683,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -694,11 +728,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -737,11 +773,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -780,11 +818,13 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -810,12 +850,14 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
       >
         <svg
           aria-label="Clear filters"
-          class="mr-2"
+          class="octicon octicon-filter-remove mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="18"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="18"
         >
@@ -857,11 +899,13 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
         >
           <svg
             aria-hidden="true"
-            class="ml-1 text-blue-500"
+            class="octicon octicon-question ml-1 text-blue-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -903,11 +947,13 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
         >
           <svg
             aria-hidden="true"
-            class="ml-1 text-blue-500"
+            class="octicon octicon-question ml-1 text-blue-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -949,11 +995,13 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
         >
           <svg
             aria-hidden="true"
-            class="ml-1 text-blue-500"
+            class="octicon octicon-question ml-1 text-blue-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -997,11 +1045,13 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
         >
           <svg
             aria-hidden="true"
-            class="ml-1 text-blue-500"
+            class="octicon octicon-question ml-1 text-blue-500"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
diff --git a/src/renderer/routes/__snapshots__/Login.test.tsx.snap b/src/renderer/routes/__snapshots__/Login.test.tsx.snap
index 11b9c9a05..eda32c806 100644
--- a/src/renderer/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Login.test.tsx.snap
@@ -72,11 +72,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="mr-2"
+            class="octicon octicon-mark-github mr-2"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -93,11 +95,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="mr-2"
+            class="octicon octicon-key mr-2"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -114,11 +118,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="mr-2"
+            class="octicon octicon-person mr-2"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -199,11 +205,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-mark-github mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -220,11 +228,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-key mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -241,11 +251,13 @@ exports[`renderer/routes/Login.tsx should render itself & its children 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-person mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
diff --git a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index 5c0558c87..d15b81f70 100644
--- a/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -16,12 +16,14 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           >
             <svg
               aria-label="Go Back"
-              class="hover:text-gray-400"
+              class="octicon octicon-arrow-left hover:text-gray-400"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="20"
+              overflow="visible"
               role="img"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="20"
             >
@@ -39,11 +41,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="mr-2"
+                class="octicon octicon-person mr-2"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="16"
               >
@@ -90,11 +94,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="mr-2"
+                      class="octicon octicon-person mr-2"
+                      display="inline-block"
                       fill="currentColor"
                       focusable="false"
                       height="12"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
                       viewBox="0 0 16 16"
                       width="12"
                     >
@@ -165,11 +171,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="mr-2"
+                  class="octicon octicon-book mr-2"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="12"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="12"
                 >
@@ -189,11 +197,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="mr-2"
+                  class="octicon octicon-sign-in mr-2"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -221,12 +231,14 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
         >
           <svg
             aria-label="Go Back"
-            class="hover:text-gray-400"
+            class="octicon octicon-arrow-left hover:text-gray-400"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -244,11 +256,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           >
             <svg
               aria-hidden="true"
-              class="mr-2"
+              class="octicon octicon-person mr-2"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -295,11 +309,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class="mr-2"
+                    class="octicon octicon-person mr-2"
+                    display="inline-block"
                     fill="currentColor"
                     focusable="false"
                     height="12"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
                     viewBox="0 0 16 16"
                     width="12"
                   >
@@ -370,11 +386,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="mr-2"
+                class="octicon octicon-book mr-2"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -394,11 +412,13 @@ exports[`renderer/routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="mr-2"
+                class="octicon octicon-sign-in mr-2"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="16"
               >
diff --git a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index 9e68e4597..171e75d7c 100644
--- a/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
         >
           <svg
             aria-label="Go Back"
-            class="hover:text-gray-400"
+            class="octicon octicon-arrow-left hover:text-gray-400"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="20"
+            overflow="visible"
             role="img"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="20"
           >
@@ -38,11 +40,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
           >
             <svg
               aria-hidden="true"
-              class="mr-2"
+              class="octicon octicon-key mr-2"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
@@ -94,11 +98,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                   >
                     <svg
                       aria-hidden="true"
-                      class="mr-2"
+                      class="octicon octicon-key mr-2"
+                      display="inline-block"
                       fill="currentColor"
                       focusable="false"
                       height="12"
-                      style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                      overflow="visible"
+                      style="vertical-align: text-bottom;"
                       viewBox="0 0 16 16"
                       width="12"
                     >
@@ -157,11 +163,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
             >
               <svg
                 aria-hidden="true"
-                class="mr-2"
+                class="octicon octicon-book mr-2"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="12"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="12"
               >
@@ -180,11 +188,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
             >
               <svg
                 aria-hidden="true"
-                class="mr-2"
+                class="octicon octicon-sign-in mr-2"
+                display="inline-block"
                 fill="currentColor"
                 focusable="false"
                 height="16"
-                style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
                 viewBox="0 0 16 16"
                 width="16"
               >
@@ -210,12 +220,14 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
       >
         <svg
           aria-label="Go Back"
-          class="hover:text-gray-400"
+          class="octicon octicon-arrow-left hover:text-gray-400"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="20"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="20"
         >
@@ -233,11 +245,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
         >
           <svg
             aria-hidden="true"
-            class="mr-2"
+            class="octicon octicon-key mr-2"
+            display="inline-block"
             fill="currentColor"
             focusable="false"
             height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            overflow="visible"
+            style="vertical-align: text-bottom;"
             viewBox="0 0 16 16"
             width="16"
           >
@@ -289,11 +303,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
                 >
                   <svg
                     aria-hidden="true"
-                    class="mr-2"
+                    class="octicon octicon-key mr-2"
+                    display="inline-block"
                     fill="currentColor"
                     focusable="false"
                     height="12"
-                    style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
                     viewBox="0 0 16 16"
                     width="12"
                   >
@@ -352,11 +368,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
           >
             <svg
               aria-hidden="true"
-              class="mr-2"
+              class="octicon octicon-book mr-2"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="12"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="12"
             >
@@ -375,11 +393,13 @@ exports[`renderer/routes/LoginWithPersonalAccessToken.tsx renders correctly 1`]
           >
             <svg
               aria-hidden="true"
-              class="mr-2"
+              class="octicon octicon-sign-in mr-2"
+              display="inline-block"
               fill="currentColor"
               focusable="false"
               height="16"
-              style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+              overflow="visible"
+              style="vertical-align: text-bottom;"
               viewBox="0 0 16 16"
               width="16"
             >
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index 2f0930cd7..386a92424 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -15,12 +15,14 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
     >
       <svg
         aria-label="Go Back"
-        class="hover:text-gray-400"
+        class="octicon octicon-arrow-left hover:text-gray-400"
+        display="inline-block"
         fill="currentColor"
         focusable="false"
         height="20"
+        overflow="visible"
         role="img"
-        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        style="vertical-align: text-bottom;"
         viewBox="0 0 16 16"
         width="20"
       >
@@ -38,11 +40,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-gear mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -64,11 +68,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-paintbrush mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -215,11 +221,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -259,11 +267,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -303,11 +313,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -354,11 +366,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-bell mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -454,11 +468,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -497,11 +513,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -540,11 +558,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -583,11 +603,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -626,11 +648,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -651,11 +675,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
       >
         <svg
           aria-hidden="true"
-          class="mr-2"
+          class="octicon octicon-device-desktop mr-2"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="16"
         >
@@ -751,11 +777,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -865,11 +893,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
               >
                 <svg
                   aria-hidden="true"
-                  class="ml-1 text-blue-500"
+                  class="octicon octicon-question ml-1 text-blue-500"
+                  display="inline-block"
                   fill="currentColor"
                   focusable="false"
                   height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+                  overflow="visible"
+                  style="vertical-align: text-bottom;"
                   viewBox="0 0 16 16"
                   width="16"
                 >
@@ -941,11 +971,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         <svg
           aria-label="Accounts"
           class="octicon octicon-person"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="18"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="18"
         >
@@ -962,11 +994,13 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
         <svg
           aria-label="Quit Gitify"
           class="octicon octicon-x-circle"
+          display="inline-block"
           fill="currentColor"
           focusable="false"
           height="18"
+          overflow="visible"
           role="img"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          style="vertical-align: text-bottom;"
           viewBox="0 0 16 16"
           width="18"
         >