Updated icons.

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

@@ -1,7 +1,7 @@
 import { Grid, Row, Column, Text, Icon, ProgressBar, Dialog } from '@umami/react-zen';
 import { ReportEditButton } from '@/components/input/ReportEditButton';
 import { useMessages, useResultQuery } from '@/components/hooks';
-import { File, Lightning, User } from '@/components/icons';
+import { File, LightningSvg, User } from '@/components/icons';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { formatLongNumber } from '@/lib/format';
 import { GoalEditForm } from './GoalEditForm';
@@ -68,7 +68,7 @@ export function Goal({ id, name, type, parameters, websiteId, startDate, endDate
           </Row>
           <Row alignItems="center" justifyContent="space-between" gap>
             <Row alignItems="center" gap>
-              <Icon>{parameters.type === 'path' ? <File /> : <Lightning />}</Icon>
+              <Icon>{parameters.type === 'path' ? <File /> : <LightningSvg />}</Icon>
               <Text>{parameters.value}</Text>
             </Row>
             <Row alignItems="center" gap>

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

@@ -2,6 +2,27 @@ import { Grid, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
 import { SideMenu } from '@/components/common/SideMenu';
+import {
+  Link,
+  LogOut,
+  LogIn,
+  Search,
+  Type,
+  ArrowRight,
+  Megaphone,
+  Earth,
+  Globe,
+  Landmark,
+  MapPin,
+  AppWindow,
+  Laptop,
+  Languages,
+  Monitor,
+  Cpu,
+  LightningSvg,
+  LucideCaseSensitive,
+  Tag,
+} from '@/components/icons';
 
 export function WebsiteExpandedView({
   websiteId,
@@ -24,26 +45,31 @@ export function WebsiteExpandedView({
           id: 'path',
           label: formatMessage(labels.path),
           path: updateParams({ view: 'path' }),
+          icon: <Link />,
         },
         {
           id: 'entry',
           label: formatMessage(labels.entry),
           path: updateParams({ view: 'entry' }),
+          icon: <LogIn />,
         },
         {
           id: 'exit',
           label: formatMessage(labels.exit),
           path: updateParams({ view: 'exit' }),
+          icon: <LogOut />,
         },
         {
           id: 'title',
           label: formatMessage(labels.title),
           path: updateParams({ view: 'title' }),
+          icon: <Type />,
         },
         {
           id: 'query',
           label: formatMessage(labels.query),
           path: updateParams({ view: 'query' }),
+          icon: <Search />,
         },
       ],
     },
@@ -54,16 +80,19 @@ export function WebsiteExpandedView({
           id: 'referrer',
           label: formatMessage(labels.referrer),
           path: updateParams({ view: 'referrer' }),
+          icon: <ArrowRight />,
         },
         {
           id: 'channel',
           label: formatMessage(labels.channel),
           path: updateParams({ view: 'channel' }),
+          icon: <Megaphone />,
         },
         {
           id: 'domain',
           label: formatMessage(labels.domain),
           path: updateParams({ view: 'domain' }),
+          icon: <Globe />,
         },
       ],
     },
@@ -74,16 +103,19 @@ export function WebsiteExpandedView({
           id: 'country',
           label: formatMessage(labels.country),
           path: updateParams({ view: 'country' }),
+          icon: <Earth />,
         },
         {
           id: 'region',
           label: formatMessage(labels.region),
           path: updateParams({ view: 'region' }),
+          icon: <MapPin />,
         },
         {
           id: 'city',
           label: formatMessage(labels.city),
           path: updateParams({ view: 'city' }),
+          icon: <Landmark />,
         },
       ],
     },
@@ -94,26 +126,31 @@ export function WebsiteExpandedView({
           id: 'browser',
           label: formatMessage(labels.browser),
           path: updateParams({ view: 'browser' }),
+          icon: <AppWindow />,
         },
         {
           id: 'os',
           label: formatMessage(labels.os),
           path: updateParams({ view: 'os' }),
+          icon: <Cpu />,
         },
         {
           id: 'device',
           label: formatMessage(labels.device),
           path: updateParams({ view: 'device' }),
+          icon: <Laptop />,
         },
         {
           id: 'language',
           label: formatMessage(labels.language),
           path: updateParams({ view: 'language' }),
+          icon: <Languages />,
         },
         {
           id: 'screen',
           label: formatMessage(labels.screen),
           path: updateParams({ view: 'screen' }),
+          icon: <Monitor />,
         },
       ],
     },
@@ -124,16 +161,19 @@ export function WebsiteExpandedView({
           id: 'event',
           label: formatMessage(labels.event),
           path: updateParams({ view: 'event' }),
+          icon: <LightningSvg />,
         },
         {
           id: 'hostname',
           label: formatMessage(labels.hostname),
           path: updateParams({ view: 'hostname' }),
+          icon: <LucideCaseSensitive />,
         },
         {
           id: 'tag',
           label: formatMessage(labels.tag),
           path: updateParams({ view: 'tag' }),
+          icon: <Tag />,
         },
       ],
     },
