feat: replace lucide icons with untitled icons (#221)

* feat: replace lucide icons with untitled icons

* chore: remove lucide-react dependency

Author: kantord

package-lock.json

@@ -29,11 +29,11 @@
     "@tanstack/react-query": "^5.64.1",
     "@types/prismjs": "^1.26.5",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@untitled-ui/icons-react": "^0.1.4",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "fuse.js": "^7.0.0",
     "highlight.js": "^11.11.1",
-    "lucide-react": "^0.471.1",
     "prismjs": "^1.29.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",

package.json

@@ -1,5 +1,5 @@
 import { Button, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
-import { ClipboardCheck, ClipboardCopy } from "lucide-react";
+import { ClipboardCheck, Copy02 } from "@untitled-ui/icons-react";
 import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 
@@ -34,7 +34,7 @@ export function CopyToClipboard({
         {copied ? (
           <ClipboardCheck data-testid="icon-clipboard-check" />
         ) : (
-          <ClipboardCopy data-testid="icon-clipboard-copy" />
+          <Copy02 data-testid="icon-clipboard-copy" />
         )}
       </Button>
 

src/components/CopyToClipboard.tsx

@@ -1,4 +1,4 @@
-import { CircleAlert } from "lucide-react";
+import { AlertCircle } from "@untitled-ui/icons-react";
 import { Header } from "../features/header/components/header";
 import { Card } from "@stacklok/ui-kit";
 
@@ -10,7 +10,7 @@ export function Error() {
       </div>
       <div className="h-24 flex flex-col flex-1 justify-center">
         <Card className="p-8 flex flex-col items-center">
-          <CircleAlert className="text-red-600 mb-2 size-16" />
+          <AlertCircle className="text-red-600 mb-2 size-16" />
           <div className="text-xl font-semibold text-secondary text-center">
             An error occurred
           </div>

src/components/Error.tsx

@@ -7,7 +7,7 @@ import {
 } from "@stacklok/ui-kit";
 import { OverlayTriggerStateContext } from "react-aria-components";
 import { ReactNode, useContext } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronUp } from "@untitled-ui/icons-react";
 
 function PopoverIcon() {
   const { isOpen = false } = useContext(OverlayTriggerStateContext) ?? {};

src/components/HoverPopover.tsx

@@ -2,10 +2,10 @@
 
 import * as React from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 
 import { tv } from "tailwind-variants";
 import { twMerge } from "tailwind-merge";
+import { XClose } from "@untitled-ui/icons-react";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -65,7 +65,7 @@ const SheetContent = React.forwardRef<
     >
       {children}
       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-brand-600 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-25">
-        <X className="size-4" />
+        <XClose className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>

src/components/ui/sheet.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { PanelLeft } from "lucide-react";
+
 import { useIsMobile } from "@/hooks/use-mobile";
 import { Sheet, SheetContent } from "@/components/ui/sheet";
 import { Tooltip, TooltipTrigger, Button, Skeleton } from "@stacklok/ui-kit";
 import { twMerge } from "tailwind-merge";
 import { tv } from "tailwind-variants";
+import { LayoutAlt02 } from "@untitled-ui/icons-react";
 
 const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -271,7 +272,7 @@ const SidebarTrigger = React.forwardRef<
       }}
       {...props}
     >
-      <PanelLeft className="!w-6 !h-6 text-secondary" />
+      <LayoutAlt02 className="!w-6 !h-6 text-secondary" />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   );

src/components/ui/sidebar.tsx

@@ -10,9 +10,10 @@ import {
   TokenUsageAggregate,
 } from "@/api/generated";
 
-vi.mock("lucide-react", async () => {
-  const original =
-    await vi.importActual<typeof import("lucide-react")>("lucide-react");
+vi.mock("@untitled-ui/icons-react", async () => {
+  const original = await vi.importActual<
+    typeof import("@untitled-ui/icons-react")
+  >("@untitled-ui/icons-react");
   return {
     ...original,
     ArrowDown: () => <div data-testid="icon-arrow-down" />,

src/features/alerts/components/__tests__/table-alerts.test.tsx

@@ -1,7 +1,7 @@
 import { TokenUsage, TokenUsageAggregate } from "@/api/generated";
 import { formatCurrency } from "@/lib/currency";
 import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
-import { ArrowDown, ArrowUp } from "lucide-react";
+import { ArrowDown, ArrowUp } from "@untitled-ui/icons-react";
 
 function Icons({
   input_tokens = 0,

src/features/alerts/components/table-alert-token-usage.tsx

@@ -22,13 +22,13 @@ import {
   parsingPromptText,
   getIssueDetectedType,
 } from "@/lib/utils";
-import { KeyRoundIcon, PackageX, Search } from "lucide-react";
 import { useAlertSearch } from "@/hooks/useAlertSearch";
 import { useCallback } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useFilteredAlerts } from "@/hooks/useAlertsData";
 import { useClientSidePagination } from "@/hooks/useClientSidePagination";
 import { TableAlertTokenUsage } from "./table-alert-token-usage";
+import { Key01, PackageX, SearchMd } from "@untitled-ui/icons-react";
 
 const getTitle = (alert: AlertConversation) => {
   const prompt = alert.conversation;
@@ -63,7 +63,7 @@ function IssueDetectedCellContent({ alert }: { alert: AlertConversation }) {
     case "leaked_secret":
       return (
         <>
-          <KeyRoundIcon className="size-4 text-blue-700" />
+          <Key01 className="size-4 text-blue-700" />
           Blocked secret exposure
         </>
       );
@@ -167,7 +167,7 @@ export function TableAlerts() {
                 type="search"
                 placeholder="Search..."
                 isBorderless
-                icon={<Search />}
+                icon={<SearchMd />}
               />
               <SearchFieldClearButton />
             </FieldGroup>

src/features/alerts/components/table-alerts.tsx

@@ -1,10 +1,3 @@
-import {
-  AlertCircle,
-  CheckCircle2,
-  ShieldCheck,
-  ShieldX,
-  ShieldAlert,
-} from "lucide-react";
 import { useCodeGateStatus } from "../hooks/use-codegate-status";
 import { HealthStatus } from "../types";
 import {
@@ -19,6 +12,13 @@ import {
 import { Dialog } from "react-aria-components";
 
 import { ReactNode } from "react";
+import {
+  AlertCircle,
+  AlertTriangle,
+  CheckCircle,
+  ShieldOff,
+  ShieldTick,
+} from "@untitled-ui/icons-react";
 
 type CodeGateStatus =
   | "healthy"
@@ -164,13 +164,13 @@ function ButtonIcon({
     case "error_checking_status":
       return <AlertCircle className={className} />;
     case "healthy":
-      return <ShieldCheck className={className} />;
+      return <ShieldTick className={className} />;
     case "loading":
       return <Loader className={className} />;
     case "unhealthy":
-      return <ShieldX className={className} />;
+      return <ShieldOff className={className} />;
     case "update_available":
-      return <ShieldAlert className={className} />;
+      return <AlertTriangle className={className} />;
     default:
       return status satisfies never;
   }
@@ -188,7 +188,7 @@ function HealthCheckIcon({
     case "unhealthy":
       return <AlertCircle className={className} />;
     case "healthy":
-      return <CheckCircle2 className={className} />;
+      return <CheckCircle className={className} />;
     case "loading":
       return <Loader className={className} />;
     default:
@@ -209,7 +209,7 @@ function VersionIcon({
     case "update_available":
       return <AlertCircle className={className} />;
     case "up_to_date":
-      return <CheckCircle2 className={className} />;
+      return <CheckCircle className={className} />;
     case "loading":
       return <Loader className={className} />;
     default:

src/features/header/components/header-status-menu.tsx

@@ -1,15 +1,15 @@
 import { OptionsSchema } from "@stacklok/ui-kit";
-import { Download, ShieldCheck } from "lucide-react";
+import { Download01, ShieldTick } from "@untitled-ui/icons-react";
 
 export const CERTIFICATE_MENU_ITEMS = [
   {
-    icon: <ShieldCheck />,
+    icon: <ShieldTick />,
     id: "about-certificate-security",
     href: "/certificates/security",
     textValue: "About certificate security",
   },
   {
-    icon: <Download />,
+    icon: <Download01 />,
     id: "download-certificates",
     href: "/certificates",
     textValue: "Download certificates",

src/features/header/constants/certificate-menu-items.tsx

@@ -6,7 +6,7 @@ import {
   Youtube,
 } from "@/components/icons";
 import { OptionsSchema } from "@stacklok/ui-kit";
-import { BookOpenText } from "lucide-react";
+import { BookOpen01 } from "@untitled-ui/icons-react";
 
 export const HELP_MENU_ITEMS = [
   {
@@ -28,7 +28,7 @@ export const HELP_MENU_ITEMS = [
         target: "_blank",
       },
       {
-        icon: <BookOpenText />,
+        icon: <BookOpen01 />,
         id: "documentation",
         href: "https://docs.codegate.ai/",
         textValue: "Documentation",

src/features/header/constants/help-menu-items.tsx

@@ -7,13 +7,19 @@ import {
   Popover,
 } from "@stacklok/ui-kit";
 
-import { Undo2, X, SlidersHorizontal, Check, Ellipsis } from "lucide-react";
 import { useMutationArchiveWorkspace } from "@/features/workspace/hooks/use-mutation-archive-workspace";
 import { useMutationRestoreWorkspace } from "../hooks/use-mutation-restore-workspace";
 import { useMutationHardDeleteWorkspace } from "../hooks/use-mutation-hard-delete-workspace";
 import { useMutationActivateWorkspace } from "../hooks/use-mutation-activate-workspace";
 import { useConfirmHardDeleteWorkspace } from "../hooks/use-confirm-hard-delete-workspace";
 import { hrefs } from "@/lib/hrefs";
+import {
+  Check,
+  DotsHorizontal,
+  FlipBackward,
+  Settings04,
+  XClose,
+} from "@untitled-ui/icons-react";
 
 const getWorkspaceActions = ({
   archiveWorkspace,
@@ -41,13 +47,13 @@ const getWorkspaceActions = ({
   },
   {
     textValue: "Edit",
-    icon: <SlidersHorizontal />,
+    icon: <Settings04 />,
     id: "edit",
     href: hrefs.workspaces.edit(workspace.name),
   },
   {
     textValue: "Archive",
-    icon: <X />,
+    icon: <XClose />,
     id: "archive",
     isDisabled:
       workspace.name === activeWorkspaceName || workspace.name === "default",
@@ -73,15 +79,15 @@ const getArchivedWorkspaceActions = ({
 }): OptionsSchema<"menu">[] => [
   {
     textValue: "Restore",
-    icon: <Undo2 />,
+    icon: <FlipBackward />,
     id: "restore",
     onAction: () =>
       restoreWorkspace({ path: { workspace_name: workspace.name } }),
   },
   {
     textValue: "Permanently delete",
     isDestructive: true,
-    icon: <X />,
+    icon: <XClose />,
     id: "permanently-delete",
     onAction: () =>
       hardDeleteWorkspace({ path: { workspace_name: workspace.name } }),
@@ -103,7 +109,7 @@ export function TableActionsWorkspaces({
   return (
     <MenuTrigger>
       <Button aria-label="Actions" isIcon variant="tertiary">
-        <Ellipsis />
+        <DotsHorizontal />
       </Button>
       <Popover placement="bottom end">
         <Menu

src/features/workspace/components/table-actions-workspaces.tsx

@@ -46,9 +46,13 @@ import {
 import { v1GetWorkspaceCustomInstructionsQueryKey } from "@/api/generated/@tanstack/react-query.gen";
 import { useQueryGetWorkspaceCustomInstructions } from "../hooks/use-query-get-workspace-custom-instructions";
 import { useMutationSetWorkspaceCustomInstructions } from "../hooks/use-mutation-set-workspace-custom-instructions";
-import { Bot, Download, Search } from "lucide-react";
 import Fuse from "fuse.js";
 import systemPrompts from "../constants/built-in-system-prompts.json";
+import {
+  Download01,
+  MessageTextSquare02,
+  SearchMd,
+} from "@untitled-ui/icons-react";
 
 type DarkModeContextValue = {
   preference: "dark" | "light" | null;
@@ -176,7 +180,11 @@ function PromptPresetPicker({ onActivate }: PromptPresetPickerProps) {
             onChange={setQuery}
           >
             <FieldGroup>
-              <Input icon={<Search />} placeholder="Type to search" autoFocus />
+              <Input
+                icon={<SearchMd />}
+                placeholder="Type to search"
+                autoFocus
+              />
               {query.length > 0 ? <SearchFieldClearButton /> : null}
             </FieldGroup>
           </SearchField>
@@ -191,7 +199,7 @@ function PromptPresetPicker({ onActivate }: PromptPresetPickerProps) {
             return (
               <Card className=" flex flex-col">
                 <h2 className="font-bold p-2 flex gap-2 items-center">
-                  <Bot className="size-4" />
+                  <MessageTextSquare02 className="size-4" />
                   <div className="truncate">{item.name}</div>
                 </h2>
                 <pre className="h-72 overflow-hidden text-wrap text-sm bg-gray-50 p-2 overflow-y-auto">
@@ -223,7 +231,7 @@ function PromptPresetPicker({ onActivate }: PromptPresetPickerProps) {
                       handleActivate(item.text);
                     }}
                   >
-                    <Download />
+                    <Download01 />
                   </Button>
                 </div>
               </Card>