From 0473ff85ea27f35e058c9ff90d15a6b90deb8393 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axendeveloper@gmail.com>
Date: Tue, 15 Sep 2026 11:47:23 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat(header):=20=E2=9C=A8=20add=20navigatio?=
 =?UTF-8?q?n=20menu=20with=20dropdown=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/navigation-menu.tsx     | 142 +++++++++++++++++-
 .../vitnode/src/tanstack/layout/header.tsx    |  53 ++++++-
 .../layouts/theme/header/header-content.tsx   |  15 +-
 .../layouts/theme/header/header-nav-menu.tsx  |  80 ++++++++++
 .../views/layouts/theme/header/header-nav.ts  |  10 +-
 5 files changed, 274 insertions(+), 26 deletions(-)
 create mode 100644 packages/vitnode/src/views/layouts/theme/header/header-nav-menu.tsx

diff --git a/packages/vitnode/src/components/ui/navigation-menu.tsx b/packages/vitnode/src/components/ui/navigation-menu.tsx
index e11382a5f..6d6ee2b45 100644
--- a/packages/vitnode/src/components/ui/navigation-menu.tsx
+++ b/packages/vitnode/src/components/ui/navigation-menu.tsx
@@ -26,19 +26,141 @@ function NavigationMenu({
   );
 }
 
+const HIGHLIGHT_SELECTOR =
+  '[data-slot="navigation-menu-trigger"], [data-slot="navigation-menu-link"]';
+const OPEN_TRIGGER_SELECTOR =
+  '[data-slot="navigation-menu-trigger"][data-popup-open]';
+const ACTIVE_LINK_SELECTOR =
+  '[data-slot="navigation-menu-link"][data-active]:not([data-slot="navigation-menu-content"] *)';
+
 function NavigationMenuList({
   className,
+  children,
+  onFocus,
+  onPointerLeave,
+  onPointerOver,
+  ref,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  const listRef = React.useRef<HTMLUListElement | null>(null);
+  const highlightRef = React.useRef<HTMLSpanElement>(null);
+  const pointerInsideRef = React.useRef(false);
+
+  const moveHighlightTo = React.useCallback((item: HTMLElement) => {
+    const list = listRef.current;
+    const highlight = highlightRef.current;
+    if (!list || !highlight) return;
+
+    const listBox = list.getBoundingClientRect();
+    const itemBox = item.getBoundingClientRect();
+    const wasVisible = highlight.dataset.visible !== undefined;
+
+    if (!wasVisible) highlight.dataset.instant = "";
+
+    highlight.style.height = `${itemBox.height.toString()}px`;
+    highlight.style.top = `${(itemBox.top - listBox.top).toString()}px`;
+    highlight.style.translate = `${(itemBox.left - listBox.left).toString()}px`;
+    highlight.style.width = `${itemBox.width.toString()}px`;
+
+    if (!wasVisible) {
+      highlight.getBoundingClientRect();
+      delete highlight.dataset.instant;
+    }
+
+    highlight.dataset.visible = "";
+  }, []);
+
+  const hideHighlight = React.useCallback(() => {
+    const highlight = highlightRef.current;
+    if (highlight) delete highlight.dataset.visible;
+  }, []);
+
+  const itemUnder = (target: EventTarget | null) => {
+    const list = listRef.current;
+    if (!list || !(target instanceof Element)) return null;
+
+    const item = target.closest<HTMLElement>(HIGHLIGHT_SELECTOR);
+
+    return item && list.contains(item) ? item : null;
+  };
+
+  const settleHighlight = React.useCallback(() => {
+    const list = listRef.current;
+    const resting =
+      list?.querySelector<HTMLElement>(OPEN_TRIGGER_SELECTOR) ??
+      list?.querySelector<HTMLElement>(ACTIVE_LINK_SELECTOR);
+
+    if (resting) {
+      moveHighlightTo(resting);
+
+      return;
+    }
+
+    hideHighlight();
+  }, [hideHighlight, moveHighlightTo]);
+
+  React.useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+
+    const settleWhenIdle = () => {
+      if (!pointerInsideRef.current) settleHighlight();
+    };
+
+    const attributes = new MutationObserver(settleWhenIdle);
+    attributes.observe(list, {
+      attributeFilter: ["data-active", "data-popup-open"],
+      attributes: true,
+      subtree: true,
+    });
+
+    const resize = new ResizeObserver(settleWhenIdle);
+    resize.observe(list);
+
+    return () => {
+      attributes.disconnect();
+      resize.disconnect();
+    };
+  }, [settleHighlight]);
+
   return (
     <NavigationMenuPrimitive.List
       className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-0",
+        "group relative flex flex-1 list-none items-center justify-center gap-(--navigation-menu-gap) [--navigation-menu-gap:--spacing(1)]",
         className,
       )}
       data-slot="navigation-menu-list"
