From 1676d721310f58a9593cff3fac3d1d9ad4a704fd Mon Sep 17 00:00:00 2001
From: Blake Niemyjski <bniemyjski@gmail.com>
Date: Fri, 10 Jan 2025 20:24:24 -0600
Subject: [PATCH] next: switch to lucide icons

---
 .../components/extended-data-item.svelte      |  8 +++---
 .../summary/event-error-summary.svelte        |  4 +--
 .../summary/event-simple-summary.svelte       |  4 +--
 .../summary/stack-error-summary.svelte        |  4 +--
 .../summary/stack-simple-summary.svelte       |  4 +--
 .../events-bulk-actions-dropdown-menu.svelte  |  2 +-
 .../events/components/views/Overview.svelte   | 14 +++++-----
 .../events/components/views/Request.svelte    |  6 ++---
 .../events/components/views/overview.svelte   | 14 +++++-----
 .../events/components/views/request.svelte    |  6 ++---
 .../copy-to-clipboard-button.svelte           |  4 +--
 .../shared/components/dark-mode-button.svelte |  8 +++---
 .../data-table-column-header.svelte           | 22 +++++++---------
 .../data-table/data-table-pagination.svelte   | 12 ++++-----
 .../data-table/data-table-view-options.svelte |  4 +--
 .../faceted-filter-builder.svelte             |  4 +--
 .../filters/clickable-boolean-filter.svelte   |  4 +--
 .../filters/clickable-date-filter.svelte      |  4 +--
 .../filters/clickable-number-filter.svelte    |  4 +--
 .../clickable-organization-filter.svelte      |  4 +--
 .../filters/clickable-project-filter.svelte   |  4 +--
 .../filters/clickable-reference-filter.svelte |  4 +--
 .../filters/clickable-session-filter.svelte   |  4 +--
 .../filters/clickable-status-filter.svelte    |  4 +--
 .../filters/clickable-string-filter.svelte    |  4 +--
 .../filters/clickable-type-filter.svelte      |  4 +--
 .../filters/clickable-version-filter.svelte   |  4 +--
 .../base/drop-down-faceted-filter.svelte      |  4 +--
 .../base/multiselect-faceted-filter.svelte    |  4 +--
 .../shared/components/search-input.svelte     |  4 +--
 .../mark-stack-fixed-in-version-dialog.svelte |  6 ++---
 .../stacks/components/stack-card.svelte       | 26 +++++++++----------
 .../stack-options-dropdown-menu.svelte        | 16 ++++++------
 .../stacks/components/stack-references.svelte | 12 ++++-----
 .../stack-status-dropdown-menu.svelte         |  2 +-
 .../stacks-bulk-actions-dropdown-menu.svelte  |  2 +-
 .../(app)/(components)/layouts/Footer.svelte  | 16 ++++++------
 .../(app)/(components)/layouts/Navbar.svelte  |  4 +--
 .../(app)/(components)/layouts/footer.svelte  | 16 ++++++------
 .../(app)/(components)/layouts/navbar.svelte  |  4 +--
 .../ClientApp/src/routes/(app)/+page.svelte   |  4 +--
 .../src/routes/(app)/account/routes.ts        | 24 ++++++++---------
 .../(app)/account/security/+page.svelte       | 16 ++++++------
 .../(app)/account/sessions/+page.svelte       |  8 +++---
 .../src/routes/(app)/issues/+page.svelte      |  4 +--
 .../ClientApp/src/routes/(app)/routes.ts      | 12 ++++-----
 .../src/routes/(app)/stream/+page.svelte      |  4 +--
 .../src/routes/(auth)/login/+page.svelte      | 16 ++++++------
 .../ClientApp/src/routes/(auth)/routes.ts     |  8 +++---
 .../ClientApp/src/routes/routes.ts            |  3 ++-
 .../ClientApp/src/routes/status/routes.ts     |  4 +--
 51 files changed, 188 insertions(+), 195 deletions(-)

diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
index 1af3449614..df84c2aa6f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/extended-data-item.svelte
@@ -3,8 +3,8 @@
     import ObjectDump from '$comp/object-dump.svelte';
     import { Code, H4 } from '$comp/typography';
     import { Button } from '$comp/ui/button';
