Migrate from material + lucide to @untitledui/icons (#2093)

* Migrate from deprecated Icon component to @untitledui/icons

- Replace all string-based Icon component usages with direct ReactNode imports from @untitledui/icons
- Update component interfaces to accept icon: ReactNode instead of icon: string
- Update JSX to render icon components directly, wrapping in <span> with [&>svg]:size-X where needed
- Remove @deco/ui/components/icon.tsx dependency from all files
- Fix unavailable icon names: Brain01→Stars01, FileOutput→File01, Bot→MessageChatSquare, PanelLeft→Menu01, ChevronsUpDown→ChevronSelectorVertical, Pause→PauseCircle

* updating sizes

* updating icons

* fix

---------

Co-authored-by: rafavalls <valls@deco.cx>

Author: viktormarinho

apps/mesh/package.json

@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@ai-sdk/mcp": "^1.0.0",
+    "@untitledui/icons": "^0.0.19",
     "@xyflow/react": "^12.10.0",
     "kysely": "^0.28.8",
     "kysely-bun-worker": "^0.6.0"
@@ -96,7 +97,6 @@
     "idb-keyval": "^6.2.2",
     "input-otp": "^1.4.2",
     "jose": "^6.0.11",
-    "lucide-react": "^0.552.0",
     "nanoid": "^5.1.6",
     "pg": "^8.16.3",
     "react": "^19.2.0",

apps/mesh/src/web/components/chat/chat-panel.tsx

@@ -14,7 +14,7 @@ import { DecoChatAside } from "@deco/ui/components/deco-chat-aside.tsx";
 import { DecoChatEmptyState } from "@deco/ui/components/deco-chat-empty-state.tsx";
 import { DecoChatInputV2 } from "@deco/ui/components/deco-chat-input-v2.tsx";
 import { DecoChatModelSelectorRich } from "@deco/ui/components/deco-chat-model-selector-rich.tsx";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { X, Plus, CpuChip02 } from "@untitledui/icons";
 import { Metadata } from "@deco/ui/types/chat-metadata.ts";
 import { useNavigate } from "@tanstack/react-router";
 import { type ChatInit, DefaultChatTransport, type UIMessage } from "ai";
@@ -301,7 +301,7 @@ export function ChatPanel() {
     title: gateway.title,
     icon: gateway.icon,
     description: gateway.description,
-    fallbackIcon: "network_node", // Consistent with gateways page
+    fallbackIcon: <CpuChip02 />, // Consistent with gateways page
   }));
 
   const handleSendMessage = async (text: string) => {
@@ -383,8 +383,7 @@ export function ChatPanel() {
               className="flex size-6 items-center justify-center rounded-full p-1 hover:bg-transparent transition-colors group cursor-pointer"
               title="Close chat"
             >
-              <Icon
-                name="close"
+              <X
                 size={16}
                 className="text-muted-foreground group-hover:text-foreground transition-colors"
               />
@@ -423,7 +422,7 @@ export function ChatPanel() {
             icon={selectedGateway?.icon}
             name={selectedGateway?.title || "deco chat"}
             size="xs"
-            fallbackIcon="network_node"
+            fallbackIcon={<CpuChip02 size={12} />}
           />
           <span className="text-sm font-medium">
             {selectedGateway?.title || "deco chat"}
@@ -439,8 +438,7 @@ export function ChatPanel() {
               className="flex size-6 items-center justify-center rounded-full p-1 hover:bg-transparent group cursor-pointer"
               title="New chat"
             >
-              <Icon
-                name="add"
+              <Plus
                 size={16}
                 className="text-muted-foreground group-hover:text-foreground transition-colors"
               />
@@ -452,8 +450,7 @@ export function ChatPanel() {
             className="flex size-6 items-center justify-center rounded-full p-1 hover:bg-transparent transition-colors group cursor-pointer"
             title="Close chat"
           >
-            <Icon
-              name="close"
+            <X
               size={16}
               className="text-muted-foreground group-hover:text-foreground transition-colors"
             />
@@ -474,7 +471,7 @@ export function ChatPanel() {
                 icon={selectedGateway?.icon}
                 name={selectedGateway?.title || "deco chat"}
                 size="lg"
-                fallbackIcon="network_node"
+                fallbackIcon={<CpuChip02 size={32} />}
                 className="size-[60px]! rounded-[18px]!"
               />
             }

apps/mesh/src/web/components/chat/gateway-selector.tsx

@@ -1,5 +1,5 @@
 import type { GatewayEntity } from "@/tools/gateway/schema";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { Check, SearchMd, CpuChip02 } from "@untitledui/icons";
 import { IntegrationIcon } from "@/web/components/integration-icon.tsx";
 import {
   ResponsiveSelect,
@@ -8,11 +8,11 @@ import {
   ResponsiveSelectValue,
 } from "@deco/ui/components/responsive-select.tsx";
 import { cn } from "@deco/ui/lib/utils.ts";
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
 
 export interface GatewayInfo
   extends Pick<GatewayEntity, "id" | "title" | "description" | "icon"> {
-  fallbackIcon?: string; // Material Symbol name to use when icon is not available
+  fallbackIcon?: ReactNode; // Icon to use when icon is not available
 }
 
 function GatewayItemContent({
@@ -34,7 +34,7 @@ function GatewayItemContent({
         icon={gateway.icon}
         name={gateway.title}
         size="sm"
-        fallbackIcon={gateway.fallbackIcon || "network_node"}
+        fallbackIcon={gateway.fallbackIcon ?? <CpuChip02 />}
         className="size-10"
       />
 
@@ -45,7 +45,7 @@ function GatewayItemContent({
             {gateway.title}
           </span>
           {isSelected && (
-            <Icon name="check" size={16} className="text-foreground shrink-0" />
+            <Check size={16} className="text-foreground shrink-0" />
           )}
         </div>
         {gateway.description && (
@@ -75,7 +75,7 @@ function SelectedGatewayDisplay({
         icon={gateway.icon}
         name={gateway.title}
         size="xs"
-        fallbackIcon={gateway.fallbackIcon || "network_node"}
+        fallbackIcon={gateway.fallbackIcon ?? <CpuChip02 />}
         className="size-5"
       />
       <span className="text-sm font-medium text-foreground truncate">
@@ -143,7 +143,7 @@ export function GatewaySelector({
           {/* Search/Header area could go here if needed */}
           <div className="border-b px-4 py-3 bg-background/95 backdrop-blur sticky top-0 z-10">
             <div className="flex items-center gap-2 text-muted-foreground">
-              <Icon name="search" size={16} />
+              <SearchMd size={16} />
               <span className="text-sm">Search for a gateway...</span>
             </div>
           </div>

apps/mesh/src/web/components/chat/message-assistant.tsx

@@ -1,8 +1,8 @@
 import { cn } from "@deco/ui/lib/utils.ts";
 import { Metadata } from "@deco/ui/types/chat-metadata.ts";
 import type { DynamicToolUIPart, ToolUIPart } from "ai";
-import { Icon } from "@deco/ui/components/icon.tsx";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Target04, Stars01, Lightbulb01 } from "@untitledui/icons";
 import { MessageProps } from "./message-user.tsx";
 import { MessageReasoningPart } from "./parts/reasoning-part.tsx";
 import { MessageTextPart } from "./parts/text-part.tsx";
@@ -12,17 +12,19 @@ import { UsageStats } from "./usage-stats.tsx";
 type ThinkingStage = "planning" | "thinking";
 
 interface ThinkingStageConfig {
-  icon: string;
+  icon: ReactNode;
   label: string;
 }
 
 const THINKING_STAGES: Record<ThinkingStage, ThinkingStageConfig> = {
   planning: {
-    icon: "track_changes",
+    icon: (
+      <Target04 className="text-muted-foreground animate-pulse" size={20} />
+    ),
     label: "Planning next moves",
   },
   thinking: {
-    icon: "psychology",
+    icon: <Stars01 className="text-muted-foreground animate-pulse" size={20} />,
     label: "Thinking",
   },
 };
@@ -47,11 +49,7 @@ function TypingIndicator() {
 
   return (
     <div className="flex items-center gap-2 py-2">
-      <Icon
-        name={config.icon}
-        className="text-muted-foreground animate-pulse"
-        size={20}
-      />
+      {config.icon}
       <span className="text-sm font-medium text-muted-foreground text-shimmer">
         {config.label}...
       </span>
@@ -64,7 +62,7 @@ function ThoughtSummary({ duration }: { duration: number }) {
 
   return (
     <div className="flex items-center gap-2 py-2 opacity-60">
-      <Icon name="lightbulb" className="text-muted-foreground" size={16} />
+      <Lightbulb01 className="text-muted-foreground" size={16} />
       <span className="text-xs text-muted-foreground">
         Thought · {seconds}s
       </span>

apps/mesh/src/web/components/chat/message-user.tsx

@@ -4,7 +4,7 @@ import { cn } from "@deco/ui/lib/utils.ts";
 import { Metadata } from "@deco/ui/types/chat-metadata.ts";
 import { MessageTextPart } from "./parts/text-part.tsx";
 import { MessageListContext } from "./message-list.tsx";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { ChevronUp, ChevronDown } from "@untitledui/icons";
 import { Button } from "@deco/ui/components/button.tsx";
 
 export interface MessageProps<T extends Metadata> {
@@ -91,10 +91,11 @@ export function MessageUser<T extends Metadata>({
               size="xs"
               className="text-xs w-full text-muted-foreground hover:text-foreground"
             >
-              <Icon
-                name={isExpanded ? "expand_less" : "expand_more"}
-                className="text-sm"
-              />
+              {isExpanded ? (
+                <ChevronUp className="text-sm" />
+              ) : (
+                <ChevronDown className="text-sm" />
+              )}
             </Button>
           </div>
         )}

apps/mesh/src/web/components/chat/parts/reasoning-part.tsx

@@ -1,7 +1,7 @@
 import { ReasoningUIPart } from "ai";
 import { useEffect, useReducer } from "react";
 import { cn } from "@deco/ui/lib/utils.ts";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { Stars01, ChevronDown } from "@untitledui/icons";
 import { MemoizedMarkdown } from "@deco/ui/components/chat/chat-markdown.tsx";
 
 interface ReasoningPartProps {
@@ -62,8 +62,7 @@ export function MessageReasoningPart({ part, id }: ReasoningPartProps) {
         onClick={handleToggle}
         className="flex items-center gap-2 py-2 transition-colors cursor-pointer"
       >
-        <Icon
-          name="psychology"
+        <Stars01
           className={cn(
             "text-muted-foreground transition-opacity",
             isPartStreaming && "animate-pulse",
@@ -77,8 +76,7 @@ export function MessageReasoningPart({ part, id }: ReasoningPartProps) {
         >
           Agent thinking
         </span>
-        <Icon
-          name="expand_more"
+        <ChevronDown
           className={cn(
             "text-muted-foreground transition-transform duration-200",
             isExpanded ? "rotate-180" : "",

apps/mesh/src/web/components/chat/parts/text-part.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useCopy } from "@deco/ui/hooks/use-copy.ts";
 import { Button } from "@deco/ui/components/button.tsx";
 import { MemoizedMarkdown } from "@deco/ui/components/chat/chat-markdown.tsx";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { Check, Copy01 } from "@untitledui/icons";
 
 interface MessageTextPartProps {
   id: string;
@@ -37,13 +37,9 @@ export function MessageTextPart({
               className="text-muted-foreground hover:text-foreground px-2 py-1 h-auto whitespace-nowrap"
             >
               {isCopied ? (
-                <>
-                  <Icon name="check" className="mr-1 text-sm" />
-                </>
+                <Check className="mr-1 text-sm" />
               ) : (
-                <>
-                  <Icon name="content_copy" className="mr-1 text-sm" />
-                </>
+                <Copy01 className="mr-1 text-sm" />
               )}
             </Button>
           </div>

apps/mesh/src/web/components/chat/parts/tool-call-part.tsx

@@ -1,4 +1,4 @@
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { AlertCircle, Terminal } from "@untitledui/icons";
 import { cn } from "@deco/ui/lib/utils.ts";
 import type { DynamicToolUIPart, ToolUIPart } from "ai";
 import { ToolOutputRenderer } from "./tool-outputs/tool-output-renderer.tsx";
@@ -16,13 +16,11 @@ export function ToolCallPart({ part }: ToolCallPartProps) {
   return (
     <div className="flex flex-col gap-1.5 py-1">
       <div className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
-        <Icon
-          name={state === "output-error" ? "error" : "terminal"}
-          className={cn(
-            "h-3.5 w-3.5",
-            state === "output-error" && "text-destructive",
-          )}
-        />
+        {state === "output-error" ? (
+          <AlertCircle className="h-3.5 w-3.5 text-destructive" />
+        ) : (
+          <Terminal className="h-3.5 w-3.5" />
+        )}
         <span className={cn(state === "output-error" && "text-destructive/90")}>
           {state === "input-streaming" && `Streaming ${toolName} arguments...`}
           {state === "input-available" && `Calling ${toolName}...`}

apps/mesh/src/web/components/chat/parts/tool-outputs/tool-output-renderer.tsx

@@ -2,7 +2,7 @@ import { ConnectionCard } from "@/web/components/connections/connection-card.tsx
 import { useConnection } from "@/web/hooks/collections/use-connection";
 import { useProjectContext } from "@/web/providers/project-context-provider";
 import { Button } from "@deco/ui/components/button.tsx";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { LinkExternal01, Copy01 } from "@untitledui/icons";
 import { useNavigate } from "@tanstack/react-router";
 import { toast } from "sonner";
 
@@ -106,7 +106,7 @@ function ConnectionRenderer({
           className="hover:text-foreground transition-colors"
           title="Open connection"
         >
-          <Icon name="open_in_new" size={12} />
+          <LinkExternal01 size={12} />
         </button>
       </div>
     );
@@ -161,7 +161,7 @@ function CopyButton({ text }: { text: string }) {
       className="h-5 w-5 hover:bg-background/50"
       onClick={handleCopy}
     >
-      <Icon name="content_copy" size={12} />
+      <Copy01 size={12} />
     </Button>
   );
 }

apps/mesh/src/web/components/chat/usage-stats.tsx

@@ -3,7 +3,7 @@ import {
   TooltipTrigger,
   TooltipContent,
 } from "@deco/ui/components/tooltip.tsx";
-import { Icon } from "@deco/ui/components/icon.tsx";
+import { Coins01 } from "@untitledui/icons";
 import { Metadata } from "@deco/ui/types/chat-metadata.ts";
 import { calculateUsageStats } from "@/web/lib/usage-utils.ts";
 
@@ -23,7 +23,7 @@ export function UsageStats({ messages }: UsageStatsProps) {
           type="button"
           className="ml-auto shrink-0 flex items-center gap-1 text-[11px] text-muted-foreground/60 font-mono tabular-nums hover:text-muted-foreground transition-colors"
         >
-          <Icon name="token" size={12} className="opacity-60" />
+          <Coins01 size={12} className="opacity-60" />
           <span className="hidden md:inline">
             {totalTokens.toLocaleString()}
           </span>