+      onFocus={event => {
+        const item = itemUnder(event.target);
+        if (item) moveHighlightTo(item);
+        onFocus?.(event);
+      }}
+      onPointerLeave={event => {
+        pointerInsideRef.current = false;
+        settleHighlight();
+        onPointerLeave?.(event);
+      }}
+      onPointerOver={event => {
+        pointerInsideRef.current = true;
+        const item = itemUnder(event.target);
+        if (item) moveHighlightTo(item);
+        onPointerOver?.(event);
+      }}
+      ref={node => {
+        listRef.current = node;
+        if (typeof ref === "function") return ref(node);
+        if (ref) ref.current = node;
+      }}
       {...props}
-    />
+    >
+      <span
+        aria-hidden
+        className="bg-muted pointer-events-none absolute top-0 left-0 rounded-md opacity-0 transition-[translate,width,height,opacity] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-visible:opacity-100 motion-reduce:transition-none"
+        data-slot="navigation-menu-highlight"
+        ref={highlightRef}
+      />
+      {children}
+    </NavigationMenuPrimitive.List>
   );
 }
 
@@ -56,7 +178,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted",
+  "group/navigation-menu-trigger relative inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-all outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:after:absolute data-popup-open:after:inset-y-0 data-popup-open:after:-inset-x-(--navigation-menu-gap) data-popup-open:after:content-['']",
 );
 
 function NavigationMenuTrigger({
@@ -73,7 +195,7 @@ function NavigationMenuTrigger({
       {children}{" "}
       <ChevronDownIcon
         aria-hidden="true"
-        className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ms-1 size-3 shrink-0 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180"
       />
     </NavigationMenuPrimitive.Trigger>
   );
@@ -81,15 +203,17 @@ function NavigationMenuTrigger({
 
 function NavigationMenuContent({
   className,
+  keepMounted = true,
   ...props
 }: NavigationMenuPrimitive.Content.Props) {
   return (
     <NavigationMenuPrimitive.Content
       className={cn(
-        "h-full w-full p-2 pe-2.5 transition-[opacity,transform,translate] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        "h-full w-full p-2 transition-[opacity,transform,translate] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-[50%] data-starting-style:data-[activation-direction=left]:translate-x-[-50%] data-ending-style:data-[activation-direction=right]:translate-x-[-50%] data-starting-style:data-[activation-direction=right]:translate-x-[50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none motion-reduce:transition-none",
         className,
       )}
       data-slot="navigation-menu-content"
+      keepMounted={keepMounted}
       {...props}
     />
   );
@@ -101,6 +225,7 @@ function NavigationMenuPositioner({
   sideOffset = 8,
   align = "start",
   alignOffset = 0,
+  collisionPadding = 16,
   ...props
 }: NavigationMenuPrimitive.Positioner.Props) {
   return (
@@ -109,14 +234,15 @@ function NavigationMenuPositioner({
         align={align}
         alignOffset={alignOffset}
         className={cn(
-          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 data-instant:transition-none",
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none",
           className,
         )}
+        collisionPadding={collisionPadding}
         side={side}
         sideOffset={sideOffset}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="origin-top-center bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-100 ease-[cubic-bezier(0.22,1,0.36,1)]">
+        <NavigationMenuPrimitive.Popup className="origin-top-center bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:zoom-in-95 data-open:fade-in-0 data-closed:animate-out data-closed:zoom-out-95 data-closed:fade-out-0 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg shadow ring-1 transition-[width,height] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] outline-none">
           <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
@@ -131,7 +257,7 @@ function NavigationMenuLink({
   return (
     <NavigationMenuPrimitive.Link
       className={cn(
-        "hover:bg-muted focus:bg-muted focus-visible:ring-ring/50 data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted flex items-center gap-1.5 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-sm [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:ring-ring/50 in-data-[slot=navigation-menu-content]:hover:bg-muted in-data-[slot=navigation-menu-content]:focus:bg-muted in-data-[slot=navigation-menu-content]:data-active:bg-muted/50 relative flex items-center gap-2 rounded-md p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       data-slot="navigation-menu-link"
diff --git a/packages/vitnode/src/tanstack/layout/header.tsx b/packages/vitnode/src/tanstack/layout/header.tsx
index 0ff7ca619..9837673e3 100644
--- a/packages/vitnode/src/tanstack/layout/header.tsx
+++ b/packages/vitnode/src/tanstack/layout/header.tsx
@@ -3,6 +3,8 @@ import type { QueryClient } from "@tanstack/react-query";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createTranslator } from "use-intl";
 
+import type { HeaderNavItem } from "@/views/layouts/theme/header/header-nav";
+
 import { LogoVitNodeBrand } from "@/components/logo-vitnode";
 import { HeaderLayoutContent } from "@/views/layouts/theme/header/header-content";
 import {
@@ -19,6 +21,46 @@ export const HEADER_NAMESPACES = ["core.search"] as const;
 export const headerIntlQueryOptions = ({ locale }: { locale: string }) =>
   intlQueryOptions({ locale, namespaces: HEADER_NAMESPACES });
 
+const EXAMPLE_NAV_ITEMS: HeaderNavItem[] = [
+  {
+    href: "/example-community",
+    items: [
+      {
+        description: "Threads from everyone building on VitNode.",
+        href: "/discover",
+        label: "Discussions",
+      },
+      {
+        description: "Who is here and what they are shipping.",
+        href: "/search",
+        label: "Members",
+      },
+    ],
+    label: "Community",
+  },
+  {
+    href: "/example-resources",
+    items: [
+      {
+        description: "Guides, the API reference and every plugin.",
+        href: "/docs",
+        label: "Documentation",
+      },
+      {
+        description: "Release notes, in order, newest first.",
+        href: "/discover",
+        label: "Changelog",
+      },
+      {
+        description: "Ask a question and get an answer from the team.",
+        href: "/search",
+        label: "Support",
+      },
+    ],
+    label: "Resources",
+  },
+];
+
 interface HeaderNavMessages {
   core: { search: { nav: { discover: string; search: string } } };
 }
@@ -43,10 +85,13 @@ export const Header = ({
   return (
     <HeaderLayoutContent
       logo={logo}
-      navigation={headerNavItems({
-        discover: t(HEADER_NAV_MESSAGE_KEYS.discover),
-        search: t(HEADER_NAV_MESSAGE_KEYS.search),
-      })}
+      navigation={[
+        ...headerNavItems({
+          discover: t(HEADER_NAV_MESSAGE_KEYS.discover),
+          search: t(HEADER_NAV_MESSAGE_KEYS.search),
+        }),
+        ...EXAMPLE_NAV_ITEMS,
+      ]}
       user={user}
     />
   );
diff --git a/packages/vitnode/src/views/layouts/theme/header/header-content.tsx b/packages/vitnode/src/views/layouts/theme/header/header-content.tsx
index 4e6d67972..43aafa37a 100644
--- a/packages/vitnode/src/views/layouts/theme/header/header-content.tsx
+++ b/packages/vitnode/src/views/layouts/theme/header/header-content.tsx
@@ -1,11 +1,10 @@
 import { Link } from "@tanstack/react-router";
 import { cn } from "cn";
 
-import { buttonVariants } from "@/components/ui/button";
-
 import type { HeaderNavItem } from "./header-nav";
 
 import { HEADER_HREF } from "./header-nav";
+import { HeaderNavMenu } from "./header-nav-menu";
 
 export interface HeaderLayoutContentProps extends Omit<
   React.ComponentProps<"header">,
@@ -30,17 +29,7 @@ export const HeaderLayoutContent = ({
     <div className="dark:bg-background/75 bg-card/75 container mx-auto flex h-14 items-center border-b px-4 py-2 backdrop-blur sm:rounded-lg sm:border sm:shadow-sm">
       <Link to={HEADER_HREF.home}>{logo}</Link>
 
-      <nav className="ms-4 hidden items-center gap-1 sm:flex">
-        {navigation.map(item => (
-          <Link
-            className={buttonVariants({ size: "sm", variant: "ghost" })}
-            key={item.href}
-            to={item.href}
-          >
-            {item.label}
-          </Link>
-        ))}
-      </nav>
+      <HeaderNavMenu className="ms-4" navigation={navigation} />
 
       <div className="ml-auto flex items-center gap-2">{user}</div>
     </div>
diff --git a/packages/vitnode/src/views/layouts/theme/header/header-nav-menu.tsx b/packages/vitnode/src/views/layouts/theme/header/header-nav-menu.tsx
new file mode 100644
index 000000000..c2b14a081
--- /dev/null
+++ b/packages/vitnode/src/views/layouts/theme/header/header-nav-menu.tsx
@@ -0,0 +1,80 @@
+import { Link, useMatchRoute } from "@tanstack/react-router";
+import { cn } from "cn";
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+
+import type { HeaderNavItem } from "./header-nav";
+
+const HeaderNavEntry = ({ item }: { item: HeaderNavItem }) => {
+  const matchRoute = useMatchRoute();
+
+  if (!item.items?.length) {
+    return (
+      <NavigationMenuItem>
+        <NavigationMenuLink
+          active={Boolean(matchRoute({ to: item.href }))}
+          className={cn(
+            navigationMenuTriggerStyle(),
+            "text-muted-foreground hover:text-foreground data-active:text-foreground",
+          )}
+          render={<Link to={item.href} />}
+        >
+          {item.label}
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+    );
+  }
+
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger className="text-muted-foreground hover:text-foreground data-popup-open:text-foreground">
+        {item.label}
+      </NavigationMenuTrigger>
+
+      <NavigationMenuContent>
+        <ul className="flex w-64 flex-col gap-1">
+          {item.items.map(child => (
+            <li key={child.href}>
+              <NavigationMenuLink
+                active={Boolean(matchRoute({ to: child.href }))}
+                className="flex-col items-start gap-0.5"
+                render={<Link to={child.href} />}
+              >
+                <span className="font-medium">{child.label}</span>
+                {child.description ? (
+                  <span className="text-muted-foreground text-xs leading-relaxed text-pretty">
+                    {child.description}
+                  </span>
+                ) : null}
+              </NavigationMenuLink>
+            </li>
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+};
+
+export const HeaderNavMenu = ({
+  className,
+  navigation,
+}: {
+  className?: string;
+  navigation: HeaderNavItem[];
+}) => (
+  <NavigationMenu className={cn("hidden sm:flex", className)}>
+    <NavigationMenuList>
+      {navigation.map(item => (
+        <HeaderNavEntry item={item} key={item.href} />
+      ))}
+    </NavigationMenuList>
+  </NavigationMenu>
+);
diff --git a/packages/vitnode/src/views/layouts/theme/header/header-nav.ts b/packages/vitnode/src/views/layouts/theme/header/header-nav.ts
index 75c748478..1d7fe5243 100644
--- a/packages/vitnode/src/views/layouts/theme/header/header-nav.ts
+++ b/packages/vitnode/src/views/layouts/theme/header/header-nav.ts
@@ -10,9 +10,17 @@ export const HEADER_NAV_MESSAGE_KEYS = {
   search: "nav.search",
 } as const;
 
-/** One link in the main nav. */
+/** One link inside a nav dropdown. */
+export interface HeaderNavChildItem {
+  description?: string;
+  href: string;
+  label: string;
+}
+
+/** One entry in the main nav - a link, or a dropdown when it carries `items`. */
 export interface HeaderNavItem {
   href: string;
+  items?: HeaderNavChildItem[];
   label: string;
 }
 

From ab2c0fa327c5c5c665bb816a71c9f5a8664f4893 Mon Sep 17 00:00:00 2001
From: aXenDeveloper <axendeveloper@gmail.com>
Date: Tue, 15 Sep 2026 21:29:11 +0200
Subject: [PATCH 2/2] =?UTF-8?q?feat(dynamic-icon):=20=E2=9C=A8=20implement?=
 =?UTF-8?q?=20dynamic=20icon=20loading=20and=20add=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/form/auto-form.test.tsx    | 32 ++++++++++++-
 .../vitnode/src/components/form/auto-form.tsx |  6 +--
 .../src/components/ui/dynamic-icon.test.tsx   | 33 +++++++++++++
 .../src/components/ui/dynamic-icon.tsx        |  7 +--
 .../components/ui/emoji-icon-picker-panel.tsx | 34 ++++++-------
 .../src/components/ui/icon-registry.test.ts   | 36 ++++++++++++++
 .../src/components/ui/icon-registry.ts        | 48 +++++++++++++++++++
 .../src/framework/vite/optimize-deps.ts       |  1 +
 8 files changed, 174 insertions(+), 23 deletions(-)
 create mode 100644 packages/vitnode/src/components/ui/dynamic-icon.test.tsx
 create mode 100644 packages/vitnode/src/components/ui/icon-registry.test.ts

diff --git a/packages/vitnode/src/components/form/auto-form.test.tsx b/packages/vitnode/src/components/form/auto-form.test.tsx
index 3b899cf4a..1cd2e233f 100644
--- a/packages/vitnode/src/components/form/auto-form.test.tsx
+++ b/packages/vitnode/src/components/form/auto-form.test.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 import messages from "@/locales/en.json";
 
 import type { FormMode } from "../ui/form";
-import type { AutoFormOnSubmit } from "./auto-form";
+import type { AutoFormOnSubmit, ItemAutoFormComponentProps } from "./auto-form";
 
 import { setFormFieldError } from "../ui/form";
 import { AutoForm } from "./auto-form";
@@ -305,3 +305,33 @@ describe("AutoFormArray", () => {
     expect(amounts().map(input => input.value)).toEqual(["1", "3"]);
   });
 });
+
+describe("field props", () => {
+  it("omits children entirely when a field has no nested fields", async () => {
+    const received: ItemAutoFormComponentProps[] = [];
+
+    await settled(() => {
+      render(
+        <IntlProvider locale="en" messages={messages}>
+          <AutoForm
+            fields={[
+              {
+                id: "name",
+                component: fieldProps => {
+                  received.push(fieldProps);
+
+                  return <AutoFormInput label="Name" {...fieldProps} />;
+                },
+              },
+            ]}
+            formSchema={nameSchema}
+            onSubmit={() => {}}
+          />
+        </IntlProvider>,
+      );
+    });
+
+    expect(received.length).toBeGreaterThan(0);
+    expect(received.every(props => !("children" in props))).toBe(true);
+  });
+});
diff --git a/packages/vitnode/src/components/form/auto-form.tsx b/packages/vitnode/src/components/form/auto-form.tsx
index 550bada8b..b4155096d 100644
--- a/packages/vitnode/src/components/form/auto-form.tsx
+++ b/packages/vitnode/src/components/form/auto-form.tsx
@@ -285,9 +285,9 @@ export function AutoForm<T extends z.ZodObject<z.ZodRawShape>>({
             >
               {component({
                 field,
-                children: nestedFields.length
-                  ? nestedFields.map(renderField)
-                  : undefined,
+                ...(nestedFields.length
+                  ? { children: nestedFields.map(renderField) }
+                  : {}),
                 description:
                   typeof params.description === "string"
                     ? params.description
diff --git a/packages/vitnode/src/components/ui/dynamic-icon.test.tsx b/packages/vitnode/src/components/ui/dynamic-icon.test.tsx
new file mode 100644
index 000000000..284d8ee5e
--- /dev/null
+++ b/packages/vitnode/src/components/ui/dynamic-icon.test.tsx
@@ -0,0 +1,33 @@
+// @vitest-environment node
+import React from "react";
+import { renderToReadableStream } from "react-dom/server";
+import { expect, test } from "vitest";
+
+import { DynamicIcon } from "./dynamic-icon";
+
+const renderToHtml = async (node: React.ReactElement) => {
+  const stream = await renderToReadableStream(node);
+  await stream.allReady;
+
+  return new Response(stream).text();
+};
+
+test("renders the icon into the server-rendered shell", async () => {
+  const html = await renderToHtml(
+    <DynamicIcon
+      className="size-4"
+      fallback={<span id="fallback" />}
+      name="house"
+    />,
+  );
+
+  expect(html).toContain("lucide-house");
+  expect(html).toContain("size-4");
+  expect(html).not.toContain('id="fallback"');
+});
+
+test("renders nothing for an unknown icon", async () => {
+  const html = await renderToHtml(<DynamicIcon name="not-a-real-icon" />);
+
+  expect(html).not.toContain("<svg");
+});
diff --git a/packages/vitnode/src/components/ui/dynamic-icon.tsx b/packages/vitnode/src/components/ui/dynamic-icon.tsx
index 79f7b6f49..0c67909b3 100644
--- a/packages/vitnode/src/components/ui/dynamic-icon.tsx
+++ b/packages/vitnode/src/components/ui/dynamic-icon.tsx
@@ -1,7 +1,8 @@
 import { cn } from "cn";
+import { Icon } from "lucide-react";
 import React from "react";
 
-import { loadLucideIcons } from "./icon-registry";
+import { loadLucideIcon } from "./icon-registry";
 
 export interface DynamicIconProps {
   absoluteStrokeWidth?: boolean;
@@ -12,9 +13,9 @@ export interface DynamicIconProps {
 }
 
 const ResolvedIcon = ({ name, ...props }: DynamicIconProps) => {
-  const Icon = React.use(loadLucideIcons()).get(name);
+  const icon = React.use(loadLucideIcon(name));
 
-  return Icon ? React.createElement(Icon, props) : null;
+  return icon ? <Icon icon={icon} {...props} /> : null;
 };
 
 export const DynamicIcon = ({
diff --git a/packages/vitnode/src/components/ui/emoji-icon-picker-panel.tsx b/packages/vitnode/src/components/ui/emoji-icon-picker-panel.tsx
index 22e2bd0d6..8a90434bf 100644
--- a/packages/vitnode/src/components/ui/emoji-icon-picker-panel.tsx
+++ b/packages/vitnode/src/components/ui/emoji-icon-picker-panel.tsx
@@ -7,7 +7,7 @@ import type { EmojiIconValue } from "@/lib/emoji-icon";
 import { Button } from "./button";
 import { EmojiPicker } from "./emoji-picker";
 import { IconPicker } from "./icon-picker";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { Tabs, TabsContent, TabsList, TabsPanels, TabsTrigger } from "./tabs";
 
 const PANEL_HEIGHT = 288;
 
@@ -54,22 +54,24 @@ export const EmojiIconPickerPanel = ({
         )}
       </div>
 
-      <TabsContent value="emoji">
-        <EmojiPicker
-          autoFocus
-          height={PANEL_HEIGHT}
-          onSelect={emoji => onChange({ type: "emoji", value: emoji })}
-        />
-      </TabsContent>
+      <TabsPanels>
+        <TabsContent value="emoji">
+          <EmojiPicker
+            autoFocus
+            height={PANEL_HEIGHT}
+            onSelect={emoji => onChange({ type: "emoji", value: emoji })}
+          />
+        </TabsContent>
 
-      <TabsContent value="icon">
-        <IconPicker
-          autoFocus
-          height={PANEL_HEIGHT}
-          onSelect={name => onChange({ type: "icon", value: name })}
-          value={value?.type === "icon" ? value.value : undefined}
-        />
-      </TabsContent>
+        <TabsContent value="icon">
+          <IconPicker
+            autoFocus
+            height={PANEL_HEIGHT}
+            onSelect={name => onChange({ type: "icon", value: name })}
+            value={value?.type === "icon" ? value.value : undefined}
+          />
+        </TabsContent>
+      </TabsPanels>
     </Tabs>
   );
 };
diff --git a/packages/vitnode/src/components/ui/icon-registry.test.ts b/packages/vitnode/src/components/ui/icon-registry.test.ts
new file mode 100644
index 000000000..5876094aa
--- /dev/null
+++ b/packages/vitnode/src/components/ui/icon-registry.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test } from "vitest";
+
+import { loadLucideIcon, loadLucideIcons } from "./icon-registry";
+
+describe("loadLucideIcon", () => {
+  test("resolves icon data for a canonical name", async () => {
+    const icon = await loadLucideIcon("house");
+
+    expect(icon?.name).toBe("house");
+    expect(icon?.node.length).toBeGreaterThan(0);
+  });
+
+  test("resolves an alias name", async () => {
+    const [alias, canonical] = await Promise.all([
+      loadLucideIcon("home"),
+      loadLucideIcon("house"),
+    ]);
+
+    expect(alias?.node).toStrictEqual(canonical?.node);
+  });
+
+  test("resolves every name the picker offers", async () => {
+    const { names } = await loadLucideIcons();
+    const resolved = await Promise.all(names.map(loadLucideIcon));
+
+    expect(resolved.filter(icon => !icon)).toStrictEqual([]);
+  });
+
+  test("returns undefined for an unknown name", async () => {
+    await expect(loadLucideIcon("not-a-real-icon")).resolves.toBeUndefined();
+  });
+
+  test("returns a stable promise so React.use does not re-suspend", () => {
+    expect(loadLucideIcon("camera")).toBe(loadLucideIcon("camera"));
+  });
+});
diff --git a/packages/vitnode/src/components/ui/icon-registry.ts b/packages/vitnode/src/components/ui/icon-registry.ts
index da0a469de..e5edff7a1 100644
--- a/packages/vitnode/src/components/ui/icon-registry.ts
+++ b/packages/vitnode/src/components/ui/icon-registry.ts
@@ -1,3 +1,4 @@
+import type { LucideIconData } from "lucide-react";
 import type React from "react";
 
 import {
@@ -17,6 +18,53 @@ export interface LucideIconRegistry {
   names: string[];
 }
 
+type LucideIconLoader = () => Promise<{ __iconData?: LucideIconData }>;
+
+let loaders: Promise<Map<string, LucideIconLoader>> | undefined;
+
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+const loadIconLoaders = (): Promise<Map<string, LucideIconLoader>> => {
+  loaders ??= import("lucide-react/dynamicIconImports.mjs").then(
+    ({ default: imports }) => {
+      const entries = Object.entries(
+        imports as unknown as Record<string, LucideIconLoader>,
+      );
+      const resolved = new Map(entries);
+
+      for (const [name, loader] of entries) {
+        const componentName = componentNameToIconName(
+          iconNameToComponentName(name),
+        );
+
+        if (!resolved.has(componentName)) resolved.set(componentName, loader);
+      }
+
+      return resolved;
+    },
+  );
+
+  return loaders;
+};
+
+const icons = new Map<string, Promise<LucideIconData | undefined>>();
+
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+export const loadLucideIcon = (name: string) => {
+  const cached = icons.get(name);
+
+  if (cached) return cached;
+
+  const pending = loadIconLoaders().then(async resolved => {
+    const loader = resolved.get(name);
+
+    return loader ? (await loader()).__iconData : undefined;
+  });
+
+  icons.set(name, pending);
+
+  return pending;
+};
+
 let registry: Promise<LucideIconRegistry> | undefined;
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
diff --git a/packages/vitnode/src/framework/vite/optimize-deps.ts b/packages/vitnode/src/framework/vite/optimize-deps.ts
index fb5b30df5..1c5cc2154 100644
--- a/packages/vitnode/src/framework/vite/optimize-deps.ts
+++ b/packages/vitnode/src/framework/vite/optimize-deps.ts
@@ -59,6 +59,7 @@ export const VITNODE_CLIENT_DEPENDENCIES = [
   "embla-carousel-react",
   "input-otp",
   "lucide-react",
+  "lucide-react/dynamicIconImports.mjs",
   "motion/react",
   "react-colorful",
   "react-resizable-panels",