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 {
-  Button,
-  Icon,
-  Icons,
-  Modal,
-  Dialog,
-  DialogTrigger,
-  Text,
-  useToast,
-} from '@umami/react-zen';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import { Plus } from '@/components/icons';
 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">
-            <Icons.Plus />
+          <Icon>
+            <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">
-          <Lucide.LockKeyhole />
+        <Icon>
+          <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">
-          <Icons.AddUser />
+        <Icon>
+          <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 {
-  Button,
-  Icon,
-  Text,
-  Modal,
-  Icons,
-  DialogTrigger,
-  Dialog,
-  useToast,
-} from '@umami/react-zen';
+import { Button, Icon, Text, Modal, 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 {
-  Button,
-  Icon,
-  Icons,
-  Modal,
-  Dialog,
-  DialogTrigger,
-  Text,
-  useToast,
-} from '@umami/react-zen';
+import { Button, Icon, Modal, Dialog, DialogTrigger, Text, useToast } from '@umami/react-zen';
+import { Plus } from '@/components/icons';
 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: 'edit', label: formatMessage(labels.edit), icon: <Lucide.Edit />, seperator: true },
+    { id: 'share', label: formatMessage(labels.share), icon: <Share /> },
+    { 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_SESSION]: <Icons.Visitor />,
-  [TYPE_EVENT]: <Icons.Bolt />,
+  [TYPE_PAGEVIEW]: <Eye />,
+  [TYPE_SESSION]: <Visitor />,
+  [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>