Refactored icons.

src/app/(main)/MenuBar.tsx

@@ -2,10 +2,9 @@ import { ThemeButton, Row, Button, Icon } from '@umami/react-zen';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { ProfileButton } from '@/components/input/ProfileButton';
 import { TeamsButton } from '@/components/input/TeamsButton';
-import useGlobalState from '@/components/hooks/useGlobalState';
-import { Lucide } from '@/components/icons';
 import { WebsiteSelect } from '@/components/input/WebsiteSelect';
-import { useNavigation } from '@/components/hooks';
+import { PanelLeft, Slash } from '@/components/icons';
+import { useNavigation, useGlobalState } from '@/components/hooks';
 
 export function MenuBar() {
   const [isCollapsed, setCollapsed] = useGlobalState('sidenav-collapsed');
@@ -26,7 +25,7 @@ export function MenuBar() {
       <Row alignItems="center">
         <Button onPress={() => setCollapsed(!isCollapsed)} variant="quiet">
           <Icon>
-            <Lucide.PanelLeft />
+            <PanelLeft />
           </Icon>
         </Button>
         <Row alignItems="center" gap="1">
@@ -34,7 +33,7 @@ export function MenuBar() {
           {websiteId && (
             <>
               <Icon strokeColor="7" rotate={-25}>
-                <Lucide.Slash />
+                <Slash />
               </Icon>
               <WebsiteSelect variant="quiet" websiteId={websiteId} onSelect={handleSelect} />
             </>

src/app/(main)/SideNav.tsx

@@ -1,6 +1,14 @@
 import Link from 'next/link';
 import { Sidebar, SidebarHeader, SidebarSection, SidebarItem } from '@umami/react-zen';
-import { Lucide, Icons } from '@/components/icons';
+import {
+  Copy,
+  Globe,
+  LayoutDashboard,
+  Link as LinkIcon,
+  Logo,
+  Grid2X2,
+  Settings,
+} from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import useGlobalState from '@/components/hooks/useGlobalState';
 
@@ -13,39 +21,39 @@ export function SideNav(props: any) {
     {
       label: formatMessage(labels.dashboard),
       href: renderTeamUrl('/dashboard'),
-      icon: <Lucide.Copy />,
+      icon: <Copy />,
     },
     {
       label: formatMessage(labels.websites),
       href: renderTeamUrl('/websites'),
-      icon: <Lucide.Globe />,
+      icon: <Globe />,
     },
     {
       label: formatMessage(labels.boards),
       href: renderTeamUrl('/boards'),
-      icon: <Lucide.LayoutDashboard />,
+      icon: <LayoutDashboard />,
     },
     {
       label: formatMessage(labels.links),
       href: renderTeamUrl('/links'),
-      icon: <Lucide.Link />,
+      icon: <LinkIcon />,
     },
     {
       label: formatMessage(labels.pixels),
       href: renderTeamUrl('/pixels'),
-      icon: <Lucide.Grid2X2 />,
+      icon: <Grid2X2 />,
     },
     {
       label: formatMessage(labels.settings),
       href: renderTeamUrl('/settings'),
-      icon: <Lucide.Settings />,
+      icon: <Settings />,
     },
   ].filter(n => n);
 
   return (
     <Sidebar {...props} isCollapsed={isCollapsed} variant="0" showBorder={true}>
       <SidebarSection>
-        <SidebarHeader label="umami" icon={<Icons.Logo />} />
+        <SidebarHeader label="umami" icon={<Logo />} />
       </SidebarSection>
       <SidebarSection>
         {links.map(({ href, label, icon }) => {

src/app/(main)/boards/BoardAddButton.tsx

@@ -1,14 +1,6 @@
 import { useMessages, useModified, useNavigation } from '@/components/hooks';
-import {
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
-  Button,
+import { Plus } from '@/components/icons';
-  Icon,
-  Icons,
-  Modal,
-  Dialog,
-  DialogTrigger,
-  Text,
-  useToast,
-} from '@umami/react-zen';
 import { BoardAddForm } from './BoardAddForm';
 
 export function BoardAddButton() {
@@ -26,7 +18,7 @@ export function BoardAddButton() {
     <DialogTrigger>
       <Button data-test="button-website-add" variant="primary">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.addBoard)}</Text>
       </Button>

src/app/(main)/dashboard/DashboardPage.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Icon, Icons, Loading, Text } from '@umami/react-zen';
+import { Icon, Loading, Text } from '@umami/react-zen';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { Pager } from '@/components/common/Pager';
 import { WebsiteChartList } from '../websites/[websiteId]/WebsiteChartList';
@@ -7,6 +7,7 @@ import { DashboardSettingsButton } from '@/app/(main)/dashboard/DashboardSetting
 import { DashboardEdit } from '@/app/(main)/dashboard/DashboardEdit';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
 import { useMessages, useNavigation, useWebsites } from '@/components/hooks';
+import { Arrow } from '@/components/icons';
 import { useDashboard } from '@/store/dashboard';
 import { LinkButton } from '@/components/common/LinkButton';
 
@@ -37,7 +38,7 @@ export function DashboardPage() {
         <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
           <LinkButton href={renderTeamUrl('/settings')}>
             <Icon>
-              <Icons.Arrow />
+              <Arrow />
             </Icon>
             <Text>{formatMessage(messages.goToSettings)}</Text>
           </LinkButton>

src/app/(main)/dashboard/DashboardSettingsButton.tsx

@@ -1,5 +1,5 @@
 import { Row, TooltipTrigger, Tooltip, Icon, Text, Button } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { BarChart, Edit } from '@/components/icons';
 import { saveDashboard } from '@/store/dashboard';
 import { useMessages } from '@/components/hooks';
 
@@ -19,14 +19,14 @@ export function DashboardSettingsButton() {
       <TooltipTrigger>
         <Button onPress={handleToggleCharts}>
           <Icon>
-            <Icons.BarChart />
+            <BarChart />
           </Icon>
         </Button>
         <Tooltip placement="bottom">{formatMessage(labels.toggleCharts)}</Tooltip>
       </TooltipTrigger>
       <Button onPress={handleEdit}>
         <Icon>
-          <Icons.Edit />
+          <Edit />
         </Icon>
         <Text>{formatMessage(labels.edit)}</Text>
       </Button>

src/app/(main)/reports/ReportDeleteButton.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { useApi, useMessages, useModified } from '@/components/hooks';
+import { Trash } from '@/components/icons';
 import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 
 export function ReportDeleteButton({
@@ -32,7 +33,7 @@ export function ReportDeleteButton({
     <DialogTrigger>
       <Button>
         <Icon>
-          <Icons.Trash />
+          <Trash />
         </Icon>
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,6 +1,7 @@
 import { SectionHeader } from '@/components/common/SectionHeader';
-import { Icon, Icons, Text } from '@umami/react-zen';
+import { Icon, Text } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
+import { Plus } from '@/components/icons';
 import { LinkButton } from '@/components/common/LinkButton';
 import { ROLES } from '@/lib/constants';
 
@@ -15,7 +16,7 @@ export function ReportsHeader() {
       {canEdit && (
         <LinkButton href={renderTeamUrl('/reports/create')} variant="primary">
           <Icon>
-            <Icons.Plus />
+            <Plus />
           </Icon>
           <Text>{formatMessage(labels.createReport)}</Text>
         </LinkButton>

src/app/(main)/reports/ReportsTable.tsx

@@ -1,7 +1,8 @@
-import { Icon, Icons, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
+import { Icon, Text, DataTable, DataColumn, Row } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useLoginQuery, useNavigation } from '@/components/hooks';
 import { REPORT_TYPES } from '@/lib/constants';
+import { Arrow } from '@/components/icons';
 import { ReportDeleteButton } from './ReportDeleteButton';
 
 export function ReportsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
@@ -30,7 +31,7 @@ export function ReportsTable({ data = [] }: { data: any[]; showDomain?: boolean
               )}
               <LinkButton href={renderTeamUrl(`/reports/${id}`)}>
                 <Icon>
-                  <Icons.Arrow />
+                  <Arrow />
                 </Icon>
                 <Text>{formatMessage(labels.view)}</Text>
               </LinkButton>

src/app/(main)/reports/[reportId]/FieldFilterEditForm.tsx

@@ -8,7 +8,6 @@ import {
   Row,
   Select,
   Icon,
-  Icons,
   Loading,
   Menu,
   MenuItem,
@@ -18,6 +17,7 @@ import {
   TextField,
   Label,
 } from '@umami/react-zen';
+import { Close } from '@/components/icons';
 import styles from './FieldFilterEditForm.module.css';
 
 export interface FieldFilterFormProps {
@@ -152,7 +152,7 @@ export function FieldFilterEditForm({
             <div className={styles.selected} onClick={handleReset}>
               <Text>{formatValue(selected, name)}</Text>
               <Icon>
-                <Icons.Close />
+                <Close />
               </Icon>
             </div>
           )}

src/app/(main)/reports/[reportId]/FieldParameters.tsx

@@ -1,5 +1,5 @@
 import { useFields, useMessages, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import { Button, Row, Label, Icon, Popover, MenuTrigger, Column } from '@umami/react-zen';
 import { FieldSelectForm } from '../[reportId]/FieldSelectForm';
 import { ParameterList } from '../[reportId]/ParameterList';
@@ -29,7 +29,7 @@ export function FieldParameters() {
         <MenuTrigger>
           <Button variant="quiet">
             <Icon size="sm">
-              <Icons.Plus />
+              <Plus />
             </Icon>
           </Button>
           <Popover placement="right top">

src/app/(main)/reports/[reportId]/FilterParameters.tsx

@@ -1,5 +1,5 @@
 import { useMessages, useFormat, useFilters, useFields, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import {
   Button,
   Row,
@@ -55,7 +55,7 @@ export function FilterParameters() {
         <MenuTrigger>
           <Button variant="quiet">
             <Icon size="sm">
-              <Icons.Plus />
+              <Plus />
             </Icon>
           </Button>
           <Popover placement="right top">

src/app/(main)/reports/[reportId]/ParameterList.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Icon, Row, Text, Button, Column } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Close } from '@/components/icons';
 import { Empty } from '@/components/common/Empty';
 import { useMessages } from '@/components/hooks';
 
@@ -46,7 +46,7 @@ const Item = ({
       <Text>{children}</Text>
       <Button onPress={onRemove} variant="quiet">
         <Icon>
-          <Icons.Close />
+          <Close />
         </Icon>
       </Button>
     </Row>

src/app/(main)/reports/[reportId]/ReportMenu.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Column, Icon, Row } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { PanelLeft } from '@/components/icons';
 import { useReport } from '@/components/hooks';
 
 export function ReportMenu({ children }) {
@@ -16,7 +16,7 @@ export function ReportMenu({ children }) {
       <Row alignItems="center" justifyContent="flex-end">
         <Button variant="quiet" onPress={() => setCollapsed(!collapsed)}>
           <Icon>
-            <Icons.PanelLeft />
+            <PanelLeft />
           </Icon>
         </Button>
       </Row>

src/app/(main)/reports/attribution/AttributionParameters.tsx

@@ -1,5 +1,5 @@
 import { useMessages } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Eye, Bolt, Plus } from '@/components/icons';
 import { useContext, useState } from 'react';
 import {
   Button,
@@ -82,7 +82,7 @@ export function AttributionParameters() {
       <DialogTrigger>
         <Button isDisabled={steps.length > 0}>
           <Icon>
-            <Icons.Plus />
+            <Plus />
           </Icon>
         </Button>
         <Popover placement="right top">
@@ -122,7 +122,7 @@ export function AttributionParameters() {
             return (
               <DialogTrigger key={index}>
                 <ParameterList.Item
-                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  icon={step.type === 'url' ? <Eye /> : <Bolt />}
                   onRemove={() => handleRemoveStep(index)}
                 >
                   <div>{step.value}</div>

src/app/(main)/reports/attribution/AttributionReport.tsx

@@ -1,4 +1,4 @@
-import { Icons } from '@/components/icons';
+import { Network } from '@/components/icons';
 import { REPORT_TYPES } from '@/lib/constants';
 import { Report } from '../[reportId]/Report';
 import { ReportBody } from '../[reportId]/ReportBody';
@@ -15,7 +15,7 @@ const defaultParameters = {
 export default function AttributionReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Network />} />
+      <ReportHeader icon={<Network />} />
       <ReportMenu>
         <AttributionParameters />
       </ReportMenu>

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,6 +1,16 @@
 import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import {
+  Lightbulb,
+  Funnel,
+  Magnet,
+  Tag,
+  Target,
+  Path,
+  Money,
+  Network,
+  Plus,
+} from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { LinkButton } from '@/components/common/LinkButton';
 
@@ -13,49 +23,49 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       title: formatMessage(labels.insights),
       description: formatMessage(labels.insightsDescription),
       url: renderTeamUrl('/reports/insights'),
-      icon: <Icons.Lightbulb />,
+      icon: <Lightbulb />,
     },
     {
       title: formatMessage(labels.funnel),
       description: formatMessage(labels.funnelDescription),
       url: renderTeamUrl('/reports/funnel'),
-      icon: <Icons.Funnel />,
+      icon: <Funnel />,
     },
     {
       title: formatMessage(labels.retention),
       description: formatMessage(labels.retentionDescription),
       url: renderTeamUrl('/reports/retention'),
-      icon: <Icons.Magnet />,
+      icon: <Magnet />,
     },
     {
       title: formatMessage(labels.utm),
       description: formatMessage(labels.utmDescription),
       url: renderTeamUrl('/reports/utm'),
-      icon: <Icons.Tag />,
+      icon: <Tag />,
     },
     {
       title: formatMessage(labels.goals),
       description: formatMessage(labels.goalsDescription),
       url: renderTeamUrl('/reports/goals'),
-      icon: <Icons.Target />,
+      icon: <Target />,
     },
     {
       title: formatMessage(labels.journey),
       description: formatMessage(labels.journeyDescription),
       url: renderTeamUrl('/reports/journey'),
-      icon: <Icons.Path />,
+      icon: <Path />,
     },
     {
       title: formatMessage(labels.revenue),
       description: formatMessage(labels.revenueDescription),
       url: renderTeamUrl('/reports/revenue'),
-      icon: <Icons.Money />,
+      icon: <Money />,
     },
     {
       title: formatMessage(labels.attribution),
       description: formatMessage(labels.attributionDescription),
       url: renderTeamUrl('/reports/attribution'),
-      icon: <Icons.Network />,
+      icon: <Network />,
     },
   ];
 
@@ -87,8 +97,8 @@ function ReportItem({ title, description, url, icon }) {
       <Text>{description}</Text>
       <Row justifyContent="flex-end">
         <LinkButton href={url} variant="primary">
-          <Icon fillColor="currentColor">
+          <Icon>
-            <Icons.Plus />
+            <Plus />
           </Icon>
           <Text>{formatMessage(labels.create)}</Text>
         </LinkButton>

src/app/(main)/reports/event-data/EventDataParameters.tsx

@@ -8,7 +8,7 @@ import {
   Popover,
 } from '@umami/react-zen';
 import { Empty } from '@/components/common/Empty';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import { useApi, useMessages, useReport } from '@/components/hooks';
 import { DATA_TYPES, REPORT_PARAMETERS } from '@/lib/constants';
 import { FieldAddForm } from '../[reportId]/FieldAddForm';
@@ -75,7 +75,7 @@ export function EventDataParameters() {
     return (
       <DialogTrigger>
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Popover placement="bottom start">
           {({ close }: any) => {

src/app/(main)/reports/event-data/EventDataReport.tsx

@@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { EventDataParameters } from './EventDataParameters';
 import { EventDataTable } from './EventDataTable';
-import { Icons } from '@/components/icons';
+import { Nodes } from '@/components/icons';
 
 const defaultParameters = {
   type: 'event-data',
@@ -14,7 +14,7 @@ const defaultParameters = {
 export function EventDataReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Nodes />} />
+      <ReportHeader icon={<Nodes />} />
       <ReportMenu>
         <EventDataParameters />
       </ReportMenu>

src/app/(main)/reports/funnel/FunnelParameters.tsx

@@ -10,7 +10,7 @@ import {
   TextField,
   Button,
 } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Eye, Bolt, Plus } from '@/components/icons';
 import { FunnelStepAddForm } from './FunnelStepAddForm';
 import { BaseParameters } from '../[reportId]/BaseParameters';
 import { ParameterList } from '../[reportId]/ParameterList';
@@ -59,7 +59,7 @@ export function FunnelParameters() {
       <DialogTrigger>
         <Button>
           <Icon>
-            <Icons.Plus />
+            <Plus />
           </Icon>
         </Button>
         <Popover placement="start">
@@ -85,7 +85,7 @@ export function FunnelParameters() {
             return (
               <DialogTrigger key={index}>
                 <ParameterList.Item
-                  icon={step.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                  icon={step.type === 'url' ? <Eye /> : <Bolt />}
                   onRemove={() => handleRemoveStep(index)}
                 >
                   <div className={styles.value}>

src/app/(main)/reports/funnel/FunnelReport.tsx

@@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
 import { ReportHeader } from '../[reportId]/ReportHeader';
 import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
-import { Icons } from '@/components/icons';
+import { Funnel } from '@/components/icons';
 import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
@@ -15,7 +15,7 @@ const defaultParameters = {
 export function FunnelReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Funnel />} />
+      <ReportHeader icon={<Funnel />} />
       <ReportMenu>
         <FunnelParameters />
       </ReportMenu>

src/app/(main)/reports/goals/GoalsParameters.tsx

@@ -1,5 +1,5 @@
 import { useMessages, useReport } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Plus, Eye, Bolt } from '@/components/icons';
 import { formatNumber } from '@/lib/format';
 import {
   Button,
@@ -60,7 +60,7 @@ export function GoalsParameters() {
       <MenuTrigger>
         <Button>
           <Icon>
-            <Icons.Plus />
+            <Plus />
           </Icon>
         </Button>
         <Popover placement="start">
@@ -90,7 +90,7 @@ export function GoalsParameters() {
               return (
                 <MenuTrigger key={index}>
                   <ParameterList.Item
-                    icon={goal.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
+                    icon={goal.type === 'url' ? <Eye /> : <Bolt />}
                     onRemove={() => handleRemoveGoals(index)}
                   >
                     <Column>

src/app/(main)/reports/goals/GoalsReport.tsx

@@ -4,7 +4,7 @@ import { Report } from '../[reportId]/Report';
 import { ReportHeader } from '../[reportId]/ReportHeader';
 import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
-import { Icons } from '@/components/icons';
+import { Target } from '@/components/icons';
 import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
@@ -15,7 +15,7 @@ const defaultParameters = {
 export function GoalsReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Target />} />
+      <ReportHeader icon={<Target />} />
       <ReportMenu>
         <GoalsParameters />
       </ReportMenu>

src/app/(main)/reports/insights/InsightsReport.tsx

@@ -4,7 +4,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { InsightsParameters } from './InsightsParameters';
 import { InsightsTable } from './InsightsTable';
-import { Icons } from '@/components/icons';
+import { Lightbulb } from '@/components/icons';
 import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
@@ -15,7 +15,7 @@ const defaultParameters = {
 export function InsightsReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Lightbulb />} />
+      <ReportHeader icon={<Lightbulb />} />
       <ReportMenu>
         <InsightsParameters />
       </ReportMenu>

src/app/(main)/reports/journey/JourneyReport.tsx

@@ -5,7 +5,7 @@ import { ReportMenu } from '../[reportId]/ReportMenu';
 import { ReportBody } from '../[reportId]/ReportBody';
 import { JourneyParameters } from './JourneyParameters';
 import { JourneyView } from './JourneyView';
-import { Icons } from '@/components/icons';
+import { Path } from '@/components/icons';
 import { REPORT_TYPES } from '@/lib/constants';
 
 const defaultParameters = {
@@ -16,7 +16,7 @@ const defaultParameters = {
 export function JourneyReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Icons.Path />} />
+      <ReportHeader icon={<Path />} />
       <ReportMenu>
         <JourneyParameters />
       </ReportMenu>

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, Text, useToast, DialogTrigger, Dialog, Modal } from '@umami/react-zen';
 import { PasswordEditForm } from './PasswordEditForm';
-import { Lucide } from '@/components/icons';
+import { LockKeyhole } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function PasswordChangeButton() {
@@ -14,8 +14,8 @@ export function PasswordChangeButton() {
   return (
     <DialogTrigger>
       <Button>
-        <Icon fillColor="currentColor">
+        <Icon>
-          <Lucide.LockKeyhole />
+          <LockKeyhole />
         </Icon>
         <Text>{formatMessage(labels.changePassword)}</Text>
       </Button>

src/app/(main)/settings/profile/ThemeSetting.tsx

@@ -1,5 +1,5 @@
 import { Row, Button, Icon, useTheme } from '@umami/react-zen';
-import { Lucide } from '@/components/icons';
+import { Sun, Moon } from '@/components/icons';
 
 export function ThemeSetting() {
   const { theme, setTheme } = useTheme();
@@ -11,12 +11,12 @@ export function ThemeSetting() {
         onPress={() => setTheme('light')}
       >
         <Icon>
-          <Lucide.Sun />
+          <Sun />
         </Icon>
       </Button>
       <Button variant={theme === 'dark' ? 'primary' : 'secondary'} onPress={() => setTheme('dark')}>
         <Icon>
-          <Lucide.Moon />
+          <Moon />
         </Icon>
       </Button>
     </Row>

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -1,6 +1,7 @@
 import { useLoginQuery, useMessages, useModified } from '@/components/hooks';
 import { useRouter } from 'next/navigation';
-import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { LogOut } from '@/components/icons';
 import { TeamLeaveForm } from './TeamLeaveForm';
 
 export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName: string }) {
@@ -18,7 +19,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
     <DialogTrigger>
       <Button variant="secondary">
         <Icon>
-          <Icons.Logout />
+          <LogOut />
         </Icon>
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 import { useMessages, useModified } from '@/components/hooks';
 import { TeamAddForm } from './TeamAddForm';
 import { messages } from '@/components/messages';
@@ -19,7 +19,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
     <DialogTrigger>
       <Button variant="primary">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.createTeam)}</Text>
       </Button>

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { AddUser } from '@/components/icons';
 import { useMessages, useModified } from '@/components/hooks';
 import { TeamJoinForm } from './TeamJoinForm';
 
@@ -16,8 +16,8 @@ export function TeamsJoinButton() {
   return (
     <DialogTrigger>
       <Button variant="secondary">
-        <Icon fillColor="currentColor">
+        <Icon>
-          <Icons.AddUser />
+          <AddUser />
         </Icon>
         <Text>{formatMessage(labels.joinTeam)}</Text>
       </Button>

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,6 +1,6 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Arrow, Edit } from '@/components/icons';
 import { ROLES } from '@/lib/constants';
 import { MenuButton } from '@/components/input/MenuButton';
 
@@ -36,7 +36,7 @@ export function TeamsTable({
                 <MenuItem href={`/teams/${id}`}>
                   <Row alignItems="center" gap>
                     <Icon>
-                      <Icons.Arrow />
+                      <Arrow />
                     </Icon>
                     <Text>{formatMessage(labels.view)}</Text>
                   </Row>
@@ -44,7 +44,7 @@ export function TeamsTable({
                 <MenuItem href={`/teams/${id}/settings`}>
                   <Row alignItems="center" gap>
                     <Icon>
-                      <Icons.Edit />
+                      <Edit />
                     </Icon>
                     <Text>{formatMessage(labels.edit)}</Text>
                   </Row>

src/app/(main)/settings/teams/WebsiteTags.tsx

@@ -1,4 +1,5 @@
-import { Button, Icon, Icons, Text } from '@umami/react-zen';
+import { Button, Icon, Text } from '@umami/react-zen';
+import { Close } from '@/components/icons';
 import styles from './WebsiteTags.module.css';
 
 export function WebsiteTags({
@@ -26,7 +27,7 @@ export function WebsiteTags({
                 <b>{`${website.name}`}</b>
               </Text>
               <Icon>
-                <Icons.Close />
+                <Close />
               </Icon>
             </Button>
           </div>

src/app/(main)/settings/users/UserAddButton.tsx

@@ -1,15 +1,7 @@
-import {
+import { Button, Icon, Text, Modal, DialogTrigger, Dialog, useToast } from '@umami/react-zen';
-  Button,
-  Icon,
-  Text,
-  Modal,
-  Icons,
-  DialogTrigger,
-  Dialog,
-  useToast,
-} from '@umami/react-zen';
 import { UserAddForm } from './UserAddForm';
 import { useMessages, useModified } from '@/components/hooks';
+import { Plus } from '@/components/icons';
 
 export function UserAddButton({ onSave }: { onSave?: () => void }) {
   const { formatMessage, labels, messages } = useMessages();
@@ -26,7 +18,7 @@ export function UserAddButton({ onSave }: { onSave?: () => void }) {
     <DialogTrigger>
       <Button variant="primary" data-test="button-create-user">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.createUser)}</Text>
       </Button>

src/app/(main)/settings/users/UserDeleteButton.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 import { useMessages, useLoginQuery } from '@/components/hooks';
+import { Trash } from '@/components/icons';
 import { UserDeleteForm } from './UserDeleteForm';
 
 export function UserDeleteButton({
@@ -18,7 +19,7 @@ export function UserDeleteButton({
     <DialogTrigger>
       <Button isDisabled={userId === user?.id} data-test="button-delete">
         <Icon size="sm">
-          <Icons.Trash />
+          <Trash />
         </Icon>
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>

src/app/(main)/settings/users/UsersTable.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
 import {
   Row,
   Text,
   Icon,
-  Icons,
   DataTable,
   DataColumn,
   MenuItem,
@@ -10,12 +10,13 @@ import {
   Modal,
   Dialog,
 } from '@umami/react-zen';
+import Link from 'next/link';
 import { formatDistance } from 'date-fns';
 import { ROLES } from '@/lib/constants';
+import { Trash } from '@/components/icons';
 import { useMessages, useLocale } from '@/components/hooks';
+import { Edit } from '@/components/icons';
 import { MenuButton } from '@/components/input/MenuButton';
-import Link from 'next/link';
-import { useState } from 'react';
 import { UserDeleteForm } from '@/app/(main)/settings/users/UserDeleteForm';
 
 export function UsersTable({
@@ -64,7 +65,7 @@ export function UsersTable({
                   <MenuItem href={`/settings/users/${id}`} data-test="link-button-edit">
                     <Row alignItems="center" gap>
                       <Icon>
-                        <Icons.Edit />
+                        <Edit />
                       </Icon>
                       <Text>{formatMessage(labels.edit)}</Text>
                     </Row>
@@ -77,7 +78,7 @@ export function UsersTable({
                   >
                     <Row alignItems="center" gap>
                       <Icon>
-                        <Icons.Trash />
+                        <Trash />
                       </Icon>
                       <Text>{formatMessage(labels.delete)}</Text>
                     </Row>

src/app/(main)/settings/users/[userId]/UserSettings.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { User } from '@/components/icons';
 import { UserEditForm } from './UserEditForm';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { useMessages } from '@/components/hooks';
@@ -13,7 +13,7 @@ export function UserSettings({ userId }: { userId: string }) {
 
   return (
     <>
-      <SectionHeader title={user?.username} icon={<Icons.User />} />
+      <SectionHeader title={user?.username} icon={<User />} />
       <Tabs>
         <TabList>
           <Tab id="details">{formatMessage(labels.details)}</Tab>

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -1,14 +1,6 @@
 import { useMessages, useModified } from '@/components/hooks';
-import {
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
-  Button,
+import { Plus } from '@/components/icons';
-  Icon,
-  Icons,
-  Modal,
-  Dialog,
-  DialogTrigger,
-  Text,
-  useToast,
-} from '@umami/react-zen';
 import { WebsiteAddForm } from './WebsiteAddForm';
 
 export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?: () => void }) {
@@ -26,7 +18,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
     <DialogTrigger>
       <Button data-test="button-website-add" variant="primary">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.addWebsite)}</Text>
       </Button>

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { Row, Text, Icon, DataTable, DataColumn, MenuItem } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MenuButton } from '@/components/input/MenuButton';
-import { Lucide } from '@/components/icons';
+import { Eye, SquarePen } from '@/components/icons';
 import Link from 'next/link';
 
 export interface WebsitesTableProps {
@@ -45,7 +45,7 @@ export function WebsitesTable({
                   <MenuItem href={renderTeamUrl(`/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-view">
-                        <Lucide.Eye />
+                        <Eye />
                       </Icon>
                       <Text>{formatMessage(labels.view)}</Text>
                     </Row>
@@ -55,7 +55,7 @@ export function WebsitesTable({
                   <MenuItem href={renderTeamUrl(`/settings/websites/${websiteId}`)}>
                     <Row alignItems="center" gap>
                       <Icon data-test="link-button-edit">
-                        <Lucide.SquarePen />
+                        <SquarePen />
                       </Icon>
                       <Text>{formatMessage(labels.edit)}</Text>
                     </Row>

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react';
 import { Icon, Tabs, TabList, Tab, TabPanel, Text } from '@umami/react-zen';
 import { WebsiteContext } from '@/app/(main)/websites/[websiteId]/WebsiteProvider';
 import { useMessages } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Globe, Arrow } from '@/components/icons';
 import { SectionHeader } from '@/components/common/SectionHeader';
 import { ShareUrl } from './ShareUrl';
 import { TrackingCode } from './TrackingCode';
@@ -22,14 +22,14 @@ export function WebsiteSettings({
 
   return (
     <>
-      <SectionHeader title={website?.name} icon={<Icons.Globe />}>
+      <SectionHeader title={website?.name} icon={<Globe />}>
         <LinkButton
           variant="primary"
           href={`/websites/${websiteId}`}
           target={openExternal ? '_blank' : null}
         >
           <Icon>
-            <Icons.Arrow />
+            <Arrow />
           </Icon>
           <Text>{formatMessage(labels.view)}</Text>
         </LinkButton>

src/app/(main)/teams/[teamId]/settings/members/TeamMemberEditButton.tsx

@@ -3,7 +3,6 @@ import {
   Row,
   Pressable,
   Icon,
-  Icons,
   Modal,
   DialogTrigger,
   Dialog,
@@ -11,6 +10,7 @@ import {
   useToast,
 } from '@umami/react-zen';
 import { TeamMemberEditForm } from './TeamMemberEditForm';
+import { Edit } from '@/components/icons';
 
 export function TeamMemberEditButton({
   teamId,
@@ -38,7 +38,7 @@ export function TeamMemberEditButton({
       <Pressable>
         <Row alignItems="center" gap>
           <Icon>
-            <Icons.Edit />
+            <Edit />
           </Icon>
           <Text>{formatMessage(labels.edit)}</Text>
         </Row>

src/app/(main)/teams/[teamId]/settings/members/TeamMemberRemoveButton.tsx

@@ -1,7 +1,8 @@
 import { ConfirmationForm } from '@/components/common/ConfirmationForm';
 import { useApi, useMessages, useModified } from '@/components/hooks';
 import { messages } from '@/components/messages';
-import { Button, Icon, Icons, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
+import { Close } from '@/components/icons';
+import { Button, Icon, Modal, DialogTrigger, Dialog, Text } from '@umami/react-zen';
 
 export function TeamMemberRemoveButton({
   teamId,
@@ -36,7 +37,7 @@ export function TeamMemberRemoveButton({
     <DialogTrigger>
       <Button>
         <Icon>
-          <Icons.Close />
+          <Close />
         </Icon>
         <Text>{formatMessage(labels.remove)}</Text>
       </Button>

src/app/(main)/teams/[teamId]/settings/websites/TeamWebsiteRemoveButton.tsx

@@ -1,5 +1,6 @@
 import { useApi, useMessages } from '@/components/hooks';
-import { Icon, Icons, LoadingButton, Text } from '@umami/react-zen';
+import { Icon, LoadingButton, Text } from '@umami/react-zen';
+import { Close } from '@/components/icons';
 
 export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   const { formatMessage, labels } = useMessages();
@@ -19,7 +20,7 @@ export function TeamWebsiteRemoveButton({ teamId, websiteId, onSave }) {
   return (
     <LoadingButton variant="quiet" onClick={() => handleRemoveTeamMember()} isLoading={isPending}>
       <Icon>
-        <Icons.Close />
+        <Close />
       </Icon>
       <Text>{formatMessage(labels.remove)}</Text>
     </LoadingButton>

src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx

@@ -1,6 +1,6 @@
 import { DataColumn, DataTable, Icon, MenuItem, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Arrow, Edit } from '@/components/icons';
 import { MenuButton } from '@/components/input/MenuButton';
 
 export function TeamWebsitesTable({
@@ -31,7 +31,7 @@ export function TeamWebsitesTable({
               <MenuItem href={`/teams/${teamId}/websites/${websiteId}`}>
                 <Row alignItems="center" gap>
                   <Icon>
-                    <Icons.Arrow />
+                    <Arrow />
                   </Icon>
                   <Text>{formatMessage(labels.view)}</Text>
                 </Row>
@@ -40,7 +40,7 @@ export function TeamWebsitesTable({
                 <MenuItem href={`/teams/${teamId}/settings/websites/${websiteId}`}>
                   <Row alignItems="center" gap>
                     <Icon>
-                      <Icons.Edit />
+                      <Edit />
                     </Icon>
                     <Text>{formatMessage(labels.edit)}</Text>
                   </Row>

src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx

@@ -1,4 +1,4 @@
-import { Text, Icon, Icons } from '@umami/react-zen';
+import { Text, Icon } from '@umami/react-zen';
 import { useMemo } from 'react';
 import { firstBy } from 'thenby';
 import { WebsiteChart } from './WebsiteChart';
@@ -7,6 +7,7 @@ import { WebsiteControls } from './WebsiteControls';
 import { WebsiteMetricsBar } from './WebsiteMetricsBar';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
+import { Arrow } from '@/components/icons';
 
 export function WebsiteChartList({
   websites,
@@ -30,7 +31,7 @@ export function WebsiteChartList({
 
   return (
     <div>
-      {ordered.map(({ id }, index) => {
+      {ordered.map(({ id }: { id: string }, index) => {
         return index < limit ? (
           <div key={id}>
             <WebsiteControls websiteId={id} showLinks={false}>
@@ -38,7 +39,7 @@ export function WebsiteChartList({
                 <Text>{formatMessage(labels.viewDetails)}</Text>
                 <Icon>
                   <Icon>
-                    <Icons.Arrow />
+                    <Arrow />
                   </Icon>
                 </Icon>
               </LinkButton>

src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx

@@ -1,4 +1,4 @@
-import { Icon, Icons, Text, Grid, Column } from '@umami/react-zen';
+import { Icon, Text, Grid, Column } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -18,6 +18,7 @@ import { ScreenTable } from '@/components/metrics/ScreenTable';
 import { TagsTable } from '@/components/metrics/TagsTable';
 import { ChannelsTable } from '@/components/metrics/ChannelsTable';
 import { Panel } from '@/components/common/Panel';
+import { Arrow } from '@/components/icons';
 
 const views = {
   url: PagesTable,
@@ -140,7 +141,7 @@ export function WebsiteExpandedView({
         <Column gap="6" width="200px" border="right" paddingRight="3">
           <LinkButton href={renderUrl({ view: undefined })} variant="quiet" scroll={false}>
             <Icon rotate={180}>
-              <Icons.Arrow />
+              <Arrow />
             </Icon>
             <Text>{formatMessage(labels.back)}</Text>
           </LinkButton>

src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx

@@ -1,5 +1,5 @@
 import { Button, Icon, DialogTrigger, Dialog, Modal, Text } from '@umami/react-zen';
-import { Lucide } from '@/components/icons';
+import { ListFilter } from '@/components/icons';
 import { FilterEditForm } from '@/components/common/FilterEditForm';
 import { useMessages, useNavigation, useFilters } from '@/components/hooks';
 
@@ -34,7 +34,7 @@ export function WebsiteFilterButton({
     <DialogTrigger>
       <Button variant="quiet">
         <Icon>
-          <Lucide.ListFilter />
+          <ListFilter />
         </Icon>
         {showText && <Text weight="bold">{formatMessage(labels.filter)}</Text>}
       </Button>

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Text, Row } from '@umami/react-zen';
 import { PageHeader } from '@/components/common/PageHeader';
 import { useWebsite } from '@/components/hooks/useWebsite';
-import { Lucide } from '@/components/icons';
+import { Share, Edit } from '@/components/icons';
 import { Favicon } from '@/components/common/Favicon';
 import { ActiveUsers } from '@/components/metrics/ActiveUsers';
 
@@ -14,13 +14,13 @@ export function WebsiteHeader() {
         <ActiveUsers websiteId={website.id} />
         <Button>
           <Icon>
-            <Lucide.Share />
+            <Share />
           </Icon>
           <Text>Share</Text>
         </Button>
         <Button>
           <Icon>
-            <Lucide.Edit />
+            <Edit />
           </Icon>
           <Text>Edit</Text>
         </Button>

src/app/(main)/websites/[websiteId]/WebsiteMenu.tsx

@@ -1,7 +1,6 @@
 import {
   Button,
   Icon,
-  Icons,
   Menu,
   MenuItem,
   MenuSeparator,
@@ -10,7 +9,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { Fragment } from 'react';
-import { Lucide } from '@/components/icons';
+import { More, Share, Edit } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { InputItem } from '@/lib/types';
 
@@ -19,8 +18,8 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
   const { router, renderUrl, renderTeamUrl } = useNavigation();
 
   const menuItems: InputItem[] = [
-    { id: 'share', label: formatMessage(labels.share), icon: <Lucide.Share /> },
+    { id: 'share', label: formatMessage(labels.share), icon: <Share /> },
-    { id: 'edit', label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
+    { id: 'edit', label: formatMessage(labels.edit), icon: <Edit />, seperator: true },
   ];
 
   const handleAction = (id: any) => {
@@ -35,7 +34,7 @@ export function WebsiteMenu({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="quiet">
         <Icon>
-          <Icons.More />
+          <More />
         </Icon>
       </Button>
       <Popover placement="bottom">

src/app/(main)/websites/[websiteId]/WebsiteNav.tsx

@@ -1,5 +1,18 @@
 import { Icon, Text, Row, NavMenu, NavMenuItem } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import {
+  Overview,
+  Lightning,
+  User,
+  Clock,
+  Lightbulb,
+  Target,
+  Funnel,
+  Path,
+  Magnet,
+  Tag,
+  Money,
+  Network,
+} from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import Link from 'next/link';
 
@@ -11,73 +24,73 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
     {
       id: 'overview',
       label: formatMessage(labels.overview),
-      icon: <Icons.Overview />,
+      icon: <Overview />,
       path: '',
     },
     {
       id: 'events',
       label: formatMessage(labels.events),
-      icon: <Icons.Lightning />,
+      icon: <Lightning />,
       path: '/events',
     },
     {
       id: 'sessions',
       label: formatMessage(labels.sessions),
-      icon: <Icons.User />,
+      icon: <User />,
       path: '/sessions',
     },
     {
       id: 'realtime',
       label: formatMessage(labels.realtime),
-      icon: <Icons.Clock />,
+      icon: <Clock />,
       path: '/realtime',
     },
     {
       id: 'insights',
       label: formatMessage(labels.insights),
-      icon: <Icons.Lightbulb />,
+      icon: <Lightbulb />,
       path: '/insights',
     },
     {
       id: 'goals',
       label: formatMessage(labels.goals),
-      icon: <Icons.Target />,
+      icon: <Target />,
       path: '/goals',
     },
     {
       id: 'funnel',
       label: formatMessage(labels.funnel),
-      icon: <Icons.Funnel />,
+      icon: <Funnel />,
       path: '/funnels',
     },
     {
       id: 'journeys',
       label: formatMessage(labels.journey),
-      icon: <Icons.Path />,
+      icon: <Path />,
       path: '/goals',
     },
     {
       id: 'retention',
       label: formatMessage(labels.retention),
-      icon: <Icons.Magnet />,
+      icon: <Magnet />,
       path: '/retention',
     },
     {
       id: 'utm',
       label: formatMessage(labels.utm),
-      icon: <Icons.Tag />,
+      icon: <Tag />,
       path: '/utm',
     },
     {
       id: 'revenue',
       label: formatMessage(labels.revenue),
-      icon: <Icons.Money />,
+      icon: <Money />,
       path: '/revenue',
     },
     {
       id: 'attribution',
       label: formatMessage(labels.attribution),
-      icon: <Icons.Network />,
+      icon: <Network />,
       path: '/attribution',
     },
   ];

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -3,7 +3,7 @@ import { useMessages, useNavigation, useTimezone } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
-import { Icons } from '@/components/icons';
+import { Bolt, Eye } from '@/components/icons';
 
 export function EventsTable({ data = [] }) {
   const { formatTimezoneDate } = useTimezone();
@@ -27,7 +27,7 @@ export function EventsTable({ data = [] }) {
         {(row: any) => {
           return (
             <Row alignItems="center" gap="2">
-              <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
+              <Icon>{row.eventName ? <Bolt /> : <Eye />}</Icon>
               {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
               <strong>{row.eventName || row.urlPath}</strong>
             </Row>

src/app/(main)/websites/[websiteId]/goals/GoalAddButton.tsx

@@ -1,7 +1,7 @@
 import { Button, MenuTrigger, Dialog, Icon, Text, Modal } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
 import { GoalAddForm } from './GoalAddForm';
-import { Icons } from '@/components/icons';
+import { Plus } from '@/components/icons';
 
 export function GoalAddButton({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
@@ -10,7 +10,7 @@ export function GoalAddButton({ websiteId }: { websiteId: string }) {
     <MenuTrigger>
       <Button variant="primary">
         <Icon>
-          <Icons.Plus />
+          <Plus />
         </Icon>
         <Text>{formatMessage(labels.addGoal)}</Text>
       </Button>

src/app/(main)/websites/[websiteId]/goals/GoalAddForm.tsx

@@ -9,7 +9,15 @@ import {
 } from '@umami/react-zen';
 import { useApi, useMessages } from '@/components/hooks';
 
-export function GoalAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
+export function GoalAddForm({
+  websiteId,
+  onSave,
+  onClose,
+}: {
+  websiteId: string;
+  onSave?: () => void;
+  onClose?: () => void;
+}) {
   const { formatMessage, labels } = useMessages();
   const { post, useMutation } = useApi();
   const { mutate, error, isPending } = useMutation({
@@ -32,6 +40,7 @@ export function GoalAddForm({ onSave, onClose }: { onSave?: () => void; onClose?
 
   return (
     <Form onSubmit={handleSubmit} error={error?.message}>
+      {websiteId}
       <FormField
         name="name"
         label={formatMessage(labels.name)}

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -2,7 +2,7 @@ import { useFormat } from '@/components//hooks/useFormat';
 import { Empty } from '@/components/common/Empty';
 import { FilterButtons } from '@/components/common/FilterButtons';
 import { useCountryNames, useLocale, useMessages, useTimezone } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Eye, Visitor, Bolt } from '@/components/icons';
 import { BROWSERS, OS_NAMES } from '@/lib/constants';
 import { stringToColor } from '@/lib/format';
 import { RealtimeData } from '@/lib/types';
@@ -18,9 +18,9 @@ const TYPE_SESSION = 'session';
 const TYPE_EVENT = 'event';
 
 const icons = {
-  [TYPE_PAGEVIEW]: <Icons.Eye />,
+  [TYPE_PAGEVIEW]: <Eye />,
-  [TYPE_SESSION]: <Icons.Visitor />,
+  [TYPE_SESSION]: <Visitor />,
-  [TYPE_EVENT]: <Icons.Bolt />,
+  [TYPE_EVENT]: <Bolt />,
 };
 
 export function RealtimeLog({ data }: { data: RealtimeData }) {

src/app/(main)/websites/[websiteId]/retention/RetentionTable.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
 import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
-import { Lucide } from '@/components/icons';
+import { Users } from '@/components/icons';
 import { useMessages, useLocale, useRetentionQuery } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 import { formatLongNumber } from '@/lib/format';
@@ -68,7 +68,7 @@ export function RetentionTable({ websiteId, days = DAYS }: { websiteId: string;
               <Text weight="bold">{formatDate(date, 'PP', locale)}</Text>
               <Row alignItems="center" gap>
                 <Icon>
-                  <Lucide.Users />
+                  <Users />
                 </Icon>
                 <Text>{formatLongNumber(visitors)}</Text>
               </Row>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx

@@ -1,6 +1,6 @@
 import { isSameDay } from 'date-fns';
 import { Loading, Icon, StatusLight } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Bolt, Eye } from '@/components/icons';
 import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import styles from './SessionActivity.module.css';
 import { Fragment } from 'react';
@@ -42,7 +42,7 @@ export function SessionActivity({
                   {formatTimezoneDate(createdAt, 'pp')}
                 </StatusLight>
               </div>
-              <Icon>{eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
+              <Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
               <div>{eventName || urlPath}</div>
             </div>
           </Fragment>

src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx

@@ -1,7 +1,7 @@
 import { Icon, TextField, Column, Row, Label, Box, Text } from '@umami/react-zen';
 import { useFormat, useLocale, useMessages, useRegionNames, useTimezone } from '@/components/hooks';
 import { TypeIcon } from '@/components/common/TypeIcon';
-import { Icons } from '@/components/icons';
+import { Location } from '@/components/icons';
 
 export function SessionInfo({ data }) {
   const { locale } = useLocale();
@@ -44,7 +44,7 @@ export function SessionInfo({ data }) {
         <Label>{formatMessage(labels.region)}</Label>
         <Row gap="3">
           <Icon>
-            <Icons.Location />
+            <Location />
           </Icon>
           {getRegionName(data?.region)}
         </Row>
@@ -54,7 +54,7 @@ export function SessionInfo({ data }) {
         <Label>{formatMessage(labels.city)}</Label>
         <Row gap="3">
           <Icon>
-            <Icons.Location />
+            <Location />
           </Icon>
           <Text>{data?.city}</Text>
         </Row>

src/app/login/LoginForm.tsx

@@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
 import { useApi, useMessages } from '@/components/hooks';
 import { setUser } from '@/store/app';
 import { setClientAuthToken } from '@/lib/client';
-import { Icons } from '@/components/icons';
+import { Logo } from '@/components/icons';
 
 export function LoginForm() {
   const { formatMessage, labels, getMessage } = useMessages();
@@ -37,7 +37,7 @@ export function LoginForm() {
   return (
     <Column justifyContent="center" alignItems="center" padding="8" gap="6">
       <Icon size="lg">
-        <Icons.Logo />
+        <Logo />
       </Icon>
       <Heading>umami</Heading>
       <Form onSubmit={handleSubmit} error={getMessage(error)}>

src/app/share/[...shareId]/Header.tsx

@@ -2,7 +2,7 @@ import { Row, Icon, Text, ThemeButton } from '@umami/react-zen';
 import Link from 'next/link';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { SettingsButton } from '@/components/input/SettingsButton';
-import { Icons } from '@/components/icons';
+import { Logo } from '@/components/icons';
 
 export function Header() {
   return (
@@ -10,7 +10,7 @@ export function Header() {
       <Row gap>
         <Link href="https://umami.is" target="_blank">
           <Icon size="lg">
-            <Icons.Logo />
+            <Logo />
           </Icon>
           <Text>umami</Text>
         </Link>

src/assets/calendar.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H128V12c0-6.6-5.4-12-12-12h-8c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h352c8.8 0 16 7.2 16 16v48H32v-48c0-8.8 7.2-16 16-16zm352 384H48c-8.8 0-16-7.2-16-16V192h384v272c0 8.8-7.2 16-16 16zM148 320h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 96h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-96 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm192 0h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12z"/></svg>

src/assets/eye.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"/></svg>

src/assets/globe.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm179.3 160h-67.2c-6.7-36.5-17.5-68.8-31.2-94.7 42.9 19 77.7 52.7 98.4 94.7zM248 56c18.6 0 48.6 41.2 63.2 112H184.8C199.4 97.2 229.4 56 248 56zM48 256c0-13.7 1.4-27.1 4-40h77.7c-1 13.1-1.7 26.3-1.7 40s.7 26.9 1.7 40H52c-2.6-12.9-4-26.3-4-40zm20.7 88h67.2c6.7 36.5 17.5 68.8 31.2 94.7-42.9-19-77.7-52.7-98.4-94.7zm67.2-176H68.7c20.7-42 55.5-75.7 98.4-94.7-13.7 25.9-24.5 58.2-31.2 94.7zM248 456c-18.6 0-48.6-41.2-63.2-112h126.5c-14.7 70.8-44.7 112-63.3 112zm70.1-160H177.9c-1.1-12.8-1.9-26-1.9-40s.8-27.2 1.9-40h140.3c1.1 12.8 1.9 26 1.9 40s-.9 27.2-2 40zm10.8 142.7c13.7-25.9 24.4-58.2 31.2-94.7h67.2c-20.7 42-55.5 75.7-98.4 94.7zM366.3 296c1-13.1 1.7-26.3 1.7-40s-.7-26.9-1.7-40H444c2.6 12.9 4 26.3 4 40s-1.4 27.1-4 40h-77.7z"/></svg>

src/assets/link.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>

src/assets/moon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.98 1400"><path d="M562.44 837.55C335.89 611 288.08 273.54 418.71 0a734.31 734.31 0 0 0-203.17 143.73c-287.39 287.39-287.39 753.33 0 1040.72s753.33 287.4 1040.74 0A733.8 733.8 0 0 0 1400 981.29c-273.55 130.63-611 82.8-837.56-143.74Z"/></svg>

src/assets/sun.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400"><path d="M367.43 422.13a54.44 54.44 0 0 1-38.66-16L205 282.35A54.69 54.69 0 0 1 282.37 205l123.74 123.79a54.68 54.68 0 0 1-38.68 93.34ZM1156.3 1211a54.51 54.51 0 0 1-38.67-16l-123.74-123.79a54.68 54.68 0 1 1 77.34-77.33L1195 1117.65a54.7 54.7 0 0 1-38.7 93.35Zm-912.6 0a54.7 54.7 0 0 1-38.7-93.35l123.74-123.76a54.69 54.69 0 0 1 77.36 77.32L282.37 1195a54.51 54.51 0 0 1-38.67 16Zm788.87-788.87a54.68 54.68 0 0 1-38.68-93.34L1117.61 205a54.69 54.69 0 0 1 77.39 77.35l-123.77 123.76a54.44 54.44 0 0 1-38.66 16.02ZM229.69 754.69h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38Zm1115.62 0h-175a54.69 54.69 0 0 1 0-109.38h175a54.69 54.69 0 0 1 0 109.38ZM700 1400a54.68 54.68 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.68 54.68 0 0 1 700 1400Zm0-1115.62a54.7 54.7 0 0 1-54.69-54.69v-175a54.69 54.69 0 0 1 109.38 0v175A54.7 54.7 0 0 1 700 284.38Z"/><circle cx="700" cy="700" r="306.25"/></svg>

src/assets/users.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 477.869 477.869" viewBox="0 0 477.869 477.869"><path d="M387.415 233.496c48.976-44.029 52.987-119.424 8.958-168.4C355.991 20.177 288.4 12.546 239.02 47.332c-53.83-37.99-128.264-25.149-166.254 28.68-34.859 49.393-27.259 117.054 17.689 157.483C34.606 262.935-.251 320.976.002 384.108v51.2c0 9.426 7.641 17.067 17.067 17.067h443.733c9.426 0 17.067-7.641 17.067-17.067v-51.2c.252-63.132-34.605-121.173-90.454-150.612zM307.201 59.842c47.062-.052 85.256 38.057 85.309 85.119.037 33.564-19.631 64.023-50.237 77.799-1.314.597-2.628 1.143-3.959 1.707a83.66 83.66 0 0 1-12.988 4.045c-.853.188-1.707.29-2.577.461a85.366 85.366 0 0 1-15.019 1.519c-2.27 0-4.557-.171-6.827-.375-.853 0-1.707 0-2.56-.171a86.219 86.219 0 0 1-27.904-8.226c-.324-.154-.7-.137-1.024-.273-1.707-.819-3.413-1.536-4.932-2.458.137-.171.222-.358.358-.529a119.721 119.721 0 0 0 18.278-33.297l.529-1.434a120.381 120.381 0 0 0 4.523-17.562c.154-.87.273-1.707.41-2.645.987-6.067 1.506-12.2 1.553-18.347a120.041 120.041 0 0 0-1.553-18.313c-.137-.887-.256-1.707-.41-2.645a120.414 120.414 0 0 0-4.523-17.562l-.529-1.434a119.747 119.747 0 0 0-18.278-33.297c-.137-.171-.222-.358-.358-.529a84.787 84.787 0 0 1 42.718-11.553zM85.335 145.176c-.121-47.006 37.886-85.21 84.892-85.331a85.112 85.112 0 0 1 59.134 23.686c.99.956 1.963 1.911 2.918 2.901a87.748 87.748 0 0 1 8.09 9.813c.751 1.058 1.434 2.185 2.133 3.277a83.951 83.951 0 0 1 6.263 11.52c.427.973.751 1.963 1.126 2.935a83.422 83.422 0 0 1 4.233 13.653c.12.512.154 1.024.256 1.553a80.338 80.338 0 0 1 0 32.119c-.102.529-.137 1.041-.256 1.553a83.228 83.228 0 0 1-4.233 13.653c-.375.973-.7 1.963-1.126 2.935a84.251 84.251 0 0 1-6.263 11.503c-.7 1.092-1.382 2.219-2.133 3.277a87.549 87.549 0 0 1-8.09 9.813c-.956.99-1.929 1.946-2.918 2.901a85.187 85.187 0 0 1-23.569 15.906 49.35 49.35 0 0 1-4.198 1.707 85.839 85.839 0 0 1-12.663 3.925c-1.075.239-2.185.375-3.277.563a84.67 84.67 0 0 1-14.046 1.417h-1.877a84.563 84.563 0 0 1-14.046-1.417c-1.092-.188-2.202-.324-3.277-.563a85.802 85.802 0 0 1-12.663-3.925c-1.417-.563-2.816-1.143-4.198-1.707-30.534-13.786-50.173-44.166-50.212-77.667zm221.866 273.066H34.135v-34.133c-.25-57.833 36.188-109.468 90.76-128.614a119.092 119.092 0 0 0 91.546 0 137.138 137.138 0 0 1 16.623 7.356c3.55 1.826 6.827 3.908 10.24 6.007 2.219 1.382 4.471 2.731 6.605 4.25 3.294 2.338 6.4 4.881 9.455 7.492 1.963 1.707 3.908 3.413 5.751 5.12 2.816 2.662 5.461 5.478 8.004 8.363a134.465 134.465 0 0 1 5.291 6.383 132.594 132.594 0 0 1 6.349 8.823c1.707 2.56 3.226 5.222 4.727 7.885 1.707 2.935 3.277 5.871 4.71 8.926 1.434 3.055 2.697 6.4 3.925 9.66 1.075 2.833 2.219 5.649 3.106 8.533 1.195 3.959 2.031 8.055 2.867 12.151.512 2.423 1.178 4.796 1.553 7.253a141.153 141.153 0 0 1 1.553 20.412v34.133zm136.534 0h-102.4v-34.133c0-5.342-.307-10.633-.785-15.872-.137-1.536-.375-3.055-.546-4.591-.461-3.772-.99-7.509-1.707-11.213a246.936 246.936 0 0 0-.973-4.762c-.819-3.8-1.769-7.566-2.85-11.298-.358-1.229-.683-2.475-1.058-3.686a169.105 169.105 0 0 0-20.565-43.127l-.666-.973a168.958 168.958 0 0 0-9.404-12.646l-.119-.154a154.895 154.895 0 0 0-11.008-12.237h.7a120.8 120.8 0 0 0 14.524 1.024h.939c4.496-.039 8.985-.33 13.449-.87 1.399-.171 2.782-.427 4.181-.649a117.43 117.43 0 0 0 10.752-2.167c1.007-.256 2.031-.495 3.055-.785a116.211 116.211 0 0 0 13.653-4.642c54.612 19.127 91.083 70.785 90.829 128.649v34.132z"/></svg>

src/components/common/Breadcrumb.tsx

@@ -1,7 +1,8 @@
-import Link from 'next/link';
-import { Flexbox, Icon, Icons, Text } from '@umami/react-zen';
-import styles from './Breadcrumb.module.css';
 import { Fragment } from 'react';
+import Link from 'next/link';
+import { Row, Icon, Text } from '@umami/react-zen';
+import { Chevron } from '@/components/icons';
+import styles from './Breadcrumb.module.css';
 
 export interface BreadcrumbProps {
   data: {
@@ -12,7 +13,7 @@ export interface BreadcrumbProps {
 
 export function Breadcrumb({ data }: BreadcrumbProps) {
   return (
-    <Flexbox alignItems="center" gap={3} className={styles.bar}>
+    <Row alignItems="center" gap className={styles.bar}>
       {data.map((a, i) => {
         return (
           <Fragment key={i}>
@@ -25,12 +26,12 @@ export function Breadcrumb({ data }: BreadcrumbProps) {
             )}
             {i !== data.length - 1 ? (
               <Icon rotate={270}>
-                <Icons.Chevron />
+                <Chevron />
               </Icon>
             ) : null}
           </Fragment>
         );
       })}
-    </Flexbox>
+    </Row>
   );
 }

src/components/common/DateDisplay.tsx

@@ -1,7 +1,7 @@
 import { Icon, Row, Text } from '@umami/react-zen';
 import { differenceInDays, isSameDay } from 'date-fns';
 import { useLocale } from '@/components/hooks';
-import { Lucide } from '@/components/icons';
+import { Calendar } from '@/components/icons';
 import { formatDate } from '@/lib/date';
 
 export function DateDisplay({ startDate, endDate }) {
@@ -11,7 +11,7 @@ export function DateDisplay({ startDate, endDate }) {
   return (
     <Row gap="3" alignItems="center" wrap="nowrap">
       <Icon>
-        <Lucide.Calendar />
+        <Calendar />
       </Icon>
       <Text wrap="nowrap">
         {isSingleDate ? (

src/components/common/EmptyPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { Icon, Text, Column } from '@umami/react-zen';
-import { Icons } from '@/components/icons';
+import { Logo } from '@/components/icons';
 
 export interface EmptyPlaceholderProps {
   message?: string;
@@ -11,7 +11,7 @@ export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
   return (
     <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
       <Icon size="xl" fillColor="3" strokeColor="3">
-        <Icons.Logo />
+        <Logo />
       </Icon>
       <Text>{message}</Text>
       <div>{children}</div>

src/components/common/ErrorMessage.tsx

@@ -1,6 +1,7 @@
-import { Icon, Icons, Text } from '@umami/react-zen';
+import { Icon, Text } from '@umami/react-zen';
 import styles from './ErrorMessage.module.css';
 import { useMessages } from '@/components/hooks';
+import { Alert } from '@/components/icons';
 
 export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
@@ -8,7 +9,7 @@ export function ErrorMessage() {
   return (
     <div className={styles.error}>
       <Icon className={styles.icon} size="lg">
-        <Icons.Alert />
+        <Alert />
       </Icon>
       <Text>{formatMessage(messages.error)}</Text>
     </div>

src/components/common/FilterLink.tsx

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
-import { Icon, Icons } from '@umami/react-zen';
+import { Icon } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
+import { ExternalLink } from '@/components/icons';
 import styles from './FilterLink.module.css';
 
 export interface FilterLinkProps {
@@ -44,7 +45,7 @@ export function FilterLink({
       {externalUrl && (
         <a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
           <Icon className={styles.icon}>
-            <Icons.ExternalLink />
+            <ExternalLink />
           </Icon>
         </a>
       )}

src/components/common/FilterRecord.tsx

@@ -7,10 +7,10 @@ import {
   ListItem,
   Select,
   Icon,
-  Icons,
   Button,
 } from '@umami/react-zen';
 import { useFilters } from '@/components/hooks';
+import { Close } from '@/components/icons';
 
 export interface FilterRecordProps {
   name: string;
@@ -55,7 +55,7 @@ export function FilterRecord({
       <Column justifyContent="flex-end">
         <Button variant="quiet" onPress={() => onRemove?.(name)}>
           <Icon>
-            <Icons.Close />
+            <Close />
           </Icon>
         </Button>
       </Column>

src/components/common/HamburgerButton.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons } from '@umami/react-zen';
+import { Button, Icon } from '@umami/react-zen';
 import { useState } from 'react';
+import { Close, Menu } from '@/components/icons';
 import { MobileMenu } from './MobileMenu';
 
 export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
@@ -11,7 +12,7 @@ export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
   return (
     <>
       <Button variant="quiet" onClick={handleClick}>
-        <Icon>{active ? <Icons.Close /> : <Icons.Menu />}</Icon>
+        <Icon>{active ? <Close /> : <Menu />}</Icon>
       </Button>
       {active && <MobileMenu items={menuItems} onClose={handleClose} />}
     </>

src/components/common/Pager.tsx

@@ -1,5 +1,6 @@
-import { Button, Icon, Icons, Row, Text } from '@umami/react-zen';
+import { Button, Icon, Row, Text } from '@umami/react-zen';
 import { useMessages } from '@/components/hooks';
+import { Chevron } from '@/components/icons';
 
 export interface PagerProps {
   page: string | number;
@@ -38,12 +39,12 @@ export function Pager({ page, pageSize, count, onPageChange }: PagerProps) {
         <Text>{formatMessage(labels.pageOf, { current: page, total: maxPage })}</Text>
         <Button onPress={() => handlePageChange(-1)} isDisabled={firstPage}>
           <Icon size="sm" rotate={180}>
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Button onPress={() => handlePageChange(1)} isDisabled={lastPage}>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
       </Row>

src/components/hooks/index.ts

@@ -40,6 +40,7 @@ export * from './useFields';
 export * from './useFilters';
 export * from './useForceUpdate';
 export * from './useFormat';
+export * from './useGlobalState';
 export * from './useLanguageNames';
 export * from './useLocale';
 export * from './useMessages';

src/components/hooks/useGlobalState.ts

@@ -10,4 +10,4 @@ const useGlobalState = (key: string, value?: any) => {
   return [store(state => state[key]), (value: any) => store.setState({ [key]: value })];
 };
 
-export default useGlobalState;
+export { useGlobalState };

src/components/icons.ts

@@ -1,12 +1,33 @@
-import { Icons as ZenIcons } from '@umami/react-zen';
+export {
-import * as lucide from 'lucide-react';
+  AlertTriangle as Alert,
-import * as LocalIcons from '@/components/svg';
+  ArrowRight as Arrow,
-
+  Calendar,
-const icons = {
+  ChevronRight as Chevron,
-  ...ZenIcons,
+  X as Close,
-  ...LocalIcons,
+  Copy,
-};
+  Edit,
-
+  Ellipsis,
-export const Lucide = lucide;
+  Eye,
-
+  ExternalLink,
-export const Icons = icons;
+  Globe,
+  Grid2X2,
+  LayoutDashboard,
+  Link,
+  ListFilter,
+  LockKeyhole,
+  LogOut,
+  Menu,
+  Moon,
+  MoreHorizontal as More,
+  PanelLeft,
+  Plus,
+  RefreshCw as Refresh,
+  Settings,
+  Share,
+  Slash,
+  SquarePen,
+  Sun,
+  Trash,
+  Users,
+} from 'lucide-react';
+export * from '@/components/svg';

src/components/input/FilterBar.tsx

@@ -1,6 +1,7 @@
 import { MouseEvent } from 'react';
-import { Button, Icon, Icons, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
+import { Button, Icon, Text, Row, TooltipTrigger, Tooltip } from '@umami/react-zen';
 import { useNavigation, useMessages, useFormat, useFilters } from '@/components/hooks';
+import { Close } from '@/components/icons';
 import { isSearchOperator } from '@/lib/params';
 
 export function FilterBar() {
@@ -51,8 +52,8 @@ export function FilterBar() {
                     {paramValue}
                   </Text>
                 </Row>
-                <Icon onClick={e => handleCloseFilter(name, e)} size="xs" color>
+                <Icon onClick={e => handleCloseFilter(name, e)} size="xs">
-                  <Icons.Close />
+                  <Close />
                 </Icon>
               </Row>
             </Row>
@@ -62,7 +63,7 @@ export function FilterBar() {
       <TooltipTrigger delay={0}>
         <Button variant="quiet" onPress={handleResetFilter}>
           <Icon>
-            <Icons.Close />
+            <Close />
           </Icon>
         </Button>
         <Tooltip>

src/components/input/MenuButton.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, Key } from 'react';
 import { DialogTrigger, Button, Menu, Popover, Icon } from '@umami/react-zen';
-import { Lucide } from '@/components/icons';
+import { Ellipsis } from '@/components/icons';
 
 export function MenuButton({
   children,
@@ -17,7 +17,7 @@ export function MenuButton({
     <DialogTrigger>
       <Button variant="outline">
         <Icon>
-          <Lucide.Ellipsis />
+          <Ellipsis />
         </Icon>
       </Button>
       <Popover placement="bottom start">

src/components/input/MonthSelect.tsx

@@ -1,6 +1,6 @@
 import { Row, Text, Icon, Button, MenuTrigger, Popover, Menu, MenuItem } from '@umami/react-zen';
 import { startOfMonth, endOfMonth, startOfYear, addMonths, subYears } from 'date-fns';
-import { Icons } from '@/components/icons';
+import { Chevron } from '@/components/icons';
 import { useLocale } from '@/components/hooks';
 import { formatDate } from '@/lib/date';
 
@@ -9,7 +9,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // eslint-disable-next-line
   const handleChange = (close: () => void, date: Date) => {
     onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
     close();
@@ -31,7 +31,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
         <Button variant="quiet">
           <Text>{month}</Text>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Popover>
@@ -50,13 +50,17 @@ export function MonthSelect({ date = new Date(), onChange }) {
         <Button variant="quiet">
           <Text>{year}</Text>
           <Icon size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Button>
         <Popover>
           <Menu>
             {years.map(year => {
-              return <MenuItem id={year}>{year}</MenuItem>;
+              return (
+                <MenuItem key={year} id={year}>
+                  {year}
+                </MenuItem>
+              );
             })}
           </Menu>
         </Popover>

src/components/input/RefreshButton.tsx

@@ -1,7 +1,7 @@
 import { LoadingButton, Icon, Tooltip, TooltipTrigger } from '@umami/react-zen';
 import { setWebsiteDateRange } from '@/store/websites';
 import { useDateRange } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Refresh } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function RefreshButton({
@@ -24,7 +24,7 @@ export function RefreshButton({
     <TooltipTrigger>
       <LoadingButton isLoading={isLoading} onPress={handleClick}>
         <Icon>
-          <Icons.Refresh />
+          <Refresh />
         </Icon>
       </LoadingButton>
       <Tooltip>{formatMessage(labels.refresh)}</Tooltip>

src/components/input/SettingsButton.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, DialogTrigger, Popover, Column, Label } from '@umami/react-zen';
 import { TimezoneSetting } from '@/app/(main)/settings/profile/TimezoneSetting';
 import { DateRangeSetting } from '@/app/(main)/settings/profile/DateRangeSetting';
-import { Icons } from '@/components/icons';
+import { Gear } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export function SettingsButton() {
@@ -11,7 +11,7 @@ export function SettingsButton() {
     <DialogTrigger>
       <Button variant="quiet">
         <Icon>
-          <Icons.Gear />
+          <Gear />
         </Icon>
       </Button>
       <Popover placement="bottom end">

src/components/input/TeamsButton.tsx

@@ -12,10 +12,10 @@ import {
   Popover,
   Row,
   Box,
-  Icons,
 } from '@umami/react-zen';
 import { User, Users } from 'lucide-react';
 import { useLoginQuery, useMessages, useTeamsQuery, useNavigation } from '@/components/hooks';
+import { Chevron } from '@/components/icons';
 
 export function TeamsButton({
   className,
@@ -46,8 +46,8 @@ export function TeamsButton({
         <Row alignItems="center" gap="3">
           <Icon>{teamId ? <Users /> : <User />}</Icon>
           {showText && <Text>{teamId ? team?.name : user.username}</Text>}
-          <Icon rotate={90} size="xs">
+          <Icon rotate={90} size="sm">
-            <Icons.Chevron />
+            <Chevron />
           </Icon>
         </Row>
       </Button>

src/components/input/WebsiteDateFilter.tsx

@@ -9,7 +9,7 @@ import {
   Tooltip,
 } from '@umami/react-zen';
 import { isAfter } from 'date-fns';
-import { Icons } from '@/components/icons';
+import { Chevron, Close, Compare } from '@/components/icons';
 import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
 import { getOffsetDateRange } from '@/lib/date';
 import { DateRange } from '@/lib/types';
@@ -65,12 +65,12 @@ export function WebsiteDateFilter({
         <Row gap="1">
           <Button onPress={() => handleIncrement(-1)} variant="quiet">
             <Icon size="xs" rotate={180}>
-              <Icons.Chevron />
+              <Chevron />
             </Icon>
           </Button>
           <Button onPress={() => handleIncrement(1)} variant="quiet" isDisabled={disableForward}>
             <Icon size="xs">
-              <Icons.Chevron />
+              <Chevron />
             </Icon>
           </Button>
         </Row>
@@ -95,7 +95,7 @@ export function WebsiteDateFilter({
       {!isAllTime && allowCompare && (
         <TooltipTrigger delay={0}>
           <Button variant="quiet" onPress={handleCompare}>
-            <Icon fillColor>{compare ? <Icons.Close /> : <Icons.Compare />}</Icon>
+            <Icon fillColor>{compare ? <Close /> : <Compare />}</Icon>
           </Button>
           <Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
         </TooltipTrigger>

src/components/metrics/ChangeLabel.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { Icon, Icons, Text } from '@umami/react-zen';
+import { Icon, Text } from '@umami/react-zen';
 import { ReactNode } from 'react';
+import { Arrow } from '@/components/icons';
 import styles from './ChangeLabel.module.css';
 
 export function ChangeLabel({
@@ -35,7 +36,7 @@ export function ChangeLabel({
     >
       {!neutral && (
         <Icon rotate={positive ? -90 : 90} size={size}>
-          <Icons.Arrow />
+          <Arrow />
         </Icon>
       )}
       <Text>{children || value}</Text>

src/components/metrics/MetricsTable.tsx

@@ -5,7 +5,7 @@ import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
 import { percentFilter } from '@/lib/filters';
 import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
-import { Icons } from '@/components/icons';
+import { Arrow } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
 
 export interface MetricsTableProps extends ListTableProps {
@@ -98,7 +98,7 @@ export function MetricsTable({
           <LinkButton href={renderUrl({ view: type })} variant="quiet">
             <Text>{formatMessage(labels.more)}</Text>
             <Icon size="sm">
-              <Icons.Arrow />
+              <Arrow />
             </Icon>
           </LinkButton>
         )}

src/components/svg/Eye.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { SVGProps } from 'react';
-const SvgEye = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" {...props}>
-    <path d="M288 144a111 111 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144m284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19M288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400" />
-  </svg>
-);
-export default SvgEye;

src/components/svg/index.ts

@@ -3,27 +3,22 @@ export { default as BarChart } from './BarChart';
 export { default as Bars } from './Bars';
 export { default as Bolt } from './Bolt';
 export { default as Bookmark } from './Bookmark';
-export { default as Calendar } from './Calendar';
 export { default as Change } from './Change';
 export { default as Clock } from './Clock';
 export { default as Compare } from './Compare';
 export { default as Dashboard } from './Dashboard';
 export { default as Expand } from './Expand';
-export { default as Eye } from './Eye';
 export { default as Flag } from './Flag';
 export { default as Funnel } from './Funnel';
 export { default as Gear } from './Gear';
-export { default as Globe } from './Globe';
 export { default as Lightbulb } from './Lightbulb';
 export { default as Lightning } from './Lightning';
-export { default as Link } from './Link';
 export { default as Location } from './Location';
 export { default as Lock } from './Lock';
 export { default as LogoWhite } from './LogoWhite';
 export { default as Logo } from './Logo';
 export { default as Magnet } from './Magnet';
 export { default as Money } from './Money';
-export { default as Moon } from './Moon';
 export { default as Network } from './Network';
 export { default as Nodes } from './Nodes';
 export { default as Overview } from './Overview';
@@ -34,10 +29,8 @@ export { default as Redo } from './Redo';
 export { default as Reports } from './Reports';
 export { default as Security } from './Security';
 export { default as Speaker } from './Speaker';
-export { default as Sun } from './Sun';
 export { default as Tag } from './Tag';
 export { default as Target } from './Target';
 export { default as User } from './User';
-export { default as Users } from './Users';
 export { default as Visitor } from './Visitor';
 export { default as Website } from './Website';