SigNoz · H4ad · Mar 24, 2026 · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026
@@ -57,6 +57,7 @@ To learn more about the available components, take a look at: https://periscope.
 All components live in `@signozhq/ui`. Import by subpath:
 
 ```ts
+import { AlertDialog } from '@signozhq/ui';
 import { AnnouncementBanner } from '@signozhq/ui';
 import { Badge } from '@signozhq/ui';
 import { Button } from '@signozhq/ui';
@@ -65,17 +66,23 @@ import { Callout } from '@signozhq/ui';
 import { Checkbox } from '@signozhq/ui';
 import { Combobox } from '@signozhq/ui';
 import { Command } from '@signozhq/ui';
+import { DatePicker } from '@signozhq/ui';
 import { Dialog } from '@signozhq/ui';
 import { Drawer } from '@signozhq/ui';
+import { DropdownMenu } from '@signozhq/ui';
 import { Input } from '@signozhq/ui';
 import { Pagination } from '@signozhq/ui';
+import { PinList } from '@signozhq/ui';
+import { Popover } from '@signozhq/ui';
 import { RadioGroup } from '@signozhq/ui';
 import { ResizablePanelGroup } from '@signozhq/ui';
-import { Toaster } from '@signozhq/ui';
 import { Switch } from '@signozhq/ui';
 import { Table } from '@signozhq/ui';
+import { Tabs } from '@signozhq/ui';
+import { Toaster } from '@signozhq/ui';
 import { Toggle } from '@signozhq/ui';
 import { ToggleGroup } from '@signozhq/ui';
+import { Tooltip } from '@signozhq/ui';
 ```
 
 ## Contributing

@@ -1,4 +1,4 @@
-import { ChevronDown, Moon, Palette, Sun } from 'lucide-react';
+import { ChevronDown, Moon, Palette, Sun } from '@signozhq/icons';
 import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 

diff --git a/apps/docs/components/IconGallery.tsx b/apps/docs/components/IconGallery.tsx
@@ -1,5 +1,5 @@
+import { Check, Copy } from '@signozhq/icons';
 import { Button, ButtonColor, ButtonSize, ButtonVariant, Input } from '@signozhq/ui';
-import { Check, Copy } from 'lucide-react';
 import React, { useMemo, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeGrid as Grid } from 'react-window';

