chore(ui): bulk antd icons \u2192 lucide aliases (37-file batch)

Scripted pass over all files with @ant-design/icons imports that only contain icons covered by our mapping table. Each file now imports lucide icons with 'Outlined' aliases so existing JSX continues to work unchanged. Icons mapped: - Info/Settings/RefreshCcw/Loader2/Search/ArrowLeft/ArrowRight/ ChevronDown/ChevronRight/ChevronUp/ChevronLeft/Plus/PlusCircle/ Minus/MinusCircle/Trash2/Pencil/Copy/Check/CheckCircle2/X/XCircle/ AlertTriangle/AlertCircle/HelpCircle/Wrench/Key/Bot/History/Save/ Globe/Cloud/Server/Database/Upload/Download/Inbox/Link/Ban/EyeOff/ Eye/Code/FileText/File/Clock/User/UserPlus/Users/LayoutGrid/ GitBranch/Zap/Plug/Menu/Filter/MoreHorizontal/Image/Video/Mic/ MapPin/ChevronsUpDown. Fixups applied after the bulk pass: - 'spin' prop is antd-specific; replaced with className='animate-spin' in audit_logs, multi_cost_results, ProjectDetailsPage, SearchToolTester, EntityUsage, UsagePageView, ai_suggestion_modal. - agents/add_agent_form: InfoCircleOutlined title/style props (antd) \u2192 aria-label + Tailwind utilities (lucide React.SVGProps). After this pass: @ant-design/icons usage drops from 48 \u2192 11 files. The remaining 11 files import icon names outside the mapping table and will be migrated individually. Gates: TS \u2713 | Build \u2713. Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
2026-10-03 02:22:24 +00:00 · 2026-04-23 21:56:33 +00:00 · 2026-04-23 21:56:33 +00:00 · b7eee5c1f7
commit b7eee5c1f7
parent b9a08a9b7a
37 changed files with 53 additions and 68 deletions
--- a/ui/litellm-dashboard/src/app/login/LoginPage.tsx
+++ b/ui/litellm-dashboard/src/app/login/LoginPage.tsx
@ -7,7 +7,7 @@ import { exchangeLoginCode, getProxyBaseUrl, switchToWorkerUrl } from "@/compone
 import { clearTokenCookies, getCookie } from "@/utils/cookieUtils";
 import { isJwtExpired } from "@/utils/jwtUtils";
 import { consumeReturnUrl, getReturnUrl, isValidReturnUrl } from "@/utils/returnUrlUtils";
-import { InfoCircleOutlined, CloudServerOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined, Server as CloudServerOutlined } from "lucide-react";
 import { Alert, Button, Card, Form, Input, Popover, Select, Space, Typography } from "antd";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
--- a/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.tsx
+++ b/ui/litellm-dashboard/src/components/CostTrackingSettings/pricing_calculator/multi_cost_results.tsx
@ -2,7 +2,7 @@ import React, { useState } from "react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Text, Button } from "@tremor/react";
 import { Card, Statistic, Row, Col, Divider, Spin, Table, Tag } from "antd";
