refactor(web): migrate console icons to Hugeicons

apps/web/DESIGN.md

@@ -45,6 +45,13 @@ Fixed rem scale (not fluid in product UI): `--fs-12 … --fs-64`. Line heights
 `.t-body/.t-body-sm/.t-caption/.t-micro/.t-eyebrow/.t-mono/.t-link`. Base body is
 `--fs-15` / weight 500 with `ss01`. Product headings stay fixed.
 
+## Icons
+
+Generic interface glyphs use Hugeicons Free through `src/shared/ui/icons.tsx`, with
+`currentColor` and a 1.5px stroke by default. Use its semantic exports rather than
+importing an icon library at a route. Brand marks, provider/channel logos, favicons,
+and product illustrations remain owned assets rather than UI glyphs.
+
 ## Spacing & Radius
 
 Spacing scale `--s-1 (4px) … --s-24 (96px)`. Radius `--r-xs 4 / -sm 6 / -md 10 / -lg 14

apps/web/package.json

@@ -33,7 +33,6 @@
     "boring-avatars": "^2.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.31.0",
     "motion": "^12.40.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

apps/web/src/app/hugeicon.tsx

@@ -1,26 +1,2 @@
-import { HugeiconsIcon } from "@hugeicons/react";
-import type { HugeiconsIconProps, IconSvgElement } from "@hugeicons/react";
-import type { ComponentType, Ref } from "react";
-
-type HugeiconProps = Omit<HugeiconsIconProps, "altIcon" | "icon"> & {
-  ref?: Ref<SVGSVGElement>;
-};
-
-export type AppIcon = ComponentType<HugeiconProps>;
-
-export function createHugeicon(icon: IconSvgElement, displayName: string): AppIcon {
-  function AppHugeicon({
-    color = "currentColor",
-    ref,
-    strokeWidth = 1.5,
-    ...props
-  }: HugeiconProps) {
-    return (
-      <HugeiconsIcon ref={ref} icon={icon} color={color} strokeWidth={strokeWidth} {...props} />
-    );
-  }
-
-  AppHugeicon.displayName = displayName;
-
-  return AppHugeicon;
-}
+export { createHugeicon } from "@/shared/ui/icons";
+export type { AppIcon } from "@/shared/ui/icons";

apps/web/src/app/route-registry.tsx

@@ -1,4 +1,3 @@
-import { FileQuestion } from "lucide-react";
 import { lazy } from "react";
 import type { ComponentType, ReactElement, ReactNode } from "react";
 import { Link, Navigate, useParams, useRoutes } from "react-router-dom";
@@ -7,6 +6,7 @@ import type { RouteObject } from "react-router-dom";
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
 import { EmptyState } from "@/shared/ui/empty-state";
+import { FileQuestion } from "@/shared/ui/icons";
 
 import { GuestRoute, OnboardingRoute, ProtectedRoute } from "./route-guards";
 

apps/web/src/domains/environment/components/environment-cli-callout.tsx

@@ -1,9 +1,9 @@
-import { Terminal } from "lucide-react";
 import type { ReactElement } from "react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { CommandBlock } from "@/shared/ui/command-block";
+import { Terminal } from "@/shared/ui/icons";
 
 export const ENVIRONMENT_CLI_CREATE_COMMAND = "mosoo console environments create-environment";
 

apps/web/src/domains/environment/components/environment-form-controls.tsx

@@ -2,7 +2,6 @@ import type {
   EnvironmentNetworkPolicy,
   EnvironmentPackageManager,
 } from "@mosoo/contracts/environment";
-import { Check, ChevronDown } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { useTranslation } from "@/shared/i18n";
@@ -12,6 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/shared/ui/dropdown-menu";
+import { Check, ChevronDown } from "@/shared/ui/icons";
 
 import { isTruthy } from "../../../shared/lib/truthiness";
 import {

apps/web/src/domains/environment/components/environment-form.tsx

@@ -1,9 +1,9 @@
 import { isWritableEnvironmentPackageManager } from "@mosoo/contracts/environment";
-import { Check, Plus, Trash2 } from "lucide-react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { Button } from "@/shared/ui/button";
+import { Check, Plus, Trash2 } from "@/shared/ui/icons";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
 import { Switch } from "@/shared/ui/switch";

apps/web/src/features/file-preview/file-preview-content.tsx

@@ -1,12 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
-import { Download, FileQuestion, LoaderCircle } from "lucide-react";
 import type { ReactElement } from "react";
 
 import { createFileDownload, readFileText } from "@/domains/file/api/file-download-client";
 import { fileKeys } from "@/domains/file/api/files";
 import type { ListedFileEntry } from "@/domains/file/api/files";
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
+import { Download, FileQuestion, LoaderCircle } from "@/shared/ui/icons";
 import { StaticMarkdown } from "@/shared/ui/static-markdown";
 
 import {

apps/web/src/features/help/help-docs-dialog.tsx

@@ -1,4 +1,3 @@
-import { ArrowUpRight, BookOpen, Search } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 
 import { HELP_DOCS, HELP_DOCS_HOME_URL, searchHelpDocs } from "@/shared/config/help-docs";
@@ -12,6 +11,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { ArrowUpRight, BookOpen, Search } from "@/shared/ui/icons";
 import { Input } from "@/shared/ui/input";
 import { ScrollArea } from "@/shared/ui/scroll-area";
 

apps/web/src/features/help/help-menu.tsx

@@ -1,8 +1,8 @@
-import { HelpCircle } from "lucide-react";
 import { lazy, Suspense, useEffect, useState } from "react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
+import { HelpCircle } from "@/shared/ui/icons";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 
 // Loaded on demand the first time Help is opened. The dialog drags in the Radix

apps/web/src/features/session-chat/assistant-ui/session-message-parts.tsx

@@ -1,10 +1,10 @@
 import { ActionBarPrimitive, MessagePrimitive, useAuiState } from "@assistant-ui/react";
 import type { ReasoningMessagePartComponent, TextMessagePartComponent } from "@assistant-ui/react";
-import { ChevronRight, Copy } from "lucide-react";
 import type { ReactElement } from "react";
 import { useState } from "react";
 
 import { useTranslation } from "@/shared/i18n";
+import { ChevronRight, Copy } from "@/shared/ui/icons";
 import { Markdown } from "@/shared/ui/markdown";
 
 import { SessionToolPart } from "./session-tool-part";

apps/web/src/features/session-chat/assistant-ui/session-thread-composer.tsx

@@ -1,5 +1,4 @@
 import { ComposerPrimitive, ThreadPrimitive } from "@assistant-ui/react";
-import { ArrowUp, FileText, Paperclip } from "lucide-react";
 import type React from "react";
 import type { ReactElement } from "react";
 
@@ -8,6 +7,7 @@ import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { isTruthy } from "@/shared/lib/truthiness";
 import { Button } from "@/shared/ui/button";
+import { ArrowUp, FileText, Paperclip } from "@/shared/ui/icons";
 
 import type { SessionResourceMention } from "../session-resource-mentions";
 

apps/web/src/features/session-chat/tool-call-card.tsx

@@ -1,7 +1,7 @@
-import { ChevronRight, Loader2, ShieldAlert } from "lucide-react";
 import type { ReactElement } from "react";
 
 import { useTranslation } from "@/shared/i18n";
+import { ChevronRight, Loader2, ShieldAlert } from "@/shared/ui/icons";
 
 import { isTruthy } from "../../shared/lib/truthiness";
 export interface ToolCall {

apps/web/src/routes/agent/agent-detail.route.tsx

@@ -1,4 +1,3 @@
-import { ArrowLeft, Settings } from "lucide-react";
 import { lazy, Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import type { ReactElement } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
@@ -9,6 +8,7 @@ import { useAuth } from "@/domains/auth/use-auth";
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { Button } from "@/shared/ui/button";
+import { ArrowLeft, Settings } from "@/shared/ui/icons";
 
 import { isTruthy } from "../../shared/lib/truthiness";
 import { canShowAgentDebugMenuItem } from "./agent-debug-menu-policy";

apps/web/src/routes/agent/agent-list.route.tsx

@@ -1,4 +1,3 @@
-import { Bot, Plus, Upload } from "lucide-react";
 import { useEffect, useMemo, useReducer } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 
@@ -8,6 +7,7 @@ import { useAuth } from "@/domains/auth/use-auth";
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
 import { EmptyState } from "@/shared/ui/empty-state";
+import { Bot, Plus, Upload } from "@/shared/ui/icons";
 import {
   ListPageContent,
   ListPageSearch,

apps/web/src/routes/agent/components/agent-id-badge.tsx

@@ -1,11 +1,11 @@
-import { Check, Copy } from "lucide-react";
 import type { ReactElement } from "react";
 import { useState } from "react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { writeClipboardText } from "@/shared/lib/clipboard";
 import { Button } from "@/shared/ui/button";
+import { Check, Copy } from "@/shared/ui/icons";
 
 export function AgentIdBadge({
   agentId,

apps/web/src/routes/agent/components/agent-readiness-blockers-banner.tsx

@@ -1,5 +1,4 @@
 import type { AgentReadiness } from "@mosoo/contracts/agent";
-import { ExternalLink } from "lucide-react";
 import type { ReactElement } from "react";
 import { Link } from "react-router-dom";
 
@@ -11,6 +10,7 @@ import {
 } from "@/domains/vendor-credential/model/provider-readiness-copy";
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
+import { ExternalLink } from "@/shared/ui/icons";
 
 function readinessBlockMessages(
   readiness: AgentReadiness | null,

apps/web/src/routes/agent/components/agent-row-actions.tsx

@@ -1,5 +1,4 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Copy, Download, MoreHorizontal, Pencil, Settings, Trash2 } from "lucide-react";
 import { useState } from "react";
 import type { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
@@ -24,6 +23,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/shared/ui/dropdown-menu";
+import { Copy, Download, MoreHorizontal, Pencil, Settings, Trash2 } from "@/shared/ui/icons";
 
 import type { Agent } from "../agent.types";
 

apps/web/src/routes/agent/components/agent-session-panel-header.tsx

@@ -1,10 +1,10 @@
-import { Plus, RotateCcw } from "lucide-react";
 import type React from "react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { Badge } from "@/shared/ui/badge";
 import { Button } from "@/shared/ui/button";
+import { Plus, RotateCcw } from "@/shared/ui/icons";
 
 import type { SessionControlMode } from "./agent-session-panel-rules";
 import { sessionIndicatorClassName } from "./agent-session-panel-status";

apps/web/src/routes/agent/components/agent-session-panel.tsx

@@ -1,7 +1,6 @@
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import type { AgentReadiness } from "@mosoo/contracts/agent";
 import { useQueryClient } from "@tanstack/react-query";
-import { ShieldAlert, X } from "lucide-react";
 import { useCallback, useRef } from "react";
 
 import { sessionResourcesQueryKey } from "@/domains/session/api/session-resources";
@@ -21,6 +20,7 @@ import { uploadSessionResource } from "@/features/session-files/session-resource
 import { toProjectId, toSessionId } from "@/routes/typed-id";
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
+import { ShieldAlert, X } from "@/shared/ui/icons";
 
 import { isTruthy } from "../../../shared/lib/truthiness";
 import { AgentReadinessBlockersBanner } from "./agent-readiness-blockers-banner";

apps/web/src/routes/agent/components/consume-mode.tsx

@@ -1,9 +1,9 @@
-import { ArrowLeft, Settings } from "lucide-react";
 import type { ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useTranslation } from "@/shared/i18n";
 import { Button } from "@/shared/ui/button";
+import { ArrowLeft, Settings } from "@/shared/ui/icons";
 
 import type { Agent } from "../agent.types";
 import { getRuntimeInfo } from "../runtime-catalog";

apps/web/src/routes/agent/components/cost-tab.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { BarChart3, Download, ExternalLink } from "lucide-react";
 import { useState } from "react";
 import type { ReactElement, ReactNode } from "react";
 import { Link } from "react-router-dom";
@@ -21,6 +20,7 @@ import type { CostRange, CostRunPurpose } from "@/routes/cost/cost-model";
 import { toAgentId, toProjectId } from "@/routes/typed-id";
 import { getCurrentLocale, useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
+import { BarChart3, Download, ExternalLink } from "@/shared/ui/icons";
 
 const COST_RANGE_KEYS = {
   "7d": "cost.range7d",

apps/web/src/routes/agent/components/create-agent-launcher.tsx

@@ -1,6 +1,5 @@
 import type { ProjectId } from "@mosoo/contracts/id";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Loader2 } from "lucide-react";
 import { useMemo, useState } from "react";
 import type { FormEvent, ReactElement } from "react";
 import { useNavigate } from "react-router-dom";
@@ -13,6 +12,7 @@ import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { Button } from "@/shared/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/shared/ui/dialog";
+import { Loader2 } from "@/shared/ui/icons";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
 

apps/web/src/routes/agent/components/editor/environment-picker.tsx

@@ -1,6 +1,5 @@
 import { Popover } from "@base-ui/react/popover";
 import type { EnvironmentSummary } from "@mosoo/contracts/environment";
-import { Box, Check, ExternalLink, Plus, Star } from "lucide-react";
 import { useState } from "react";
 import type { ReactElement } from "react";
 import { Link } from "react-router-dom";
@@ -9,6 +8,7 @@ import { CreateEnvironmentDialog } from "@/domains/environment/components/create
 import { useProjectEnvironmentsQuery } from "@/domains/environment/query/environment-queries";
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
+import { Box, Check, ExternalLink, Plus, Star } from "@/shared/ui/icons";
 import { Label } from "@/shared/ui/label";
 
 import {

apps/web/src/routes/agent/components/editor/form-sections.tsx

@@ -1,7 +1,6 @@
-import { AlertTriangle } from "lucide-react";
-
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
+import { AlertTriangle } from "@/shared/ui/icons";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
 

apps/web/src/routes/agent/components/editor/markdown-preview-dialog.tsx

@@ -1,7 +1,7 @@
-import { FileText } from "lucide-react";
 import type { ReactElement, ReactNode } from "react";
 
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/ui/dialog";
+import { FileText } from "@/shared/ui/icons";
 
 export function MarkdownPreviewDialog({
   badge = null,

apps/web/src/routes/agent/components/editor/mcp-bindings-field.tsx

@@ -1,5 +1,4 @@
 import type { McpServerWithCredential as PoolServer } from "@mosoo/contracts/mcp";
-import { ExternalLink, Plus, X } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 
@@ -14,6 +13,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/shared/ui/dropdown-menu";
+import { ExternalLink, Plus, X } from "@/shared/ui/icons";
 import { Switch } from "@/shared/ui/switch";
 
 import { isTruthy } from "../../../../shared/lib/truthiness";

apps/web/src/routes/agent/components/editor/model-picker-field.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { ChevronDown } from "lucide-react";
 import type { ReactElement } from "react";
 
 import { toProjectId } from "@/routes/typed-id";
@@ -13,6 +12,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/shared/ui/dropdown-menu";
+import { ChevronDown } from "@/shared/ui/icons";
 import { Label } from "@/shared/ui/label";
 
 import { listAvailableAgentModels } from "../../../../domains/vendor-credential/api/vendor-credential-client";

apps/web/src/routes/agent/components/editor/model-picker-ui.tsx

@@ -1,4 +1,3 @@
-import { ExternalLink } from "lucide-react";
 import type { ReactElement } from "react";
 import { Link } from "react-router-dom";
 
@@ -10,6 +9,7 @@ import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
 import { Badge } from "@/shared/ui/badge";
 import { DropdownMenuItem } from "@/shared/ui/dropdown-menu";
+import { ExternalLink } from "@/shared/ui/icons";
 
 import type { ResolvedModelEntry } from "../../../../domains/vendor-credential/api/vendor-credential-client";
 

apps/web/src/routes/agent/components/editor/runtime-advanced-settings-field.tsx

@@ -3,12 +3,12 @@ import type { AgentBuiltInToolConfig } from "@mosoo/contracts/agent";
 import { normalizeAgentBuiltInTools } from "@mosoo/contracts/agent";
 import type { RuntimeAdvancedSettingDefinition } from "@mosoo/runtime-catalog";
 import { listRuntimeAdvancedSettings } from "@mosoo/runtime-catalog";
-import { ChevronDown } from "lucide-react";
 import { useState } from "react";
 import type { ReactElement } from "react";
 
 import { useTranslation } from "@/shared/i18n";
 import { cn } from "@/shared/lib/class-names";
+import { ChevronDown } from "@/shared/ui/icons";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";