@@ -16,11 +16,10 @@
 	"dependencies": {
 		"@radix-ui/react-tabs": "^1.1.3",
 		"@signozhq/design-tokens": "2.1.3",
-		"@signozhq/icons": "^0.1.0",
+		"@signozhq/icons": "^0.3.0",
 		"@signozhq/tailwind-config": "workspace:*",
 		"@signozhq/ui": "workspace:*",
 		"@tailwindcss/vite": "^4.2.1",
-		"lucide-react": "^0.445.0",
 		"motion": "^11.18.2",
 		"nuqs": "^2.8.9",
 		"react": "^18.2.0",

diff --git a/apps/docs/stories/combobox-simple.stories.tsx b/apps/docs/stories/combobox-simple.stories.tsx
@@ -1,6 +1,6 @@
+import { Code, Database, GitBranch, Terminal } from '@signozhq/icons';
 import { ComboboxSimple } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Code2, Database, GitBranch, Terminal } from 'lucide-react';
 import { useState } from 'react';
 
 const meta: Meta<typeof ComboboxSimple> = {
@@ -140,7 +140,7 @@ const itemsWithIcons = [
 		value: 'react',
 		label: (
 			<>
-				<Code2 className="mr-2 h-4 w-4" />
+				<Code className="mr-2 h-4 w-4" />
 				React
 			</>
 		),
@@ -196,7 +196,7 @@ export const WithGroupsAndIcons: Story = {
 						value: 'react',
 						label: (
 							<>
-								<Code2 className="mr-2 h-4 w-4" />
+								<Code className="mr-2 h-4 w-4" />
 								React
 							</>
 						),
@@ -205,7 +205,7 @@ export const WithGroupsAndIcons: Story = {
 						value: 'vue',
 						label: (
 							<>
-								<Code2 className="mr-2 h-4 w-4" />
+								<Code className="mr-2 h-4 w-4" />
 								Vue
 							</>
 						),

diff --git a/apps/docs/stories/combobox.mdx b/apps/docs/stories/combobox.mdx
@@ -56,11 +56,11 @@ export default function MyComponent() {
 ```tsx
 import { ComboboxSimple } from '@signozhq/ui';
 import { useState } from 'react';
-import { Code2, Database } from 'lucide-react';
+import { Code, Database } from '@signozhq/icons';
 
 const items = [
-	{ value: 'react', label: <><Code2 className="mr-2 h-4 w-4" />React</> },
-	{ value: 'vue', label: <><Code2 className="mr-2 h-4 w-4" />Vue</> },
+	{ value: 'react', label: <><Code className="mr-2 h-4 w-4" />React</> },
+	{ value: 'vue', label: <><Code className="mr-2 h-4 w-4" />Vue</> },
 	{ value: 'postgres', label: <><Database className="mr-2 h-4 w-4" />PostgreSQL</> },
 ];
 
@@ -83,11 +83,11 @@ export default function MyComponent() {
 ```tsx
 import { ComboboxSimple } from '@signozhq/ui';
 import { useState } from 'react';
-import { Code2 } from 'lucide-react';
+import { Code } from '@signozhq/icons';
 
 const items = [
-	{ value: 'react', label: <><Code2 className="mr-2 h-4 w-4" />React</>, displayValue: 'React' },
-	{ value: 'vue', label: <><Code2 className="mr-2 h-4 w-4" />Vue</>, displayValue: 'Vue' },
+	{ value: 'react', label: <><Code className="mr-2 h-4 w-4" />React</>, displayValue: 'React' },
+	{ value: 'vue', label: <><Code className="mr-2 h-4 w-4" />Vue</>, displayValue: 'Vue' },
 ];
 
 export default function MyComponent() {

diff --git a/apps/docs/stories/combobox.stories.tsx b/apps/docs/stories/combobox.stories.tsx
@@ -1,3 +1,4 @@
+import { Code, Database, GitBranch, Terminal } from '@signozhq/icons';
 import {
 	Combobox,
 	ComboboxCommand,
@@ -12,7 +13,6 @@ import {
 	ComboboxTrigger,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Code2, Database, GitBranch, Terminal } from 'lucide-react';
 import { useState } from 'react';
 
 const meta: Meta<typeof Combobox> = {
@@ -595,7 +595,7 @@ export const WithIcons: Story = {
 			{
 				value: 'react',
 				label: 'React',
-				icon: Code2,
+				icon: Code,
 			},
 			{
 				value: 'nodejs',

diff --git a/apps/docs/stories/data-table.stories.tsx b/apps/docs/stories/data-table.stories.tsx
@@ -1,3 +1,4 @@
+import { CircleAlert, CircleCheck, CircleX, Clock, Eye, Pencil, Trash2 } from '@signozhq/icons';
 import {
 	Badge,
 	DataTable as BaseDataTable,
@@ -7,8 +8,9 @@ import {
 	type Row,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import type { LucideIcon } from 'lucide-react';
-import { AlertCircle, CheckCircle, Clock, Edit, Eye, Trash2, XCircle } from 'lucide-react';
+
+type IconComponent = React.ComponentType<{ className?: string; size?: number }>;
+
 import * as React from 'react';
 
 // Create a properly typed wrapper component
@@ -278,16 +280,16 @@ const enhancedColumns: ColumnDef<User>[] = [
 			const status = row.getValue('status') as User['status'];
 			const statusMap: Record<
 				User['status'],
-				{ label: string; icon: LucideIcon; className: string }
+				{ label: string; icon: IconComponent; className: string }
 			> = {
 				active: {
 					label: 'Active',
-					icon: CheckCircle,
+					icon: CircleCheck,
 					className: 'bg-green-100 text-green-800 border-green-200',
 				},
 				inactive: {
 					label: 'Inactive',
-					icon: XCircle,
+					icon: CircleX,
 					className: 'bg-red-100 text-red-800 border-red-200',
 				},
 				pending: {
@@ -297,7 +299,7 @@ const enhancedColumns: ColumnDef<User>[] = [
 				},
 				suspended: {
 					label: 'Suspended',
-					icon: AlertCircle,
+					icon: CircleAlert,
 					className: 'bg-gray-100 text-gray-800 border-gray-200',
 				},
 			};
@@ -397,7 +399,7 @@ const enhancedColumns: ColumnDef<User>[] = [
 						<Eye className="h-4 w-4" />
 					</Button>
 					<Button variant="ghost" color={ButtonColor.None} size="sm" className="h-8 w-8 p-0">
-						<Edit className="h-4 w-4" />
+						<Pencil className="h-4 w-4" />
 					</Button>
 					<Button
 						variant="ghost"
@@ -630,11 +632,11 @@ export const Compact: StoryObj<typeof DataTable<User>> = {
 				header: 'Status',
 				cell: ({ row }: { row: Row<User> }) => {
 					const status = row.original.status;
-					const statusMap: Record<User['status'], { icon: LucideIcon; className: string }> = {
-						active: { icon: CheckCircle, className: 'text-green-600' },
-						inactive: { icon: XCircle, className: 'text-red-600' },
+					const statusMap: Record<User['status'], { icon: IconComponent; className: string }> = {
+						active: { icon: CircleCheck, className: 'text-green-600' },
+						inactive: { icon: CircleX, className: 'text-red-600' },
 						pending: { icon: Clock, className: 'text-yellow-600' },
-						suspended: { icon: AlertCircle, className: 'text-gray-600' },
+						suspended: { icon: CircleAlert, className: 'text-gray-600' },
 					};
 					const statusInfo = statusMap[status];
 					const Icon = statusInfo.icon;
@@ -840,12 +842,12 @@ export const AllFeatures: StoryObj<typeof DataTable<User>> = {
 					> = {
 						active: {
 							label: 'Active',
-							icon: CheckCircle,
+							icon: CircleCheck,
 							className: 'bg-green-100 text-green-800 border-green-200',
 						},
 						inactive: {
 							label: 'Inactive',
-							icon: XCircle,
+							icon: CircleX,
 							className: 'bg-red-100 text-red-800 border-red-200',
 						},
 						pending: {
@@ -855,7 +857,7 @@ export const AllFeatures: StoryObj<typeof DataTable<User>> = {
 						},
 						suspended: {
 							label: 'Suspended',
-							icon: AlertCircle,
+							icon: CircleAlert,
 							className: 'bg-gray-100 text-gray-800 border-gray-200',
 						},
 					};
@@ -942,7 +944,7 @@ export const AllFeatures: StoryObj<typeof DataTable<User>> = {
 								<Eye className="h-4 w-4" />
 							</Button>
 							<Button variant="ghost" color={ButtonColor.None} size="sm" className="h-8 w-8 p-0">
-								<Edit className="h-4 w-4" />
+								<Pencil className="h-4 w-4" />
 							</Button>
 							<Button
 								variant="ghost"
@@ -1089,12 +1091,12 @@ export const VirtualizationWithFeatures: StoryObj<typeof DataTable<User>> = {
 					> = {
 						active: {
 							label: 'Active',
-							icon: CheckCircle,
+							icon: CircleCheck,
 							className: 'bg-green-100 text-green-800 border-green-200',
 						},
 						inactive: {
 							label: 'Inactive',
-							icon: XCircle,
+							icon: CircleX,
 							className: 'bg-red-100 text-red-800 border-red-200',
 						},
 						pending: {
@@ -1104,7 +1106,7 @@ export const VirtualizationWithFeatures: StoryObj<typeof DataTable<User>> = {
 						},
 						suspended: {
 							label: 'Suspended',
-							icon: AlertCircle,
+							icon: CircleAlert,
 							className: 'bg-gray-100 text-gray-800 border-gray-200',
 						},
 					};
@@ -1191,7 +1193,7 @@ export const VirtualizationWithFeatures: StoryObj<typeof DataTable<User>> = {
 								<Eye className="h-4 w-4" />
 							</Button>
 							<Button variant="ghost" color={ButtonColor.None} size="sm" className="h-8 w-8 p-0">
-								<Edit className="h-4 w-4" />
+								<Pencil className="h-4 w-4" />
 							</Button>
 							<Button
 								variant="ghost"
@@ -1540,11 +1542,11 @@ export const StickyHeaders: StoryObj<typeof DataTable<User>> = {
 				header: 'Status',
 				size: 120,
 				cell: ({ row }: { row: Row<User> }) => {
-					const statusMap: Record<User['status'], { icon: LucideIcon; className: string }> = {
-						active: { icon: CheckCircle, className: 'text-green-600' },
-						inactive: { icon: XCircle, className: 'text-red-600' },
+					const statusMap: Record<User['status'], { icon: IconComponent; className: string }> = {
+						active: { icon: CircleCheck, className: 'text-green-600' },
+						inactive: { icon: CircleX, className: 'text-red-600' },
 						pending: { icon: Clock, className: 'text-yellow-600' },
-						suspended: { icon: AlertCircle, className: 'text-orange-600' },
+						suspended: { icon: CircleAlert, className: 'text-orange-600' },
 					};
 					const status = statusMap[row.original.status];
 					const Icon = status.icon;

diff --git a/apps/docs/stories/dropdown-menu-item.stories.tsx b/apps/docs/stories/dropdown-menu-item.stories.tsx
@@ -1,3 +1,4 @@
+import { Check, LogOut, Settings, User } from '@signozhq/icons';
 import {
 	Button,
 	DropdownMenu,
@@ -7,7 +8,6 @@ import {
 	DropdownMenuTrigger,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Check, LogOut, Settings, User } from 'lucide-react';
 
 const meta: Meta<typeof DropdownMenuItem> = {
 	title: 'Components/DropdownMenu/DropdownMenuItem',

diff --git a/apps/docs/stories/dropdown-menu-multi-step.stories.tsx b/apps/docs/stories/dropdown-menu-multi-step.stories.tsx
@@ -1,3 +1,4 @@
+import { Settings, User } from '@signozhq/icons';
 import {
 	Button,
 	DropdownMenuItem,
@@ -7,7 +8,6 @@ import {
 	DropdownMenuTrigger,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Settings, User } from 'lucide-react';
 
 const meta: Meta<typeof DropdownMenuMultiStep> = {
 	title: 'Components/DropdownMenu/DropdownMenuMultiStep',

diff --git a/apps/docs/stories/dropdown-menu-sub-trigger.stories.tsx b/apps/docs/stories/dropdown-menu-sub-trigger.stories.tsx
@@ -1,3 +1,4 @@
+import { Link, Settings } from '@signozhq/icons';
 import {
 	Button,
 	DropdownMenu,
@@ -9,7 +10,6 @@ import {
 	DropdownMenuTrigger,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Link, Settings } from 'lucide-react';
 
 const meta: Meta<typeof DropdownMenuSubTrigger> = {
 	title: 'Components/DropdownMenu/DropdownMenuSubTrigger',

diff --git a/apps/docs/stories/dropdown-menu-sub.stories.tsx b/apps/docs/stories/dropdown-menu-sub.stories.tsx
@@ -1,3 +1,4 @@
+import { Link, Settings } from '@signozhq/icons';
 import {
 	Button,
 	DropdownMenu,
@@ -9,7 +10,6 @@ import {
 	DropdownMenuTrigger,
 } from '@signozhq/ui';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Link, Settings } from 'lucide-react';
 import * as React from 'react';
 
 function SubMenuFrame({

diff --git a/apps/docs/stories/intro.mdx b/apps/docs/stories/intro.mdx
@@ -61,6 +61,7 @@ To learn more about the available components, take a look at: https://periscope.
 All components live in `@signozhq/ui`. Import by subpath:
 
 ```ts
+import { AlertDialog } from '@signozhq/ui';
 import { AnnouncementBanner } from '@signozhq/ui';
 import { Badge } from '@signozhq/ui';
 import { Button } from '@signozhq/ui';
@@ -69,15 +70,21 @@ import { Callout } from '@signozhq/ui';
 import { Checkbox } from '@signozhq/ui';
 import { Combobox } from '@signozhq/ui';
 import { Command } from '@signozhq/ui';
+import { DatePicker } from '@signozhq/ui';
 import { Dialog } from '@signozhq/ui';
 import { Drawer } from '@signozhq/ui';
+import { DropdownMenu } from '@signozhq/ui';
 import { Input } from '@signozhq/ui';
 import { Pagination } from '@signozhq/ui';
+import { PinList } from '@signozhq/ui';
+import { Popover } from '@signozhq/ui';
 import { RadioGroup } from '@signozhq/ui';
 import { ResizablePanelGroup } from '@signozhq/ui';
-import { Toaster } from '@signozhq/ui';
 import { Switch } from '@signozhq/ui';
 import { Table } from '@signozhq/ui';
+import { Tabs } from '@signozhq/ui';
+import { Toaster } from '@signozhq/ui';
 import { Toggle } from '@signozhq/ui';
 import { ToggleGroup } from '@signozhq/ui';
+import { Tooltip } from '@signozhq/ui';
 ```
diff --git a/apps/docs/stories/pin-list.mdx b/apps/docs/stories/pin-list.mdx
@@ -13,7 +13,7 @@ A pin list component for displaying items that can be pinned/unpinned as shortcu
 
 ```tsx
 import { PinList } from '@signozhq/ui';
-import { FileText, BarChart } from 'lucide-react';
+import { FileText, ChartBar } from '@signozhq/icons';
 
 export default function MyComponent() {
 	const items = [
@@ -30,7 +30,7 @@ export default function MyComponent() {
 			key: '2',
 			itemKey: '2',
 			label: 'Metrics',
-			icon: <BarChart />,
+			icon: <ChartBar />,
 			isPinned: false,
 			isEnabled: true,
 		},