-import { LoadingOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
+import { Loader2 as LoadingOutlined, ChevronDown as DownOutlined, ChevronRight as RightOutlined } from "lucide-react";
 import { CostEstimateResponse } from "../types";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import { MultiModelResult } from "./types";
@ -42,7 +42,7 @@ const SingleModelBreakdown: React.FC<{
    <div className="space-y-3 bg-gray-50 p-4 rounded-lg">
      {loading && (
        <div className="flex items-center gap-2 text-gray-500 text-sm">
-          <Spin indicator={<LoadingOutlined spin />} size="small" />
+          <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />
          <span>Updating...</span>
        </div>
      )}
@ -134,7 +134,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
  if (!hasAnyResult && isAnyLoading && !hasAnyError) {
    return (
      <div className="py-6 text-center">
-        <Spin indicator={<LoadingOutlined spin />} />
+        <Spin indicator={<LoadingOutlined className="animate-spin" />} />
        <Text className="text-gray-500 block mt-2">Calculating costs...</Text>
      </div>
    );
@ -147,7 +147,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
        <Divider className="my-4" />
        <div className="flex items-center justify-between">
          <Text className="text-base font-semibold text-gray-900">Cost Estimates</Text>
-          {isAnyLoading && <Spin indicator={<LoadingOutlined spin />} size="small" />}
+          {isAnyLoading && <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />}
        </div>
        {/* Error Messages */}
        {errorEntries.map((e) => (
@ -192,7 +192,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
              </Tag>
            )}
            {record.loading && (
-              <Spin indicator={<LoadingOutlined spin />} size="small" />
+              <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />
            )}
          </div>
          {record.error && (
@ -281,7 +281,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
      <div className="flex items-center justify-between">
        <Text className="text-base font-semibold text-gray-900">Cost Estimates</Text>
        <div className="flex items-center gap-2">
-          {isAnyLoading && <Spin indicator={<LoadingOutlined spin />} size="small" />}
+          {isAnyLoading && <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />}
          <MultiExportDropdown multiResult={multiResult} />
        </div>
      </div>
--- a/ui/litellm-dashboard/src/components/OldTeams.tsx
+++ b/ui/litellm-dashboard/src/components/OldTeams.tsx
@ -3,12 +3,7 @@ import AvailableTeamsPanel from "@/components/team/available_teams";
 import TeamInfoView from "@/components/team/TeamInfo";
 import TeamSSOSettings from "@/components/TeamSSOSettings";
 import { isProxyAdminRole } from "@/utils/roles";
-import {
-  InfoCircleOutlined,
-  PlusOutlined,
-  TeamOutlined,
-  ReloadOutlined,
-} from "@ant-design/icons";
+import { Info as InfoCircleOutlined, Plus as PlusOutlined, Users as TeamOutlined, RefreshCcw as ReloadOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
  Accordion,
--- a/ui/litellm-dashboard/src/components/Projects/ProjectDetailsPage.tsx
+++ b/ui/litellm-dashboard/src/components/Projects/ProjectDetailsPage.tsx
@ -15,7 +15,7 @@ import {
  theme,
  Typography,
 } from "antd";
-import { LoadingOutlined } from "@ant-design/icons";
+import { Loader2 as LoadingOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { BarChart } from "@tremor/react";
 import { ArrowLeftIcon, DollarSignIcon, EditIcon, KeyIcon, UsersIcon } from "lucide-react";
@ -72,7 +72,7 @@ export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
        }}
      >
        <Flex justify="center" align="center" style={{ minHeight: 300 }}>
-          <Spin indicator={<LoadingOutlined spin />} size="large" />
+          <Spin indicator={<LoadingOutlined className="animate-spin" />} size="large" />
        </Flex>
      </Content>
    );
@ -311,7 +311,7 @@ export function ProjectDetail({ projectId, onBack }: ProjectDetailProps) {
              })()
            ) : project.team_id ? (
              <Flex justify="center" align="center" style={{ padding: 16 }}>
-                <Spin indicator={<LoadingOutlined spin />} size="small" />
+                <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />
              </Flex>
            ) : (
              <Empty description="No team assigned" image={Empty.PRESENTED_IMAGE_SIMPLE} />
--- a/ui/litellm-dashboard/src/components/SearchTools/SearchToolTester.tsx
+++ b/ui/litellm-dashboard/src/components/SearchTools/SearchToolTester.tsx
@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Button, Input, Typography, Spin } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
-import { SearchOutlined, LoadingOutlined } from "@ant-design/icons";
+import { Search as SearchOutlined, Loader2 as LoadingOutlined } from "lucide-react";
 import { searchToolQueryCall } from "../networking";
 import NotificationsManager from "../molecules/notifications_manager";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
@ -88,7 +88,7 @@ export const SearchToolTester: React.FC<SearchToolTesterProps> = ({ searchToolNa
    }));
  };

-  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+  const antIcon = <LoadingOutlined style={{ fontSize: 24 }} className="animate-spin" />;

  const latestResults = searchHistory.length > 0 ? searchHistory[0] : null;

--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/EntityUsage.tsx
@ -23,7 +23,7 @@ import {
  Text,
  Title,
 } from "@tremor/react";
-import { ExportOutlined, LoadingOutlined } from "@ant-design/icons";
+import { Upload as ExportOutlined, Loader2 as LoadingOutlined } from "lucide-react";
 import { Alert, Button } from "antd";
 import React, { useMemo, useState } from "react";
 import TeamMultiSelect from "../../../common_components/team_multi_select";
@ -406,7 +406,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({ accessToken, entityType, enti
          message={
            <div className="flex items-center justify-between">
              <span>
-                <LoadingOutlined spin className="mr-2" />
+                <LoadingOutlined className="animate-spin mr-2" />
                Currently fetching spend data: fetched {progress.currentPage} / {progress.totalPages} pages. Charts will
                update periodically as data loads. Moving off of this page will stop and reset this. To continue using
                the UI in the meantime,{" "}
@ -442,7 +442,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({ accessToken, entityType, enti
          message={
            <div className="flex items-center justify-between">
              <span>
-                <LoadingOutlined spin className="mr-2" />
+                <LoadingOutlined className="animate-spin mr-2" />
                Currently fetching agent data: fetched {agentProgress.currentPage} / {agentProgress.totalPages} pages.
                Charts will update periodically as data loads. Moving off of this page will stop and reset this. To
                continue using the UI in the meantime,{" "}
--- a/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/UsagePageView.tsx
@ -6,7 +6,7 @@
 * Works at 1m+ spend logs, by querying an aggregate table instead.
 */

-import { DownOutlined, ExportOutlined, InfoCircleOutlined, LoadingOutlined, RightOutlined } from "@ant-design/icons";
+import { ChevronDown as DownOutlined, Upload as ExportOutlined, Info as InfoCircleOutlined, Loader2 as LoadingOutlined, ChevronRight as RightOutlined } from "lucide-react";
 import { useDebouncedState } from "@tanstack/react-pacer/debouncer";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
@ -449,7 +449,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
              message={
                <div className="flex items-center justify-between">
                  <span>
-                    <LoadingOutlined spin className="mr-2" />
+                    <LoadingOutlined className="animate-spin mr-2" />
                    Currently fetching spend data: fetched {paginatedResult.progress.currentPage} /{" "}
                    {paginatedResult.progress.totalPages} pages. Charts will update periodically as data loads. Moving
                    off of this page will stop and reset this. To continue using the UI in the meantime,{" "}
@ -496,14 +496,14 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                    searchValue={userSearchInput}
                    onPopupScroll={handleUserPopupScroll}
                    loading={isLoadingUsers}
-                    notFoundContent={isLoadingUsers ? <LoadingOutlined spin /> : "No users found"}
+                    notFoundContent={isLoadingUsers ? <LoadingOutlined className="animate-spin" /> : "No users found"}
                    options={userOptions}
                    popupRender={(menu) => (
                      <>
                        {menu}
                        {isFetchingNextUsersPage && (
                          <div style={{ textAlign: "center", padding: 8 }}>
-                            <LoadingOutlined spin />
+                            <LoadingOutlined className="animate-spin" />
                          </div>
                        )}
                      </>
--- a/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/add_auto_router_tab.tsx
@ -11,8 +11,7 @@ import { fetchAvailableModels, ModelGroup } from "../playground/llm_calls/fetch_
 import RouterConfigBuilder from "./RouterConfigBuilder";
 import ComplexityRouterConfig from "./ComplexityRouterConfig";
 import NotificationManager from "../molecules/notifications_manager";
-import { ThunderboltOutlined, BranchesOutlined } from "@ant-design/icons";
-
+import { Zap as ThunderboltOutlined, GitBranch as BranchesOutlined } from "lucide-react";
 interface AddAutoRouterTabProps {
  form: FormInstance;
  handleOk: () => void;
--- a/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
@ -10,7 +10,7 @@ import {
 } from "@tremor/react";
 import { Row, Col, Typography } from "antd";
 import TextArea from "antd/es/input/TextArea";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { Team } from "../key_team_helpers/key_list";
 import CacheControlSettings from "./cache_control_settings";
 import VectorStoreSelector from "../vector_store_management/VectorStoreSelector";
--- a/ui/litellm-dashboard/src/components/add_pass_through.tsx
+++ b/ui/litellm-dashboard/src/components/add_pass_through.tsx
@ -20,10 +20,7 @@ import {
  Alert,
 } from "antd";
 import NumericalInput from "./shared/numerical_input";
-import {
-  InfoCircleOutlined,
-  ApiOutlined,
-} from "@ant-design/icons";
+import { Info as InfoCircleOutlined, Plug as ApiOutlined } from "lucide-react";
 import KeyValueInput from "./key_value_input";
 import QueryParamInput from "./query_param_input";
 import { passThroughItem } from "./pass_through_settings";
--- a/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
+++ b/ui/litellm-dashboard/src/components/agents/add_agent_form.tsx
@ -3,7 +3,7 @@ import { Modal, Form, Select, Input, Steps, Radio, Tag, Divider, Switch, InputNu
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import MessageManager from "@/components/molecules/message_manager";
 import { Button } from "@tremor/react";
-import { CheckCircleFilled, KeyOutlined, RobotOutlined, AppstoreOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { CheckCircle2 as CheckCircleFilled, Key as KeyOutlined, Bot as RobotOutlined, LayoutGrid as AppstoreOutlined, Info as InfoCircleOutlined } from "lucide-react";
 import CreatedKeyDisplay from "../shared/CreatedKeyDisplay";
 import {
  createAgentCall,
@ -396,7 +396,7 @@ const AddAgentForm: React.FC<AddAgentFormProps> = ({
        label={
          <span>
            Allowed MCP Servers{" "}
-            <InfoCircleOutlined title="Select which MCP servers or access groups this agent can access" style={{ marginLeft: "4px" }} />
+            <InfoCircleOutlined aria-label="Select which MCP servers or access groups this agent can access" className="ml-1 inline h-3 w-3" />
          </span>
        }
        name="allowed_mcp_servers_and_groups"
--- a/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ChatMessages.tsx
@ -1,6 +1,6 @@
 "use client";

-import { ToolOutlined, CopyOutlined, CheckOutlined, EditOutlined } from "@ant-design/icons";
+import { Wrench as ToolOutlined, Copy as CopyOutlined, Check as CheckOutlined, Pencil as EditOutlined } from "lucide-react";
 import { Collapse, Tooltip } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
--- a/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
+++ b/ui/litellm-dashboard/src/components/chat/MCPAppsPanel.tsx
@ -2,7 +2,7 @@

 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Spin, Input, Button, Skeleton } from "antd";
-import { SearchOutlined, ArrowLeftOutlined, RightOutlined, ToolOutlined, CheckCircleOutlined } from "@ant-design/icons";
+import { Search as SearchOutlined, ArrowLeft as ArrowLeftOutlined, ChevronRight as RightOutlined, Wrench as ToolOutlined, CheckCircle2 as CheckCircleOutlined } from "lucide-react";
 import { deleteMCPOAuthUserCredential, fetchMCPServers, getMCPOAuthUserCredentialStatus, listMCPTools } from "../networking";
 import { AUTH_TYPE, MCPServer, MCPTool, handleTransport } from "../mcp_tools/types";
 import MessageManager from "@/components/molecules/message_manager";
--- a/ui/litellm-dashboard/src/components/claude_code_plugins/skill_detail.tsx
+++ b/ui/litellm-dashboard/src/components/claude_code_plugins/skill_detail.tsx
@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ArrowLeftOutlined, CopyOutlined, CheckOutlined, LinkOutlined } from "@ant-design/icons";
+import { ArrowLeft as ArrowLeftOutlined, Copy as CopyOutlined, Check as CheckOutlined, Link as LinkOutlined } from "lucide-react";
 import { formatInstallCommand } from "./helpers";
 import { Plugin } from "./types";

--- a/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentCategoryConfiguration.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentCategoryConfiguration.tsx
@ -1,6 +1,6 @@
 import React from "react";
 import { Card, Typography, Select, Table, Tag, Collapse, Button } from "antd";
-import { DeleteOutlined, PlusOutlined, FileTextOutlined } from "@ant-design/icons";
+import { Trash2 as DeleteOutlined, Plus as PlusOutlined, FileText as FileTextOutlined } from "lucide-react";
 import { getCategoryYaml } from "../../networking";

 const { Title, Text } = Typography;
--- a/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterConfiguration.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/content_filter/ContentFilterConfiguration.tsx
@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Typography, Space, Upload, Card, Button } from "antd";
-import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
+import { Plus as PlusOutlined, Upload as UploadOutlined } from "lucide-react";
 import { validateBlockedWordsFile } from "../../networking";
 import NotificationsManager from "../../molecules/notifications_manager";
 import PatternModal from "./PatternModal";
--- a/ui/litellm-dashboard/src/components/guardrails/guardrail_info.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/guardrail_info.tsx
@ -5,7 +5,7 @@ import {
  updateGuardrailCall,
 } from "@/components/networking";
 import { copyToClipboard as utilCopyToClipboard } from "@/utils/dataUtils";
-import { CodeOutlined, EyeInvisibleOutlined, InfoCircleOutlined, StopOutlined } from "@ant-design/icons";
+import { Code as CodeOutlined, EyeOff as EyeInvisibleOutlined, Info as InfoCircleOutlined, Ban as StopOutlined } from "lucide-react";
 import { ArrowLeft as ArrowLeftIcon } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
--- a/ui/litellm-dashboard/src/components/guardrails/tool_permission/ToolPermissionRulesEditor.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails/tool_permission/ToolPermissionRulesEditor.tsx
@ -2,8 +2,7 @@ import React from "react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Card, Text } from "@tremor/react";
 import { Button, Divider, Empty, Input, Select, Space, Tooltip } from "antd";
-import { InfoCircleOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
-
+import { Info as InfoCircleOutlined, Plus as PlusOutlined, Trash2 as DeleteOutlined } from "lucide-react";
 export type ToolPermissionDecision = "allow" | "deny";
 export type ToolPermissionDefaultAction = "allow" | "deny";
 export type ToolPermissionOnDisallowedAction = "block" | "rewrite";
--- a/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/ToolTestPanel.tsx
@ -3,7 +3,7 @@ import React from "react";
 import { Button, TextInput } from "@tremor/react";
 import { MCPTool, InputSchema, InputSchemaProperty } from "./types";
 import { Form, Select, Tooltip } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import NotificationsManager from "../molecules/notifications_manager";

 const isPlainObject = (value: unknown): value is Record<string, any> =>
--- a/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/create_mcp_server.tsx
@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Modal, Tooltip, Form, Select, Input, Switch, Collapse } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Button, TextInput } from "@tremor/react";
 import { createMCPServer, registerMCPServer } from "../networking";
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_server_edit.tsx
@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Form, Select, Button as AntdButton, Tooltip, Input, InputNumber } from "antd";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Button, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/react";
 import { AUTH_TYPE, OAUTH_FLOW, MCPServer, MCPServerCostInfo, TRANSPORT } from "./types";
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_servers.tsx
@ -1,5 +1,5 @@
 import { isAdminRole } from "@/utils/roles";
-import { QuestionCircleOutlined } from "@ant-design/icons";
+import { HelpCircle as QuestionCircleOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Button, Tab, TabGroup, TabList, TabPanel, TabPanels, Text, Title } from "@tremor/react";
 import NewBadge from "../common_components/NewBadge";
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_tool_configuration.tsx
@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Card, Title, Text } from "@tremor/react";
-import { ToolOutlined, CheckCircleOutlined, SearchOutlined, EditOutlined } from "@ant-design/icons";
+import { Wrench as ToolOutlined, CheckCircle2 as CheckCircleOutlined, Search as SearchOutlined, Pencil as EditOutlined } from "lucide-react";
 import { Badge, Spin, Checkbox, Input, Radio } from "antd";
 import { useTestMCPConnection } from "../../hooks/useTestMCPConnection";
 import McpCrudPermissionPanel from "./McpCrudPermissionPanel";
--- a/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/mcp_tools.tsx
@ -6,7 +6,7 @@ import { listMCPTools, callMCPTool } from "../networking";

 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Card, Title, Text } from "@tremor/react";
-import { RobotOutlined, ToolOutlined, SearchOutlined, KeyOutlined } from "@ant-design/icons";
+import { Bot as RobotOutlined, Wrench as ToolOutlined, Search as SearchOutlined, Key as KeyOutlined } from "lucide-react";
 import { Input, Button as AntdButton } from "antd";

 const MCPToolsViewer = ({
--- a/ui/litellm-dashboard/src/components/model_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/model_info_view.tsx
@ -1,7 +1,7 @@
 import { useModelCostMap } from "@/app/(dashboard)/hooks/models/useModelCostMap";
 import { useModelHub, useModelsInfo } from "@/app/(dashboard)/hooks/models/useModels";
 import { transformModelData } from "@/app/(dashboard)/models-and-endpoints/utils/modelDataTransformer";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { ArrowLeft as ArrowLeftIcon, Key as KeyIcon, RefreshCcw as RefreshIcon, Trash2 as TrashIcon } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
--- a/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
+++ b/ui/litellm-dashboard/src/components/molecules/models/columns.tsx
@ -1,4 +1,4 @@
-import { EditOutlined, InfoCircleOutlined, SyncOutlined } from "@ant-design/icons";
+import { Pencil as EditOutlined, Info as InfoCircleOutlined, RefreshCcw as SyncOutlined } from "lucide-react";
 import { Trash2 } from "lucide-react";
 import { ColumnDef } from "@tanstack/react-table";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
--- a/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
+++ b/ui/litellm-dashboard/src/components/organisms/create_key_button.tsx
@ -6,7 +6,7 @@ import { useTags } from "@/app/(dashboard)/hooks/tags/useTags";
 import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
 import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
 import { formatNumberWithCommas } from "@/utils/dataUtils";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { useQueryClient } from "@tanstack/react-query";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Accordion, AccordionBody, AccordionHeader, Button, Col, Grid, Text, TextInput, Title } from "@tremor/react";
--- a/ui/litellm-dashboard/src/components/organizations.tsx
+++ b/ui/litellm-dashboard/src/components/organizations.tsx
@ -1,5 +1,5 @@
 import OrganizationFilters, { FilterState } from "@/app/(dashboard)/organizations/OrganizationFilters";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { ChevronDown as ChevronDownIcon, ChevronRight as ChevronRightIcon, RefreshCcw as RefreshIcon } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import {
--- a/ui/litellm-dashboard/src/components/policies/ai_suggestion_modal.tsx
+++ b/ui/litellm-dashboard/src/components/policies/ai_suggestion_modal.tsx
@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { Modal, Spin, Checkbox, Select, Input, Typography, Tooltip } from "antd";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Button, Card } from "@tremor/react";
-import { CheckCircleOutlined, CloseCircleOutlined, InfoCircleOutlined, DownOutlined, RightOutlined } from "@ant-design/icons";
+import { CheckCircle2 as CheckCircleOutlined, XCircle as CloseCircleOutlined, Info as InfoCircleOutlined, ChevronDown as DownOutlined, ChevronRight as RightOutlined } from "lucide-react";
 import { suggestPolicyTemplates, modelHubCall, testPolicyTemplate, enrichPolicyTemplateStream } from "../networking";

 const { TextArea } = Input;
--- a/ui/litellm-dashboard/src/components/policies/index.tsx
+++ b/ui/litellm-dashboard/src/components/policies/index.tsx
@ -4,7 +4,7 @@ import { Button, TabGroup, TabList, Tab, TabPanels, TabPanel } from "@tremor/rea
 import { Alert } from "antd";

 import MessageManager from "@/components/molecules/message_manager";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { isAdminRole } from "@/utils/roles";
 import PolicyTable from "./policy_table";
 import PolicyInfoView from "./policy_info";
--- a/ui/litellm-dashboard/src/components/price_data_reload.tsx
+++ b/ui/litellm-dashboard/src/components/price_data_reload.tsx
@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button, Popconfirm, Modal, InputNumber, Space, Typography, Tag, Card, Tooltip, Divider } from "antd";
-import { ReloadOutlined, ClockCircleOutlined, StopOutlined, CloudOutlined, DatabaseOutlined, InfoCircleOutlined, WarningOutlined } from "@ant-design/icons";
+import { RefreshCcw as ReloadOutlined, Clock as ClockCircleOutlined, Ban as StopOutlined, Cloud as CloudOutlined, Database as DatabaseOutlined, Info as InfoCircleOutlined, AlertTriangle as WarningOutlined } from "lucide-react";
 import {
  reloadModelCostMap,
  scheduleModelCostMapReload,
--- a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
@ -18,7 +18,7 @@ import { useGuardrails } from "@/app/(dashboard)/hooks/guardrails/useGuardrails"
 import { formatNumberWithCommas } from "@/utils/dataUtils";
 import { mapEmptyStringToNull } from "@/utils/keyUpdateUtils";
 import { isProxyAdminRole } from "@/utils/roles";
-import { EditOutlined, GlobalOutlined, InfoCircleOutlined, MinusCircleOutlined, PlusOutlined, SaveOutlined } from "@ant-design/icons";
+import { Pencil as EditOutlined, Globe as GlobalOutlined, Info as InfoCircleOutlined, MinusCircle as MinusCircleOutlined, Plus as PlusOutlined, Save as SaveOutlined } from "lucide-react";
 import { ArrowLeft as ArrowLeftIcon } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { Accordion, AccordionBody, AccordionHeader, Badge, Card, Grid, Text, TextInput, Title } from "@tremor/react";
--- a/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamVirtualKeysTable.tsx
@ -25,7 +25,7 @@ import {
  TableRow,
  Text,
 } from "@tremor/react";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 import { Popover, Skeleton, Tooltip } from "antd";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { getModelDisplayName } from "../key_team_helpers/fetch_available_models_team_key";
--- a/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_edit_view.tsx
@ -3,7 +3,7 @@ import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrgan
 import { useProjects } from "@/app/(dashboard)/hooks/projects/useProjects";
 import { useUISettings } from "@/app/(dashboard)/hooks/uiSettings/useUISettings";
 import PolicySelector from "@/components/policies/PolicySelector";
-import { InfoCircleOutlined } from "@ant-design/icons";
+import { Info as InfoCircleOutlined } from "lucide-react";
 // eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import { TextInput, Button as TremorButton } from "@tremor/react";
 import { Form, Input, Select, Switch, Tooltip } from "antd";
--- a/ui/litellm-dashboard/src/components/vector_store_management/CreateVectorStore.tsx
+++ b/ui/litellm-dashboard/src/components/vector_store_management/CreateVectorStore.tsx
@ -3,7 +3,7 @@ import React, { useState } from "react";
 import { Card, Title, Text } from "@tremor/react";
 import { Upload, Button, Select, Form, Alert, Tooltip, Input } from "antd";
 import MessageManager from "@/components/molecules/message_manager";
-import { InboxOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { Inbox as InboxOutlined, Info as InfoCircleOutlined } from "lucide-react";
 import type { UploadProps } from "antd";
 import { ragIngestCall } from "../networking";
 import { DocumentUpload, RAGIngestResponse } from "./types";
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@ -1,11 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { Button, Drawer } from "antd";
-import {
-  CheckOutlined,
-  CopyOutlined,
-  LeftOutlined,
-  RightOutlined,
-} from "@ant-design/icons";
+import { Check as CheckOutlined, Copy as CopyOutlined, ChevronLeft as LeftOutlined, ChevronRight as RightOutlined } from "lucide-react";
 import { Bot, Sparkles, Wrench } from "lucide-react";
 import { LogEntry } from "../columns";
 import { AGENT_CALL_TYPES, MCP_CALL_TYPES } from "../constants";
--- a/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/audit_logs.tsx
@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useQuery, keepPreviousData } from "@tanstack/react-query";
 import { Table, Tag, Input, Select, Button, Pagination, Spin } from "antd";
-import { ReloadOutlined, LoadingOutlined } from "@ant-design/icons";
+import { RefreshCcw as ReloadOutlined, Loader2 as LoadingOutlined } from "lucide-react";
 import type { ColumnsType } from "antd/es/table";
 import moment from "moment";
 import { uiAuditLogsCall } from "../networking";
@ -263,7 +263,7 @@ export default function AuditLogs({
            {/* Pagination + refresh pushed to the right */}
            <div className="ml-auto flex items-center gap-2">
              <Button
-                icon={<ReloadOutlined spin={query.isFetching} />}
+                icon={<ReloadOutlined className="animate-spin" />}
                onClick={() => query.refetch()}
                disabled={query.isFetching}
              />
@ -287,7 +287,7 @@ export default function AuditLogs({
          rowKey="id"
          loading={{
            spinning: query.isLoading,
-            indicator: <Spin indicator={<LoadingOutlined spin />} size="small" />,
+            indicator: <Spin indicator={<LoadingOutlined className="animate-spin" />} size="small" />,
          }}
          size="small"
          pagination={false}