diff --git a/package.json b/package.json
index 0d9e1b372..d3e38834f 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 3a578e65f..a6de450c8 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.2))(@types/react@19.0.2)(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'
@@ -4683,7 +4683,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
 
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/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index b01e99491..02b5f549e 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -24,7 +24,7 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
           disabled={props.disabled}
         />
 
-        <div className="ml-3">
+        <div className="flex items-center ml-3">
           <label
             htmlFor={props.name}
             className="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -33,10 +33,10 @@ export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
             }
           >
             {props.label}
-            {props.tooltip && (
-              <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
-            )}
           </label>
+          {props.tooltip && (
+            <Tooltip name={`tooltip-${props.name}`} tooltip={props.tooltip} />
+          )}
         </div>
       </div>
 
diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index bd3a2e051..69d273876 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -19,7 +19,7 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
     >
       <QuestionIcon className="ml-1 text-blue-500" />
       {showTooltip && (
-        <div className="absolute z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar">
+        <div className="absolute left-[-80px] z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar">
           <div className="text-left text-xs text-gray-700 dark:text-white">
             {props.tooltip}
           </div>
diff --git a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
index e93cd88f1..24339e0ce 100644
--- a/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/renderer/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -50,7 +50,7 @@ exports[`renderer/components/fields/Checkbox.tsx should render 1`] = `
           type="checkbox"
         />
         <div
-          class="ml-3"
+          class="flex items-center ml-3"
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
diff --git a/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap b/src/renderer/components/fields/__snapshots__/Tooltip.test.tsx.snap
index c90cd127c..ad85ff248 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"
   >
@@ -21,7 +23,7 @@ exports[`renderer/components/fields/Tooltip.tsx should display on mouse enter /
     />
   </svg>
   <div
-    class="absolute z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar"
+    class="absolute left-[-80px] z-10 w-60 rounded border border-gray-300 bg-white p-2 shadow dark:bg-gray-sidebar"
   >
     <div
       class="text-left text-xs text-gray-700 dark:text-white"
@@ -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/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 1014776b4..7be3180fe 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -134,26 +134,26 @@ export const AppearanceSettings: FC = () => {
         tooltip={
           <div>
             <div>Show notification metric pills for:</div>
-            <div className="pl-6">
-              <ul className="list-disc">
-                <li>
-                  <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
+            <div className="pl-4">
+              <ul>
+                <li className="flex items-center gap-1">
+                  <IssueClosedIcon size={Size.SMALL} />
                   linked issues
                 </li>
-                <li>
-                  <CheckIcon size={Size.MEDIUM} className="pr-1" /> pr reviews
+                <li className="flex items-center gap-1">
+                  <CheckIcon size={Size.SMALL} />
+                  pr reviews
                 </li>
-                <li>
-                  <CommentIcon size={Size.MEDIUM} className="pr-1" />
+                <li className="flex items-center gap-1">
+                  <CommentIcon size={Size.SMALL} />
                   comments
                 </li>
-
-                <li>
-                  <TagIcon size={Size.MEDIUM} className="pr-1" />
+                <li className="flex items-center gap-1">
+                  <TagIcon size={Size.SMALL} />
                   labels
                 </li>
-                <li>
-                  <MilestoneIcon size={Size.MEDIUM} className="pr-1" />
+                <li className="flex items-center gap-1">
+                  <MilestoneIcon size={Size.SMALL} />
                   milestones
                 </li>
               </ul>
@@ -173,18 +173,18 @@ export const AppearanceSettings: FC = () => {
         tooltip={
           <div>
             <div>Show GitHub number for:</div>
-            <div className="pl-6">
-              <ul className="list-disc">
-                <li>
-                  <CommentIcon size={Size.MEDIUM} className="pr-1" />
+            <div className="pl-4">
+              <ul>
+                <li className="flex items-center gap-1">
+                  <CommentIcon size={Size.SMALL} />
                   Discussion
                 </li>
-                <li>
-                  <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
+                <li className="flex items-center gap-1">
+                  <IssueClosedIcon size={Size.SMALL} />
                   Issue
                 </li>
-                <li>
-                  <GitPullRequestIcon size={Size.MEDIUM} className="pr-1" />
+                <li className="flex items-center gap-1">
+                  <GitPullRequestIcon size={Size.SMALL} />
                   Pull Request
                 </li>
               </ul>
diff --git a/src/renderer/components/settings/SystemSettings.tsx b/src/renderer/components/settings/SystemSettings.tsx
index 9a6750558..b6b5802b9 100644
--- a/src/renderer/components/settings/SystemSettings.tsx
+++ b/src/renderer/components/settings/SystemSettings.tsx
@@ -76,9 +76,14 @@ export const SystemSettings: FC = () => {
         }
         tooltip={
           <div>
-            Use a white Gitify logo (instead of the default black logo) when all
-            notifications are read. Particularly useful for devices which have a
-            dark-themed menubar or taskbar.
+            <div className="pb-3">
+              Use a white Gitify logo (instead of the default black logo) when
+              all notifications are read.
+            </div>
+            <div>
+              This is particularly useful for devices which have a dark-themed
+              menubar or taskbar.
+            </div>
           </div>
         }
       />
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/Accounts.tsx b/src/renderer/routes/Accounts.tsx
index 58d471844..8682860cf 100644
--- a/src/renderer/routes/Accounts.tsx
+++ b/src/renderer/routes/Accounts.tsx
@@ -103,7 +103,7 @@ export const AccountsRoute: FC = () => {
                 <div>
                   <button
                     type="button"
-                    className="mb-1 ml-1 cursor-pointer align-middle"
+                    className="flex items-center mb-1 ml-1 cursor-pointer align-middle"
                     title="Open Host"
                     onClick={() => openHost(account.hostname)}
                   >
@@ -114,7 +114,7 @@ export const AccountsRoute: FC = () => {
                 <div>
                   <button
                     type="button"
-                    className="ml-1 cursor-pointer align-middle"
+                    className="flex items-center ml-1 cursor-pointer align-middle"
                     title="Open Developer Settings"
                     onClick={() => openDeveloperSettings(account)}
                   >
@@ -193,10 +193,10 @@ export const AccountsRoute: FC = () => {
 
       <div className="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker">
         <div className="font-semibold italic">Add new account</div>
-        <div>
+        <div className="flex items-center">
           <button
             type="button"
-            className={BUTTON_CLASS_NAME}
+            className={cn('flex items-center', BUTTON_CLASS_NAME)}
             title="Login with GitHub"
             onClick={loginWithGitHub}
           >
@@ -208,7 +208,7 @@ export const AccountsRoute: FC = () => {
           </button>
           <button
             type="button"
-            className={BUTTON_CLASS_NAME}
+            className={cn('flex items-center', BUTTON_CLASS_NAME)}
             title="Login with Personal Access Token"
             onClick={loginWithPersonalAccessToken}
           >
@@ -220,7 +220,7 @@ export const AccountsRoute: FC = () => {
           </button>
           <button
             type="button"
-            className={BUTTON_CLASS_NAME}
+            className={cn('flex items-center', BUTTON_CLASS_NAME)}
             title="Login with OAuth App"
             onClick={loginWithOAuthApp}
           >
diff --git a/src/renderer/routes/Filters.tsx b/src/renderer/routes/Filters.tsx
index fe07e33c5..e9e3cea92 100644
--- a/src/renderer/routes/Filters.tsx
+++ b/src/renderer/routes/Filters.tsx
@@ -12,6 +12,7 @@ import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
 import { Size } from '../types';
 import type { Reason } from '../typesGitHub';
+import { cn } from '../utils/cn';
 import { FORMATTED_REASONS, formatReason } from '../utils/reason';
 
 export const FiltersRoute: FC = () => {
@@ -91,7 +92,7 @@ export const FiltersRoute: FC = () => {
         <div>
           <button
             type="button"
-            className={BUTTON_CLASS_NAME}
+            className={cn('flex items-center', BUTTON_CLASS_NAME)}
             title="Clear filters"
             onClick={clearFilters}
           >
diff --git a/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap b/src/renderer/routes/__snapshots__/Accounts.test.tsx.snap
index 2ba0493f3..27c78a986 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"
         >
@@ -90,7 +94,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="mb-1 ml-1 cursor-pointer align-middle"
+              class="flex items-center mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -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"
                 >
@@ -118,7 +124,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="ml-1 cursor-pointer align-middle"
+              class="flex items-center ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -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"
             >
@@ -263,7 +279,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="mb-1 ml-1 cursor-pointer align-middle"
+              class="flex items-center mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -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"
                 >
@@ -291,7 +309,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="ml-1 cursor-pointer align-middle"
+              class="flex items-center ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -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"
             >
@@ -436,7 +464,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="mb-1 ml-1 cursor-pointer align-middle"
+              class="flex items-center mb-1 ml-1 cursor-pointer align-middle"
               title="Open Host"
               type="button"
             >
@@ -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"
                 >
@@ -464,7 +494,7 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
           </div>
           <div>
             <button
-              class="ml-1 cursor-pointer align-middle"
+              class="flex items-center ml-1 cursor-pointer align-middle"
               title="Open Developer Settings"
               type="button"
             >
@@ -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"
             >
@@ -589,20 +629,24 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
     >
       Add new account
     </div>
-    <div>
+    <div
+      class="flex items-center"
+    >
       <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        class="flex items-center hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Login with GitHub"
         type="button"
       >
         <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 +656,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"
         >
@@ -626,18 +672,20 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </svg>
       </button>
       <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        class="flex items-center hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Login with Personal Access Token"
         type="button"
       >
         <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 +695,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"
         >
@@ -661,18 +711,20 @@ exports[`renderer/routes/Accounts.tsx General should render itself & its childre
         </svg>
       </button>
       <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        class="flex items-center hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Login with OAuth App"
         type="button"
       >
         <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 +734,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..565ae838c 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"
         >
@@ -92,34 +98,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="hideBots"
             >
               Hide notifications from Bot accounts
-              <span
-                aria-label="tooltip-hideBots"
-                class="relative"
-                id="tooltip-hideBots"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-hideBots"
+              class="relative"
+              id="tooltip-hideBots"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -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"
         >
@@ -164,34 +174,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="approval_requested"
             >
               Approval Requested
-              <span
-                aria-label="tooltip-approval_requested"
-                class="relative"
-                id="tooltip-approval_requested"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-approval_requested"
+              class="relative"
+              id="tooltip-approval_requested"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -207,34 +219,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="assign"
             >
               Assigned
-              <span
-                aria-label="tooltip-assign"
-                class="relative"
-                id="tooltip-assign"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-assign"
+              class="relative"
+              id="tooltip-assign"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -250,34 +264,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="author"
             >
               Authored
-              <span
-                aria-label="tooltip-author"
-                class="relative"
-                id="tooltip-author"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-author"
+              class="relative"
+              id="tooltip-author"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -293,34 +309,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="ci_activity"
             >
               Workflow Run Completed
-              <span
-                aria-label="tooltip-ci_activity"
-                class="relative"
-                id="tooltip-ci_activity"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-ci_activity"
+              class="relative"
+              id="tooltip-ci_activity"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -336,34 +354,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="comment"
             >
               Commented
-              <span
-                aria-label="tooltip-comment"
-                class="relative"
-                id="tooltip-comment"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-comment"
+              class="relative"
+              id="tooltip-comment"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -379,34 +399,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="invitation"
             >
               Invitation Received
-              <span
-                aria-label="tooltip-invitation"
-                class="relative"
-                id="tooltip-invitation"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-invitation"
+              class="relative"
+              id="tooltip-invitation"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -422,34 +444,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="manual"
             >
               Updated
-              <span
-                aria-label="tooltip-manual"
-                class="relative"
-                id="tooltip-manual"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-manual"
+              class="relative"
+              id="tooltip-manual"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -465,34 +489,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="member_feature_requested"
             >
               Member Feature Requested
-              <span
-                aria-label="tooltip-member_feature_requested"
-                class="relative"
-                id="tooltip-member_feature_requested"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-member_feature_requested"
+              class="relative"
+              id="tooltip-member_feature_requested"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -508,34 +534,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="mention"
             >
               Mentioned
-              <span
-                aria-label="tooltip-mention"
-                class="relative"
-                id="tooltip-mention"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-mention"
+              class="relative"
+              id="tooltip-mention"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -551,34 +579,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="review_requested"
             >
               Review Requested
-              <span
-                aria-label="tooltip-review_requested"
-                class="relative"
-                id="tooltip-review_requested"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-review_requested"
+              class="relative"
+              id="tooltip-review_requested"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -594,34 +624,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="security_advisory_credit"
             >
               Security Advisory Credit Received
-              <span
-                aria-label="tooltip-security_advisory_credit"
-                class="relative"
-                id="tooltip-security_advisory_credit"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-security_advisory_credit"
+              class="relative"
+              id="tooltip-security_advisory_credit"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -637,34 +669,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="security_alert"
             >
               Security Alert Received
-              <span
-                aria-label="tooltip-security_alert"
-                class="relative"
-                id="tooltip-security_alert"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-security_alert"
+              class="relative"
+              id="tooltip-security_alert"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -680,34 +714,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="state_change"
             >
               State Changed
-              <span
-                aria-label="tooltip-state_change"
-                class="relative"
-                id="tooltip-state_change"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-state_change"
+              class="relative"
+              id="tooltip-state_change"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -723,34 +759,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="subscribed"
             >
               Updated
-              <span
-                aria-label="tooltip-subscribed"
-                class="relative"
-                id="tooltip-subscribed"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-subscribed"
+              class="relative"
+              id="tooltip-subscribed"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -766,34 +804,36 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="team_mention"
             >
               Team Mentioned
-              <span
-                aria-label="tooltip-team_mention"
-                class="relative"
-                id="tooltip-team_mention"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-team_mention"
+              class="relative"
+              id="tooltip-team_mention"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -804,18 +844,20 @@ exports[`renderer/routes/Filters.tsx General should render itself & its children
   >
     <div>
       <button
-        class="hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
+        class="flex items-center hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none"
         title="Clear filters"
         type="button"
       >
         <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"
         >
@@ -843,34 +885,36 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
       type="checkbox"
     />
     <div
-      class="ml-3"
+      class="flex items-center ml-3"
     >
       <label
         class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
         for="mention"
       >
         Mentioned
-        <span
-          aria-label="tooltip-mention"
-          class="relative"
-          id="tooltip-mention"
-        >
-          <svg
-            aria-hidden="true"
-            class="ml-1 text-blue-500"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-            />
-          </svg>
-        </span>
       </label>
+      <span
+        aria-label="tooltip-mention"
+        class="relative"
+        id="tooltip-mention"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-question ml-1 text-blue-500"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          />
+        </svg>
+      </span>
     </div>
   </div>
 </div>
@@ -889,34 +933,36 @@ exports[`renderer/routes/Filters.tsx Reasons section should be able to toggle re
       type="checkbox"
     />
     <div
-      class="ml-3"
+      class="flex items-center ml-3"
     >
       <label
         class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
         for="mention"
       >
         Mentioned
-        <span
-          aria-label="tooltip-mention"
-          class="relative"
-          id="tooltip-mention"
-        >
-          <svg
-            aria-hidden="true"
-            class="ml-1 text-blue-500"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-            />
-          </svg>
-        </span>
       </label>
+      <span
+        aria-label="tooltip-mention"
+        class="relative"
+        id="tooltip-mention"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-question ml-1 text-blue-500"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          />
+        </svg>
+      </span>
     </div>
   </div>
 </div>
@@ -935,34 +981,36 @@ exports[`renderer/routes/Filters.tsx Users section should be able to toggle the
       type="checkbox"
     />
     <div
-      class="ml-3"
+      class="flex items-center ml-3"
     >
       <label
         class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
         for="hideBots"
       >
         Hide notifications from Bot accounts
-        <span
-          aria-label="tooltip-hideBots"
-          class="relative"
-          id="tooltip-hideBots"
-        >
-          <svg
-            aria-hidden="true"
-            class="ml-1 text-blue-500"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-            />
-          </svg>
-        </span>
       </label>
+      <span
+        aria-label="tooltip-hideBots"
+        class="relative"
+        id="tooltip-hideBots"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-question ml-1 text-blue-500"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          />
+        </svg>
+      </span>
     </div>
   </div>
 </div>
@@ -982,7 +1030,7 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
       type="checkbox"
     />
     <div
-      class="ml-3"
+      class="flex items-center ml-3"
     >
       <label
         class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -990,27 +1038,29 @@ exports[`renderer/routes/Filters.tsx Users section should not be able to toggle
         style="text-decoration: line-through;"
       >
         Hide notifications from Bot accounts
-        <span
-          aria-label="tooltip-hideBots"
-          class="relative"
-          id="tooltip-hideBots"
-        >
-          <svg
-            aria-hidden="true"
-            class="ml-1 text-blue-500"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 16 16"
-            width="16"
-          >
-            <path
-              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-            />
-          </svg>
-        </span>
       </label>
+      <span
+        aria-label="tooltip-hideBots"
+        class="relative"
+        id="tooltip-hideBots"
+      >
+        <svg
+          aria-hidden="true"
+          class="octicon octicon-question ml-1 text-blue-500"
+          display="inline-block"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          overflow="visible"
+          style="vertical-align: text-bottom;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+          />
+        </svg>
+      </span>
     </div>
   </div>
 </div>
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..e230b0e34 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"
         >
@@ -201,34 +207,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="detailedNotifications"
             >
               Detailed notifications
-              <span
-                aria-label="tooltip-detailedNotifications"
-                class="relative"
-                id="tooltip-detailedNotifications"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-detailedNotifications"
+              class="relative"
+              id="tooltip-detailedNotifications"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -245,34 +253,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="showPills"
             >
               Show notification metric pills
-              <span
-                aria-label="tooltip-showPills"
-                class="relative"
-                id="tooltip-showPills"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-showPills"
+              class="relative"
+              id="tooltip-showPills"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -289,34 +299,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="showNumber"
             >
               Show number
-              <span
-                aria-label="tooltip-showNumber"
-                class="relative"
-                id="tooltip-showNumber"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-showNumber"
+              class="relative"
+              id="tooltip-showNumber"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -334,7 +346,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -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"
         >
@@ -440,34 +454,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="fetchAllNotifications"
             >
               Fetch all notifications
-              <span
-                aria-label="tooltip-fetchAllNotifications"
-                class="relative"
-                id="tooltip-fetchAllNotifications"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-fetchAllNotifications"
+              class="relative"
+              id="tooltip-fetchAllNotifications"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -483,34 +499,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="showOnlyParticipating"
             >
               Show only participating
-              <span
-                aria-label="tooltip-showOnlyParticipating"
-                class="relative"
-                id="tooltip-showOnlyParticipating"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-showOnlyParticipating"
+              class="relative"
+              id="tooltip-showOnlyParticipating"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -526,34 +544,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="markAsDoneOnOpen"
             >
               Mark as done on open
-              <span
-                aria-label="tooltip-markAsDoneOnOpen"
-                class="relative"
-                id="tooltip-markAsDoneOnOpen"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-markAsDoneOnOpen"
+              class="relative"
+              id="tooltip-markAsDoneOnOpen"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -569,34 +589,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="markAsDoneOnUnsubscribe"
             >
               Mark as done on unsubscribe
-              <span
-                aria-label="tooltip-markAsDoneOnUnsubscribe"
-                class="relative"
-                id="tooltip-markAsDoneOnUnsubscribe"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-markAsDoneOnUnsubscribe"
+              class="relative"
+              id="tooltip-markAsDoneOnUnsubscribe"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -612,34 +634,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="delayNotificationState"
             >
               Delay notification state
-              <span
-                aria-label="tooltip-delayNotificationState"
-                class="relative"
-                id="tooltip-delayNotificationState"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-delayNotificationState"
+              class="relative"
+              id="tooltip-delayNotificationState"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -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"
         >
@@ -737,34 +763,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="keyboardShortcutEnabled"
             >
               Enable keyboard shortcut
-              <span
-                aria-label="tooltip-keyboardShortcutEnabled"
-                class="relative"
-                id="tooltip-keyboardShortcutEnabled"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-keyboardShortcutEnabled"
+              class="relative"
+              id="tooltip-keyboardShortcutEnabled"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -780,7 +808,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -804,7 +832,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -828,7 +856,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -851,34 +879,36 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
               for="useAlternateIdleIcon"
             >
               Use alternate idle icon
-              <span
-                aria-label="tooltip-useAlternateIdleIcon"
-                class="relative"
-                id="tooltip-useAlternateIdleIcon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="ml-1 text-blue-500"
-                  fill="currentColor"
-                  focusable="false"
-                  height="16"
-                  style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-                  />
-                </svg>
-              </span>
             </label>
+            <span
+              aria-label="tooltip-useAlternateIdleIcon"
+              class="relative"
+              id="tooltip-useAlternateIdleIcon"
+            >
+              <svg
+                aria-hidden="true"
+                class="octicon octicon-question ml-1 text-blue-500"
+                display="inline-block"
+                fill="currentColor"
+                focusable="false"
+                height="16"
+                overflow="visible"
+                style="vertical-align: text-bottom;"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                />
+              </svg>
+            </span>
           </div>
         </div>
       </div>
@@ -894,7 +924,7 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             type="checkbox"
           />
           <div
-            class="ml-3"
+            class="flex items-center ml-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200 cursor-pointer"
@@ -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"
         >