diff --git a/package.json b/package.json
index e551987c..59e31607 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "build-geo": "node scripts/build-geo.js",
     "build-db-schema": "prisma db pull",
     "build-db-client": "prisma generate",
+    "build-icons": "svgr ./src/assets --out-dir ./src/components/icons --typescript",
     "update-tracker": "node scripts/update-tracker.js",
     "update-db": "prisma migrate deploy",
     "check-db": "node scripts/check-db.js",
@@ -132,6 +133,7 @@
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.2.0",
     "@rollup/plugin-replace": "^5.0.2",
+    "@svgr/cli": "^8.1.0",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@types/cypress": "^1.1.3",
diff --git a/src/app/(main)/SideNav.module.css b/src/app/(main)/SideNav.module.css
index 39a056dd..ac92d623 100644
--- a/src/app/(main)/SideNav.module.css
+++ b/src/app/(main)/SideNav.module.css
@@ -4,7 +4,7 @@
   width: 200px;
   height: 100vh;
   background-color: var(--layer-color-1);
-  border-right: 1px solid var(--layer-color-2);
+  border-right: 1px solid var(--border-color);
 }
 
 .header {
diff --git a/src/app/(main)/SideNav.tsx b/src/app/(main)/SideNav.tsx
index 2e5e5928..de05efb4 100644
--- a/src/app/(main)/SideNav.tsx
+++ b/src/app/(main)/SideNav.tsx
@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
 import Link from 'next/link';
-import { Icon } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { SideNav as Nav, SideNavHeader, SideNavSection, SideNavItem } from '@umami/react-zen';
+import { Icons, Lucide } from '@/components/icons';
 import { useMessages, useTeamUrl } from '@/components/hooks';
-import styles from './SideNav.module.css';
 
 export function SideNav() {
   const { formatMessage, labels } = useMessages();
@@ -13,69 +11,44 @@ export function SideNav() {
     {
       label: formatMessage(labels.boards),
       href: renderTeamUrl('/boards'),
-      icon: <Icons.Dashboard />,
+      icon: <Lucide.LayoutDashboard />,
     },
     {
       label: formatMessage(labels.dashboard),
       href: renderTeamUrl('/dashboard'),
-      icon: <Icons.BarChart />,
+      icon: <Lucide.Copy />,
     },
     {
       label: formatMessage(labels.websites),
       href: renderTeamUrl('/websites'),
-      icon: <Icons.Globe />,
+      icon: <Lucide.Globe />,
     },
     {
       label: formatMessage(labels.reports),
       href: renderTeamUrl('/reports'),
-      icon: <Icons.Reports />,
+      icon: <Lucide.ChartArea />,
     },
     {
       label: formatMessage(labels.settings),
       href: renderTeamUrl('/settings'),
-      icon: <Icons.Gear />,
+      icon: <Lucide.Settings />,
     },
   ].filter(n => n);
 
   return (
-    <div className={styles.sidenav}>
+    <Nav>
       <SideNavSection>
-        <SideNavHeader />
+        <SideNavHeader name="umami" icon={<Icons.Logo />} />
       </SideNavSection>
       <SideNavSection>
-        {links.map(props => {
-          return <SideNavItem key={props.href} {...props} />;
+        {links.map(({ href, label, icon }) => {
+          return (
+            <Link key={href} href={href}>
+              <SideNavItem label={label} icon={icon} />
+            </Link>
+          );
         })}
       </SideNavSection>
-    </div>
+    </Nav>
   );
 }
-
-const SideNavHeader = () => {
-  return (
-    <div className={styles.header}>
-      <Icon size="sm">
-        <Icons.Logo />
-      </Icon>
-      <div className={styles.name}>umami</div>
-    </div>
-  );
-};
-
-const SideNavSection = ({ title, children }: { title?: string; children: ReactNode }) => {
-  return (
-    <div className={styles.section}>
-      {title && <div className={styles.title}>{title}</div>}
-      <div className={styles.items}>{children}</div>
-    </div>
-  );
-};
-
-const SideNavItem = ({ href, label, icon }: { href: string; label: string; icon: ReactNode }) => {
-  return (
-    <Link href={href} className={styles.item}>
-      <Icon size="sm">{icon}</Icon>
-      {label}
-    </Link>
-  );
-};
diff --git a/src/app/(main)/teams/[teamId]/layout.tsx b/src/app/(main)/teams/[teamId]/layout.tsx
index de58b828..11814eca 100644
--- a/src/app/(main)/teams/[teamId]/layout.tsx
+++ b/src/app/(main)/teams/[teamId]/layout.tsx
@@ -1,13 +1,13 @@
 import { TeamProvider } from './TeamProvider';
 import { Metadata } from 'next';
-import TeamSettingsLayout from './settings/TeamSettingsLayout';
+import { TeamSettingsLayout } from './settings/TeamSettingsLayout';
 
 export default async function ({
   children,
   params,
 }: {
   children: any;
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   const { teamId } = await params;
 
diff --git a/src/assets/dashboard.svg b/src/assets/dashboard.svg
index 2090e5dc..398f2f22 100644
--- a/src/assets/dashboard.svg
+++ b/src/assets/dashboard.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512pt" height="512pt" viewBox="0 0 512 512"><path d="M197.332 170.668h-160C16.746 170.668 0 153.922 0 133.332v-96C0 16.746 16.746 0 37.332 0h160c20.59 0 37.336 16.746 37.336 37.332v96c0 20.59-16.746 37.336-37.336 37.336zM37.332 32A5.336 5.336 0 0 0 32 37.332v96a5.337 5.337 0 0 0 5.332 5.336h160a5.338 5.338 0 0 0 5.336-5.336v-96A5.337 5.337 0 0 0 197.332 32zm160 480h-160C16.746 512 0 495.254 0 474.668v-224c0-20.59 16.746-37.336 37.332-37.336h160c20.59 0 37.336 16.746 37.336 37.336v224c0 20.586-16.746 37.332-37.336 37.332zm-160-266.668A5.337 5.337 0 0 0 32 250.668v224A5.336 5.336 0 0 0 37.332 480h160a5.337 5.337 0 0 0 5.336-5.332v-224a5.338 5.338 0 0 0-5.336-5.336zM474.668 512h-160c-20.59 0-37.336-16.746-37.336-37.332v-96c0-20.59 16.746-37.336 37.336-37.336h160c20.586 0 37.332 16.746 37.332 37.336v96C512 495.254 495.254 512 474.668 512zm-160-138.668a5.338 5.338 0 0 0-5.336 5.336v96a5.337 5.337 0 0 0 5.336 5.332h160a5.336 5.336 0 0 0 5.332-5.332v-96a5.337 5.337 0 0 0-5.332-5.336zm160-74.664h-160c-20.59 0-37.336-16.746-37.336-37.336v-224C277.332 16.746 294.078 0 314.668 0h160C495.254 0 512 16.746 512 37.332v224c0 20.59-16.746 37.336-37.332 37.336zM314.668 32a5.337 5.337 0 0 0-5.336 5.332v224a5.338 5.338 0 0 0 5.336 5.336h160a5.337 5.337 0 0 0 5.332-5.336v-224A5.336 5.336 0 0 0 474.668 32zm0 0"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-dashboard"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
diff --git a/src/assets/pushpin.svg b/src/assets/pushpin.svg
index 653a552d..69262210 100644
--- a/src/assets/pushpin.svg
+++ b/src/assets/pushpin.svg
@@ -1,8 +1 @@
- <svg
-      viewBox="0 0 1024 1024"
-      fill="currentColor"
-      height="1em"
-      width="1em"
-    >
-      <path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 00-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z" />
-      </svg>
\ No newline at end of file
+<svg viewBox="0 0 1024 1024" fill="currentColor" height="1em" width="1em"><path d="M878.3 392.1 631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.6 35.4-2.7 49.4l181.7 181.7-215.4 215.2a15.8 15.8 0 0 0-4.6 9.8l-3.4 37.2c-.9 9.4 6.6 17.4 15.9 17.4.5 0 1 0 1.5-.1l37.2-3.4c3.7-.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8z"/></svg>
\ No newline at end of file
diff --git a/src/components/icons.ts b/src/components/icons.ts
index 6735d23a..ec45c81a 100644
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -1,4 +1,5 @@
 import { Icons as ReactBasicsIcons } from 'react-basics';
+import * as lucide from 'lucide-react';
 import AddUser from '@/assets/add-user.svg';
 import Bars from '@/assets/bars.svg';
 import BarChart from '@/assets/bar-chart.svg';
@@ -56,4 +57,6 @@ const icons = {
   Visitor,
 };
 
+export const Lucide = lucide;
+
 export const Icons = icons;
diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx
index fc65f7c2..b33be23f 100644
--- a/src/components/input/LanguageButton.tsx
+++ b/src/components/input/LanguageButton.tsx
@@ -1,7 +1,7 @@
 import { Icon, Button, MenuTrigger, Popover, Grid, Text, Dialog } from '@umami/react-zen';
 import { languages } from '@/lib/lang';
 import { useLocale } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Globe } from 'lucide-react';
 
 export function LanguageButton() {
   const { locale, saveLocale } = useLocale();
@@ -15,7 +15,7 @@ export function LanguageButton() {
     <MenuTrigger key="language">
       <Button variant="quiet">
         <Icon>
-          <Icons.Globe />
+          <Globe />
         </Icon>
       </Button>
       <Popover placement="bottom end">
diff --git a/src/components/input/ProfileButton.tsx b/src/components/input/ProfileButton.tsx
index d14ee9a4..5621e31d 100644
--- a/src/components/input/ProfileButton.tsx
+++ b/src/components/input/ProfileButton.tsx
@@ -11,7 +11,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { useRouter } from 'next/navigation';
-import { Icons } from '@/components/icons';
+import { User, LogOut, CircleUserRound } from 'lucide-react';
 import { useMessages, useLogin } from '@/components/hooks';
 
 export function ProfileButton() {
@@ -33,7 +33,7 @@ export function ProfileButton() {
     <MenuTrigger>
       <Button data-test="button-profile" variant="quiet">
         <Icon>
-          <Icons.Profile />
+          <CircleUserRound />
         </Icon>
       </Button>
       <Popover placement="bottom end">
@@ -42,14 +42,14 @@ export function ProfileButton() {
             <MenuSeparator />
             <MenuItem id="profile">
               <Icon>
-                <Icons.User />
+                <User />
               </Icon>
               <Text>{formatMessage(labels.profile)}</Text>
             </MenuItem>
             {!cloudMode && (
               <MenuItem data-test="item-logout" id="logout">
                 <Icon>
-                  <Icons.Logout />
+                  <LogOut />
                 </Icon>
                 <Text>{formatMessage(labels.logout)}</Text>
               </MenuItem>
diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx
index f42420cc..b7b7438a 100644
--- a/src/components/input/TeamsButton.tsx
+++ b/src/components/input/TeamsButton.tsx
@@ -13,8 +13,9 @@ import {
   Popover,
   Row,
   Box,
+  Icons,
 } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { User, Users } from 'lucide-react';
 import { useLogin, useMessages, useTeams, useTeamUrl } from '@/components/hooks';
 
 export function TeamsButton({
@@ -50,10 +51,10 @@ export function TeamsButton({
     <MenuTrigger>
       <Button className={className} variant="quiet">
         <Row alignItems="center" gap="3">
-          <Icon>{teamId ? <Icons.Users /> : <Icons.User />}</Icon>
+          <Icon>{teamId ? <Users /> : <User />}</Icon>
           {showText && <Text weight="bold">{teamId ? team?.name : user.username}</Text>}
-          <Icon>
-            <Icons.ChevronDown />
+          <Icon rotate={90} size="sm">
+            <Icons.Chevron />
           </Icon>
         </Row>
       </Button>
@@ -68,7 +69,7 @@ export function TeamsButton({
             <MenuSection title={formatMessage(labels.myAccount)}>
               <MenuItem id={user.id}>
                 <Icon>
-                  <Icons.User />
+                  <User />
                 </Icon>
                 <Text wrap="nowrap">{user.username}</Text>
               </MenuItem>
@@ -78,7 +79,7 @@ export function TeamsButton({
               {result?.data?.map(({ id, name }) => (
                 <MenuItem key={id} id={id}>
                   <Icon size="sm">
-                    <Icons.Users />
+                    <Users />
                   </Icon>
                   <Text wrap="nowrap">{name}</Text>
                 </MenuItem>
diff --git a/yarn.lock b/yarn.lock
index c807085c..a2f7e44e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4005,6 +4005,22 @@
     "@svgr/babel-plugin-transform-react-native-svg" "8.1.0"
     "@svgr/babel-plugin-transform-svg-component" "8.0.0"
 
+"@svgr/cli@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/cli/-/cli-8.1.0.tgz#dd7fcf42a144eb681bb9923c5d806bf6cafd7512"
+  integrity sha512-SnlaLspB610XFXvs3PmhzViHErsXp0yIy4ERyZlHDlO1ro2iYtHMWYk2mztdLD/lBjiA4ZXe4RePON3qU/Tc4A==
+  dependencies:
+    "@svgr/core" "8.1.0"
+    "@svgr/plugin-jsx" "8.1.0"
+    "@svgr/plugin-prettier" "8.1.0"
+    "@svgr/plugin-svgo" "8.1.0"
+    camelcase "^6.2.0"
+    chalk "^4.1.2"
+    commander "^9.4.1"
+    dashify "^2.0.0"
+    glob "^8.0.3"
+    snake-case "^3.0.4"
+
 "@svgr/core@8.1.0":
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-8.1.0.tgz#41146f9b40b1a10beaf5cc4f361a16a3c1885e88"
@@ -4034,6 +4050,14 @@
     "@svgr/hast-util-to-babel-ast" "8.0.0"
     svg-parser "^2.0.4"
 
+"@svgr/plugin-prettier@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-prettier/-/plugin-prettier-8.1.0.tgz#71bf0d0b0ae4c2234a2deb0e5bad21c2cfe31364"
+  integrity sha512-o4/uFI8G64tAjBZ4E7gJfH+VP7Qi3T0+M4WnIsP91iFnGPqs5WvPDkpZALXPiyWEtzfYs1Rmwy1Zdfu8qoZuKw==
+  dependencies:
+    deepmerge "^4.3.1"
+    prettier "^2.8.7"
+
 "@svgr/plugin-svgo@8.1.0":
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz#b115b7b967b564f89ac58feae89b88c3decd0f00"
@@ -5647,6 +5671,11 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@^9.4.1:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 common-tags@^1.8.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.2.tgz#94ebb3c076d26032745fd54face7f688ef5ac9c6"
@@ -6077,6 +6106,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dashify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dashify/-/dashify-2.0.0.tgz#fff270ca2868ca427fee571de35691d6e437a648"
+  integrity sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==
+
 data-uri-to-buffer@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
@@ -10504,7 +10538,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@^2.6.2:
+prettier@^2.6.2, prettier@^2.8.7:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==