-    import IconArrowDown from '~icons/mdi/arrow-down';
-    import IconArrowUp from '~icons/mdi/arrow-up';
+    import ArrowDown from 'lucide-svelte/icons/arrow-down';
+    import ArrowUp from 'lucide-svelte/icons/arrow-up';
 
     interface Props {
         canPromote?: boolean;
@@ -70,11 +70,11 @@
             {#if canPromote}
                 {#if !isPromoted}
                     <Button onclick={async () => await promote(title)} size="icon" title="Promote to Tab"
-                        ><IconArrowUp /><span class="sr-only">Promote to Tab</span></Button
+                        ><ArrowUp /><span class="sr-only">Promote to Tab</span></Button
                     >
                 {:else}
                     <Button onclick={async () => await demote(title)} size="icon" title="Demote Tab"
-                        ><IconArrowDown /><span class="sr-only">Demote Tab</span></Button
+                        ><ArrowDown /><span class="sr-only">Demote Tab</span></Button
                     >
                 {/if}
             {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte
index 91ddfec4d8..c72ef8598f 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-error-summary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { EventSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -35,7 +35,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte
index 466c3f9c10..f094a63add 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/event-simple-summary.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { EventSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -19,7 +19,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
index 968240be59..6ac849c678 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-error-summary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
     import { Badge } from '$comp/ui/badge';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -43,7 +43,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
index 7bff37e68d..c7be48736e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/summary/stack-simple-summary.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, Muted } from '$comp/typography';
     import { Badge } from '$comp/ui/badge';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
 
     import type { StackSummaryModel, SummaryModel, SummaryTemplateKeys } from './index';
 
@@ -31,7 +31,7 @@
 
 {#if source.data.Path}
     <Muted class="ml-6 hidden sm:block">
-        <IconChevronRight class="inline" />
+        <ChevronRight class="inline" />
         <span class="line-clamp-1 inline">{source.data.Path}</span>
     </Muted>
 {/if}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte
index c8628b17af..b5186e33ac 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/table/events-bulk-actions-dropdown-menu.svelte
@@ -7,8 +7,8 @@
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { deleteEvent } from '$features/events/api.svelte';
     import { type Table as SvelteTable } from '@tanstack/svelte-table';
+    import ChevronDown from 'lucide-svelte/icons/chevron-down';
     import { toast } from 'svelte-sonner';
-    import ChevronDown from '~icons/mdi/chevron-down';
 
     import RemoveEventDialog from '../dialogs/remove-event-dialog.svelte';
 
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte
index 4b9d175494..2165ab602d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Overview.svelte
@@ -24,9 +24,9 @@
         getStackTrace,
         hasErrorOrSimpleError
     } from '$features/events/persistent-event';
-    import IconEmail from '~icons/mdi/email';
-    import IconFilter from '~icons/mdi/filter';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
+    import Filter from 'lucide-svelte/icons/filter';
+    import Email from 'lucide-svelte/icons/mail';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -198,7 +198,7 @@
                     {#each event.tags as tag (tag)}
                         <Badge color="dark"
                             ><ClickableStringFilter {changed} class="mr-1" term="tag" value={tag}
-                                ><IconFilter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
+                                ><Filter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
                             >{tag}</Badge
                         >
                     {/each}
@@ -213,7 +213,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -231,9 +231,7 @@
                     <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                         ><ClickableStringFilter {changed} term="user.email" value={userEmail} /></Table.Cell
                     >
-                    <Table.Cell class="flex items-center"
-                        >{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><IconEmail /></A></Table.Cell
-                    >
+                    <Table.Cell class="flex items-center">{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><Email /></A></Table.Cell>
                 </Table.Row>
             {/if}
             {#if userIdentity}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte
index 0655cbe85b..fe33fe94fa 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/Request.svelte
@@ -6,7 +6,7 @@
     import { Button } from '$comp/ui/button';
     import * as Table from '$comp/ui/table';
     import { getRequestInfoPath, getRequestInfoUrl } from '$features/events/persistent-event';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -64,7 +64,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -88,7 +88,7 @@
                         size="sm"
                         target="_blank"
                         title="Open in new window"
-                        variant="ghost"><IconOpenInNew /></Button
+                        variant="ghost"><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
index 4b9d175494..2165ab602d 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/overview.svelte
@@ -24,9 +24,9 @@
         getStackTrace,
         hasErrorOrSimpleError
     } from '$features/events/persistent-event';
-    import IconEmail from '~icons/mdi/email';
-    import IconFilter from '~icons/mdi/filter';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
+    import Filter from 'lucide-svelte/icons/filter';
+    import Email from 'lucide-svelte/icons/mail';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -198,7 +198,7 @@
                     {#each event.tags as tag (tag)}
                         <Badge color="dark"
                             ><ClickableStringFilter {changed} class="mr-1" term="tag" value={tag}
-                                ><IconFilter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
+                                ><Filter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
                             >{tag}</Badge
                         >
                     {/each}
@@ -213,7 +213,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -231,9 +231,7 @@
                     <Table.Cell class="w-4 pr-0 opacity-0 group-hover:opacity-100"
                         ><ClickableStringFilter {changed} term="user.email" value={userEmail} /></Table.Cell
                     >
-                    <Table.Cell class="flex items-center"
-                        >{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><IconEmail /></A></Table.Cell
-                    >
+                    <Table.Cell class="flex items-center">{userEmail}<A href="mailto:{userEmail}" title="Send email to {userEmail}"><Email /></A></Table.Cell>
                 </Table.Row>
             {/if}
             {#if userIdentity}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte
index 0655cbe85b..fe33fe94fa 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/events/components/views/request.svelte
@@ -6,7 +6,7 @@
     import { Button } from '$comp/ui/button';
     import * as Table from '$comp/ui/table';
     import { getRequestInfoPath, getRequestInfoUrl } from '$features/events/persistent-event';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
 
     import type { PersistentEvent } from '../../models/index';
 
@@ -64,7 +64,7 @@
                 >
                 <Table.Cell class="flex items-center gap-x-1"
                     >{requestUrl}<Button href={requestUrl} rel="noopener noreferrer" size="sm" target="_blank" title="Open in new window" variant="ghost"
-                        ><IconOpenInNew /></Button
+                        ><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
@@ -88,7 +88,7 @@
                         size="sm"
                         target="_blank"
                         title="Open in new window"
-                        variant="ghost"><IconOpenInNew /></Button
+                        variant="ghost"><ExternalLink /></Button
                     ></Table.Cell
                 >
             </Table.Row>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte
index 1a140dcf7f..b215d3353c 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/copy-to-clipboard-button.svelte
@@ -3,8 +3,8 @@
     import type { VariantProps } from 'tailwind-variants';
 
     import { Button, type ButtonProps, type buttonVariants } from '$comp/ui/button';
+    import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy';
     import { toast } from 'svelte-sonner';
-    import IconContentCopy from '~icons/mdi/content-copy';
 
     type Props = ButtonProps & {
         children?: Snippet;
@@ -29,7 +29,7 @@
         {#if children}
             {@render children()}
         {:else}
-            <IconContentCopy class="size-4" />
+            <ClipboardCopy class="size-4" />
         {/if}
     </Button>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte
index af6a61a908..41fd1789e8 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/dark-mode-button.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { Button } from '$comp/ui/button';
     import * as ContextMenu from '$comp/ui/context-menu';
+    import Moon from 'lucide-svelte/icons/moon';
+    import Sun from 'lucide-svelte/icons/sun';
     import { setMode, toggleMode, userPrefersMode } from 'mode-watcher';
-    import IconMoonWaningCrescent from '~icons/mdi/moon-waning-crescent';
-    import IconWhiteBalanceSunny from '~icons/mdi/white-balance-sunny';
 
     function onUserThemePreferenceChange(mode?: string) {
         setMode(mode as 'dark' | 'light' | 'system');
@@ -13,8 +13,8 @@
 <ContextMenu.Root>
     <ContextMenu.Trigger>
         <Button onclick={toggleMode} size="icon" title="Toggle dark mode" variant="outline">
-            <IconWhiteBalanceSunny class="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-            <IconMoonWaningCrescent class="absolute ml-1 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+            <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+            <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span class="sr-only">Toggle theme</span>
         </Button>
     </ContextMenu.Trigger>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte
index 4257a53541..cfc6ec9d80 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-column-header.svelte
@@ -9,10 +9,10 @@
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { cn } from '$lib/utils';
-    import IconArrowDownward from '~icons/mdi/arrow-downward';
-    import IconArrowUpward from '~icons/mdi/arrow-upward';
-    import IconEyeOff from '~icons/mdi/eye-off-outline';
-    import IconUnfoldMore from '~icons/mdi/unfold-more-horizontal';
+    import ArrowDown from 'lucide-svelte/icons/arrow-down';
+    import ArrowUp from 'lucide-svelte/icons/arrow-up';
+    import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
+    import EyeOff from 'lucide-svelte/icons/eye-off';
 
     type Props = HTMLAttributes<HTMLDivElement> & {
         column: Column<TData, unknown>;
@@ -31,25 +31,23 @@
                             {@render children()}
                         {/if}
                         {#if column.getIsSorted() === 'desc'}
-                            <IconArrowDownward />
+                            <ArrowDown />
                         {:else if column.getIsSorted() === 'asc'}
-                            <IconArrowUpward />
+                            <ArrowUp />
                         {:else}
-                            <IconUnfoldMore />
+                            <ChevronsUpDown />
                         {/if}
                     </Button>
                 {/snippet}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="start">
-                <DropdownMenu.Item onclick={() => column.toggleSorting(false)}
-                    ><IconArrowUpward class="mr-2 size-3.5 text-muted-foreground/70" />Asc</DropdownMenu.Item
-                >
+                <DropdownMenu.Item onclick={() => column.toggleSorting(false)}><ArrowUp class="mr-2 size-3.5 text-muted-foreground/70" />Asc</DropdownMenu.Item>
                 <DropdownMenu.Item onclick={() => column.toggleSorting(true)}
-                    ><IconArrowDownward class="mr-2 size-3.5 text-muted-foreground/70" />Desc</DropdownMenu.Item
+                    ><ArrowDown class="mr-2 size-3.5 text-muted-foreground/70" />Desc</DropdownMenu.Item
                 >
                 <DropdownMenu.Separator />
                 <DropdownMenu.Item onclick={() => column.toggleVisibility(false)}
-                    ><IconEyeOff class="mr-2 size-3.5 text-muted-foreground/70" />Hide</DropdownMenu.Item
+                    ><EyeOff class="mr-2 size-3.5 text-muted-foreground/70" />Hide</DropdownMenu.Item
                 >
             </DropdownMenu.Content>
         </DropdownMenu.Root>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
index ee073afe7a..6790e6ac89 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-pagination.svelte
@@ -6,9 +6,9 @@
     import type { Table } from '@tanstack/svelte-table';
 
     import { Button } from '$comp/ui/button';
-    import IconChevronDoubleLeft from '~icons/mdi/chevron-double-left';
-    import IconChevronLeft from '~icons/mdi/chevron-left';
-    import IconChevronRight from '~icons/mdi/chevron-right';
+    import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+    import ChevronRight from 'lucide-svelte/icons/chevron-right';
+    import ChevronDoubleLeft from 'lucide-svelte/icons/chevrons-left';
 
     interface Props {
         table: Table<TData>;
@@ -21,15 +21,15 @@
     {#if table.getState().pagination.pageIndex > 1}
         <Button class="hidden size-8 p-0 lg:flex" onclick={() => table.resetPageIndex(true)} variant="outline">
             <span class="sr-only">Go to first page</span>
-            <IconChevronDoubleLeft class="size-4" />
+            <ChevronDoubleLeft class="size-4" />
         </Button>
     {/if}
     <Button class="size-8 p-0" disabled={!table.getCanPreviousPage()} onclick={() => table.previousPage()} variant="outline">
         <span class="sr-only">Go to previous page</span>
-        <IconChevronLeft class="size-4" />
+        <ChevronLeft class="size-4" />
     </Button>
     <Button class="size-8 p-0" disabled={!table.getCanNextPage()} onclick={() => table.nextPage()} variant="outline">
         <span class="sr-only">Go to next page</span>
-        <IconChevronRight class="size-4" />
+        <ChevronRight class="size-4" />
     </Button>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte
index 964207c974..390d4e9db2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/data-table/data-table-view-options.svelte
@@ -7,7 +7,7 @@
 
     import { Button } from '$comp/ui/button';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
-    import IconViewColumn from '~icons/mdi/view-column';
+    import ViewColumn from 'lucide-svelte/icons/columns-3';
 
     interface Props {
         table: Table<TData>;
@@ -19,7 +19,7 @@
 <DropdownMenu.Root>
     <DropdownMenu.Trigger>
         <Button class="ml-auto hidden h-8 lg:flex" size="sm" variant="outline">
-            <IconViewColumn class="mr-2 size-4" />
+            <ViewColumn class="mr-2 size-4" />
             View
         </Button>
     </DropdownMenu.Trigger>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte
index 2829cc064c..f876363dea 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/faceted-filter/faceted-filter-builder.svelte
@@ -5,8 +5,8 @@
     import { Button } from '$comp/ui/button';
     import * as Command from '$comp/ui/command';
     import * as Popover from '$comp/ui/popover';
+    import Circle from 'lucide-svelte/icons/circle';
     import { toast } from 'svelte-sonner';
-    import IconAddCircleOutline from '~icons/mdi/add-circle-outline';
 
     interface Props {
         changed: (filter: IFilter) => void;
@@ -67,7 +67,7 @@
     <Popover.Trigger>
         {#snippet children()}
             <Button class="h-8" size="sm" variant="outline">
-                <IconAddCircleOutline class="mr-2 size-4" /> Filter
+                <Circle class="mr-2 size-4" /> Filter
             </Button>
         {/snippet}
     </Popover.Trigger>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-boolean-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-boolean-filter.svelte
index 241f750dd5..31078b30f7 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-boolean-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-boolean-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { BooleanFilter } from './filters.svelte';
 
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new BooleanFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-date-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-date-filter.svelte
index b1a624be11..1249e3c09b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-date-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-date-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { DateFilter } from './filters.svelte';
 
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new DateFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-number-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-number-filter.svelte
index 8eacf218ef..ed168b272e 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-number-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-number-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { NumberFilter } from './filters.svelte';
 
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new NumberFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-organization-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-organization-filter.svelte
index 5b59667c62..6de6844b45 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-organization-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-organization-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { OrganizationFilter } from './filters.svelte';
 
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new OrganizationFilter(value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-project-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-project-filter.svelte
index 042a354082..ef89088642 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-project-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-project-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { ProjectFilter } from './filters.svelte';
 
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ProjectFilter(organization, value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-reference-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-reference-filter.svelte
index 443cfdf9a4..ff643a1103 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-reference-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-reference-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { ReferenceFilter } from './filters.svelte';
 
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new ReferenceFilter(value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-session-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-session-filter.svelte
index 30650fa3ae..60299933d0 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-session-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-session-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { SessionFilter } from './filters.svelte';
 
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new SessionFilter(value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-status-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-status-filter.svelte
index ee4df4e548..de7717cfe5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-status-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-status-filter.svelte
@@ -3,7 +3,7 @@
 
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { StatusFilter } from './filters.svelte';
 
@@ -18,6 +18,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new StatusFilter(value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-string-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-string-filter.svelte
index 87b0fae364..d7a83c9df5 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-string-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-string-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { StringFilter } from './filters.svelte';
 
@@ -19,6 +19,6 @@
     {#if children}
         {@render children()}
     {:else}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/if}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-type-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-type-filter.svelte
index 33709c1c69..2b0c7c55ac 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-type-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-type-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { TypeFilter } from './filters.svelte';
 
@@ -16,6 +16,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new TypeFilter(value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-version-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-version-filter.svelte
index 0ee767981e..30264300af 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-version-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/clickable-version-filter.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { A, type AProps } from '$comp/typography';
     import { cn } from '$lib/utils';
-    import IconFilter from '~icons/mdi/filter';
+    import Filter from 'lucide-svelte/icons/filter';
 
     import { VersionFilter } from './filters.svelte';
 
@@ -17,6 +17,6 @@
 
 <A class={cn('cursor-pointer', className)} onclick={() => changed(new VersionFilter(term, value))} {title} {...props}>
     {#snippet children()}
-        <IconFilter class="text-muted-foreground text-opacity-50 hover:text-primary" />
+        <Filter class="text-muted-foreground text-opacity-50 hover:text-primary" />
     {/snippet}
 </A>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/drop-down-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/drop-down-faceted-filter.svelte
index f54474d05a..f8de1dd0d1 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/drop-down-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/drop-down-faceted-filter.svelte
@@ -6,7 +6,7 @@
     import * as Popover from '$comp/ui/popover';
     import Separator from '$comp/ui/separator/separator.svelte';
     import { cn } from '$lib/utils';
-    import IconCheck from '~icons/mdi/check';
+    import Check from 'lucide-svelte/icons/check';
 
     type Option = {
         label: string;
@@ -105,7 +105,7 @@
                                         updatedValue === option.value ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'
                                     )}
                                 >
-                                    <IconCheck className={cn('size-4')} />
+                                    <Check className={cn('size-4')} />
                                 </div>
                                 <span>
                                     {option.label}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/multiselect-faceted-filter.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/multiselect-faceted-filter.svelte
index b1255a0b59..a63a538aec 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/multiselect-faceted-filter.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/filters/facets/base/multiselect-faceted-filter.svelte
@@ -6,7 +6,7 @@
     import * as Popover from '$comp/ui/popover';
     import Separator from '$comp/ui/separator/separator.svelte';
     import { cn } from '$lib/utils';
-    import IconCheck from '~icons/mdi/check';
+    import Check from 'lucide-svelte/icons/check';
 
     type Option = {
         label: string;
@@ -108,7 +108,7 @@
                                         updatedValues.includes(option.value) ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'
                                     )}
                                 >
-                                    <IconCheck className={cn('h-4 w-4')} />
+                                    <Check className={cn('h-4 w-4')} />
                                 </div>
                                 <span>
                                     {option.label}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/search-input.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/search-input.svelte
index ce01b33e55..d8e7cf1b17 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/search-input.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/search-input.svelte
@@ -3,7 +3,7 @@
 
     import { Input } from '$comp/ui/input';
     import { cn } from '$lib/utils';
-    import IconSearch from '~icons/mdi/search';
+    import Search from 'lucide-svelte/icons/search';
 
     type Props = HTMLInputAttributes;
 
@@ -13,7 +13,7 @@
 <div class="relative">
     <label class="sr-only" for={id}>Search</label>
     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-        <IconSearch class="h-5 w-5" />
+        <Search class="h-5 w-5" />
     </div>
     <Input bind:value class={cn('pl-10', className)} {id} name="search" {placeholder} type="text" {...props} />
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/mark-stack-fixed-in-version-dialog.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/mark-stack-fixed-in-version-dialog.svelte
index b7f203e7b9..fc1e9f81f6 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/mark-stack-fixed-in-version-dialog.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/dialogs/mark-stack-fixed-in-version-dialog.svelte
@@ -4,10 +4,10 @@
     import * as AlertDialog from '$comp/ui/alert-dialog';
     import * as Form from '$comp/ui/form';
     import { Input } from '$comp/ui/input';
+    import Documentation from 'lucide-svelte/icons/help-circle';
     import { defaults, superForm } from 'sveltekit-superforms';
     import { classvalidatorClient } from 'sveltekit-superforms/adapters';
     import { debounce } from 'throttle-debounce';
-    import IconDocumentation from '~icons/mdi/help-circle';
 
     import { FixedInVersionForm } from '../../models';
 
@@ -94,9 +94,7 @@
                     these stacks have
                 {/if}
                 been fixed. Any submitted occurrences with a lower version will not cause a regression.
-                <A class="inline-flex" href="https://exceptionless.com/docs/versioning/" target="_blank" title="Versioning Documentation"
-                    ><IconDocumentation /></A
-                >
+                <A class="inline-flex" href="https://exceptionless.com/docs/versioning/" target="_blank" title="Versioning Documentation"><Documentation /></A>
             </P>
 
             <Form.Field {form} name="version">
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
index 72ca31abb8..a0c8a6ce53 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-card.svelte
@@ -15,12 +15,12 @@
     import { getStackQuery } from '$features/stacks/api.svelte';
     import { cardinality, max, min, sum } from '$shared/api/aggregations';
     import { DEFAULT_OFFSET } from '$shared/api/api.svelte';
-    import IconFirstOccurrence from '~icons/mdi/arrow-left-circle';
-    import IconLastOccurrence from '~icons/mdi/arrow-right-circle';
-    import IconCalendar from '~icons/mdi/calendar';
-    import IconClock from '~icons/mdi/clock';
-    import IconFilter from '~icons/mdi/filter';
-    import IconUsers from '~icons/mdi/users';
+    import FirstOccurrence from 'lucide-svelte/icons/arrow-left-circle';
+    import LastOccurrence from 'lucide-svelte/icons/arrow-right-circle';
+    import Calendar from 'lucide-svelte/icons/calendar';
+    import Clock from 'lucide-svelte/icons/clock';
+    import Filter from 'lucide-svelte/icons/filter';
+    import Users from 'lucide-svelte/icons/users';
 
     import StackOptionsDropdownMenu from './stack-options-dropdown-menu.svelte';
     import StackReferences from './stack-references.svelte';
@@ -93,7 +93,7 @@
             <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
                 <Tooltip.Root>
                     <Tooltip.Trigger class="flex flex-col items-center rounded-lg bg-muted p-2">
-                        <IconCalendar class="mb-1 size-6 text-primary" />
+                        <Calendar class="mb-1 size-6 text-primary" />
                         <span class="text-lg font-bold"><Number value={totalOccurrences} /></span>
                         <Muted>Total Events</Muted>
                     </Tooltip.Trigger>
@@ -103,7 +103,7 @@
                 </Tooltip.Root>
                 <Tooltip.Root>
                     <Tooltip.Trigger class="flex flex-col items-center rounded-lg bg-muted p-2">
-                        <IconUsers class="mb-1 size-6 text-primary" />
+                        <Users class="mb-1 size-6 text-primary" />
                         <span class="text-lg font-bold"><Percentage percent={(userCount / totalUserCount) * 100.0} /></span>
                         <Muted>Users Affected</Muted>
                     </Tooltip.Trigger>
@@ -111,7 +111,7 @@
                 </Tooltip.Root>
                 <Tooltip.Root>
                     <Tooltip.Trigger class="flex flex-col items-center rounded-lg bg-muted p-2">
-                        <IconFirstOccurrence class="mb-1 size-6 text-muted-foreground" />
+                        <FirstOccurrence class="mb-1 size-6 text-muted-foreground" />
                         <span class="text-lg font-bold"><TimeAgo value={firstOccurrence} /></span>
                         <Muted>First</Muted>
                     </Tooltip.Trigger>
@@ -121,7 +121,7 @@
                 </Tooltip.Root>
                 <Tooltip.Root>
                     <Tooltip.Trigger class="flex flex-col items-center rounded-lg bg-muted p-2">
-                        <IconLastOccurrence class="mb-1 size-6 text-muted-foreground" />
+                        <LastOccurrence class="mb-1 size-6 text-muted-foreground" />
                         <span class="text-lg font-bold"><TimeAgo value={lastOccurrence} /></span>
                         <Muted>Last</Muted>
                     </Tooltip.Trigger>
@@ -136,7 +136,7 @@
             <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
                 {#if (stack.status === 'fixed' || stack.status === 'regressed') && stack.date_fixed}
                     <div class="flex items-center gap-2 text-sm">
-                        <IconCalendar class="size-4 text-green-500" />
+                        <Calendar class="size-4 text-green-500" />
                         <span>
                             Fixed {stack.fixed_in_version && `in ${stack.fixed_in_version}`} on <DateTime value={stack.date_fixed} />
                         </span>
@@ -145,7 +145,7 @@
 
                 {#if stack.status === 'snoozed' && stack.snooze_until_utc}
                     <div class="flex items-center gap-2 text-sm">
-                        <IconClock class="size-4 text-blue-500" />
+                        <Clock class="size-4 text-blue-500" />
                         <span>Snoozed until <DateTime value={stack.snooze_until_utc} /></span>
                     </div>
                 {/if}
@@ -156,7 +156,7 @@
                     {#each stack.tags as tag (tag)}
                         <Badge color="dark"
                             ><ClickableStringFilter {changed} class="mr-1" term="tag" value={tag}
-                                ><IconFilter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
+                                ><Filter class="text-muted-foreground text-opacity-80 hover:text-secondary" /></ClickableStringFilter
                             >{tag}</Badge
                         >
                     {/each}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
index 5c8515ead9..ea63e8988b 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-options-dropdown-menu.svelte
@@ -2,11 +2,11 @@
     import { goto } from '$app/navigation';
     import Button from '$comp/ui/button/button.svelte';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
+    import Reference from 'lucide-svelte/icons/link-2';
+    import Settings from 'lucide-svelte/icons/settings';
+    import Delete from 'lucide-svelte/icons/trash';
+    import PromoteToExternal from 'lucide-svelte/icons/trending-up';
     import { toast } from 'svelte-sonner';
-    import IconSettings from '~icons/mdi/gear';
-    import IconReference from '~icons/mdi/link';
-    import IconDelete from '~icons/mdi/trash-can';
-    import IconPromoteToExternal from '~icons/mdi/trending-up';
 
     import { deleteMarkCritical, deleteStack, postAddLink, postMarkCritical, postPromote } from '../api.svelte';
     import { Stack } from '../models';
@@ -112,7 +112,7 @@
 <DropdownMenu.Root>
     <DropdownMenu.Trigger>
         <Button variant="ghost" size="icon">
-            <IconSettings class="size-4" />
+            <Settings class="size-4" />
         </Button>
     </DropdownMenu.Trigger>
     <DropdownMenu.Content align="end">
@@ -128,16 +128,16 @@
             </DropdownMenu.CheckboxItem>
             <DropdownMenu.Separator />
             <DropdownMenu.Item onclick={() => promoteToExternal()} title="Used to promote stacks to external systems">
-                <IconPromoteToExternal class="mr-2 size-4" />
+                <PromoteToExternal class="mr-2 size-4" />
                 Promote To External
             </DropdownMenu.Item>
             <DropdownMenu.Item onclick={() => (openAddStackReferenceDialog = true)} title="Add a reference link to an external resource">
-                <IconReference class="mr-2 size-4" />
+                <Reference class="mr-2 size-4" />
                 Add Reference Link
             </DropdownMenu.Item>
             <DropdownMenu.Separator />
             <DropdownMenu.Item onclick={() => (openRemoveStackDialog = true)} class="text-destructive" title="Delete this stack">
-                <IconDelete class="mr-2 size-4" />
+                <Delete class="mr-2 size-4" />
                 Delete
             </DropdownMenu.Item>
         </DropdownMenu.Group>
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-references.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-references.svelte
index 8ccd269667..a9b895ebf2 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-references.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-references.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { A, Small } from '$comp/typography';
     import Button from '$comp/ui/button/button.svelte';
-    import IconReference from '~icons/mdi/link';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
-    import IconRemove from '~icons/mdi/remove';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
+    import Reference from 'lucide-svelte/icons/link';
+    import Delete from 'lucide-svelte/icons/trash';
 
     import { postRemoveLink } from '../api.svelte';
     import { Stack } from '../models';
@@ -39,13 +39,13 @@
     <ul class="space-y-2">
         {#each stack.references as reference (reference)}
             <li class="flex items-center gap-2">
-                <IconReference />
+                <Reference />
                 <A href={reference} target="_blank" rel="noopener noreferrer" class="flex items-center gap-2" variant="secondary">
                     <Small class="truncate">{reference}</Small>
-                    <IconOpenInNew />
+                    <ExternalLink />
                 </A>
                 <Button variant="destructive" size="xs" onclick={() => onOpenRemoveStackReferenceDialog(reference)}>
-                    <IconRemove />
+                    <Delete />
                 </Button>
             </li>
         {/each}
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-status-dropdown-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-status-dropdown-menu.svelte
index a6f0c4fc11..47cd3f51ca 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-status-dropdown-menu.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stack-status-dropdown-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Button from '$comp/ui/button/button.svelte';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
-    import ChevronDown from '~icons/mdi/chevron-down';
+    import ChevronDown from 'lucide-svelte/icons/chevron-down';
 
     import { postChangeStatus, postMarkFixed, postMarkSnoozed } from '../api.svelte';
     import { Stack, StackStatus } from '../models';
diff --git a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stacks-bulk-actions-dropdown-menu.svelte b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stacks-bulk-actions-dropdown-menu.svelte
index 94a5a78681..1b2a54e5ae 100644
--- a/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stacks-bulk-actions-dropdown-menu.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/lib/features/stacks/components/stacks-bulk-actions-dropdown-menu.svelte
@@ -6,8 +6,8 @@
     import Button from '$comp/ui/button/button.svelte';
     import * as DropdownMenu from '$comp/ui/dropdown-menu';
     import { type Table as SvelteTable } from '@tanstack/svelte-table';
+    import ChevronDown from 'lucide-svelte/icons/chevron-down';
     import { toast } from 'svelte-sonner';
-    import ChevronDown from '~icons/mdi/chevron-down';
 
     import { deleteStack, postChangeStatus, postMarkFixed, postMarkSnoozed } from '../api.svelte';
     import { StackStatus } from '../models';
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
index ae5d3fe726..d47d71bff7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Footer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { A } from '$comp/typography';
-    import IconFacebook from '~icons/mdi/facebook';
-    import IconGitHub from '~icons/mdi/github';
-    import IconTwitter from '~icons/mdi/twitter';
-    import IconWeb from '~icons/mdi/web';
+    import Facebook from 'lucide-svelte/icons/facebook';
+    import GitHub from 'lucide-svelte/icons/github';
+    import Web from 'lucide-svelte/icons/globe';
+    import Twitter from 'lucide-svelte/icons/twitter';
 
     const currentYear = new Date().getFullYear();
 </script>
@@ -32,16 +32,16 @@
     </ul>
     <div class="flex space-x-6 sm:justify-center">
         <A aria-label="Exceptionless Facebook Website" href="https://www.facebook.com/exceptionless/" target="_blank" variant="navigation">
-            <IconFacebook class="size-5" />
+            <Facebook class="size-5" />
         </A>
         <A aria-label="Exceptionless Twitter Website" href="https://x.com/Exceptionless" target="_blank" variant="navigation">
-            <IconTwitter class="size-5" />
+            <Twitter class="size-5" />
         </A>
         <A aria-label="Exceptionless GitHub Website" href="https://github.com/exceptionless" target="_blank" variant="navigation">
-            <IconGitHub class="size-5" />
+            <GitHub class="size-5" />
         </A>
         <A aria-label="Exceptionless Website" href="https://exceptionless.com/" target="_blank" variant="navigation">
-            <IconWeb class="size-5" />
+            <Web class="size-5" />
         </A>
     </div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
index 695466629b..dcf97a65c7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/Navbar.svelte
@@ -9,8 +9,8 @@
     import * as Sidebar from '$comp/ui/sidebar';
     import { getGravatarFromCurrentUser } from '$features/users/gravatar.svelte';
     import logoSmall from '$lib/assets/exceptionless-48.png';
+    import Search from 'lucide-svelte/icons/search';
     import { MediaQuery } from 'svelte/reactivity';
-    import IconSearch from '~icons/mdi/search';
 
     interface Props {
         isCommandOpen: boolean;
@@ -42,7 +42,7 @@
             </div>
             <div class="flex items-center gap-x-2 lg:gap-x-3">
                 <Button onclick={onSearchClick} size="default" variant="outline">
-                    <IconSearch />
+                    <Search />
                     Search
                     <DropdownMenu.Shortcut class="ml-12">⌘K</DropdownMenu.Shortcut>
                 </Button>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/footer.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/footer.svelte
index ae5d3fe726..d47d71bff7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/footer.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/footer.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import { A } from '$comp/typography';
-    import IconFacebook from '~icons/mdi/facebook';
-    import IconGitHub from '~icons/mdi/github';
-    import IconTwitter from '~icons/mdi/twitter';
-    import IconWeb from '~icons/mdi/web';
+    import Facebook from 'lucide-svelte/icons/facebook';
+    import GitHub from 'lucide-svelte/icons/github';
+    import Web from 'lucide-svelte/icons/globe';
+    import Twitter from 'lucide-svelte/icons/twitter';
 
     const currentYear = new Date().getFullYear();
 </script>
@@ -32,16 +32,16 @@
     </ul>
     <div class="flex space-x-6 sm:justify-center">
         <A aria-label="Exceptionless Facebook Website" href="https://www.facebook.com/exceptionless/" target="_blank" variant="navigation">
-            <IconFacebook class="size-5" />
+            <Facebook class="size-5" />
         </A>
         <A aria-label="Exceptionless Twitter Website" href="https://x.com/Exceptionless" target="_blank" variant="navigation">
-            <IconTwitter class="size-5" />
+            <Twitter class="size-5" />
         </A>
         <A aria-label="Exceptionless GitHub Website" href="https://github.com/exceptionless" target="_blank" variant="navigation">
-            <IconGitHub class="size-5" />
+            <GitHub class="size-5" />
         </A>
         <A aria-label="Exceptionless Website" href="https://exceptionless.com/" target="_blank" variant="navigation">
-            <IconWeb class="size-5" />
+            <Web class="size-5" />
         </A>
     </div>
 </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/navbar.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/navbar.svelte
index 695466629b..dcf97a65c7 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/navbar.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/navbar.svelte
@@ -9,8 +9,8 @@
     import * as Sidebar from '$comp/ui/sidebar';
     import { getGravatarFromCurrentUser } from '$features/users/gravatar.svelte';
     import logoSmall from '$lib/assets/exceptionless-48.png';
+    import Search from 'lucide-svelte/icons/search';
     import { MediaQuery } from 'svelte/reactivity';
-    import IconSearch from '~icons/mdi/search';
 
     interface Props {
         isCommandOpen: boolean;
@@ -42,7 +42,7 @@
             </div>
             <div class="flex items-center gap-x-2 lg:gap-x-3">
                 <Button onclick={onSearchClick} size="default" variant="outline">
-                    <IconSearch />
+                    <Search />
                     Search
                     <DropdownMenu.Shortcut class="ml-12">⌘K</DropdownMenu.Shortcut>
                 </Button>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
index 106f429248..78c0f526bd 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/+page.svelte
@@ -19,9 +19,9 @@
     import { isTableEmpty, removeTableData, removeTableSelection } from '$shared/table';
     import { type FetchClientResponse, useFetchClient } from '@exceptionless/fetchclient';
     import { createTable } from '@tanstack/svelte-table';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
     import { PersistedState, useEventListener } from 'runed';
     import { throttle } from 'throttle-debounce';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
 
     let selectedEventId: null | string = $state(null);
     function rowclick(row: EventSummaryModel<SummaryTemplateKeys>) {
@@ -145,7 +145,7 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><IconOpenInNew /></Button
+                >Event Details <Button href="/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button
                 ></Sheet.Title
             >
         </Sheet.Header>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.ts b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.ts
index a3f43dcfe5..9ea389ea94 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/routes.ts
@@ -1,9 +1,9 @@
-import IconAccount from '~icons/mdi/account';
-import IconSessions from '~icons/mdi/account-multiple';
-import IconNotifications from '~icons/mdi/bell';
-import IconPassword from '~icons/mdi/form-textbox-password';
-import IconVerify from '~icons/mdi/shield-check';
-import IconAppearance from '~icons/mdi/theme-light-dark';
+import Notifications from 'lucide-svelte/icons/bell';
+import Password from 'lucide-svelte/icons/key-round';
+import Verify from 'lucide-svelte/icons/shield-check';
+import Appearance from 'lucide-svelte/icons/sun-moon';
+import Account from 'lucide-svelte/icons/user';
+import Sessions from 'lucide-svelte/icons/users';
 
 import type { NavigationItem } from '../../routes';
 
@@ -11,40 +11,40 @@ export const routes: NavigationItem[] = [
     {
         group: 'My Account',
         href: '/next/account/manage',
-        icon: IconAccount,
+        icon: Account,
         title: 'Account'
     },
     {
         group: 'My Account',
         href: '/next/account/appearance',
-        icon: IconAppearance,
+        icon: Appearance,
         title: 'Appearance'
     },
     {
         group: 'My Account',
         href: '/next/account/notifications',
-        icon: IconNotifications,
+        icon: Notifications,
         show: () => false,
         title: 'Notifications'
     },
     {
         group: 'My Account',
         href: '/next/account/security',
-        icon: IconPassword,
+        icon: Password,
         show: () => false,
         title: 'Password and authentication'
     },
     {
         group: 'My Account',
         href: '/next/account/sessions',
-        icon: IconSessions,
+        icon: Sessions,
         show: () => false,
         title: 'Sessions'
     },
     {
         group: 'My Account',
         href: '/next/account/verify',
-        icon: IconVerify,
+        icon: Verify,
         show: () => false,
         title: 'Verify'
     }
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
index 37f582887a..2eb6080bda 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/security/+page.svelte
@@ -19,10 +19,10 @@
     import { User } from '$features/users/models';
     import { useFetchClientStatus } from '$shared/api/api.svelte';
     import { ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
-    import IconFacebook from '~icons/mdi/facebook';
-    import IconGitHub from '~icons/mdi/github';
-    import IconGoogle from '~icons/mdi/google';
-    import IconMicrosoft from '~icons/mdi/microsoft';
+    import Facebook from 'lucide-svelte/icons/facebook';
+    import GitHub from 'lucide-svelte/icons/github';
+    import Google from '~icons/mdi/google';
+    import Microsoft from '~icons/mdi/microsoft';
 
     const data = $state(new User());
 
@@ -115,7 +115,7 @@
             {#if !microsoftClientId}
                 <li class="pb-4">
                     <div class="flex items-center space-x-4">
-                        <IconMicrosoft />
+                        <Microsoft />
                         <div class="min-w-0 flex-1 font-semibold">Microsoft account</div>
                         <div class="inline-flex items-center">
                             {#if true}
@@ -132,7 +132,7 @@
             {#if !googleClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <IconGoogle />
+                        <Google />
                         <div class="min-w-0 flex-1 font-semibold">Google account</div>
                         <div class="inline-flex items-center">
                             {#if false}
@@ -149,7 +149,7 @@
             {#if !facebookClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <IconFacebook />
+                        <Facebook />
                         <div class="min-w-0 flex-1 font-semibold">Facebook account</div>
                         <div class="inline-flex items-center">
                             {#if false}
@@ -166,7 +166,7 @@
             {#if !gitHubClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <IconGitHub />
+                        <GitHub />
                         <div class="min-w-0 flex-1 font-semibold">GitHub account</div>
                         <div class="inline-flex items-center">
                             {#if true}
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
index 950693310b..9124068c9c 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/account/sessions/+page.svelte
@@ -3,8 +3,8 @@
     import { H3, Muted, P } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Separator } from '$comp/ui/separator';
-    import IconCellphone from '~icons/mdi/cellphone';
-    import IconLaptop from '~icons/mdi/laptop';
+    import Laptop from 'lucide-svelte/icons/laptop';
+    import Smartphone from 'lucide-svelte/icons/smartphone';
 </script>
 
 <div class="space-y-6">
@@ -17,7 +17,7 @@
     <ul class="divide-y divide-border">
         <li class="pb-4">
             <div class="flex items-center space-x-4">
-                <IconLaptop />
+                <Laptop />
                 <div class="min-w-0 flex-1">
                     <P class="font-semibold">Wisconsin</P>
                     <Muted>Signed in on <DateTime value={new Date()}></DateTime></Muted>
@@ -29,7 +29,7 @@
         </li>
         <li class="py-4">
             <div class="flex items-center space-x-4">
-                <IconCellphone />
+                <Smartphone />
                 <div class="min-w-0 flex-1">
                     <P class="font-semibold">Texas</P>
                     <Muted>Signed in on <DateTime value={new Date()}></DateTime></Muted>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
index b4ae9e8f46..83f36b7c28 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/issues/+page.svelte
@@ -20,9 +20,9 @@
     import { isTableEmpty, removeTableData, removeTableSelection } from '$shared/table';
     import { type FetchClientResponse, useFetchClient } from '@exceptionless/fetchclient';
     import { createTable } from '@tanstack/svelte-table';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
     import { PersistedState, useEventListener } from 'runed';
     import { throttle } from 'throttle-debounce';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
 
     // TODO: Update this page to use StackSummaryModel instead of EventSummaryModel.
     let selectedStackId = $state<string>();
@@ -162,7 +162,7 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/event/{eventId}" size="sm" title="Open in new window" variant="ghost"><IconOpenInNew /></Button></Sheet.Title
+                >Event Details <Button href="/event/{eventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button></Sheet.Title
             >
         </Sheet.Header>
         <EventsDrawer changed={onDrawerFilterChanged} id={eventId || ''} close={() => (selectedStackId = undefined)}></EventsDrawer>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/routes.ts b/src/Exceptionless.Web/ClientApp/src/routes/(app)/routes.ts
index ea490d9f45..af15dbc524 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/routes.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/routes.ts
@@ -1,6 +1,6 @@
-import IconEvents from '~icons/mdi/calendar-month-outline';
-import IconStacks from '~icons/mdi/checkbox-multiple-marked-outline';
-import IconEventLog from '~icons/mdi/sort-clock-descending-outline';
+import EventStream from 'lucide-svelte/icons/calendar-arrow-down';
+import Events from 'lucide-svelte/icons/calendar-days';
+import Stacks from 'lucide-svelte/icons/list-checks';
 
 import type { NavigationItem } from '../routes';
 
@@ -10,19 +10,19 @@ export const routes: NavigationItem[] = [
     {
         group: 'Dashboards',
         href: '/next/',
-        icon: IconEvents,
+        icon: Events,
         title: 'Events'
     },
     {
         group: 'Dashboards',
         href: '/next/issues',
-        icon: IconStacks,
+        icon: Stacks,
         title: 'Issues'
     },
     {
         group: 'Dashboards',
         href: '/next/stream',
-        icon: IconEventLog,
+        icon: EventStream,
         title: 'Event Stream'
     },
     ...accountRoutes
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
index 5866fd619f..7e02f781cf 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(app)/stream/+page.svelte
@@ -18,10 +18,10 @@
     import { isTableEmpty, removeTableData } from '$shared/table';
     import { type FetchClientResponse, useFetchClient } from '@exceptionless/fetchclient';
     import { createTable } from '@tanstack/svelte-table';
+    import ExternalLink from 'lucide-svelte/icons/external-link';
     import { PersistedState } from 'runed';
     import { useEventListener } from 'runed';
     import { debounce } from 'throttle-debounce';
-    import IconOpenInNew from '~icons/mdi/open-in-new';
 
     let selectedEventId: null | string = $state(null);
     function rowclick(row: EventSummaryModel<SummaryTemplateKeys>) {
@@ -159,7 +159,7 @@
     <Sheet.Content class="w-full overflow-y-auto sm:max-w-full md:w-5/6">
         <Sheet.Header>
             <Sheet.Title
-                >Event Details <Button href="/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><IconOpenInNew /></Button
+                >Event Details <Button href="/event/{selectedEventId}" size="sm" title="Open in new window" variant="ghost"><ExternalLink /></Button
                 ></Sheet.Title
             >
         </Sheet.Header>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte b/src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte
index 7027d8a080..df3c8ed199 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(auth)/login/+page.svelte
@@ -24,12 +24,12 @@
     } from '$features/auth/index.svelte';
     import { Login } from '$features/auth/models';
     import { applyServerSideErrors } from '$shared/validation';
+    import Facebook from 'lucide-svelte/icons/facebook';
+    import GitHub from 'lucide-svelte/icons/github';
     import { defaults, superForm } from 'sveltekit-superforms';
     import { classvalidatorClient } from 'sveltekit-superforms/adapters';
-    import IconFacebook from '~icons/mdi/facebook';
-    import IconGitHub from '~icons/mdi/github';
-    import IconGoogle from '~icons/mdi/google';
-    import IconMicrosoft from '~icons/mdi/microsoft';
+    import Google from '~icons/mdi/google';
+    import Microsoft from '~icons/mdi/microsoft';
 
     const redirectUrl = page.url.searchParams.get('redirect') ?? '/next';
 
@@ -119,22 +119,22 @@
             <div class="auto-cols-2 grid grid-flow-col grid-rows-2 gap-4">
                 {#if microsoftClientId}
                     <Button aria-label="Login with Microsoft" onclick={() => liveLogin(redirectUrl)}>
-                        <IconMicrosoft /> Microsoft
+                        <Microsoft /> Microsoft
                     </Button>
                 {/if}
                 {#if googleClientId}
                     <Button aria-label="Login with Google" onclick={() => googleLogin(redirectUrl)}>
-                        <IconGoogle /> Google
+                        <Google /> Google
                     </Button>
                 {/if}
                 {#if facebookClientId}
                     <Button aria-label="Login with Facebook" onclick={() => facebookLogin(redirectUrl)}>
-                        <IconFacebook /> Facebook
+                        <Facebook /> Facebook
                     </Button>
                 {/if}
                 {#if gitHubClientId}
                     <Button aria-label="Login with GitHub" onclick={() => githubLogin(redirectUrl)}>
-                        <IconGitHub /> GitHub
+                        <GitHub /> GitHub
                     </Button>
                 {/if}
             </div>
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/(auth)/routes.ts b/src/Exceptionless.Web/ClientApp/src/routes/(auth)/routes.ts
index a635009a1b..bea35ee86d 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/(auth)/routes.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/(auth)/routes.ts
@@ -1,5 +1,5 @@
-import IconLogin from '~icons/mdi/login';
-import IconLogout from '~icons/mdi/logout';
+import LogIn from 'lucide-svelte/icons/log-in';
+import LogOut from 'lucide-svelte/icons/log-out';
 
 import type { NavigationItem, NavigationItemContext } from '../routes';
 
@@ -7,14 +7,14 @@ export const routes: NavigationItem[] = [
     {
         group: 'Session',
         href: '/next/login',
-        icon: IconLogin,
+        icon: LogIn,
         show: (context: NavigationItemContext) => !context.authenticated,
         title: 'Log in'
     },
     {
         group: 'Session',
         href: '/next/logout',
-        icon: IconLogout,
+        icon: LogOut,
         show: (context: NavigationItemContext) => context.authenticated,
         title: 'Log out'
     }
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/routes.ts b/src/Exceptionless.Web/ClientApp/src/routes/routes.ts
index eb489c7a0a..8a13bd9754 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/routes.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/routes.ts
@@ -1,4 +1,5 @@
 import type { User } from '$features/users/models';
+import type { Icon } from 'lucide-svelte';
 import type { Component } from 'svelte';
 
 import { routes as appRoutes } from './(app)/routes';
@@ -7,7 +8,7 @@ import { routes as authRoutes } from './(auth)/routes';
 export type NavigationItem = {
     group: string;
     href: string;
-    icon: Component;
+    icon: Component | typeof Icon;
     show?: (context: NavigationItemContext) => boolean;
     title: string;
 };
diff --git a/src/Exceptionless.Web/ClientApp/src/routes/status/routes.ts b/src/Exceptionless.Web/ClientApp/src/routes/status/routes.ts
index 526b0741bc..df75b1ea43 100644
--- a/src/Exceptionless.Web/ClientApp/src/routes/status/routes.ts
+++ b/src/Exceptionless.Web/ClientApp/src/routes/status/routes.ts
@@ -1,4 +1,4 @@
-import StatusLogin from '~icons/mdi/status';
+import Activity from 'lucide-svelte/icons/activity';
 
 import type { NavigationItem } from '../routes';
 
@@ -6,7 +6,7 @@ export const routes: NavigationItem[] = [
     {
         group: 'status',
         href: '/next/status',
-        icon: StatusLogin,
+        icon: Activity,
         show: () => false,
         title: 'Service Status'
     }