diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..cf134e99
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,6 @@
+{
+    "eslint.workingDirectories": [
+        "./apps/ui", 
+        "./apps/platform"
+    ]
+}
\ No newline at end of file
diff --git a/apps/ui/package.json b/apps/ui/package.json
index ad585f89..bc36e822 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -19,7 +19,6 @@
     "@types/uuid": "^9.0.0",
     "autoprefixer": "^10.4.12",
     "axios": "0.27.2",
-    "bootstrap-icons": "1.10.3",
     "clsx": "^1.2.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^1.3.7",
diff --git a/apps/ui/src/ui/Button.css b/apps/ui/src/ui/Button.css
index e08002d4..2e051b31 100644
--- a/apps/ui/src/ui/Button.css
+++ b/apps/ui/src/ui/Button.css
@@ -1,5 +1,5 @@
 .ui-button {
-    display: inline-block;
+    display: inline-flex;
     border: 1px solid transparent;
     background: transparent;
     border-radius: var(--border-radius);
@@ -14,14 +14,21 @@
     transition: .2s;
     text-decoration: none;
     position: relative;
+    align-items: center;
+    gap: 5px;
 }
 
-.ui-button i {
-    margin-right: 5px;
-    margin-left: -1px;
+.ui-button .button-icon,
+.ui-button .button-icon svg {
+    width: 16px;
+    height: 16px;
 }
 
-.ui-button.ui-button-no-children i {
+.ui-button .button-icon {
+    margin-left: -2px;
+}
+
+.ui-button.ui-button-no-children .button-icon {
     margin: 0;
 }
 
diff --git a/apps/ui/src/ui/Button.tsx b/apps/ui/src/ui/Button.tsx
index 1cc4483e..fcfbd514 100644
--- a/apps/ui/src/ui/Button.tsx
+++ b/apps/ui/src/ui/Button.tsx
@@ -10,7 +10,7 @@ type BaseButtonProps = PropsWithChildren<{
     children?: React.ReactNode
     variant?: ButtonVariant
     size?: ButtonSize
-    icon?: string
+    icon?: React.ReactNode
     isLoading?: boolean
 }> & JSX.IntrinsicElements['button']
 
@@ -28,7 +28,7 @@ const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: R
         <Link to={props.to} className={
             `ui-button ${props.variant ?? 'primary'} ${props.size ?? 'regular'}`
         } ref={ref}>
-            {props.icon != null && <i className={`bi bi-${props.icon}`} /> }
+            {props.icon && (<span className="button-icon">{props.icon}</span>)}
             {props.children}
         </Link>
     )
@@ -61,7 +61,7 @@ const Button = forwardRef(function Button(props: ButtonProps, ref: Ref<HTMLButto
             ref={ref}
             disabled={disabled ?? isLoading}
         >
-            {icon != null && <i className={`bi bi-${icon}`} /> }
+            {icon && (<span className="button-icon">{icon}</span>)}
             {children}
         </button>
     )
diff --git a/apps/ui/src/ui/Menu.css b/apps/ui/src/ui/Menu.css
index 1c8231c6..6b4f34da 100644
--- a/apps/ui/src/ui/Menu.css
+++ b/apps/ui/src/ui/Menu.css
@@ -5,12 +5,13 @@
     box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
     z-index: 999;
     min-width: 150px;
-    padding: 5px 0;
+    padding: 3px 0;
+    font-size: 13px;
+    overflow: hidden;
 }
 
 .ui-menu-item {
-    padding: 10px;
-    border-bottom: 1px solid var(--color-grey);
+    padding: 7px 10px;
     display: flex;
     gap: 5px;
     align-items: center;
@@ -25,7 +26,8 @@
 }
 
 .ui-menu-item svg {
-    width: 16px;
-    height: 16px;
+    width: 14px;
+    height: 14px;
     margin-top: -1px;
+    margin-right: 5px;
 }
\ No newline at end of file
diff --git a/apps/ui/src/ui/Menu.tsx b/apps/ui/src/ui/Menu.tsx
index fcad53db..32231a20 100644
--- a/apps/ui/src/ui/Menu.tsx
+++ b/apps/ui/src/ui/Menu.tsx
@@ -4,6 +4,7 @@ import { usePopper } from 'react-popper'
 import Button, { ButtonSize, ButtonVariant } from './Button'
 import './Menu.css'
 import { Placement } from '@popperjs/core'
+import { ThreeDotsIcon } from './icons'
 
 interface MenuProps {
     thing?: string
@@ -40,7 +41,7 @@ export default function Menu({ children, variant, size, placement }: PropsWithCh
                 ref={setReferenceElement}
                 variant={variant ?? 'plain'}
                 size={size}
-                icon="three-dots"></Popover.Button>
+                icon={<ThreeDotsIcon />}></Popover.Button>
 
             <Popover.Panel
                 ref={setPopperElement}
diff --git a/apps/ui/src/ui/Modal.tsx b/apps/ui/src/ui/Modal.tsx
index 19761aba..b535646c 100644
--- a/apps/ui/src/ui/Modal.tsx
+++ b/apps/ui/src/ui/Modal.tsx
@@ -1,6 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, PropsWithChildren, ReactNode } from 'react'
 import Button from './Button'
+import { CloseIcon } from './icons'
 import './Modal.css'
 
 export interface ModalStateProps {
@@ -55,7 +56,7 @@ export default function Modal({
                                         <Button
                                             variant="secondary"
                                             onClick={() => onClose(false)}
-                                            icon="x-lg"
+                                            icon={<CloseIcon />}
                                         >
                                             {'Exit'}
                                         </Button>
diff --git a/apps/ui/src/ui/NavLink.tsx b/apps/ui/src/ui/NavLink.tsx
index 4bbc8680..0323316e 100644
--- a/apps/ui/src/ui/NavLink.tsx
+++ b/apps/ui/src/ui/NavLink.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { NavLink as BaseNavLink, NavLinkProps as BaseNavLinkProps } from 'react-router-dom'
 
-export type NavLinkProps = BaseNavLinkProps & { key: string, icon?: string }
+export type NavLinkProps = BaseNavLinkProps & { key: string, icon?: React.ReactNode }
 
 const NavLink = React.forwardRef(
-    function NavLink({ ...props }: NavLinkProps, ref: React.Ref<HTMLAnchorElement> | undefined) {
+    function NavLink({ icon, ...props }: NavLinkProps, ref: React.Ref<HTMLAnchorElement> | undefined) {
         return (
             <BaseNavLink
                 ref={ref}
@@ -19,7 +19,7 @@ const NavLink = React.forwardRef(
                 }
             >
                 <>
-                    {props.icon && <i className={`bi ${props.icon}`} />}
+                    {icon && (<div className="nav-icon">{icon}</div>)}
                     &nbsp;
                     {props.children}
                 </>
diff --git a/apps/ui/src/ui/Pagination.css b/apps/ui/src/ui/Pagination.css
index 88772dda..5ad2b9ca 100644
--- a/apps/ui/src/ui/Pagination.css
+++ b/apps/ui/src/ui/Pagination.css
@@ -17,6 +17,7 @@
 .ui-pagination .pagination-button {
     background: var(--color-background);
     font-size: 16px;
+    line-height: 15px;
     cursor: pointer;
     text-decoration: none;
     color: var(--color-primary);
@@ -29,7 +30,7 @@
 
 .ui-pagination .pagination-button:disabled {
     color: var(--color-primary-soft);
-    cursor: auto;
+    cursor: not-allowed;
 }
 
 .ui-pagination .pagination-button:disabled:hover {
@@ -41,13 +42,22 @@
     font-weight: 500;
 }
 
-.ui-pagination .prev i {
-    margin-right: 5px;
+.ui-pagination .prev,
+.ui-pagination .next {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.ui-pagination .prev svg,
+.ui-pagination .next svg {
+    width: 16px;
 }
 
 .ui-pagination .next {
     border-right-width: 0px;
 }
-.ui-pagination .next i {
-    margin-left: 5px;
+
+.ui-pagination .next svg {
+    width: 16px;
 }
diff --git a/apps/ui/src/ui/Pagination.tsx b/apps/ui/src/ui/Pagination.tsx
index 97a23e54..5c9c2be3 100644
--- a/apps/ui/src/ui/Pagination.tsx
+++ b/apps/ui/src/ui/Pagination.tsx
@@ -1,3 +1,4 @@
+import { ChevronLeftIcon, ChevronRightIcon } from './icons'
 import './Pagination.css'
 
 interface PaginationProps {
@@ -81,7 +82,7 @@ export default function Pagination({
             <button className="pagination-button prev"
                 disabled={page <= 0}
                 onClick={() => onChangePage(page - 1)}>
-                <i className="bi bi-arrow-left"></i>
+                <ChevronLeftIcon />
                 Previous
             </button>
             {
@@ -95,7 +96,7 @@ export default function Pagination({
                 disabled={(page + 1) >= total}
                 onClick={() => onChangePage(page + 1)}>
                 Next
-                <i className="bi bi-arrow-right"></i>
+                <ChevronRightIcon />
             </button>
         </div>
     )
diff --git a/apps/ui/src/ui/Sidebar.css b/apps/ui/src/ui/Sidebar.css
index e8557f79..6578de09 100644
--- a/apps/ui/src/ui/Sidebar.css
+++ b/apps/ui/src/ui/Sidebar.css
@@ -59,7 +59,7 @@ nav {
 }
 
 nav a {
-    display: block;
+    display: flex;
     padding: 15px;
     text-decoration: none;
     color: var(--color-primary);
@@ -67,6 +67,8 @@ nav a {
     font-size: 15px;
     font-weight: 500;
     margin-bottom: 5px;
+    align-items: center;
+    gap: 5px;
 }
 
 nav a:hover {
@@ -79,8 +81,10 @@ nav a.selected {
     background: var(--color-primary);
 }
 
-nav a i {
-    margin-right: 5px;
+nav a .nav-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
 }
 
 .sidebar-profile {
diff --git a/apps/ui/src/ui/Sidebar.tsx b/apps/ui/src/ui/Sidebar.tsx
index 44546db9..9b41b2c3 100644
--- a/apps/ui/src/ui/Sidebar.tsx
+++ b/apps/ui/src/ui/Sidebar.tsx
@@ -2,7 +2,7 @@ import './Sidebar.css'
 import NavLink from './NavLink'
 import { ReactComponent as Logo } from '../assets/logo.svg'
 import { Link, NavLinkProps, useNavigate } from 'react-router-dom'
-import { PropsWithChildren, useContext } from 'react'
+import { PropsWithChildren, ReactNode, useContext } from 'react'
 import { AdminContext, ProjectContext } from '../contexts'
 import api from '../api'
 import { PreferencesContext } from './PreferencesContext'
@@ -10,9 +10,10 @@ import { useResolver } from '../hooks'
 import { SingleSelect } from './form/SingleSelect'
 import Button, { LinkButton } from './Button'
 import ButtonGroup from './ButtonGroup'
+import { MoonIcon, PlusIcon, SunIcon } from './icons'
 
 interface SidebarProps {
-    links?: Array<NavLinkProps & { key: string, icon: string }>
+    links?: Array<NavLinkProps & { key: string, icon: ReactNode }>
 }
 
 export default function Sidebar({ children, links }: PropsWithChildren<SidebarProps>) {
@@ -51,7 +52,7 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
                                 textAlign: 'center',
                             }}
                         >
-                            <LinkButton size="small" variant="primary" to="/projects/new" icon="plus">
+                            <LinkButton size="small" variant="primary" to="/projects/new" icon={<PlusIcon />}>
                                 {'Create Project'}
                             </LinkButton>
                         </div>
@@ -74,7 +75,7 @@ export default function Sidebar({ children, links }: PropsWithChildren<SidebarPr
                                     <Button
                                         variant="plain"
                                         size="small"
-                                        icon={preferences.mode === 'dark' ? 'moon' : 'sun'}
+                                        icon={preferences.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
                                         onClick={() => setPreferences({ ...preferences, mode: preferences.mode === 'dark' ? 'light' : 'dark' })}
                                     />
                                     <Button
diff --git a/apps/ui/src/ui/icons.tsx b/apps/ui/src/ui/icons.tsx
index 2b5db626..fec71ad7 100644
--- a/apps/ui/src/ui/icons.tsx
+++ b/apps/ui/src/ui/icons.tsx
@@ -1,31 +1,110 @@
-export { default as ChevronLeftIcon } from '@heroicons/react/24/solid/ChevronLeftIcon'
-export { default as ChevronRightIcon } from '@heroicons/react/24/solid/ChevronRightIcon'
-export { default as ChevronUpDownIcon } from '@heroicons/react/24/outline/ChevronUpDownIcon'
-export { default as CheckIcon } from '@heroicons/react/24/outline/CheckIcon'
-export { default as UserCircle } from '@heroicons/react/24/outline/UserCircleIcon'
+export const ChevronLeftIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+</svg>
 
-export const DuplicateIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const ChevronRightIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+</svg>
+
+export const ChevronUpDownIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
+</svg>
+
+export const CheckIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+</svg>
+
+export const UserCircle = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
+
+export const PlusIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+</svg>
+
+export const ThreeDotsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+</svg>
+
+export const DuplicateIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" />
 </svg>
 
-export const EditIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const EditIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
 </svg>
 
-export const ArchiveIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const ArchiveIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
 </svg>
 
-export const EmailIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const TrashIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+</svg>
+
+export const EmailIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
 </svg>
 
-export const TextIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const TextIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
 </svg>
 
-export const PushIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+export const PushIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
     <path strokeLinecap="round" strokeLinejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
 </svg>
 
 export const WebhookIcon = () => <svg height="24" viewBox="0 0 32 32" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m16 3c-3.855469 0-7 3.144531-7 7 0 2.09375 1.035156 3.871094 2.5 5.15625l-2.09375 3.875c-.136719-.019531-.265625-.03125-.40625-.03125-1.644531 0-3 1.355469-3 3s1.355469 3 3 3 3-1.355469 3-3c0-.796875-.328125-1.523437-.84375-2.0625l2.84375-5.28125-.75-.5c-1.347656-.894531-2.25-2.410156-2.25-4.15625 0-2.773437 2.226563-5 5-5 2.773438 0 5 2.226563 5 5 0 .585938-.097656 1.136719-.28125 1.65625l1.875.6875c.261719-.730469.40625-1.527344.40625-2.34375 0-3.855469-3.144531-7-7-7zm0 4c-1.644531 0-3 1.355469-3 3s1.355469 3 3 3c.140625 0 .269531-.011719.40625-.03125l2.75 4.375.5.8125.84375-.5c.734375-.425781 1.585938-.65625 2.5-.65625 2.773438 0 5 2.226563 5 5 0 2.773438-2.226562 5-5 5-1.488281 0-2.804687-.632812-3.71875-1.65625l-1.5 1.3125c1.28125 1.429688 3.152344 2.34375 5.21875 2.34375 3.855469 0 7-3.144531 7-7s-3.144531-7-7-7c-.921875 0-1.722656.363281-2.53125.6875l-2.28125-3.65625c.5-.535156.8125-1.25.8125-2.03125 0-1.644531-1.355469-3-3-3zm0 2c.5625 0 1 .4375 1 1s-.4375 1-1 1-1-.4375-1-1 .4375-1 1-1zm-8.15625 6.09375c-.800781.136719-1.601562.414063-2.34375.84375-3.335937 1.925781-4.488281 6.226563-2.5625 9.5625 1.925781 3.335938 6.222656 4.488281 9.5625 2.5625 1.910156-1.105469 2.941406-3.03125 3.25-5.0625h4.4375c.417969 1.15625 1.519531 2 2.8125 2 1.644531 0 3-1.355469 3-3s-1.355469-3-3-3c-1.292969 0-2.394531.84375-2.8125 2h-6.1875v1c0 1.726563-.890625 3.414063-2.5 4.34375-2.402344 1.386719-5.457031.558594-6.84375-1.84375s-.558594-5.457031 1.84375-6.84375c.53125-.308594 1.085938-.496094 1.65625-.59375zm1.15625 5.90625c.5625 0 1 .4375 1 1s-.4375 1-1 1-1-.4375-1-1 .4375-1 1-1zm14 0c.5625 0 1 .4375 1 1s-.4375 1-1 1-1-.4375-1-1 .4375-1 1-1z"/></svg>
+
+export const UsersIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+</svg>
+
+export const CampaignsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
+</svg>
+
+export const JourneysIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+    <path fillRule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H11a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 5 7h2.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM3 11.5A1.5 1.5 0 0 1 4.5 10h1A1.5 1.5 0 0 1 7 11.5v1A1.5 1.5 0 0 1 5.5 14h-1A1.5 1.5 0 0 1 3 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1A1.5 1.5 0 0 1 9 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
+</svg>
+
+export const ListsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>
+
+export const SettingsIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+</svg>
+
+export const MoonIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+</svg>
+
+export const SunIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
+</svg>
+
+export const SendIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
+</svg>
+
+export const RestartIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
+</svg>
+
+export const ForbiddenIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
+</svg>
+
+export const CloseIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+</svg>
+
+export const UploadIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+</svg>
+
+export const ImageIcon = () => <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>
diff --git a/apps/ui/src/variables.css b/apps/ui/src/variables.css
index a0740ec0..54907a29 100644
--- a/apps/ui/src/variables.css
+++ b/apps/ui/src/variables.css
@@ -44,7 +44,7 @@
     --color-grey-soft: #252b3a;
 
     --color-primary: var(--color-white);
-    --color-primary-soft: #e8ebed;
+    --color-primary-soft: #919496;
 
     --color-background: var(--color-black);
     --color-background-soft: #1a1f2b;
diff --git a/apps/ui/src/views/campaign/CampaignDetail.tsx b/apps/ui/src/views/campaign/CampaignDetail.tsx
index 4b22d6d6..1eea5f2b 100644
--- a/apps/ui/src/views/campaign/CampaignDetail.tsx
+++ b/apps/ui/src/views/campaign/CampaignDetail.tsx
@@ -10,6 +10,7 @@ import { Campaign, Template } from '../../types'
 import api from '../../api'
 import { CampaignTag } from './Campaigns'
 import LaunchCampaign from './LaunchCampaign'
+import { ForbiddenIcon, RestartIcon, SendIcon } from '../../ui/icons'
 
 export const locales = (templates: Template[]) => templates?.map(item => {
     const language = languageName(item.locale)
@@ -74,10 +75,10 @@ export default function CampaignDetail() {
     ]
 
     const action = {
-        draft: <Button icon="send" onClick={() => setIsLaunchOpen(true)}>Launch Campaign</Button>,
-        aborted: <Button icon="send" onClick={() => setIsLaunchOpen(true)}>Restart Campaign</Button>,
-        scheduled: <Button icon="send" onClick={() => setIsLaunchOpen(true)}>Change Schedule</Button>,
-        running: <Button icon="send" onClick={() => setIsLaunchOpen(true)}>Abort Campaign</Button>,
+        draft: <Button icon={<SendIcon />} onClick={() => setIsLaunchOpen(true)}>Launch Campaign</Button>,
+        aborted: <Button icon={<RestartIcon />} onClick={() => setIsLaunchOpen(true)}>Restart Campaign</Button>,
+        scheduled: <Button icon={<SendIcon />} onClick={() => setIsLaunchOpen(true)}>Change Schedule</Button>,
+        running: <Button icon={<ForbiddenIcon />} onClick={() => setIsLaunchOpen(true)}>Abort Campaign</Button>,
         finished: <></>,
     }
 
diff --git a/apps/ui/src/views/campaign/Campaigns.tsx b/apps/ui/src/views/campaign/Campaigns.tsx
index 39b8ddb9..7c5a5be4 100644
--- a/apps/ui/src/views/campaign/Campaigns.tsx
+++ b/apps/ui/src/views/campaign/Campaigns.tsx
@@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router'
 import api from '../../api'
 import { CampaignState } from '../../types'
 import Button from '../../ui/Button'
-import { ArchiveIcon, DuplicateIcon, EditIcon } from '../../ui/icons'
+import { ArchiveIcon, DuplicateIcon, EditIcon, PlusIcon } from '../../ui/icons'
 import Menu, { MenuItem } from '../../ui/Menu'
 import PageContent from '../../ui/PageContent'
 import { SearchTable, useSearchTableQueryState } from '../../ui/SearchTable'
@@ -49,7 +49,7 @@ export default function Campaigns() {
     return (
         <>
             <PageContent title="Campaigns" actions={
-                <Button icon="plus-lg" onClick={() => setIsCreateOpen(true)}>Create Campaign</Button>
+                <Button icon={<PlusIcon />} onClick={() => setIsCreateOpen(true)}>Create Campaign</Button>
             }>
                 <SearchTable
                     {...state}
@@ -79,13 +79,13 @@ export default function Campaigns() {
                             cell: ({ item: { id } }) => (
                                 <Menu size="small">
                                     <MenuItem onClick={() => handleEditCampaign(id)}>
-                                        <EditIcon /> Edit
+                                        <EditIcon />Edit
                                     </MenuItem>
                                     <MenuItem onClick={async () => await handleDuplicateCampaign(id)}>
-                                        <DuplicateIcon /> Duplicate
+                                        <DuplicateIcon />Duplicate
                                     </MenuItem>
                                     <MenuItem onClick={async () => await handleArchiveCampaign(id)}>
-                                        <ArchiveIcon /> Archive
+                                        <ArchiveIcon />Archive
                                     </MenuItem>
                                 </Menu>
                             ),
diff --git a/apps/ui/src/views/campaign/EmailEditor.tsx b/apps/ui/src/views/campaign/EmailEditor.tsx
index c8c3e29e..85da9e84 100644
--- a/apps/ui/src/views/campaign/EmailEditor.tsx
+++ b/apps/ui/src/views/campaign/EmailEditor.tsx
@@ -15,6 +15,7 @@ import { PreferencesContext } from '../../ui/PreferencesContext'
 import CreateLocaleModal from './CreateLocaleModal'
 import ImageGalleryModal from './ImageGalleryModal'
 import Modal from '../../ui/Modal'
+import { ImageIcon } from '../../ui/icons'
 
 const HtmlEditor = ({ template, setTemplate }: { template: Template, setTemplate: (template: Template) => void }) => {
 
@@ -89,7 +90,7 @@ const HtmlEditor = ({ template, setTemplate }: { template: Template, setTemplate
                                 <div className="editor-toolbar">
                                     <Button
                                         variant="secondary"
-                                        icon="image"
+                                        icon={<ImageIcon />}
                                         onClick={() => setShowImages(true)}
                                     >Images</Button>
                                 </div>
diff --git a/apps/ui/src/views/journey/Journeys.tsx b/apps/ui/src/views/journey/Journeys.tsx
index d8a27dc8..3f563951 100644
--- a/apps/ui/src/views/journey/Journeys.tsx
+++ b/apps/ui/src/views/journey/Journeys.tsx
@@ -8,6 +8,7 @@ import FormWrapper from '../../ui/form/FormWrapper'
 import Modal from '../../ui/Modal'
 import PageContent from '../../ui/PageContent'
 import { SearchTable, useSearchTableQueryState } from '../../ui/SearchTable'
+import { PlusIcon } from '../../ui/icons'
 import { TagPicker } from '../settings/TagPicker'
 
 export default function Journeys() {
@@ -20,7 +21,7 @@ export default function Journeys() {
         <PageContent
             title="Journeys"
             actions={
-                <Button icon="plus-lg" onClick={() => setOpen('create')}>
+                <Button icon={<PlusIcon />} onClick={() => setOpen('create')}>
                     Create Journey
                 </Button>
             }
diff --git a/apps/ui/src/views/router.tsx b/apps/ui/src/views/router.tsx
index 0fc3496d..74afa895 100644
--- a/apps/ui/src/views/router.tsx
+++ b/apps/ui/src/views/router.tsx
@@ -36,6 +36,7 @@ import Login from './auth/Login'
 import OnboardingStart from './auth/OnboardingStart'
 import Onboarding from './auth/Onboarding'
 import OnboardingProject from './auth/OnboardingProject'
+import { CampaignsIcon, JourneysIcon, ListsIcon, SettingsIcon, UsersIcon } from '../ui/icons'
 
 export const useRoute = (includeProject = true) => {
     const { projectId = '' } = useParams()
@@ -116,31 +117,31 @@ export const router = createBrowserRouter([
                                     key: 'campaigns',
                                     to: 'campaigns',
                                     children: 'Campaigns',
-                                    icon: 'bi-megaphone',
+                                    icon: <CampaignsIcon />,
                                 },
                                 {
                                     key: 'journeys',
                                     to: 'journeys',
                                     children: 'Journeys',
-                                    icon: 'bi-diagram-2',
+                                    icon: <JourneysIcon />,
                                 },
                                 {
                                     key: 'users',
                                     to: 'users',
                                     children: 'Users',
-                                    icon: 'bi-people',
+                                    icon: <UsersIcon />,
                                 },
                                 {
                                     key: 'lists',
                                     to: 'lists',
                                     children: 'Lists',
-                                    icon: 'bi-list-ol',
+                                    icon: <ListsIcon />,
                                 },
                                 {
                                     key: 'settings',
                                     to: 'settings',
                                     children: 'Settings',
-                                    icon: 'bi-gear',
+                                    icon: <SettingsIcon />,
                                 },
                             ]}
                         >
diff --git a/apps/ui/src/views/settings/ApiKeys.tsx b/apps/ui/src/views/settings/ApiKeys.tsx
index 8a8d1672..067c4fa0 100644
--- a/apps/ui/src/views/settings/ApiKeys.tsx
+++ b/apps/ui/src/views/settings/ApiKeys.tsx
@@ -9,6 +9,7 @@ import TextField from '../../ui/form/TextField'
 import FormWrapper from '../../ui/form/FormWrapper'
 import Modal from '../../ui/Modal'
 import { SearchTable, useSearchTableState } from '../../ui/SearchTable'
+import { PlusIcon } from '../../ui/icons'
 
 export default function ProjectApiKeys() {
 
@@ -32,7 +33,7 @@ export default function ProjectApiKeys() {
                 onSelectRow={(row: ProjectApiKey) => navigate(`${row.id}`)}
                 title="API Keys"
                 actions={
-                    <Button icon="plus-lg" size="small" onClick={() => setIsModalOpen(true)}>
+                    <Button icon={<PlusIcon />} size="small" onClick={() => setIsModalOpen(true)}>
                         Create Key
                     </Button>
                 }
diff --git a/apps/ui/src/views/settings/IntegrationModal.tsx b/apps/ui/src/views/settings/IntegrationModal.tsx
index 2e4dd240..521cacc0 100644
--- a/apps/ui/src/views/settings/IntegrationModal.tsx
+++ b/apps/ui/src/views/settings/IntegrationModal.tsx
@@ -12,6 +12,7 @@ import Modal, { ModalProps } from '../../ui/Modal'
 import Tile, { TileGrid } from '../../ui/Tile'
 import { snakeToTitle } from '../../utils'
 import './IntegrationModal.css'
+import { ChevronLeftIcon } from '../../ui/icons'
 
 interface IntegrationModalProps extends Omit<ModalProps, 'title'> {
     provider: Provider | undefined
@@ -61,7 +62,7 @@ export default function IntegrationModal({ onChange, provider, ...props }: Integ
         {meta && <>
             {!provider?.id && <div style={{ marginBottom: '10px' }}>
                 <Button
-                    icon="chevron-left"
+                    icon={<ChevronLeftIcon />}
                     variant="secondary"
                     size="small"
                     onClick={() => setMeta(undefined)}>Integrations</Button>
diff --git a/apps/ui/src/views/settings/Integrations.tsx b/apps/ui/src/views/settings/Integrations.tsx
index 7cbc7a9e..701421cf 100644
--- a/apps/ui/src/views/settings/Integrations.tsx
+++ b/apps/ui/src/views/settings/Integrations.tsx
@@ -4,6 +4,7 @@ import { ProjectContext } from '../../contexts'
 import { Provider } from '../../types'
 import Button from '../../ui/Button'
 import Heading from '../../ui/Heading'
+import { PlusIcon } from '../../ui/icons'
 import { SearchTable, useSearchTableState } from '../../ui/SearchTable'
 import IntegrationModal from './IntegrationModal'
 
@@ -16,7 +17,7 @@ export default function Integrations() {
     return (
         <>
             <Heading size="h3" title="Integrations" actions={
-                <Button icon="plus-lg" size="small" onClick={() => {
+                <Button icon={<PlusIcon />} size="small" onClick={() => {
                     setProvider(undefined)
                     setIsModalOpen(true)
                 }}>Add Integration</Button>
diff --git a/apps/ui/src/views/settings/Subscriptions.tsx b/apps/ui/src/views/settings/Subscriptions.tsx
index ad978356..a9db4352 100644
--- a/apps/ui/src/views/settings/Subscriptions.tsx
+++ b/apps/ui/src/views/settings/Subscriptions.tsx
@@ -9,6 +9,7 @@ import { Subscription } from '../../types'
 import TextField from '../../ui/form/TextField'
 import { SingleSelect } from '../../ui/form/SingleSelect'
 import Button from '../../ui/Button'
+import { PlusIcon } from '../../ui/icons'
 
 export default function Subscriptions() {
     const navigate = useNavigate()
@@ -31,11 +32,11 @@ export default function Subscriptions() {
                     <>
                         <Button
                             variant="primary"
-                            icon="plus"
+                            icon={<PlusIcon />}
                             size="small"
                             onClick={() => setOpen(true)}
                         >
-                            {'Create Subscription'}
+                            Create Subscription
                         </Button>
                     </>
                 }
diff --git a/apps/ui/src/views/settings/Tags.tsx b/apps/ui/src/views/settings/Tags.tsx
index ee8607f8..fbe5ca52 100644
--- a/apps/ui/src/views/settings/Tags.tsx
+++ b/apps/ui/src/views/settings/Tags.tsx
@@ -5,6 +5,7 @@ import { Tag } from '../../types'
 import Button from '../../ui/Button'
 import FormWrapper from '../../ui/form/FormWrapper'
 import TextField from '../../ui/form/TextField'
+import { PlusIcon } from '../../ui/icons'
 import Modal from '../../ui/Modal'
 import { SearchTable, useSearchTableState } from '../../ui/SearchTable'
 
@@ -36,7 +37,7 @@ export default function Tags() {
                             size="small"
                             variant="primary"
                             onClick={() => setEditing({ id: 0, name: 'New Tag' })}
-                            icon="plus"
+                            icon={<PlusIcon />}
                         >
                             {'Create Tag'}
                         </Button>
diff --git a/apps/ui/src/views/settings/Teams.tsx b/apps/ui/src/views/settings/Teams.tsx
index 04a5c61c..b1c8097f 100644
--- a/apps/ui/src/views/settings/Teams.tsx
+++ b/apps/ui/src/views/settings/Teams.tsx
@@ -7,7 +7,7 @@ import Button from '../../ui/Button'
 import { DataTableCol } from '../../ui/DataTable'
 import { SelectionProps } from '../../ui/form/Field'
 import FormWrapper from '../../ui/form/FormWrapper'
-import { ArchiveIcon } from '../../ui/icons'
+import { ArchiveIcon, PlusIcon } from '../../ui/icons'
 import Menu, { MenuItem } from '../../ui/Menu'
 import Modal from '../../ui/Modal'
 import { SearchTable, SearchTableQueryState, useSearchTableState } from '../../ui/SearchTable'
@@ -92,7 +92,7 @@ export default function Teams() {
                 title="Team"
                 onDeleteRow={handleDeleteProjectAdmin}
                 actions={
-                    <Button icon="plus-lg" size="small" onClick={() => setIsModalOpen(true)}>
+                    <Button icon={<PlusIcon />} size="small" onClick={() => setIsModalOpen(true)}>
                         Add Team Member
                     </Button>
                 }
diff --git a/apps/ui/src/views/users/ListDetail.tsx b/apps/ui/src/views/users/ListDetail.tsx
index a24c0e8c..bc649e5d 100644
--- a/apps/ui/src/views/users/ListDetail.tsx
+++ b/apps/ui/src/views/users/ListDetail.tsx
@@ -16,6 +16,7 @@ import { snakeToTitle } from '../../utils'
 import UploadField from '../../ui/form/UploadField'
 import { SearchTable, useSearchTableState } from '../../ui/SearchTable'
 import { useRoute } from '../router'
+import { EditIcon, UploadIcon } from '../../ui/icons'
 import { TagPicker } from '../settings/TagPicker'
 
 const RuleSection = ({ list, onRuleSave }: { list: DynamicList, onRuleSave: (rule: WrapperRule) => void }) => {
@@ -64,10 +65,10 @@ export default function ListDetail() {
                 <>
                     {list.type === 'static' && <Button
                         variant="secondary"
-                        icon="upload"
+                        icon={<UploadIcon />}
                         onClick={() => setIsUploadOpen(true)}
                     >Upload List</Button>}
-                    <Button icon="pencil" onClick={() => setIsEditListOpen(true)}>Edit List</Button>
+                    <Button icon={<EditIcon />} onClick={() => setIsEditListOpen(true)}>Edit List</Button>
                 </>
             }>
 
diff --git a/apps/ui/src/views/users/Lists.tsx b/apps/ui/src/views/users/Lists.tsx
index 7c5a84bb..478ac3d1 100644
--- a/apps/ui/src/views/users/Lists.tsx
+++ b/apps/ui/src/views/users/Lists.tsx
@@ -10,6 +10,7 @@ import Modal from '../../ui/Modal'
 import PageContent from '../../ui/PageContent'
 import ListTable from './ListTable'
 import { createWrapperRule } from './RuleBuilder'
+import { PlusIcon } from '../../ui/icons'
 import { TagPicker } from '../settings/TagPicker'
 
 export default function Lists() {
@@ -24,7 +25,7 @@ export default function Lists() {
                 title="Lists"
                 actions={
                     <Button
-                        icon="plus-lg"
+                        icon={<PlusIcon />}
                         onClick={() => setIsModalOpen(true) }
                     >
                         Create List
diff --git a/apps/ui/src/views/users/RuleBuilder.tsx b/apps/ui/src/views/users/RuleBuilder.tsx
index 6486e495..66e0115a 100644
--- a/apps/ui/src/views/users/RuleBuilder.tsx
+++ b/apps/ui/src/views/users/RuleBuilder.tsx
@@ -3,6 +3,7 @@ import Button from '../../ui/Button'
 import ButtonGroup from '../../ui/ButtonGroup'
 import { SingleSelect } from '../../ui/form/SingleSelect'
 import TextField from '../../ui/form/TextField'
+import { PlusIcon, TrashIcon } from '../../ui/icons'
 import './RuleBuilder.css'
 
 interface RuleSetParams {
@@ -110,7 +111,7 @@ const RuleSet = ({ group, onChange, onDelete }: RuleSetParams) => {
             {onDelete && <Button
                 size="small"
                 variant="plain"
-                icon="trash"
+                icon={<TrashIcon />}
                 onClick={onDelete}
             />}
         </div>}
@@ -130,20 +131,20 @@ const RuleSet = ({ group, onChange, onDelete }: RuleSetParams) => {
                 ? <Button
                     size="small"
                     variant="secondary"
-                    icon="plus"
+                    icon={<PlusIcon />}
                     onClick={() => handleAddUserRule()}
                 >Add Condition</Button>
                 : <>
                     <Button
                         size="small"
                         variant="secondary"
-                        icon="plus"
+                        icon={<PlusIcon />}
                         onClick={() => handleAddUserRule()}
                     >Add User Condition</Button>
                     <Button
                         size="small"
                         variant="secondary"
-                        icon="plus"
+                        icon={<PlusIcon />}
                         onClick={() => handleAddEventRule()}
                     >Add Event Condition</Button>
                 </>
@@ -209,7 +210,7 @@ const RuleView = ({ rule, onChange, onDelete }: RuleParams) => {
                     />
                     <Button
                         size="small"
-                        icon="trash"
+                        icon={<TrashIcon />}
                         variant="secondary"
                         onClick={onDelete} />
                 </ButtonGroup>