chore: remove comments

frontend/__mocks__/signozhqIconsMock.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const IconMock = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+	(props, ref) => <svg ref={ref} {...props} />,
+);
+IconMock.displayName = 'IconMock';
+
+// Re-export IconMock as every possible named export via module.exports proxy
+// so that any `import { SomeIcon } from '@signozhq/icons'` resolves to a valid component.
+const moduleExports = new Proxy(
+	{ __esModule: true, default: IconMock },
+	{
+		get(
+			target: Record<string | symbol, unknown>,
+			prop: string | symbol,
+		): unknown {
+			if (prop in target) {
+				return target[prop];
+			}
+			return IconMock;
+		},
+	},
+);
+
+module.exports = moduleExports;

frontend/jest.config.ts

@@ -24,8 +24,7 @@ const config: Config.InitialOptions = {
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
-		'^@signozhq/icons$':
-			'<rootDir>/node_modules/@signozhq/icons/dist/index.esm.js',
+		'^@signozhq/icons$': '<rootDir>/__mocks__/signozhqIconsMock.tsx',
 		'^react-syntax-highlighter/dist/esm/(.*)$':
 			'<rootDir>/node_modules/react-syntax-highlighter/dist/cjs/$1',
 		'^@signozhq/(?!ui$)([^/]+)$':

frontend/package.json

@@ -32,7 +32,6 @@
   "license": "ISC",
   "dependencies": {
     "@ant-design/colors": "6.0.0",
-    "@ant-design/icons": "4.8.0",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/lang-javascript": "6.2.3",
     "@dnd-kit/core": "6.1.0",
@@ -48,7 +47,7 @@
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
     "@signozhq/design-tokens": "2.1.4",
-    "@signozhq/icons": "0.1.0",
+    "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
     "@signozhq/ui": "0.0.12",
     "@tanstack/react-table": "8.21.3",
@@ -97,7 +96,6 @@
     "jest": "30.2.0",
     "js-base64": "^3.7.2",
     "lodash-es": "^4.17.21",
-    "lucide-react": "0.498.0",
     "mini-css-extract-plugin": "2.4.5",
     "motion": "12.4.13",
     "nuqs": "2.8.8",

frontend/src/components/AuthError/AuthError.tsx

@@ -1,5 +1,5 @@
 import ErrorContent from 'components/ErrorModal/components/ErrorContent';
-import { CircleAlert } from 'lucide-react';
+import { CircleAlert } from '@signozhq/icons';
 import APIError from 'types/api/error';
 
 import './AuthError.styles.scss';

frontend/src/components/AuthPageContainer/AuthFooter.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight } from '@signozhq/icons';
 
 import './AuthFooter.styles.scss';
 

frontend/src/components/AuthPageContainer/AuthHeader.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { Button } from '@signozhq/ui';
-import { LifeBuoy } from 'lucide-react';
+import { LifeBuoy } from '@signozhq/icons';
 
 import signozBrandLogoUrl from '@/assets/Logos/signoz-brand-logo.svg';
 

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -2,10 +2,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { LoadingOutlined, SearchOutlined } from '@ant-design/icons';
+import { LoaderCircle, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
+	Flex,
 	Input,
 	InputRef,
 	Progress,
@@ -107,9 +108,11 @@ const getColumnSearchProps = (
 					type="primary"
 					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
-					icon={<SearchOutlined />}
 				>
-					Search
+					<Flex align="center" gap={4}>
+						<Search size="md" />
+						Search
+					</Flex>
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
@@ -131,9 +134,7 @@ const getColumnSearchProps = (
 		</div>
 	),
 	filterIcon: (filtered: boolean): JSX.Element => (
-		<SearchOutlined
-			style={{ color: filtered ? Color.BG_ROBIN_500 : undefined }}
-		/>
+		<Search style={{ color: filtered ? Color.BG_ROBIN_500 : undefined }} />
 	),
 	onFilter: (value, record): boolean =>
 		record[dataIndex || '']
@@ -516,7 +517,9 @@ export default function CeleryOverviewTable({
 				bordered={false}
 				loading={{
 					spinning: isLoading,
-					indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+					indicator: (
+						<Spin indicator={<LoaderCircle size={14} className="animate-spin" />} />
+					),
 				}}
 				locale={{
 					emptyText: isLoading ? null : <Typography.Text>No data</Typography.Text>,

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -5,7 +5,7 @@ import logEvent from 'api/common/logEvent';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { X } from 'lucide-react';
+import { X } from '@signozhq/icons';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -5,7 +5,7 @@ import { Card, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { CardContainer } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/ChangePercentagePill/ChangePercentagePill.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import cx from 'classnames';
-import { ArrowDown, ArrowUp } from 'lucide-react';
+import { ArrowDown, ArrowUp } from '@signozhq/icons';
 
 import './ChangePercentagePill.styles.scss';
 

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
 import { Button, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
 import { USER_PREFERENCES } from 'constants/userPreferences';
 import dayjs from 'dayjs';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { ChevronsDown, ScrollText } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { ChangelogSchema } from 'types/api/changelog/getChangelogByVersion';
 import { UserPreference } from 'types/api/preferences/preference';
@@ -116,14 +115,10 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button type="default" icon={<CloseOutlined />} onClick={onClose}>
+							<Button type="default" icon={<X />} onClick={onClose}>
 								Skip for now
 							</Button>
-							<Button
-								type="primary"
-								icon={<CheckOutlined />}
-								onClick={onClickUpdateWorkspace}
-							>
+							<Button type="primary" icon={<Check />} onClick={onClickUpdateWorkspace}>
 								Update my workspace
 							</Button>
 						</div>

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -5,7 +5,7 @@ import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
-import { CreditCard, MessageSquareText, X } from 'lucide-react';
+import { CreditCard, MessageSquareText, X } from '@signozhq/icons';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import APIError from 'types/api/error';

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -37,7 +37,7 @@ import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
 import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,

frontend/src/components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected.tsx

@@ -3,7 +3,7 @@ import {
 	CloudintegrationtypesCollectedLogAttributeDTO,
 	CloudintegrationtypesCollectedMetricDTO,
 } from 'api/generated/services/sigNoz.schemas';
-import { BarChart2, ScrollText } from 'lucide-react';
+import { BarChart, ScrollText } from '@signozhq/icons';
 
 import './CloudServiceDataCollected.styles.scss';
 
@@ -82,7 +82,7 @@ function CloudServiceDataCollected({
 			{metricsData && metricsData.length > 0 && (
 				<div className="cloud-service-data-collected-table">
 					<div className="cloud-service-data-collected-table-heading">
-						<BarChart2 size={14} />
+						<BarChart size={14} />
 						Metrics
 					</div>
 					<Table

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -2,7 +2,7 @@ import { Calendar } from '@signozhq/ui';
 import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { CalendarIcon, Check, X } from 'lucide-react';
+import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 
 import { DateRange } from './CustomTimePickerPopoverContent';

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -23,7 +23,7 @@ import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
 import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -21,7 +21,7 @@ import {
 	Option,
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import dayjs from 'dayjs';
-import { Clock, PenLine, TriangleAlertIcon } from 'lucide-react';
+import { Clock, PenLine, TriangleAlert } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import { getCustomTimeRanges } from 'utils/customTimeRangeUtils';
 import { TimeRangeValidationResult } from 'utils/timeUtils';
@@ -300,7 +300,7 @@ function CustomTimePickerPopoverContent({
 								inputErrorDetails && (
 									<div className="input-error-message-container">
 										<div className="input-error-message-title">
-											<TriangleAlertIcon color={Color.BG_CHERRY_400} size={16} />
+											<TriangleAlert color={Color.BG_CHERRY_400} size={16} />
 											<span className="input-error-message-text">
 												{inputErrorDetails.message}
 											</span>

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -11,7 +11,7 @@ import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { Check, Search } from 'lucide-react';
+import { Check, Search } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 
 import { Timezone, TIMEZONE_DATA } from './timezoneUtils';

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 import { Button, Popover, Radio, Tooltip, Typography } from 'antd';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
-import { Download, DownloadIcon, Loader2 } from 'lucide-react';
+import { Download, LoaderCircle } from '@signozhq/icons';
 import { DataSource } from 'types/common/queryBuilder';
 
 import {
@@ -139,9 +139,9 @@ export default function DownloadOptionsMenu({
 					className="periscope-btn ghost"
 					icon={
 						isDownloading ? (
-							<Loader2 size={14} className="animate-spin" />
+							<LoaderCircle size={14} className="animate-spin" />
 						) : (
-							<DownloadIcon size={14} />
+							<Download size={14} />
 						)
 					}
 					data-testid={`periscope-btn-download-${dataSource}`}

frontend/src/components/DropDown/DropDown.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { Ellipsis } from '@signozhq/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
@@ -38,7 +38,7 @@ function DropDown({
 					setDdOpen(true);
 				}}
 			>
-				<EllipsisOutlined className="dropdown-icon" />
+				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>
 		</Dropdown>
 	);

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Modal, Tag } from 'antd';
-import { CircleAlert, X } from 'lucide-react';
+import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
 import APIError from 'types/api/error';

frontend/src/components/ErrorModal/components/ErrorContent.tsx

@@ -3,7 +3,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { BookOpenText, ChevronsDown } from 'lucide-react';
+import { BookOpenText, ChevronsDown } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import APIError from 'types/api/error';
 

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,11 +1,5 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import {
-	DeleteOutlined,
-	MoreOutlined,
-	SaveOutlined,
-	ShareAltOutlined,
-} from '@ant-design/icons';
 import {
 	Button,
 	Col,
@@ -44,6 +38,7 @@ import {
 } from './styles';
 import { ExplorerCardProps } from './types';
 import { deleteViewHandler } from './utils';
+import { Ellipsis, Save, Share2, Trash2 } from '@signozhq/icons';
 
 function ExplorerCard({
 	sourcepage,
@@ -159,13 +154,13 @@ function ExplorerCard({
 				key: 'delete',
 				label: <Typography.Text strong>Delete</Typography.Text>,
 				onClick: onDeleteHandler,
-				icon: <DeleteOutlined />,
+				icon: <Trash2 size="md" />,
 			},
 		],
 	};
 
 	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
-	const saveButtonIcon = isQueryUpdated ? null : <SaveOutlined />;
+	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
 
 	const showSaveView = false;
 
@@ -215,11 +210,7 @@ function ExplorerCard({
 									</Space>
 								)}
 								{isQueryUpdated && (
-									<Button
-										type="primary"
-										icon={<SaveOutlined />}
-										onClick={onUpdateQueryHandler}
-									>
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
 										Save changes
 									</Button>
 								)}
@@ -248,10 +239,10 @@ function ExplorerCard({
 											: SaveButtonText.SAVE_VIEW}
 									</Button>
 								</Popover>
-								<ShareAltOutlined onClick={onCopyUrlHandler} />
+								<Share2 onClick={onCopyUrlHandler} size="md" />
 								{viewKey && (
 									<Dropdown trigger={['click']} menu={moreOptionMenu}>
-										<MoreOutlined />
+										<Ellipsis size="md" />
 									</Dropdown>
 								)}
 							</Space>

frontend/src/components/ExplorerCard/MenuItemGenerator.tsx

@@ -1,5 +1,5 @@
 import { MouseEvent, useCallback } from 'react';
-import { DeleteOutlined } from '@ant-design/icons';
+import { Trash2 } from '@signozhq/icons';
 import { Col, Row, Tooltip, Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useDeleteView } from 'hooks/saveViews/useDeleteView';
@@ -31,7 +31,7 @@ function MenuItemGenerator({
 
 	const { mutateAsync: deleteViewAsync } = useDeleteView(uuid);
 
-	const onDeleteHandler = (event: MouseEvent<HTMLElement>): void => {
+	const onDeleteHandler = (event: MouseEvent<SVGSVGElement>): void => {
 		event.stopPropagation();
 		deleteViewHandler({
 			deleteViewAsync,
@@ -86,7 +86,12 @@ function MenuItemGenerator({
 				</Col>
 				<Col span={2}>
 					<Typography.Link>
-						<DeleteOutlined onClick={onDeleteHandler} />
+						<Trash2
+							role="img"
+							aria-label="Delete view"
+							onClick={onDeleteHandler}
+							size="md"
+						/>
 					</Typography.Link>
 				</Col>
 			</Row>

frontend/src/components/ExplorerCard/test/MenuItemGenerator.test.tsx

@@ -55,7 +55,7 @@ describe('MenuItemGenerator', () => {
 		);
 
 		const spanElement = screen.getByRole('img', {
-			name: 'delete',
+			name: /delete view/i,
 		});
 
 		expect(spanElement).toBeInTheDocument();

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { Button, Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { Globe, Inbox, SquarePen } from 'lucide-react';
+import { Globe, Inbox, SquarePen } from '@signozhq/icons';
 
 import AnnouncementsModal from './AnnouncementsModal';
 import FeedbackModal from './FeedbackModal';
@@ -105,6 +105,7 @@ function HeaderRightSection({
 					onOpenChange={handleOpenAnnouncementsModalChange}
 				>
 					<Button
+						aria-label="Announcements"
 						icon={<Inbox size={14} />}
 						className="periscope-btn ghost announcements-btn"
 						onClick={(): void => {

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -10,7 +10,7 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import useUrlQuery from 'hooks/useUrlQuery';
 import GetMinMax from 'lib/getMinMax';
-import { Check, Info, Link2 } from 'lucide-react';
+import { Check, Info, Link2 } from '@signozhq/icons';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { getAbsoluteUrl } from 'utils/basePath';

frontend/src/components/HeaderRightSection/__tests__/HeaderRightSection.test.tsx

@@ -80,15 +80,10 @@ describe('HeaderRightSection', () => {
 		expect(buttons).toHaveLength(3);
 		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
 
-		// Check for feedback button by class
-		const feedbackButton = document.querySelector(
-			'.share-feedback-btn[class*="share-feedback-btn"]',
-		);
-		expect(feedbackButton).toBeInTheDocument();
-
-		// Check for announcements button by finding the inbox icon
-		const inboxIcon = document.querySelector('.lucide-inbox');
-		expect(inboxIcon).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /announcements/i }),
+		).toBeInTheDocument();
 	});
 
 	it('should render only enabled features', () => {
@@ -106,22 +101,17 @@ describe('HeaderRightSection', () => {
 			screen.queryByRole('button', { name: /share/i }),
 		).not.toBeInTheDocument();
 
-		// Check that inbox icon is not present
-		const inboxIcon = document.querySelector('.lucide-inbox');
-		expect(inboxIcon).not.toBeInTheDocument();
-
-		// Check that feedback button is present
-		const squarePenIcon = document.querySelector('.lucide-square-pen');
-		expect(squarePenIcon).toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /announcements/i }),
+		).not.toBeInTheDocument();
+		expect(screen.getByRole('button', { name: /feedback/i })).toBeInTheDocument();
 	});
 
 	it('should open feedback modal and log event when feedback button is clicked', async () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -149,9 +139,9 @@ describe('HeaderRightSection', () => {
 		const user = userEvent.setup();
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const announcementsButton = document
-			.querySelector('.lucide-inbox')
-			?.closest('button');
+		const announcementsButton = screen.getByRole('button', {
+			name: /announcements/i,
+		});
 		expect(announcementsButton).toBeInTheDocument();
 
 		await user.click(announcementsButton!);
@@ -166,9 +156,7 @@ describe('HeaderRightSection', () => {
 		render(<HeaderRightSection {...defaultProps} />);
 
 		// Open feedback modal
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -190,9 +178,7 @@ describe('HeaderRightSection', () => {
 		expect(screen.getByTestId('share-modal')).toBeInTheDocument();
 
 		// Open feedback modal - should close share modal
-		const feedbackButton = document
-			.querySelector('.lucide-square-pen')
-			?.closest('button');
+		const feedbackButton = screen.getByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 
 		await user.click(feedbackButton!);
@@ -210,7 +196,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -224,7 +210,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).toBeInTheDocument();
 	});
 
@@ -238,7 +224,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -252,7 +238,7 @@ describe('HeaderRightSection', () => {
 
 		render(<HeaderRightSection {...defaultProps} />);
 
-		const feedbackButton = document.querySelector('.lucide-square-pen');
+		const feedbackButton = screen.queryByRole('button', { name: /feedback/i });
 		expect(feedbackButton).not.toBeInTheDocument();
 	});
 
@@ -272,11 +258,13 @@ describe('HeaderRightSection', () => {
 
 		// Verify which buttons are present
 		expect(screen.getByRole('button', { name: /share/i })).toBeInTheDocument();
-		const inboxIcon = document.querySelector('.lucide-inbox');
-		expect(inboxIcon).toBeInTheDocument();
+		expect(
+			screen.getByRole('button', { name: /announcements/i }),
+		).toBeInTheDocument();
 
 		// Verify feedback button is not present
-		const feedbackIcon = document.querySelector('.lucide-square-pen');
-		expect(feedbackIcon).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole('button', { name: /feedback/i }),
+		).not.toBeInTheDocument();
 	});
 });

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -4,7 +4,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
-import { CheckCircle2, HandPlatter } from 'lucide-react';
+import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 import './WaitListFragment.styles.scss';
@@ -61,7 +61,7 @@ export default function WaitlistFragment({
 				loading={isSubmitting}
 				icon={
 					isSuccess ? (
-						<CheckCircle2 size={16} color={Color.BG_FOREST_500} />
+						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Button, Input, Typography } from 'antd';
 import cx from 'classnames';
-import { X } from 'lucide-react';
+import { X } from '@signozhq/icons';
 
 import './InputWithLabel.styles.scss';
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -9,7 +9,7 @@ import { FeatureKeys } from 'constants/features';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
-import { CreditCard, HelpCircle, X } from 'lucide-react';
+import { CircleHelp, CreditCard, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
@@ -169,7 +169,7 @@ function LaunchChatSupport({
 				<Button
 					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}
-					icon={<HelpCircle size={14} />}
+					icon={<CircleHelp size={14} />}
 				>
 					{buttonText || 'Facing issues?'}
 				</Button>

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,6 +1,6 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight } from '@signozhq/icons';
 import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';

frontend/src/components/LogDetail/index.tsx

@@ -35,17 +35,17 @@ import { cloneDeep } from 'lodash-es';
 import {
 	ArrowDown,
 	ArrowUp,
-	BarChart2,
 	Braces,
 	ChevronDown,
 	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
+	Histogram,
 	Table,
 	TextSelect,
 	X,
-} from 'lucide-react';
+} from '@signozhq/icons';
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
@@ -498,7 +498,7 @@ function LogDetailInner({
 							value={VIEW_TYPES.INFRAMETRICS}
 						>
 							<div className="view-title">
-								<BarChart2 size={14} />
+								<Histogram size="md" />
 								Metrics
 							</div>
 						</Radio.Button>

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,7 +1,6 @@
 import { memo, MouseEventHandler } from 'react';
-import { LinkOutlined } from '@ant-design/icons';
+import { Link, TextSelect } from '@signozhq/icons';
 import { Button, Tooltip } from 'antd';
-import { TextSelect } from 'lucide-react';
 
 import './LogLinesActionButtons.styles.scss';
 
@@ -29,7 +28,7 @@ function LogLinesActionButtons({
 			<Tooltip title="Copy Link">
 				<Button
 					size="small"
-					icon={<LinkOutlined size={14} />}
+					icon={<Link size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
 				/>

frontend/src/components/Logs/RawLogView/styles.ts

@@ -2,7 +2,7 @@ import { blue } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
 import { Col, Row, Space } from 'antd';
 import { FontSize } from 'container/OptionsMenu/types';
-import { Info } from 'lucide-react';
+import { Info } from '@signozhq/icons';
 import styled from 'styled-components';
 import {
 	getActiveLogBackground,

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -11,9 +11,9 @@ import {
 	ChevronRight,
 	Minus,
 	Plus,
-	Sliders,
+	SlidersVertical,
 	X,
-} from 'lucide-react';
+} from '@signozhq/icons';
 
 import './LogsFormatOptionsMenu.styles.scss';
 
@@ -472,7 +472,7 @@ function LogsFormatOptionsMenu({
 			<Tooltip title="Options">
 				<Button
 					className="periscope-btn ghost"
-					icon={<Sliders size={14} />}
+					icon={<SlidersVertical size="md" />}
 					data-testid="periscope-btn-format-options"
 				/>
 			</Tooltip>

frontend/src/components/MarkdownRenderer/CodeCopyBtn/CodeCopyBtn.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import { Check, Copy } from '@signozhq/icons';
 import cx from 'classnames';
 
 import './CodeCopyBtn.scss';
@@ -33,7 +33,7 @@ function CodeCopyBtn({
 	return (
 		<div className={cx('code-copy-btn', isSnippetCopied ? 'copied' : '')}>
 			<button type="button" onClick={handleClick}>
-				{!isSnippetCopied ? <CopyOutlined /> : <CheckOutlined />}
+				{!isSnippetCopied ? <Copy size="md" /> : <Check size="md" />}
 			</button>
 		</div>
 	);

frontend/src/components/MessagingQueueHealthCheck/AttributeCheckList.tsx

@@ -1,6 +1,14 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
+import {
+	Bolt,
+	Check,
+	ChevronDown,
+	ChevronRight,
+	Loader,
+	OctagonAlert,
+	X,
+} from '@signozhq/icons';
 import {
 	Modal,
 	Select,
@@ -15,7 +23,6 @@ import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
 import { History } from 'history';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import { Bolt, Check, OctagonAlert, X } from 'lucide-react';
 import {
 	KAFKA_SETUP_DOC_LINK,
 	MessagingQueueHealthCheckService,
@@ -141,6 +148,10 @@ function treeTitleAndKey({
 	};
 }
 
+function renderSwitcherIcon(props: { expanded?: boolean }): JSX.Element {
+	return props.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />;
+}
+
 function generateTreeDataNodes(
 	response: OnboardingStatusResponse['data'],
 	parentTitle: string,
@@ -229,7 +240,7 @@ function AttributeCheckList({
 		>
 			{loading ? (
 				<div className="loader-container">
-					<Spin indicator={<LoadingOutlined spin />} size="large" />
+					<Spin indicator={<Loader className="animate-spin" />} size="large" />
 				</div>
 			) : (
 				<div className="modal-content">
@@ -254,7 +265,7 @@ function AttributeCheckList({
 					/>
 					<Tree
 						showLine
-						switcherIcon={<CaretDownOutlined />}
+						switcherIcon={renderSwitcherIcon}
 						treeData={treeData}
 						height={450}
 						className="attribute-tree"

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Button } from 'antd';
 import cx from 'classnames';
 import { useOnboardingStatus } from 'hooks/messagingQueue/useOnboardingStatus';
-import { Bolt, FolderTree } from 'lucide-react';
+import { Bolt, FolderTree } from '@signozhq/icons';
 import { MessagingQueueHealthCheckService } from 'pages/MessagingQueues/MessagingQueuesUtils';
 
 import AttributeCheckList from './AttributeCheckList';

frontend/src/components/MessagingQueues/MQCommon/MQCommon.tsx

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import { Info } from 'lucide-react';
+import { Info } from '@signozhq/icons';
 
 import './MQCommon.styles.scss';
 

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -8,10 +8,15 @@ import React, {
 } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 import {
-	DownOutlined,
-	LoadingOutlined,
-	ReloadOutlined,
-} from '@ant-design/icons';
+	ArrowDown,
+	ArrowLeft,
+	ArrowRight,
+	ArrowUp,
+	ChevronDown,
+	Info,
+	Loader,
+	RefreshCw,
+} from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Checkbox, Select, Typography } from 'antd';
 import cx from 'classnames';
@@ -19,7 +24,6 @@ import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -1707,7 +1711,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<LoadingOutlined />
+								<Loader size="md" />
 							</div>
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
@@ -1715,7 +1719,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 					{!loading && waitingMessage && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<LoadingOutlined />
+								<Loader size="md" />
 							</div>
 							<div className="navigation-text" title={waitingMessage}>
 								{waitingMessage}
@@ -1729,8 +1733,9 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 							</div>
 							{onRetry && showRetryButton && (
 								<div className="navigation-icons">
-									<ReloadOutlined
-										twoToneColor={Color.BG_CHERRY_400}
+									<RefreshCw
+										data-testid="retry-button"
+										color={Color.BG_CHERRY_400}
 										onClick={(e): void => {
 											e.stopPropagation();
 											onRetry();
@@ -2015,7 +2020,7 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 				popupMatchSelectWidth={dropdownMatchSelectWidth}
 				allowClear={allowClear}
 				getPopupContainer={getPopupContainer ?? popupContainer}
-				suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+				suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
 				dropdownRender={customDropdownRender}
 				menuItemSelectedIcon={null}
 				popupClassName={cx('custom-multiselect-dropdown-container', popupClassName)}

frontend/src/components/NewSelect/CustomSelect.tsx

@@ -7,11 +7,14 @@ import React, {
 	useState,
 } from 'react';
 import {
-	CloseOutlined,
-	DownOutlined,
-	LoadingOutlined,
-	ReloadOutlined,
-} from '@ant-design/icons';
+	ArrowDown,
+	ArrowUp,
+	ChevronDown,
+	Info,
+	Loader,
+	RefreshCw,
+	X,
+} from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Select } from 'antd';
 import cx from 'classnames';
@@ -19,7 +22,6 @@ import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { capitalize, isEmpty } from 'lodash-es';
-import { ArrowDown, ArrowUp, Info } from 'lucide-react';
 import type { BaseSelectRef } from 'rc-select';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -259,7 +261,8 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 	 */
 	const clearIcon = useCallback(
 		() => (
-			<CloseOutlined
+			<X
+				size="md"
 				onClick={(e): void => {
 					e.stopPropagation();
 					if (onChange) {
@@ -581,7 +584,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{loading && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<LoadingOutlined />
+								<Loader size="md" />
 							</div>
 							<div className="navigation-text">Refreshing values...</div>
 						</div>
@@ -589,7 +592,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 					{!loading && waitingMessage && (
 						<div className="navigation-loading">
 							<div className="navigation-icons">
-								<LoadingOutlined />
+								<Loader size="md" />
 							</div>
 							<div className="navigation-text" title={waitingMessage}>
 								{waitingMessage}
@@ -603,8 +606,10 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 							</div>
 							{onRetry && showRetryButton && (
 								<div className="navigation-icons">
-									<ReloadOutlined
-										twoToneColor={Color.BG_CHERRY_400}
+									<RefreshCw
+										data-testid="retry-button"
+										size="md"
+										color={Color.BG_CHERRY_400}
 										onClick={(e): void => {
 											e.stopPropagation();
 											onRetry();
@@ -730,7 +735,7 @@ const CustomSelect: React.FC<CustomSelectProps> = ({
 			popupMatchSelectWidth={popupMatchSelectWidth}
 			allowClear={allowClear ? { clearIcon } : false}
 			getPopupContainer={getPopupContainer ?? popupContainer}
-			suffixIcon={<DownOutlined style={{ cursor: 'default' }} />}
+			suffixIcon={<ChevronDown style={{ cursor: 'default' }} size="md" />}
 			dropdownRender={customDropdownRender}
 			menuItemSelectedIcon={null}
 			popupClassName={cx('custom-select-dropdown-container', popupClassName)}

frontend/src/components/NewSelect/__test__/CustomMultiSelect.retry.test.tsx

@@ -30,7 +30,7 @@ const mockOptions = [
 ];
 
 // CSS selector for retry button
-const RETRY_BUTTON_SELECTOR = '.navigation-icons .anticon-reload';
+const RETRY_BUTTON_SELECTOR = '[data-testid="retry-button"]';
 
 describe('CustomMultiSelect - Retry Functionality', () => {
 	beforeEach(() => {

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -17,7 +17,7 @@ import { Button } from 'antd';
 import { Having } from 'api/v5/v5';
 import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { ChevronUp } from 'lucide-react';
+import { ChevronUp } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 const havingOperators = [

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -8,7 +8,7 @@ import { ReduceToFilter } from 'container/QueryBuilder/filters/ReduceToFilter/Re
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
 import { get, isEmpty } from 'lodash-es';
-import { BarChart2, ChevronUp, ExternalLink, ScrollText } from 'lucide-react';
+import { BarChart, ChevronUp, ExternalLink, ScrollText } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { MetricAggregation } from 'types/api/v5/queryRange';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -46,7 +46,7 @@ const ADD_ONS_KEYS_TO_QUERY_PATH = {
 
 const ADD_ONS = [
 	{
-		icon: <BarChart2 size={14} />,
+		icon: <BarChart size={14} />,
 		label: 'Group By',
 		key: ADD_ONS_KEYS.GROUP_BY,
 		description:

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -29,7 +29,7 @@ import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import { tracesAggregateOperatorOptions } from 'constants/queryBuilderOperators';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { Info, TriangleAlert } from 'lucide-react';
+import { Info, TriangleAlert } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -3,7 +3,7 @@ import { Button, Tooltip, Typography } from 'antd';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { DraftingCompass, Plus, Sigma } from 'lucide-react';
+import { DraftingCompass, Plus, Sigma } from '@signozhq/icons';
 import BetaTag from 'periscope/components/BetaTag/BetaTag';
 
 import './QueryFooter.styles.scss';

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CheckCircleFilled } from '@ant-design/icons';
+import { CircleCheck, Info, TriangleAlert, Filter } from '@signozhq/icons';
 import {
 	autocompletion,
 	closeCompletion,
@@ -30,7 +30,6 @@ import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariabl
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useDebounce from 'hooks/useDebounce';
 import { debounce, isNull } from 'lodash-es';
-import { Filter, Info, TriangleAlert } from 'lucide-react';
 import {
 	IDetailedError,
 	IQueryContext,
@@ -1486,7 +1485,7 @@ function QuerySearch({
 							{validation.isValid ? (
 								<Button
 									type="text"
-									icon={<CheckCircleFilled />}
+									icon={<CircleCheck size="md" />}
 									className="periscope-btn ghost"
 								/>
 							) : (

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -15,7 +15,7 @@ import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interf
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { Copy, Ellipsis, Trash } from 'lucide-react';
+import { Copy, Ellipsis, Trash } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -3,7 +3,7 @@ import { Button, Tooltip, Typography } from 'antd';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
-import { Trash2 } from 'lucide-react';
+import { Trash2 } from '@signozhq/icons';
 import {
 	IBuilderQuery,
 	IBuilderTraceOperator,

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -2,7 +2,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { CheckCircleFilled } from '@ant-design/icons';
 import {
 	autocompletion,
 	closeCompletion,
@@ -25,7 +24,6 @@ import {
 } from 'constants/antlrQueryConstants';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { TriangleAlert } from 'lucide-react';
 import { IDetailedError, IValidationResult } from 'types/antlrQueryTypes';
 import { IBuilderTraceOperator } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -35,6 +33,7 @@ import { getTraceOperatorContextAtCursor } from './utils/traceOperatorContextUti
 import { getInvolvedQueriesInTraceOperator } from './utils/utils';
 
 import '../QuerySearch/QuerySearch.styles.scss';
+import { CircleCheck, TriangleAlert } from '@signozhq/icons';
 
 // Custom extension to stop events
 const stopEventsExtension = EditorView.domEventHandlers({
@@ -467,7 +466,7 @@ function TraceOperatorEditor({
 							{validation.isValid ? (
 								<Button
 									type="text"
-									icon={<CheckCircleFilled />}
+									icon={<CircleCheck size="md" />}
 									className="periscope-btn ghost"
 								/>
 							) : (

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryKeyValueSuggestions } from 'hooks/querySuggestions/useGetQueryKeyValueSuggestions';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { cloneDeep, isArray, isFunction } from 'lodash-es';
-import { ChevronDown, ChevronRight } from 'lucide-react';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/LogsQuickFilterEmptyState.tsx

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
-import { ArrowUpRight } from 'lucide-react';
+import { ArrowUpRight } from '@signozhq/icons';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',

frontend/src/components/QuickFilters/QuickFilters.styles.scss

@@ -105,8 +105,7 @@
 			}
 
 			.sync-icon {
-				border: 0;
-				box-shadow: none;
+				cursor: pointer;
 			}
 
 			.right-action-icon-container {

frontend/src/components/QuickFilters/QuickFilters.tsx

@@ -1,9 +1,11 @@
 import { useMemo, useState } from 'react';
 import {
-	FilterOutlined,
-	SyncOutlined,
-	VerticalAlignTopOutlined,
-} from '@ant-design/icons';
+	ArrowUpToLine,
+	Filter,
+	Frown,
+	RefreshCw,
+	Settings2 as SettingsIcon,
+} from '@signozhq/icons';
 import {
 	Combobox,
 	ComboboxCommand,
@@ -23,7 +25,6 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useApiMonitoringParams } from 'container/ApiMonitoring/queryParams';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { isFunction, isNull } from 'lodash-es';
-import { Frown, Settings2 as SettingsIcon } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { USER_ROLES } from 'types/roles';
@@ -176,7 +177,7 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 	// Helpers to reduce cognitive complexity in main render
 	const renderLeftActions = (): JSX.Element => (
 		<section className="left-actions">
-			<FilterOutlined />
+			<Filter size="md" />
 			<Typography.Text className="text">
 				{displayedQueryName ? 'Filters for' : 'Filters'}
 			</Typography.Text>
@@ -227,14 +228,15 @@ export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
 		<section className="right-actions">
 			<Tooltip title="Reset All">
 				<div className="right-action-icon-container">
-					<SyncOutlined className="sync-icon" onClick={handleReset} />
+					<RefreshCw className="sync-icon" size="md" onClick={handleReset} />
 				</div>
 			</Tooltip>
 			{showFilterCollapse && (
 				<Tooltip title="Collapse Filters">
 					<div className="right-action-icon-container">
-						<VerticalAlignTopOutlined
-							rotate={270}
+						<ArrowUpToLine
+							style={{ rotate: '270deg', cursor: 'pointer' }}
+							size="md"
 							onClick={handleFilterVisibilityChange}
 						/>
 					</div>

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -16,7 +16,7 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { GripVertical } from 'lucide-react';
+import { GripVertical } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 function SortableFilter({

frontend/src/components/QuickFilters/QuickFiltersSettings/AnnouncementTooltip/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Button } from '@signozhq/ui';
 import classNames from 'classnames';
-import { Check, X } from 'lucide-react';
+import { Check, X } from '@signozhq/icons';
 
 import './AnnouncementTooltip.styles.scss';
 

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Button, Input } from 'antd';
-import { CheckIcon, TableColumnsSplit, XIcon } from 'lucide-react';
+import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
 import { SignalType } from '../types';
@@ -57,7 +57,7 @@ function QuickFiltersSettings({
 					<TableColumnsSplit width={16} height={16} />
 					Edit quick filters
 				</div>
-				<XIcon
+				<X
 					className="qf-header-icon"
 					width={16}
 					height={16}
@@ -88,14 +88,14 @@ function QuickFiltersSettings({
 					<Button
 						type="default"
 						onClick={handleDiscardChanges}
-						icon={<XIcon width={16} height={16} />}
+						icon={<X width={16} height={16} />}
 					>
 						Discard
 					</Button>
 					<Button
 						type="primary"
 						onClick={handleSaveChanges}
-						icon={<CheckIcon width={16} height={16} />}
+						icon={<Check width={16} height={16} />}
 						loading={isUpdatingCustomFilters}
 					>
 						Save changes

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
 import cx from 'classnames';
-import { RefreshCcw } from 'lucide-react';
+import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -9,7 +9,7 @@ import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { SlidersHorizontal } from 'lucide-react';
+import { SlidersHorizontal } from '@signozhq/icons';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import ResizeTable from './ResizeTable';

frontend/src/components/ShiftOverlay/formatShortcut.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ArrowUp, ChevronUp, Command, Option } from 'lucide-react';
+import { ArrowUp, ChevronUp, Command, Option } from '@signozhq/icons';
 
 import './shiftOverlay.scss';
 

frontend/src/components/Spinner/index.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { LoadingOutlined } from '@ant-design/icons';
+import { Loader } from '@signozhq/icons';
 import { Spin, SpinProps } from 'antd';
 
 import { SpinerStyle } from './styles';
@@ -7,7 +7,13 @@ import { SpinerStyle } from './styles';
 function Spinner({ size, tip, height, style }: SpinnerProps): JSX.Element {
 	return (
 		<SpinerStyle height={height} style={style}>
-			<Spin spinning size={size} tip={tip} indicator={<LoadingOutlined spin />} />
+			<Spin
+				spinning
+				size={size}
+				tip={tip}
+				aria-label="loading"
+				indicator={<Loader className="animate-spin" size="md" />}
+			/>
 		</SpinerStyle>
 	);
 }

frontend/src/components/Tags/Tags.tsx

@@ -1,8 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, Tag } from 'antd';
+import { Check, Plus, X } from '@signozhq/icons';
+import { Button, Flex, Tag } from 'antd';
 import Input from 'components/Input';
-import { Check, X } from 'lucide-react';
 
 import './Tags.styles.scss';
 
@@ -61,6 +60,7 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 				<div className="add-tag-container">
 					<Input
 						type="text"
+						// oxlint-disable-next-line jsx_a11y/no-autofocus
 						autoFocus
 						value={inputValue}
 						onChangeHandler={(event): void =>
@@ -96,10 +96,12 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 					style={{
 						fontSize: '11px',
 					}}
-					icon={<PlusOutlined />}
 					onClick={showInput}
 				>
-					New Tag
+					<Flex justify="center" align="center" gap={4}>
+						<Plus size="md" />
+						New Tag
+					</Flex>
 				</Button>
 			)}
 		</div>

frontend/src/components/TanStackTableView/TanStackHeaderRow.tsx

@@ -4,12 +4,18 @@ import type {
 	TouchEvent as ReactTouchEvent,
 } from 'react';
 import { useCallback, useMemo } from 'react';
-import { CloseOutlined, MoreOutlined } from '@ant-design/icons';
+import {
+	ArrowDown,
+	ArrowUp,
+	ArrowUpDown,
+	Ellipsis,
+	GripVertical,
+	X,
+} from '@signozhq/icons';
 import { useSortable } from '@dnd-kit/sortable';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui';
 import { flexRender, Header as TanStackHeader } from '@tanstack/react-table';
 import cx from 'classnames';
-import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from 'lucide-react';
 
 import { SortState, TableColumnDef } from './types';
 
@@ -213,7 +219,7 @@ function TanStackHeaderRow<TData>({
 									event.stopPropagation();
 								}}
 							>
-								<MoreOutlined />
+								<Ellipsis size="md" />
 							</span>
 						</PopoverTrigger>
 						<PopoverContent
@@ -230,9 +236,7 @@ function TanStackHeaderRow<TData>({
 									onRemoveColumn?.(column.id);
 								}}
 							>
-								<CloseOutlined
-									className={headerStyles.tanstackRemoveColumnActionIcon}
-								/>
+								<X size="md" className={headerStyles.tanstackRemoveColumnActionIcon} />
 								Remove column
 							</button>
 						</PopoverContent>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react';
 import type { TableComponents } from 'react-virtuoso';
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso';
-import { LoadingOutlined } from '@ant-design/icons';
+import { Loader } from '@signozhq/icons';
 import { DndContext, pointerWithin } from '@dnd-kit/core';
 import {
 	horizontalListSortingStrategy,
@@ -583,7 +583,10 @@ function TanStackTableInner<TData>(
 							className={viewStyles.tanstackLoadingOverlay}
 							data-testid="tanstack-infinite-loader"
 						>
-							<Spin indicator={<LoadingOutlined spin />} tip="Loading more..." />
+							<Spin
+								indicator={<Loader className="animate-spin" />}
+								tip="Loading more..."
+							/>
 						</div>
 					)}
 					{showPagination && pagination && (

frontend/src/components/TanStackTableView/__tests__/useTableParams.test.tsx

@@ -398,7 +398,7 @@ describe('useTableParams (selective URL mode — partial config object)', () =>
 			.filter(Boolean)
 			.pop();
 		expect(lastExpanded).toBeDefined();
-		expect(JSON.parse(lastExpanded!)).toEqual(
+		expect(JSON.parse(lastExpanded!)).toStrictEqual(
 			expect.arrayContaining(['row-1', 'row-2']),
 		);
 

frontend/src/components/TextToolTip/TextToolTip.tsx

@@ -1,9 +1,6 @@
 import { ReactNode, useMemo } from 'react';
 import { blue, grey } from '@ant-design/colors';
-import {
-	QuestionCircleFilled,
-	QuestionCircleOutlined,
-} from '@ant-design/icons';
+import { CircleHelp } from '@signozhq/icons';
 import { Tooltip } from 'antd';
 import { themeColors } from 'constants/theme';
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -63,11 +60,17 @@ function TextToolTip({
 		}),
 		[isDarkMode],
 	);
-
 	// Use provided icons or fallback to default icons
-	const defaultFilledIcon = <QuestionCircleFilled style={iconStyle} />;
+	const defaultFilledIcon = (
+		<CircleHelp role="img" aria-label="Help" size="lg" style={iconStyle} />
+	);
 	const defaultOutlinedIcon = (
-		<QuestionCircleOutlined style={iconOutlinedStyle} />
+		<CircleHelp
+			role="img"
+			aria-label="Help"
+			size="lg"
+			style={iconOutlinedStyle}
+		/>
 	);
 
 	const renderIcon = (): ReactNode => {

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,11 +1,10 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
-import { DownOutlined } from '@ant-design/icons';
+import { ChevronDown, Globe } from '@signozhq/icons';
 import { Button, Dropdown, Typography } from 'antd';
 import TimeItems, {
 	timePreferance,
 	timePreferenceType,
 } from 'container/NewWidget/RightContainer/timeItems';
-import { Globe } from 'lucide-react';
 
 import { menuItems } from './config';
 
@@ -47,7 +46,7 @@ function TimePreference({
 						{selectedTime.name}
 					</Typography.Text>
 				</div>
-				<DownOutlined />
+				<ChevronDown size="md" />
 			</Button>
 		</Dropdown>
 	);

frontend/src/components/Uplot/Uplot.tsx

@@ -10,7 +10,7 @@ import {
 import * as Sentry from '@sentry/react';
 import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
-import { LineChart } from 'lucide-react';
+import { ChartLine } from '@signozhq/icons';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import UPlot from 'uplot';
 
@@ -171,7 +171,7 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 		if (data && data[0] && data[0]?.length === 0) {
 			return (
 				<div className="uplot-no-data not-found">
-					<LineChart size={48} strokeWidth={0.5} />
+					<ChartLine size={48} strokeWidth={0.5} />
 
 					<Typography>No Data</Typography>
 				</div>

frontend/src/components/ValueGraph/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ExclamationCircleFilled } from '@ant-design/icons';
+import { CircleAlert } from '@signozhq/icons';
 import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
 
@@ -139,9 +139,10 @@ function ValueGraph({
 					}
 				>
 					<Tooltip title={t('this_value_satisfies_multiple_thresholds')}>
-						<ExclamationCircleFilled
+						<CircleAlert
 							className="value-graph-icon"
 							data-testid="conflicting-thresholds"
+							size="md"
 						/>
 					</Tooltip>
 				</div>

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -3,7 +3,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, PopoverProps } from 'antd';
 import ErrorIcon from 'assets/Error';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
-import { BookOpenText, ChevronsDown, TriangleAlert } from 'lucide-react';
+import { BookOpenText, ChevronsDown, TriangleAlert } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { Warning } from 'types/api';
 

frontend/src/components/YAxisUnitSelector/YAxisUnitSelector.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { WarningFilled } from '@ant-design/icons';
+import { SolidAlertTriangle } from '@signozhq/icons';
 import { Select, Tooltip } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
 import classNames from 'classnames';
@@ -85,7 +85,7 @@ function YAxisUnitSelector({
 				suffixIcon={
 					incompatibleUnitMessage ? (
 						<Tooltip title={incompatibleUnitMessage}>
-							<WarningFilled />
+							<SolidAlertTriangle role="img" aria-label="warning" size="md" />
 						</Tooltip>
 					) : undefined
 				}

frontend/src/constants/shortcutActions.tsx

@@ -3,9 +3,9 @@ import ROUTES from 'constants/routes';
 import { GlobalShortcutsName } from 'constants/shortcuts/globalShortcuts';
 import { THEME_MODE } from 'hooks/useDarkMode/constant';
 import {
-	BarChart2,
+	BarChart,
 	BellDot,
-	BugIcon,
+	Bug,
 	Compass,
 	DraftingCompass,
 	Expand,
@@ -17,7 +17,7 @@ import {
 	Settings,
 	TowerControl,
 	Workflow,
-} from 'lucide-react';
+} from '@signozhq/icons';
 import { ROLES } from 'types/roles';
 
 export type CmdAction = {
@@ -86,7 +86,7 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			shortcut: [GlobalShortcutsName.NavigateToExceptions],
 			keywords: 'exceptions errors',
 			section: 'Navigation',
-			icon: <BugIcon size={14} />,
+			icon: <Bug size={14} />,
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.ALL_ERROR),
 		},
@@ -140,7 +140,7 @@ export function createShortcutActions(deps: ActionDeps): CmdAction[] {
 			shortcut: [GlobalShortcutsName.NavigateToMetricsSummary],
 			keywords: 'metrics summary',
 			section: 'Metrics',
-			icon: <BarChart2 size={14} />,
+			icon: <BarChart size={14} />,
 			roles: ['ADMIN', 'EDITOR', 'VIEWER'],
 			perform: (): void => navigate(ROUTES.METRICS_EXPLORER),
 		},

frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx

@@ -5,7 +5,7 @@ import { Popover } from 'antd';
 import LogsIcon from 'assets/AlertHistory/LogsIcon';
 import ROUTES from 'constants/routes';
 import { useIsDarkMode } from 'hooks/useDarkMode';
-import { DraftingCompass } from 'lucide-react';
+import { DraftingCompass } from '@signozhq/icons';
 
 import './AlertPopover.styles.scss';
 

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx

@@ -2,7 +2,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { ArrowDownLeft, ArrowUpRight, Calendar } from 'lucide-react';
+import { ArrowDownLeft, ArrowUpRight, Calendar } from '@signozhq/icons';
 import { AlertRuleStats } from 'types/api/alerts/def';
 import { calculateChange } from 'utils/calculateChange';
 

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -4,7 +4,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight } from '@signozhq/icons';
 
 import TopContributorsContent from './TopContributorsContent';
 import { TopContributorsCardProps } from './types';

frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { EllipsisOutlined } from '@ant-design/icons';
+import { Ellipsis, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import { Button, TableColumnsType as ColumnsType } from 'antd';
 import ClientSideQBSearch, {
@@ -10,7 +10,6 @@ import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/Ale
 import { transformKeyValuesToAttributeValuesMap } from 'container/QueryBuilder/filters/utils';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
-import { Search } from 'lucide-react';
 import AlertLabels, {
 	AlertLabelsProps,
 } from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
@@ -126,7 +125,7 @@ export const timelineTableColumns = ({
 				relatedLogsLink={record.relatedLogsLink}
 			>
 				<Button type="text" ghost>
-					<EllipsisOutlined className="dropdown-icon" />
+					<Ellipsis className="dropdown-icon" size="md" />
 				</Button>
 			</ConditionalAlertPopover>
 		),

frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
 import history from 'lib/history';
-import { Info } from 'lucide-react';
+import { Info } from '@signozhq/icons';
 import Tabs2 from 'periscope/components/Tabs2';
 
 import './TabsAndFilters.styles.scss';

frontend/src/container/AllAlertChannels/__tests__/AlertChannels.test.tsx

@@ -41,7 +41,7 @@ describe('Alert Channels Settings List page', () => {
 			expect(screen.getByText('button_new_channel')).toBeInTheDocument();
 		});
 		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
-			const helpIcon = screen.getByLabelText('question-circle');
+			const helpIcon = screen.getByRole('img', { name: /help/i });
 
 			fireEvent.mouseOver(helpIcon);
 

frontend/src/container/AllAlertChannels/__tests__/AlertChannelsNormalUser.test.tsx

@@ -46,13 +46,13 @@ describe('Alert Channels Settings List page (Normal User)', () => {
 
 		it('Should check if "New Alert Channel" Button is visble and disabled', async () => {
 			const newAlertButton = screen.getByRole('button', {
-				name: 'plus button_new_channel',
+				name: /button_new_channel/i,
 			});
 			await waitFor(() => expect(newAlertButton).toBeInTheDocument());
 			expect(newAlertButton).toBeDisabled();
 		});
 		it('Should check if the help icon is visible and displays "tooltip_notification_channels', async () => {
-			const helpIcon = screen.getByLabelText('question-circle');
+			const helpIcon = screen.getByRole('img', { name: /help/i });
 			fireEvent.mouseOver(helpIcon);
 
 			await waitFor(() => {

frontend/src/container/AllAlertChannels/index.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
-import { PlusOutlined } from '@ant-design/icons';
-import { Tooltip, Typography } from 'antd';
+import { Plus } from '@signozhq/icons';
+import { Flex, Tooltip, Typography } from 'antd';
 import getAll from 'api/channels/getAll';
 import logEvent from 'api/common/logEvent';
 import Spinner from 'components/Spinner';
@@ -77,12 +77,10 @@ function AlertChannels(): JSX.Element {
 								: undefined
 						}
 					>
-						<Button
-							onClick={onToggleHandler}
-							icon={<PlusOutlined />}
-							disabled={!addNewChannelPermission}
-						>
-							{t('button_new_channel')}
+						<Button onClick={onToggleHandler} disabled={!addNewChannelPermission}>
+							<Flex align="center" justify="center" gap={4}>
+								<Plus size="md" /> {t('button_new_channel')}
+							</Flex>
 						</Button>
 					</Tooltip>
 				</RightActionContainer>

frontend/src/container/AllError/index.tsx

@@ -4,10 +4,11 @@ import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { SearchOutlined } from '@ant-design/icons';
+import { Search } from '@signozhq/icons';
 import {
 	Button,
 	Card,
+	Flex,
 	Input,
 	Space,
 	TableProps,
@@ -199,7 +200,7 @@ function AllErrors(): JSX.Element {
 		</Typography>
 	);
 
-	const filterIcon = useCallback(() => <SearchOutlined />, []);
+	const filterIcon = useCallback(() => <Search size="md" />, []);
 
 	const handleSearch = useCallback(
 		(
@@ -275,10 +276,12 @@ function AllErrors(): JSX.Element {
 					<Button
 						type="primary"
 						onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-						icon={<SearchOutlined />}
 						size="small"
 					>
-						Search
+						<Flex align="center" justify="center" gap={4}>
+							<Search size="md" />
+							Search
+						</Flex>
 					</Button>
 				</Space>
 			</Card>

frontend/src/container/AnomalyAlertEvaluationView/AnomalyAlertEvaluationView.tsx

@@ -6,7 +6,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import getAxes from 'lib/uPlotLib/utils/getAxes';
 import { getUplotChartDataForAnomalyDetection } from 'lib/uPlotLib/utils/getUplotChartData';
 import { getYAxisScaleForAnomalyDetection } from 'lib/uPlotLib/utils/getYAxisScale';
-import { LineChart } from 'lucide-react';
+import { ChartLine } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 
@@ -297,7 +297,7 @@ function AnomalyAlertEvaluationView({
 					/>
 				) : (
 					<div className="anomaly-alert-evaluation-view-no-data-container">
-						<LineChart size={48} strokeWidth={0.5} />
+						<ChartLine size={48} strokeWidth={0.5} />
 
 						<Typography>No Data</Typography>
 					</div>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -10,7 +10,7 @@ import {
 	Time,
 } from 'container/TopNav/DateTimeSelectionV2/types';
 import GetMinMax from 'lib/getMinMax';
-import { ArrowDown, ArrowUp, X } from 'lucide-react';
+import { ArrowDown, ArrowUp, X } from '@signozhq/icons';
 import { AppState } from 'store/reducers';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/TopErrors.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { QueryFunctionContext, useQueries, useQuery } from 'react-query';
-import { LoadingOutlined } from '@ant-design/icons';
+import { Info, Loader } from '@signozhq/icons';
 import { Spin, Switch, Table, Tooltip, Typography } from 'antd';
 import { getQueryRangeV5 } from 'api/v5/queryRange/getQueryRange';
 import { MetricRangePayloadV5, ScalarData } from 'api/v5/v5';
@@ -17,7 +17,6 @@ import {
 	getTopErrorsQueryPayload,
 } from 'container/ApiMonitoring/utils';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { Info } from 'lucide-react';
 import { SuccessResponse, SuccessResponseV2 } from 'types/api';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
@@ -201,7 +200,9 @@ function TopErrors({
 					columns={topErrorsColumnsConfig}
 					loading={{
 						spinning: isLoading || isRefetching,
-						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+						indicator: (
+							<Spin indicator={<Loader size={14} className="animate-spin" />} />
+						),
 					}}
 					dataSource={isLoading || isRefetching ? [] : formattedTopErrorsData}
 					locale={{

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/DependentServices.tsx

@@ -7,7 +7,7 @@ import {
 	DependentServicesData,
 	getFormattedDependentServicesData,
 } from 'container/ApiMonitoring/utils';
-import { UnfoldVertical } from 'lucide-react';
+import { UnfoldVertical } from '@signozhq/icons';
 import { SuccessResponse } from 'types/api';
 import { openInNewTab } from 'utils/navigation';
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,5 +1,5 @@
 import { Button, Typography } from 'antd';
-import { RotateCw } from 'lucide-react';
+import { RotateCw } from '@signozhq/icons';
 
 import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
 

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainList.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { LoadingOutlined } from '@ant-design/icons';
+import { Loader, MoveUpRight } from '@signozhq/icons';
 import { Spin, Table } from 'antd';
 import logEvent from 'api/common/logEvent';
 import emptyStateUrl from 'assets/Icons/emptyState.svg';
@@ -19,7 +19,6 @@ import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useListOverview } from 'hooks/thirdPartyApis/useListOverview';
 import { get } from 'lodash-es';
-import { MoveUpRight } from 'lucide-react';
 import { AppState } from 'store/reducers';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { HandleChangeQueryDataV5 } from 'types/common/operations.types';
@@ -205,7 +204,9 @@ function DomainList(): JSX.Element {
 					columns={columnsConfig}
 					loading={{
 						spinning: isFetching || isLoading,
-						indicator: <Spin indicator={<LoadingOutlined size={14} spin />} />,
+						indicator: (
+							<Spin indicator={<Loader size={14} className="animate-spin" />} />
+						),
 					}}
 					scroll={{ x: true }}
 					tableLayout="fixed"

frontend/src/container/ApiMonitoring/utils.tsx

@@ -14,7 +14,7 @@ import { convertNanoToMilliseconds } from 'container/MetricsExplorer/Summary/uti
 import dayjs from 'dayjs';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { cloneDeep } from 'lodash-es';
-import { ArrowUpDown, ChevronDown, ChevronRight, Info } from 'lucide-react';
+import { ArrowUpDown, ChevronDown, ChevronRight, Info } from '@signozhq/icons';
 import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CheckCircleOutlined, CloudDownloadOutlined } from '@ant-design/icons';
+import { CircleCheck, CloudDownload } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Alert,
@@ -448,10 +448,12 @@ export default function BillingContainer(): JSX.Element {
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading || isFetchingBillingData}
 							onClick={handleCsvDownload}
-							icon={<CloudDownloadOutlined />}
 							className="periscope-btn"
 						>
-							Download CSV
+							<Flex align="center" justify="center" gap={4}>
+								<CloudDownload size="md" />
+								Download CSV
+							</Flex>
 						</Button>
 						<Button
 							data-testid="header-billing-button"
@@ -553,15 +555,15 @@ export default function BillingContainer(): JSX.Element {
 					>
 						<Col span={20} className="plan-benefits">
 							<Typography.Text className="plan-benefit">
-								<CheckCircleOutlined />
+								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
-								<CheckCircleOutlined />
+								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
 							<Typography.Text className="plan-benefit">
-								<CheckCircleOutlined />
+								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
 									<a

frontend/src/container/Controls/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { Button, Select } from 'antd';
+import { ChevronLeft, ChevronRight } from '@signozhq/icons';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
@@ -42,7 +42,9 @@ function Controls({
 				disabled={isPreviousDisabled}
 				onClick={handleNavigatePrevious}
 			>
-				<LeftOutlined /> Previous
+				<Flex align="center" gap="4px">
+					<ChevronLeft size={16} /> Previous
+				</Flex>
 			</Button>
 			<Button
 				loading={isLoading}
@@ -51,7 +53,9 @@ function Controls({
 				disabled={isNextDisabled}
 				onClick={handleNavigateNext}
 			>
-				Next <RightOutlined />
+				<Flex align="center" gap="4px">
+					Next <ChevronRight size={16} />
+				</Flex>
 			</Button>
 
 			{showSizeChanger && (

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -2,7 +2,7 @@ import { useQuery } from 'react-query';
 import { Button, Tooltip } from 'antd';
 import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
-import { ChartLine } from 'lucide-react';
+import { ChartLine } from '@signozhq/icons';
 import { SuccessResponseV2 } from 'types/api';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { Channels } from 'types/api/channels/getAll';

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -3,7 +3,7 @@ import { Button, Select, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import getRandomColor from 'lib/getRandomColor';
-import { Plus } from 'lucide-react';
+import { Plus } from '@signozhq/icons';
 import { v4 } from 'uuid';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Button, Input, Select, Tooltip, Typography } from 'antd';
-import { CircleX, Trash } from 'lucide-react';
+import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -9,7 +9,7 @@ import {
 	AlertThresholdOperator,
 } from 'container/CreateAlertV2/context/types';
 import { getSelectedQueryOptions } from 'container/FormAlertRules/utils';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight } from '@signozhq/icons';
 import { IUser } from 'providers/App/types';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -7,7 +7,7 @@ import ROUTES from 'constants/routes';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { RotateCcw } from 'lucide-react';
+import { RotateCcw } from '@signozhq/icons';
 import { Labels } from 'types/api/alerts/def';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/CreateAlertHeader/LabelsInput.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback, useState } from 'react';
-import { CloseOutlined } from '@ant-design/icons';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { X } from '@signozhq/icons';
 import { useNotifications } from 'hooks/useNotifications';
 
 import { LabelInputState, LabelsInputProps } from './types';
@@ -16,6 +16,13 @@ function LabelsInput({
 		isKeyInput: true,
 	});
 	const [isAdding, setIsAdding] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		if (isAdding && inputState.isKeyInput) {
+			inputRef.current?.focus();
+		}
+	}, [inputState.isKeyInput, isAdding, labels]);
 
 	const handleAddLabelsClick = useCallback(() => {
 		setIsAdding(true);
@@ -133,9 +140,10 @@ function LabelsInput({
 							<button
 								type="button"
 								className="labels-input__remove-button"
+								aria-label={`Remove label ${key}`}
 								onClick={(): void => handleRemoveLabel(key)}
 							>
-								<CloseOutlined />
+								<X size="md" />
 							</button>
 						</span>
 					))}
@@ -154,6 +162,9 @@ function LabelsInput({
 			) : (
 				<div className="labels-input__input-container">
 					<input
+						ref={inputRef}
+						// oxlint-disable-next-line jsx_a11y/no-autofocus
+						autoFocus
 						type="text"
 						value={inputState.isKeyInput ? inputState.key : inputState.value}
 						onChange={handleInputChange}
@@ -161,7 +172,6 @@ function LabelsInput({
 						onBlur={handleBlur}
 						className="labels-input__input"
 						placeholder={inputState.isKeyInput ? 'Enter key' : 'Enter value'}
-						autoFocus
 						data-testid="alert-add-label-input"
 					/>
 				</div>

frontend/src/container/CreateAlertV2/CreateAlertHeader/__tests__/LabelsInput.test.tsx

@@ -3,11 +3,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import LabelsInput from '../LabelsInput';
 import { LabelsInputProps } from '../types';
 
-// Mock the CloseOutlined icon
-jest.mock('@ant-design/icons', () => ({
-	CloseOutlined: (): JSX.Element => <span data-testid="close-icon">×</span>,
-}));
-
 const mockOnLabelsChange = jest.fn();
 const mockValidateLabelsKey = jest.fn().mockReturnValue(null);
 
@@ -21,10 +16,11 @@ const ADD_LABELS_TEXT = '+ Add labels';
 const ENTER_KEY_PLACEHOLDER = 'Enter key';
 const ENTER_VALUE_PLACEHOLDER = 'Enter value';
 
-const CLOSE_ICON_TEST_ID = 'close-icon';
+const REMOVE_LABEL_NAME = /^Remove label/;
 const SEVERITY_HIGH_TEXT = 'severity: high';
 const ENVIRONMENT_PRODUCTION_TEXT = 'environment: production';
 const SEVERITY_HIGH_KEY_VALUE = 'severity:high';
+const REMOVE_LABEL_SEVERITY_NAME = 'Remove label severity';
 
 const renderLabelsInput = (
 	props: Partial<LabelsInputProps> = {},
@@ -41,7 +37,9 @@ describe('LabelsInput', () => {
 		it('renders add button when no labels exist', () => {
 			renderLabelsInput();
 			expect(screen.getByText(ADD_LABELS_TEXT)).toBeInTheDocument();
-			expect(screen.queryByTestId(CLOSE_ICON_TEST_ID)).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole('button', { name: REMOVE_LABEL_NAME }),
+			).not.toBeInTheDocument();
 		});
 
 		it('renders existing labels when provided', () => {
@@ -50,7 +48,9 @@ describe('LabelsInput', () => {
 
 			expect(screen.getByText(SEVERITY_HIGH_TEXT)).toBeInTheDocument();
 			expect(screen.getByText(ENVIRONMENT_PRODUCTION_TEXT)).toBeInTheDocument();
-			expect(screen.getAllByTestId(CLOSE_ICON_TEST_ID)).toHaveLength(2);
+			expect(
+				screen.getAllByRole('button', { name: REMOVE_LABEL_NAME }),
+			).toHaveLength(2);
 		});
 
 		it('does not render existing labels section when no labels', () => {
@@ -186,8 +186,10 @@ describe('LabelsInput', () => {
 			const labels = { severity: 'high', environment: 'production' };
 			renderLabelsInput({ labels });
 
-			const removeButtons = screen.getAllByTestId(CLOSE_ICON_TEST_ID);
-			fireEvent.click(removeButtons[0]);
+			const removeButton = screen.getByRole('button', {
+				name: REMOVE_LABEL_SEVERITY_NAME,
+			});
+			fireEvent.click(removeButton);
 
 			expect(mockOnLabelsChange).toHaveBeenCalledWith({
 				environment: 'production',
@@ -198,7 +200,9 @@ describe('LabelsInput', () => {
 			const labels = { severity: 'high' };
 			renderLabelsInput({ labels });
 
-			const removeButton = screen.getByTestId('close-icon');
+			const removeButton = screen.getByRole('button', {
+				name: REMOVE_LABEL_SEVERITY_NAME,
+			});
 			fireEvent.click(removeButton);
 
 			expect(mockOnLabelsChange).toHaveBeenCalledWith({});
@@ -320,7 +324,9 @@ describe('LabelsInput', () => {
 			expect(screen.getByText(SEVERITY_HIGH_TEXT)).toBeInTheDocument();
 			expect(screen.getByText(ENVIRONMENT_PRODUCTION_TEXT)).toBeInTheDocument();
 			expect(screen.getByText('service: api-gateway')).toBeInTheDocument();
-			expect(screen.getAllByTestId(CLOSE_ICON_TEST_ID)).toHaveLength(3);
+			expect(
+				screen.getAllByRole('button', { name: REMOVE_LABEL_NAME }),
+			).toHaveLength(3);
 		});
 
 		it('handles empty string values', () => {

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptionItem/AdvancedOptionItem.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Switch, Tooltip, Typography } from 'antd';
-import { Info } from 'lucide-react';
+import { Info } from '@signozhq/icons';
 
 import { IAdvancedOptionItemProps } from '../types';
 

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EditCustomSchedule.tsx

@@ -3,7 +3,7 @@ import { Button, Typography } from 'antd';
 import { useCreateAlertState } from 'container/CreateAlertV2/context';
 import { INITIAL_ADVANCED_OPTIONS_STATE } from 'container/CreateAlertV2/context/constants';
 import { IEditCustomScheduleProps } from 'container/CreateAlertV2/EvaluationSettings/types';
-import { Calendar1, Edit, Trash } from 'lucide-react';
+import { Calendar1, Pencil, Trash } from '@signozhq/icons';
 
 function EditCustomSchedule({
 	setIsEvaluationCadenceDetailsVisible,
@@ -81,7 +81,7 @@ function EditCustomSchedule({
 			<div className="button-row">
 				<Button.Group>
 					<Button type="default" onClick={handleEdit}>
-						<Edit size={12} />
+						<Pencil size={12} />
 						<Typography.Text>Edit custom schedule</Typography.Text>
 					</Button>
 					<Button type="default" onClick={handlePreview}>