From e52f15d0c535be2d76588f307ef9a5d9e3452cb2 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 23 Apr 2026 21:34:15 +0000
Subject: [PATCH] feat(ui): molecules/models/columns heroicon to lucide

- Heroicon TrashIcon \u2192 lucide Trash2, replacing tremor Icon wrapper
  with a plain <button>/<span>. hover:text-red-600 \u2192 destructive.
- Kept antd Divider/Flex/Popover/Space/Tooltip/Typography and tremor
  Badge/Button/Icon (phase 1 whitelist, inline eslint-disable).

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
---
 .../components/molecules/models/columns.tsx   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
index e8b94dc2ab1..962cec57098 100644
--- a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
+++ b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
@@ -1,5 +1,5 @@
 import { EditOutlined, InfoCircleOutlined, SyncOutlined } from "@ant-design/icons";
-import { TrashIcon } from "@heroicons/react/outline";
+import { Trash2 } from "lucide-react";
 import { ColumnDef } from "@tanstack/react-table";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Badge, Button, Icon } from "@tremor/react";
@@ -410,21 +410,29 @@ export const columns = (
           <div className="flex items-center justify-end gap-2 pr-4">
             {isConfigModel ? (
               <Tooltip title="Config model cannot be deleted on the dashboard. Please delete it from the config file.">
-                <Icon icon={TrashIcon} size="sm" className="opacity-50 cursor-not-allowed" />
+                <span className="inline-flex items-center opacity-50 cursor-not-allowed">
+                  <Trash2 className="h-4 w-4" />
+                </span>
               </Tooltip>
             ) : (
               <Tooltip title="Delete model">
-                <Icon
-                  icon={TrashIcon}
-                  size="sm"
+                <button
+                  type="button"
                   onClick={(e) => {
                     e.stopPropagation();
                     if (canEditModel && onDeleteClick) {
                       onDeleteClick(model.model_info.id);
                     }
                   }}
-                  className={!canEditModel ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:text-red-600"}
-                />
+                  className={
+                    !canEditModel
+                      ? "opacity-50 cursor-not-allowed"
+                      : "cursor-pointer hover:text-destructive"
+                  }
+                  aria-label="Delete model"
+                >
+                  <Trash2 className="h-4 w-4" />
+                </button>
               </Tooltip>
             )}
           </div>