diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index ad54f272d..c4bb53aad 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -5,7 +5,7 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
-import type { Account } from '../types';
+import { type Account, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
@@ -68,7 +68,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           onClick={toggleAccountNotifications}
         >
           <div className="flex gap-3">
-            <PlatformIcon type={account.platform} size={16} />
+            <PlatformIcon type={account.platform} size={Size.MEDIUM} />
             <button
               type="button"
               title="Open Profile"
@@ -85,7 +85,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               title={toggleAccountNotificationsLabel}
               onClick={toggleAccountNotifications}
             >
-              <ChevronIcon size={14} />
+              <ChevronIcon size={Size.SMALL} />
             </button>
           </div>
         </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index e1813cf14..23f7e3651 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,6 +1,7 @@
 import { ArrowLeftIcon } from '@primer/octicons-react';
 import type { FC, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Size } from '../types';
 
 interface IHeader {
   children: ReactNode;
@@ -17,7 +18,7 @@ export const Header: FC<IHeader> = ({ children }: IHeader) => {
         onClick={() => navigate(-1)}
       >
         <ArrowLeftIcon
-          size={20}
+          size={Size.XLARGE}
           className="hover:text-gray-400"
           aria-label="Go Back"
         />
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index dc6e83209..457cb8e5a 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { IconColor } from '../types';
+import { IconColor, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import {
@@ -126,7 +126,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         title={notificationTitle}
       >
         <NotificationIcon
-          size={groupByDate ? 20 : 16}
+          size={groupByDate ? Size.XLARGE : Size.MEDIUM}
           aria-label={notification.subject.type}
         />
       </div>
@@ -144,7 +144,7 @@ export const NotificationRow: FC<INotificationRow> = ({
               <AvatarIcon
                 title={repoSlug}
                 url={repoAvatarUrl}
-                size="medium"
+                size={Size.SMALL}
                 defaultIcon={MarkGithubIcon}
               />
             </span>
@@ -180,13 +180,13 @@ export const NotificationRow: FC<INotificationRow> = ({
               <AvatarIcon
                 title={notification.subject.user.login}
                 url={notification.subject.user.avatar_url}
-                size="small"
+                size={Size.XSMALL}
                 defaultIcon={FeedPersonIcon}
               />
             </button>
           ) : (
             <div>
-              <FeedPersonIcon size={16} className={IconColor.GRAY} />
+              <FeedPersonIcon size={Size.MEDIUM} className={IconColor.GRAY} />
             </div>
           )}
           <div title={reason.description}>{reason.title}</div>
@@ -261,7 +261,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             markNotificationDone(notification);
           }}
         >
-          <CheckIcon size={16} aria-label="Mark as Done" />
+          <CheckIcon size={Size.MEDIUM} aria-label="Mark as Done" />
         </button>
 
         <button
@@ -274,7 +274,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             markNotificationRead(notification);
           }}
         >
-          <ReadIcon size={14} aria-label="Mark as Read" />
+          <ReadIcon size={Size.SMALL} aria-label="Mark as Read" />
         </button>
 
         <button
@@ -283,7 +283,10 @@ export const NotificationRow: FC<INotificationRow> = ({
           title="Unsubscribe from Thread"
           onClick={unsubscribeFromThread}
         >
-          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
+          <BellSlashIcon
+            size={Size.SMALL}
+            aria-label="Unsubscribe from Thread"
+          />
         </button>
       </div>
     </div>
diff --git a/src/components/RepositoryNotifications.tsx b/src/components/RepositoryNotifications.tsx
index 31909999b..ccb95e8f1 100644
--- a/src/components/RepositoryNotifications.tsx
+++ b/src/components/RepositoryNotifications.tsx
@@ -7,6 +7,7 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
+import { Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
@@ -59,7 +60,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           <AvatarIcon
             title={repoName}
             url={avatarUrl}
-            size="medium"
+            size={Size.LARGE}
             defaultIcon={MarkGithubIcon}
           />
           <span
@@ -77,7 +78,10 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title="Mark Repository as Done"
             onClick={markRepoAsDone}
           >
-            <CheckIcon size={16} aria-label="Mark Repository as Done" />
+            <CheckIcon
+              size={Size.MEDIUM}
+              aria-label="Mark Repository as Done"
+            />
           </button>
 
           <button
@@ -86,7 +90,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title="Mark Repository as Read"
             onClick={markRepoAsRead}
           >
-            <ReadIcon size={14} aria-label="Mark Repository as Read" />
+            <ReadIcon size={Size.SMALL} aria-label="Mark Repository as Read" />
           </button>
 
           <button
@@ -95,7 +99,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title={toggleRepositoryNotificationsLabel}
             onClick={toggleRepositoryNotifications}
           >
-            <ChevronIcon size={14} />
+            <ChevronIcon size={Size.SMALL} />
           </button>
         </div>
       </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 7548f79f9..b85c3507a 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -9,6 +9,7 @@ import {
 import { type FC, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
+import { Size } from '../types';
 import { quitApp } from '../utils/comms';
 import {
   openGitHubIssues,
@@ -54,7 +55,7 @@ export const Sidebar: FC = () => {
           onClick={() => openGitifyRepository()}
           data-testid="gitify-logo"
         >
-          <LogoIcon size="small" aria-label="Open Gitify" />
+          <LogoIcon size={Size.SMALL} aria-label="Open Gitify" />
         </button>
 
         <SidebarButton
@@ -83,7 +84,7 @@ export const Sidebar: FC = () => {
             <SidebarButton
               title="Refresh Notifications"
               icon={SyncIcon}
-              size={16}
+              size={Size.MEDIUM}
               loading={status === 'loading'}
               disabled={status === 'loading'}
               onClick={() => refreshNotifications()}
@@ -92,7 +93,7 @@ export const Sidebar: FC = () => {
             <SidebarButton
               title="Settings"
               icon={GearIcon}
-              size={16}
+              size={Size.MEDIUM}
               onClick={() => toggleSettings()}
             />
           </>
@@ -102,7 +103,7 @@ export const Sidebar: FC = () => {
           <SidebarButton
             title="Quit Gitify"
             icon={XCircleIcon}
-            size={16}
+            size={Size.MEDIUM}
             onClick={() => quitApp()}
           />
         )}
diff --git a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 5d08ac19c..a294a63ca 100644
--- a/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         >
           <img
             alt="gitify-app/notifications-test's avatar"
-            class="cursor-pointer rounded-full object-cover size-5"
+            class="cursor-pointer rounded-full object-cover size-6"
             src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
           />
           <span
@@ -106,7 +106,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       >
         <img
           alt="gitify-app/notifications-test's avatar"
-          class="cursor-pointer rounded-full object-cover size-5"
+          class="cursor-pointer rounded-full object-cover size-6"
           src="https://avatars.githubusercontent.com/u/133795385?s=200&v=4"
         />
         <span
diff --git a/src/components/buttons/Button.test.tsx b/src/components/buttons/Button.test.tsx
index 7ed41e700..54b2e3827 100644
--- a/src/components/buttons/Button.test.tsx
+++ b/src/components/buttons/Button.test.tsx
@@ -1,7 +1,7 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { shell } from 'electron';
-import type { Link } from '../../types';
+import { type Link, Size } from '../../types';
 import { Button, type IButton } from './Button';
 
 describe('components/buttons/Button.tsx', () => {
@@ -10,7 +10,7 @@ describe('components/buttons/Button.tsx', () => {
   const props: IButton = {
     name: 'Button',
     label: 'button',
-    size: 16,
+    size: Size.MEDIUM,
   };
 
   beforeEach(() => {
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 84960e1e8..7aaf37353 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import type { Link } from '../../types';
+import { type Link, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openExternalLink } from '../../utils/comms';
 
@@ -9,7 +9,7 @@ export interface IButton {
   label: string;
   className?: string;
   icon?: Icon;
-  size?: number;
+  size?: Size;
   url?: Link;
   onClick?: () => void;
   disabled?: boolean;
@@ -36,7 +36,9 @@ export const Button: FC<IButton> = (props: IButton) => {
         }
       }}
     >
-      {props.icon && <props.icon className="mr-1" size={props.size ?? 14} />}
+      {props.icon && (
+        <props.icon className="mr-1" size={props.size ?? Size.MEDIUM} />
+      )}
       {props.name}
     </button>
   );
diff --git a/src/components/buttons/PillButton.tsx b/src/components/buttons/PillButton.tsx
index cabdddf1e..0c1be3f29 100644
--- a/src/components/buttons/PillButton.tsx
+++ b/src/components/buttons/PillButton.tsx
@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import type { IconColor } from '../../types';
+import { type IconColor, Size } from '../../types';
 
 export interface IPillButton {
   key?: string;
@@ -17,7 +17,11 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
       type="button"
       className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
-      <props.icon size={12} className={props.color} aria-label={props.title} />
+      <props.icon
+        size={Size.XSMALL}
+        className={props.color}
+        aria-label={props.title}
+      />
       {props.metric}
     </button>
   );
diff --git a/src/components/buttons/SidebarButton.test.tsx b/src/components/buttons/SidebarButton.test.tsx
index a5efea9b7..53bb475d1 100644
--- a/src/components/buttons/SidebarButton.test.tsx
+++ b/src/components/buttons/SidebarButton.test.tsx
@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import { type ISidebarButton, SidebarButton } from './SidebarButton';
 
 describe('components/buttons/SidebarButton.tsx', () => {
@@ -22,4 +23,15 @@ describe('components/buttons/SidebarButton.tsx', () => {
     const tree = render(<SidebarButton {...props} />);
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render - medium', () => {
+    const props: ISidebarButton = {
+      title: 'Mock Sidebar Button',
+      metric: 0,
+      icon: MarkGithubIcon,
+      size: Size.MEDIUM,
+    };
+    const tree = render(<SidebarButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx
index 26a216728..ea9c11398 100644
--- a/src/components/buttons/SidebarButton.tsx
+++ b/src/components/buttons/SidebarButton.tsx
@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import { IconColor } from '../../types';
+import { IconColor, Size } from '../../types';
 import { cn } from '../../utils/cn';
 
 export interface ISidebarButton {
@@ -8,7 +8,7 @@ export interface ISidebarButton {
   metric?: number;
   icon: Icon;
   onClick?: () => void;
-  size?: number;
+  size?: Size;
   loading?: boolean;
   disabled?: boolean;
 }
@@ -31,7 +31,7 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
       title={props.title}
       disabled={props.disabled}
     >
-      <props.icon size={props.size ?? 12} aria-label={props.title} />
+      <props.icon size={props.size ?? Size.XSMALL} aria-label={props.title} />
       {hasMetric && props.metric}
     </button>
   );
diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
index 30add36d3..d4318b531 100644
--- a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -1,5 +1,110 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`components/buttons/SidebarButton.tsx should render - medium 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
+        title="Mock Sidebar Button"
+        type="button"
+      >
+        <svg
+          aria-label="Mock Sidebar Button"
+          class="octicon octicon-mark-github"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          role="img"
+          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+          />
+        </svg>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default text-white hover:text-gray-500 py-2"
+      title="Mock Sidebar Button"
+      type="button"
+    >
+      <svg
+        aria-label="Mock Sidebar Button"
+        class="octicon octicon-mark-github"
+        fill="currentColor"
+        focusable="false"
+        height="16"
+        role="img"
+        style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+        viewBox="0 0 16 16"
+        width="16"
+      >
+        <path
+          d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
+        />
+      </svg>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
 exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
 {
   "asFragment": [Function],
diff --git a/src/components/icons/AuthMethodIcon.test.tsx b/src/components/icons/AuthMethodIcon.test.tsx
index 2a72efa94..b1e33b544 100644
--- a/src/components/icons/AuthMethodIcon.test.tsx
+++ b/src/components/icons/AuthMethodIcon.test.tsx
@@ -1,11 +1,12 @@
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import { AuthMethodIcon, type IAuthMethodIcon } from './AuthMethodIcon';
 
 describe('components/icons/AuthMethodIcon.tsx', () => {
   it('should render GitHub App icon', () => {
     const props: IAuthMethodIcon = {
       type: 'GitHub App',
-      size: 16,
+      size: Size.MEDIUM,
     };
     const tree = render(<AuthMethodIcon {...props} />);
     expect(tree).toMatchSnapshot();
@@ -14,7 +15,7 @@ describe('components/icons/AuthMethodIcon.tsx', () => {
   it('should render Personal Access Token icon', () => {
     const props: IAuthMethodIcon = {
       type: 'Personal Access Token',
-      size: 16,
+      size: Size.MEDIUM,
     };
     const tree = render(<AuthMethodIcon {...props} />);
     expect(tree).toMatchSnapshot();
@@ -23,7 +24,7 @@ describe('components/icons/AuthMethodIcon.tsx', () => {
   it('should render OAuth App icon', () => {
     const props: IAuthMethodIcon = {
       type: 'OAuth App',
-      size: 16,
+      size: Size.MEDIUM,
     };
     const tree = render(<AuthMethodIcon {...props} />);
     expect(tree).toMatchSnapshot();
diff --git a/src/components/icons/AuthMethodIcon.tsx b/src/components/icons/AuthMethodIcon.tsx
index bdf7bfdbc..85021bfbf 100644
--- a/src/components/icons/AuthMethodIcon.tsx
+++ b/src/components/icons/AuthMethodIcon.tsx
@@ -1,10 +1,11 @@
 import { AppsIcon, KeyIcon, PersonIcon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import type { Size } from '../../types';
 import type { AuthMethod } from '../../utils/auth/types';
 
 export interface IAuthMethodIcon {
   type: AuthMethod;
-  size: number;
+  size: Size;
 }
 
 export const AuthMethodIcon: FC<IAuthMethodIcon> = (props: IAuthMethodIcon) => {
diff --git a/src/components/icons/AvatarIcon.test.tsx b/src/components/icons/AvatarIcon.test.tsx
index 4bb3c6c31..ff9fad8e3 100644
--- a/src/components/icons/AvatarIcon.test.tsx
+++ b/src/components/icons/AvatarIcon.test.tsx
@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import { AvatarIcon, type IAvatarIcon } from './AvatarIcon';
 
 describe('components/icons/AvatarIcon.tsx', () => {
@@ -8,7 +9,7 @@ describe('components/icons/AvatarIcon.tsx', () => {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
-      size: 'small',
+      size: Size.XSMALL,
     };
     const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
@@ -19,7 +20,18 @@ describe('components/icons/AvatarIcon.tsx', () => {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: 'https://avatars.githubusercontent.com/u/583231?v=4',
-      size: 'medium',
+      size: Size.MEDIUM,
+    };
+    const tree = render(<AvatarIcon {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render medium avatar', () => {
+    const props: IAvatarIcon = {
+      defaultIcon: MarkGithubIcon,
+      title: 'test',
+      url: 'https://avatars.githubusercontent.com/u/583231?v=4',
+      size: Size.XLARGE,
     };
     const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
@@ -30,7 +42,7 @@ describe('components/icons/AvatarIcon.tsx', () => {
       defaultIcon: MarkGithubIcon,
       title: 'test',
       url: null,
-      size: 'small',
+      size: Size.XSMALL,
     };
     const tree = render(<AvatarIcon {...props} />);
     expect(tree).toMatchSnapshot();
diff --git a/src/components/icons/AvatarIcon.tsx b/src/components/icons/AvatarIcon.tsx
index 08881ec76..b867a733f 100644
--- a/src/components/icons/AvatarIcon.tsx
+++ b/src/components/icons/AvatarIcon.tsx
@@ -1,11 +1,12 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import { Size } from '../../types';
 import { cn } from '../../utils/cn';
 
 export interface IAvatarIcon {
   title: string;
   url: string | null;
-  size: 'small' | 'medium';
+  size: Size;
   defaultIcon: Icon;
 }
 
@@ -15,7 +16,11 @@ export const AvatarIcon: FC<IAvatarIcon> = (props: IAvatarIcon) => {
       <img
         className={cn(
           'cursor-pointer rounded-full object-cover',
-          props.size === 'small' ? 'size-4' : 'size-5',
+          props.size === Size.XSMALL
+            ? 'size-4'
+            : props.size === Size.SMALL
+              ? 'size-5'
+              : 'size-6',
         )}
         src={props.url}
         alt={`${props.title}'s avatar`}
@@ -25,7 +30,7 @@ export const AvatarIcon: FC<IAvatarIcon> = (props: IAvatarIcon) => {
 
   return (
     <props.defaultIcon
-      size={props.size === 'small' ? 14 : 18}
+      size={props.size}
       className="text-gray-500 dark:text-gray-300"
     />
   );
diff --git a/src/components/icons/LogoIcon.test.tsx b/src/components/icons/LogoIcon.test.tsx
index aadec63e9..def2a6daa 100644
--- a/src/components/icons/LogoIcon.test.tsx
+++ b/src/components/icons/LogoIcon.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import { Size } from '../../types';
 import { LogoIcon } from './LogoIcon';
 
 describe('components/icons/LogoIcon.tsx', () => {
@@ -16,7 +17,7 @@ describe('components/icons/LogoIcon.tsx', () => {
 
   it('should click on the logo', () => {
     const onClick = jest.fn();
-    render(<LogoIcon onClick={onClick} size="small" />);
+    render(<LogoIcon onClick={onClick} size={Size.XSMALL} />);
 
     fireEvent.click(screen.getByLabelText('Gitify Logo'));
 
@@ -24,7 +25,7 @@ describe('components/icons/LogoIcon.tsx', () => {
   });
 
   it('should render a different size', () => {
-    const tree = render(<LogoIcon size="large" />);
+    const tree = render(<LogoIcon size={Size.XLARGE} />);
 
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/icons/LogoIcon.tsx b/src/components/icons/LogoIcon.tsx
index c5d0bb7ce..3459e02c1 100644
--- a/src/components/icons/LogoIcon.tsx
+++ b/src/components/icons/LogoIcon.tsx
@@ -1,10 +1,11 @@
 import type { FC } from 'react';
+import { Size } from '../../types';
 import { cn } from '../../utils/cn';
 
 interface ILogoIcon {
   isDark?: boolean;
   onClick?: () => void;
-  size?: 'small' | 'medium' | 'large';
+  size?: Size;
 }
 
 const LIGHT_GRADIENT_START = '#CCCCCC';
@@ -16,12 +17,16 @@ const DARK_GRADIENT_END = '#555B6E';
 export const LogoIcon: FC<ILogoIcon> = ({
   isDark,
   onClick,
-  size = 'medium',
+  size = Size.MEDIUM,
   ...props
 }: ILogoIcon) => (
   <svg
     className={cn(
-      size === 'small' ? 'size-5' : size === 'medium' ? 'size-10' : 'size-16',
+      size === Size.SMALL
+        ? 'size-5'
+        : size === Size.MEDIUM
+          ? 'size-10'
+          : 'size-16',
     )}
     onClick={() => onClick?.()}
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/icons/PlatformIcon.test.tsx b/src/components/icons/PlatformIcon.test.tsx
index 67226fcd5..d1c946fcc 100644
--- a/src/components/icons/PlatformIcon.test.tsx
+++ b/src/components/icons/PlatformIcon.test.tsx
@@ -1,11 +1,12 @@
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import { type IPlatformIcon, PlatformIcon } from './PlatformIcon';
 
 describe('components/icons/PlatformIcon.tsx', () => {
   it('should render GitHub Cloud icon', () => {
     const props: IPlatformIcon = {
       type: 'GitHub Cloud',
-      size: 16,
+      size: Size.MEDIUM,
     };
     const tree = render(<PlatformIcon {...props} />);
     expect(tree).toMatchSnapshot();
@@ -14,7 +15,7 @@ describe('components/icons/PlatformIcon.tsx', () => {
   it('should render GitHub Enterprise Service icon', () => {
     const props: IPlatformIcon = {
       type: 'GitHub Enterprise Server',
-      size: 16,
+      size: Size.MEDIUM,
     };
     const tree = render(<PlatformIcon {...props} />);
     expect(tree).toMatchSnapshot();
diff --git a/src/components/icons/PlatformIcon.tsx b/src/components/icons/PlatformIcon.tsx
index 0ab949220..3fb341045 100644
--- a/src/components/icons/PlatformIcon.tsx
+++ b/src/components/icons/PlatformIcon.tsx
@@ -1,10 +1,11 @@
 import { MarkGithubIcon, ServerIcon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import type { Size } from '../../types';
 import type { PlatformType } from '../../utils/auth/types';
 
 export interface IPlatformIcon {
   type: PlatformType;
-  size: number;
+  size: Size;
 }
 
 export const PlatformIcon: FC<IPlatformIcon> = (props: IPlatformIcon) => {
diff --git a/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap b/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
index 61358d069..f455c2b5c 100644
--- a/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
+++ b/src/components/icons/__snapshots__/AvatarIcon.test.tsx.snap
@@ -10,10 +10,10 @@ exports[`components/icons/AvatarIcon.tsx should render default icon when no url
         class="text-gray-500 dark:text-gray-300"
         fill="currentColor"
         focusable="false"
-        height="14"
+        height="12"
         style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
         viewBox="0 0 16 16"
-        width="14"
+        width="12"
       >
         <path
           d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
@@ -27,10 +27,10 @@ exports[`components/icons/AvatarIcon.tsx should render default icon when no url
       class="text-gray-500 dark:text-gray-300"
       fill="currentColor"
       focusable="false"
-      height="14"
+      height="12"
       style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
       viewBox="0 0 16 16"
-      width="14"
+      width="12"
     >
       <path
         d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
@@ -98,7 +98,7 @@ exports[`components/icons/AvatarIcon.tsx should render medium avatar 1`] = `
     <div>
       <img
         alt="test's avatar"
-        class="cursor-pointer rounded-full object-cover size-5"
+        class="cursor-pointer rounded-full object-cover size-6"
         src="https://avatars.githubusercontent.com/u/583231?v=4"
       />
     </div>
@@ -106,7 +106,80 @@ exports[`components/icons/AvatarIcon.tsx should render medium avatar 1`] = `
   "container": <div>
     <img
       alt="test's avatar"
-      class="cursor-pointer rounded-full object-cover size-5"
+      class="cursor-pointer rounded-full object-cover size-6"
+      src="https://avatars.githubusercontent.com/u/583231?v=4"
+    />
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/icons/AvatarIcon.tsx should render medium avatar 2`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <img
+        alt="test's avatar"
+        class="cursor-pointer rounded-full object-cover size-6"
+        src="https://avatars.githubusercontent.com/u/583231?v=4"
+      />
+    </div>
+  </body>,
+  "container": <div>
+    <img
+      alt="test's avatar"
+      class="cursor-pointer rounded-full object-cover size-6"
       src="https://avatars.githubusercontent.com/u/583231?v=4"
     />
   </div>,
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 1d7572e2f..41a859ffa 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -12,7 +12,7 @@ import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
 import { PlatformIcon } from '../components/icons/PlatformIcon';
 import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
-import type { Account } from '../types';
+import { type Account, Size } from '../types';
 import { getAccountUUID } from '../utils/auth/utils';
 import { updateTrayIcon, updateTrayTitle } from '../utils/comms';
 import {
@@ -77,7 +77,7 @@ export const AccountsRoute: FC = () => {
                     title="Open Host"
                     onClick={() => openHost(account.hostname)}
                   >
-                    <PlatformIcon type={account.platform} size={12} />
+                    <PlatformIcon type={account.platform} size={Size.XSMALL} />
                     {account.platform} - {account.hostname}
                   </button>
                 </div>
@@ -88,7 +88,7 @@ export const AccountsRoute: FC = () => {
                     title="Open Developer Settings"
                     onClick={() => openDeveloperSettings(account)}
                   >
-                    <AuthMethodIcon type={account.method} size={12} />
+                    <AuthMethodIcon type={account.method} size={Size.XSMALL} />
                     {account.method}
                   </button>
                 </div>
@@ -101,7 +101,7 @@ export const AccountsRoute: FC = () => {
                   onClick={() => logoutAccount(account)}
                 >
                   <SignOutIcon
-                    size={20}
+                    size={Size.XLARGE}
                     aria-label={`Logout ${account.user.login}`}
                   />
                 </button>
@@ -120,8 +120,11 @@ export const AccountsRoute: FC = () => {
             title="Login with Personal Access Token"
             onClick={loginWithPersonalAccessToken}
           >
-            <KeyIcon size={18} aria-label="Login with Personal Access Token" />
-            <PlusIcon size={10} className="mb-2 ml-1" />
+            <KeyIcon
+              size={Size.LARGE}
+              aria-label="Login with Personal Access Token"
+            />
+            <PlusIcon size={Size.SMALL} className="mb-2 ml-1" />
           </button>
           <button
             type="button"
@@ -129,8 +132,8 @@ export const AccountsRoute: FC = () => {
             title="Login with OAuth App"
             onClick={loginWithOAuthApp}
           >
-            <PersonIcon size={20} aria-label="Login with OAuth App" />
-            <PlusIcon size={10} className="mb-2" />
+            <PersonIcon size={Size.XLARGE} aria-label="Login with OAuth App" />
+            <PlusIcon size={Size.SMALL} className="mb-2" />
           </button>
         </div>
       </div>
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 41e29528c..e6a843f74 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { Button } from '../components/buttons/Button';
 import { LogoIcon } from '../components/icons/LogoIcon';
 import { AppContext } from '../context/App';
+import { Size } from '../types';
 import { showWindow } from '../utils/comms';
 
 export const LoginRoute: FC = () => {
@@ -28,7 +29,7 @@ export const LoginRoute: FC = () => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
-      <LogoIcon size="large" isDark />
+      <LogoIcon size={Size.XLARGE} isDark />
 
       <div className="my-4 px-2.5 py-1.5 text-center font-semibold">
         GitHub Notifications <br /> on your menu bar.
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index 21fe6ac1b..5838e6a89 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -5,7 +5,13 @@ import { Header } from '../components/Header';
 import { Button } from '../components/buttons/Button';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
-import type { ClientID, ClientSecret, Hostname, Token } from '../types';
+import {
+  type ClientID,
+  type ClientSecret,
+  type Hostname,
+  Size,
+  type Token,
+} from '../types';
 import type { LoginOAuthAppOptions } from '../utils/auth/types';
 import {
   getNewOAuthAppURL,
@@ -70,7 +76,7 @@ export const LoginWithOAuthApp: FC = () => {
                 label="Create new OAuth App"
                 disabled={!values.hostname}
                 icon={PersonIcon}
-                size={12}
+                size={Size.XSMALL}
                 url={getNewOAuthAppURL(values.hostname)}
               />
               <span className="mx-1">on GitHub then paste your</span>
@@ -93,7 +99,7 @@ export const LoginWithOAuthApp: FC = () => {
             label="GitHub Docs"
             className="mt-2"
             icon={BookIcon}
-            size={12}
+            size={Size.XSMALL}
             url={Constants.GITHUB_DOCS.OAUTH_URL}
           />
 
@@ -102,7 +108,7 @@ export const LoginWithOAuthApp: FC = () => {
             label="Login"
             className="mt-2 px-4 py-2 !text-sm"
             icon={SignInIcon}
-            size={16}
+            size={Size.MEDIUM}
             disabled={submitting || pristine}
             type="submit"
           />
@@ -125,7 +131,7 @@ export const LoginWithOAuthApp: FC = () => {
   return (
     <div>
       <Header>
-        <PersonIcon size={20} className="mr-2" />
+        <PersonIcon size={Size.XLARGE} className="mr-2" />
         Login with OAuth App
       </Header>
       <div className="px-8">
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index dfe7a8026..21faaeb37 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -6,7 +6,7 @@ import { Header } from '../components/Header';
 import { Button } from '../components/buttons/Button';
 import { FieldInput } from '../components/fields/FieldInput';
 import { AppContext } from '../context/App';
-import type { Hostname, Token } from '../types';
+import { type Hostname, Size, type Token } from '../types';
 import type { LoginPersonalAccessTokenOptions } from '../utils/auth/types';
 import {
   getNewTokenURL,
@@ -76,7 +76,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
                   label="Generate a PAT"
                   disabled={!values.hostname}
                   icon={KeyIcon}
-                  size={12}
+                  size={Size.XSMALL}
                   url={getNewTokenURL(values.hostname)}
                 />
                 <span className="mx-1">on GitHub and paste above.</span>
@@ -100,7 +100,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
             label="GitHub Docs"
             className="mt-2"
             icon={BookIcon}
-            size={12}
+            size={Size.XSMALL}
             url={Constants.GITHUB_DOCS.PAT_URL}
           />
           <Button
@@ -108,7 +108,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
             label="Login"
             className="mt-2 px-4 py-2 !text-sm"
             icon={SignInIcon}
-            size={16}
+            size={Size.MEDIUM}
             disabled={submitting || pristine}
             type="submit"
           />
@@ -135,7 +135,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
   return (
     <div>
       <Header>
-        <KeyIcon size={18} className="mr-2" />
+        <KeyIcon size={Size.LARGE} className="mr-2" />
         Login with Personal Access Token
       </Header>
 
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 71439b57e..5e6077605 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -21,7 +21,7 @@ import { Checkbox } from '../components/fields/Checkbox';
 import { RadioGroup } from '../components/fields/RadioGroup';
 import { AppContext } from '../context/App';
 import { BUTTON_CLASS_NAME } from '../styles/gitify';
-import { GroupBy, Theme } from '../types';
+import { GroupBy, Size, Theme } from '../types';
 import { getAppVersion, quitApp } from '../utils/comms';
 import Constants from '../utils/constants';
 import {
@@ -107,23 +107,24 @@ export const SettingsRoute: FC = () => {
                 <div className="pl-6">
                   <ul className="list-disc">
                     <li>
-                      <IssueClosedIcon size={16} className="pr-1" />
+                      <IssueClosedIcon size={Size.MEDIUM} className="pr-1" />
                       linked issues
                     </li>
                     <li>
-                      <CheckIcon size={16} className="pr-1" /> pr reviews
+                      <CheckIcon size={Size.MEDIUM} className="pr-1" /> pr
+                      reviews
                     </li>
                     <li>
-                      <CommentIcon size={16} className="pr-1" />
+                      <CommentIcon size={Size.MEDIUM} className="pr-1" />
                       comments
                     </li>
 
                     <li>
-                      <TagIcon size={16} className="pr-1" />
+                      <TagIcon size={Size.MEDIUM} className="pr-1" />
                       labels
                     </li>
                     <li>
-                      <MilestoneIcon size={16} className="pr-1" />
+                      <MilestoneIcon size={Size.MEDIUM} className="pr-1" />
                       milestones
                     </li>
                   </ul>
@@ -309,7 +310,7 @@ export const SettingsRoute: FC = () => {
               navigate('/accounts');
             }}
           >
-            <PersonIcon size={18} aria-label="Accounts" />
+            <PersonIcon size={Size.LARGE} aria-label="Accounts" />
           </button>
 
           <button
@@ -318,7 +319,7 @@ export const SettingsRoute: FC = () => {
             title="Quit Gitify"
             onClick={quitApp}
           >
-            <XCircleIcon size={18} aria-label="Quit Gitify" />
+            <XCircleIcon size={Size.LARGE} aria-label="Quit Gitify" />
           </button>
         </div>
       </div>
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index ed3bb523c..30e6212d1 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -392,10 +392,10 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           class="mb-2 ml-1"
           fill="currentColor"
           focusable="false"
-          height="10"
+          height="14"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="10"
+          width="14"
         >
           <path
             d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
@@ -427,10 +427,10 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
           class="mb-2"
           fill="currentColor"
           focusable="false"
-          height="10"
+          height="14"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="10"
+          width="14"
         >
           <path
             d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2Z"
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 2b82523bd..16c86b809 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -75,10 +75,10 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
             class="mr-1"
             fill="currentColor"
             focusable="false"
-            height="14"
+            height="16"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="14"
+            width="16"
           >
             <path
               d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
@@ -97,10 +97,10 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
             class="mr-1"
             fill="currentColor"
             focusable="false"
-            height="14"
+            height="16"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
             viewBox="0 0 16 16"
-            width="14"
+            width="16"
           >
             <path
               d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
@@ -182,10 +182,10 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
           class="mr-1"
           fill="currentColor"
           focusable="false"
-          height="14"
+          height="16"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="14"
+          width="16"
         >
           <path
             d="M10.5 0a5.499 5.499 0 1 1-1.288 10.848l-.932.932a.749.749 0 0 1-.53.22H7v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22H5v.75a.749.749 0 0 1-.22.53l-.5.5a.749.749 0 0 1-.53.22h-2A1.75 1.75 0 0 1 0 14.25v-2c0-.199.079-.389.22-.53l4.932-4.932A5.5 5.5 0 0 1 10.5 0Zm-4 5.5c-.001.431.069.86.205 1.269a.75.75 0 0 1-.181.768L1.5 12.56v1.69c0 .138.112.25.25.25h1.69l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l.06-.06v-1.19a.75.75 0 0 1 .75-.75h1.19l1.023-1.025a.75.75 0 0 1 .768-.18A4 4 0 1 0 6.5 5.5ZM11 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
@@ -204,10 +204,10 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
           class="mr-1"
           fill="currentColor"
           focusable="false"
-          height="14"
+          height="16"
           style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
           viewBox="0 0 16 16"
-          width="14"
+          width="16"
         >
           <path
             d="M10.561 8.073a6.005 6.005 0 0 1 3.432 5.142.75.75 0 1 1-1.498.07 4.5 4.5 0 0 0-8.99 0 .75.75 0 0 1-1.498-.07 6.004 6.004 0 0 1 3.431-5.142 3.999 3.999 0 1 1 5.123 0ZM10.5 5a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"
diff --git a/src/types.ts b/src/types.ts
index 71bd888a9..1dacf4fee 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -142,3 +142,11 @@ export type PullRequestApprovalIcon = {
   color: IconColor;
   description: string;
 };
+
+export enum Size {
+  XSMALL = 12,
+  SMALL = 14,
+  MEDIUM = 16,
+  LARGE = 18,
+  XLARGE = 20,
+}