@@ -142,7 +182,7 @@ export function WebsiteExpandedView({
   return (
     <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
       <Column gap="6" border="right" paddingRight="3">
-        <SideMenu items={items} selectedKey={view} />
+        <SideMenu items={items} selectedKey={view} muteItems={false} />
       </Column>
       <Column overflow="hidden">
         <MetricsExpandedTable

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

@@ -1,19 +1,19 @@
 import {
   Eye,
-  Lightning,
+  LightningSvg,
   User,
   Clock,
   Sheet,
-  Target,
-  Funnel,
-  Path,
-  Magnet,
+  TargetSvg,
+  FunnelSvg,
+  PathSvg,
+  MagnetSvg,
   Tag,
-  Money,
+  MoneySvg,
   Network,
   ChartPie,
   UserPlus,
-  Compare,
+  CompareSvg,
 } from '@/components/icons';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { SideMenu } from '@/components/common/SideMenu';
@@ -44,7 +44,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'events',
           label: formatMessage(labels.events),
-          icon: <Lightning />,
+          icon: <LightningSvg />,
           path: renderPath('/events'),
         },
         {
@@ -62,7 +62,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'compare',
           label: formatMessage(labels.compare),
-          icon: <Compare />,
+          icon: <CompareSvg />,
           path: renderPath('/compare'),
         },
         {
@@ -79,25 +79,25 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'goals',
           label: formatMessage(labels.goals),
-          icon: <Target />,
+          icon: <TargetSvg />,
           path: renderPath('/goals'),
         },
         {
           id: 'funnel',
           label: formatMessage(labels.funnels),
-          icon: <Funnel />,
+          icon: <FunnelSvg />,
           path: renderPath('/funnels'),
         },
         {
           id: 'journeys',
           label: formatMessage(labels.journeys),
-          icon: <Path />,
+          icon: <PathSvg />,
           path: renderPath('/journeys'),
         },
         {
           id: 'retention',
           label: formatMessage(labels.retention),
-          icon: <Magnet />,
+          icon: <MagnetSvg />,
           path: renderPath('/retention'),
         },
       ],
@@ -131,7 +131,7 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
         {
           id: 'revenue',
           label: formatMessage(labels.revenue),
-          icon: <Money />,
+          icon: <MoneySvg />,
           path: renderPath('/revenue'),
         },
         {

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

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { Icon, TextField, Column, Row, Label, Text } from '@umami/react-zen';
 import { useFormat, useLocale, useMessages, useRegionNames } from '@/components/hooks';
 import { TypeIcon } from '@/components/common/TypeIcon';
-import { Location, KeyRound, Calendar } from '@/components/icons';
+import { LocationSvg, KeyRound, Calendar } from '@/components/icons';
 import { DateDistance } from '@/components/common/DateDistance';
 
 export function SessionInfo({ data }) {
@@ -36,11 +36,11 @@ export function SessionInfo({ data }) {
         {formatValue(data?.country, 'country')}
       </Info>
 
-      <Info label={formatMessage(labels.region)} icon={<Location />}>
+      <Info label={formatMessage(labels.region)} icon={<LocationSvg />}>
         {getRegionName(data?.region)}
       </Info>
 
-      <Info label={formatMessage(labels.city)} icon={<Location />}>
+      <Info label={formatMessage(labels.city)} icon={<LocationSvg />}>
         {data?.city}
       </Info>