diff --git a/packages/editor/lite-text-editor/src/ui/index.tsx b/packages/editor/lite-text-editor/src/ui/index.tsx
index 7a497d9aa..5b525d92b 100644
--- a/packages/editor/lite-text-editor/src/ui/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/index.tsx
@@ -1,8 +1,13 @@
-"use client"
-import * as React from 'react';
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useEditor } from '@plane/editor-core';
-import { FixedMenu } from './menus/fixed-menu';
-import { LiteTextEditorExtensions } from './extensions';
+"use client";
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useEditor,
+} from "@plane/editor-core";
+import { FixedMenu } from "./menus/fixed-menu";
+import { LiteTextEditorExtensions } from "./extensions";
 
 export type UploadImage = (file: File) => Promise<string>;
 export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<any>;
@@ -16,19 +21,21 @@ interface ILiteTextEditor {
   customClassName?: string;
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved"
+  ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   forwardedRef?: any;
   debouncedUpdatesEnabled?: boolean;
   commentAccessSpecifier?: {
-    accessValue: string,
-    onAccessChange: (accessKey: string) => void,
-    showAccessSpecifier: boolean,
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
     commentAccess: {
-      icon: string;
+      icon: any;
       key: string;
       label: "Private" | "Public";
-    }[]
+    }[];
   };
   onEnterKeyPress?: (e?: any) => void;
 }
@@ -56,7 +63,7 @@ const LiteTextEditor = ({
   customClassName,
   forwardedRef,
   commentAccessSpecifier,
-  onEnterKeyPress
+  onEnterKeyPress,
 }: LiteTextEditorProps) => {
   const editor = useEditor({
     onChange,
@@ -70,25 +77,37 @@ const LiteTextEditor = ({
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
   });
 
-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
 
   if (!editor) return null;
 
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
         <div className="w-full mt-4">
-          <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} commentAccessSpecifier={commentAccessSpecifier} />
+          <FixedMenu
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+            commentAccessSpecifier={commentAccessSpecifier}
+          />
         </div>
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>((props, ref) => (
-  <LiteTextEditor {...props} forwardedRef={ref} />
-));
+const LiteTextEditorWithRef = React.forwardRef<EditorHandle, ILiteTextEditor>(
+  (props, ref) => <LiteTextEditor {...props} forwardedRef={ref} />
+);
 
 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
 
diff --git a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
index 72a537e7e..a42421b04 100644
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@@ -1,7 +1,19 @@
 import { Editor } from "@tiptap/react";
-import { BoldIcon } from "lucide-react";
+import { BoldIcon, LucideIcon } from "lucide-react";
 
-import { BoldItem, BulletListItem, cn, CodeItem, ImageItem, ItalicItem, NumberedListItem, QuoteItem, StrikeThroughItem, TableItem, UnderLineItem } from "@plane/editor-core";
+import {
+  BoldItem,
+  BulletListItem,
+  cn,
+  CodeItem,
+  ImageItem,
+  ItalicItem,
+  NumberedListItem,
+  QuoteItem,
+  StrikeThroughItem,
+  TableItem,
+  UnderLineItem,
+} from "@plane/editor-core";
 import { Icon } from "./icon";
 import { Tooltip } from "../../tooltip";
 import { UploadImage } from "../..";
@@ -16,18 +28,22 @@ export interface BubbleMenuItem {
 type EditorBubbleMenuProps = {
   editor: Editor;
   commentAccessSpecifier?: {
-    accessValue: string,
-    onAccessChange: (accessKey: string) => void,
-    showAccessSpecifier: boolean,
-    commentAccess: {
-      icon: string;
-      key: string;
-      label: "Private" | "Public";
-    }[] | undefined;
-  }
+    accessValue: string;
+    onAccessChange: (accessKey: string) => void;
+    showAccessSpecifier: boolean;
+    commentAccess:
+      | {
+          icon: any;
+          key: string;
+          label: "Private" | "Public";
+        }[]
+      | undefined;
+  };
   uploadFile: UploadImage;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
-}
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved"
+  ) => void;
+};
 
 export const FixedMenu = (props: EditorBubbleMenuProps) => {
   const basicMarkItems: BubbleMenuItem[] = [
@@ -56,31 +72,33 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
     props.commentAccessSpecifier?.onAccessChange(accessKey);
   };
 
-
   return (
-    <div
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
-    >
-      {props.commentAccessSpecifier && (<div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
-        {props?.commentAccessSpecifier.commentAccess?.map((access) => (
-          <Tooltip key={access.key} tooltipContent={access.label}>
-            <button
-              type="button"
-              onClick={() => handleAccessChange(access.key)}
-              className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${props.commentAccessSpecifier?.accessValue === access.key ? "bg-custom-background-80" : ""
+    <div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
+      {props.commentAccessSpecifier && (
+        <div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
+          {props?.commentAccessSpecifier.commentAccess?.map((access) => (
+            <Tooltip key={access.key} tooltipContent={access.label}>
+              <button
+                type="button"
+                onClick={() => handleAccessChange(access.key)}
+                className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${
+                  props.commentAccessSpecifier?.accessValue === access.key
+                    ? "bg-custom-background-80"
+                    : ""
                 }`}
-            >
-              <Icon
-                iconName={access.icon}
-                className={`w-4 h-4 ${props.commentAccessSpecifier?.accessValue === access.key
-                  ? "!text-custom-text-100"
-                  : "!text-custom-text-400"
+              >
+                <access.icon
+                  className={`w-4 h-4 ${
+                    props.commentAccessSpecifier?.accessValue === access.key
+                      ? "!text-custom-text-100"
+                      : "!text-custom-text-400"
                   }`}
-              />
-            </button>
-          </Tooltip>
-        ))}
-      </div>)}
+                />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
       <div className="flex">
         {basicMarkItems.map((item, index) => (
           <button
diff --git a/packages/ui/src/icons/admin-profile-icon.tsx b/packages/ui/src/icons/admin-profile-icon.tsx
new file mode 100644
index 000000000..6e769a0bc
--- /dev/null
+++ b/packages/ui/src/icons/admin-profile-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AdminProfileIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 19V18C8 16.9391 8.42143 15.9217 9.17157 15.1716C9.92172 14.4214 10.9391 14 12 14C13.0609 14 14.0783 14.4214 14.8284 15.1716C15.5786 15.9217 16 16.9391 16 18V19"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 14C13.6569 14 15 12.6569 15 11C15 9.34315 13.6569 8 12 8C10.3431 8 9 9.34315 9 11C9 12.6569 10.3431 14 12 14Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/archive-icon.tsx b/packages/ui/src/icons/archive-icon.tsx
new file mode 100644
index 000000000..ac801c1b6
--- /dev/null
+++ b/packages/ui/src/icons/archive-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ArchiveIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15 18L12 21L9 18"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M12 21L12 12" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocked-icon.tsx b/packages/ui/src/icons/blocked-icon.tsx
new file mode 100644
index 000000000..b3f9226a9
--- /dev/null
+++ b/packages/ui/src/icons/blocked-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockedIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+      fill="#F76659"
+    />
+    <path
+      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+      fill="#F76659"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/blocker-icon.tsx b/packages/ui/src/icons/blocker-icon.tsx
new file mode 100644
index 000000000..d554f3784
--- /dev/null
+++ b/packages/ui/src/icons/blocker-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BlockerIcon: React.FC<ISvgIcons> = ({
+  height = "24",
+  width = "24",
+  className = "",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    fill="none"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+      fill="#F7AE59"
+    />
+    <path
+      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+      fill="#F7AE59"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-after-icon.tsx b/packages/ui/src/icons/calendar-after-icon.tsx
new file mode 100644
index 000000000..7321c1054
--- /dev/null
+++ b/packages/ui/src/icons/calendar-after-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarAfterIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_3309_70901)">
+      <path
+        d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70901">
+        <rect
+          width="18"
+          height="18"
+          fill="white"
+          transform="translate(0 0.5)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/calendar-before-icon.tsx b/packages/ui/src/icons/calendar-before-icon.tsx
new file mode 100644
index 000000000..5b6b6d72c
--- /dev/null
+++ b/packages/ui/src/icons/calendar-before-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_3309_70907)">
+      <path
+        d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
+        fill="rgb(var(--color-text-200))"
+      />
+      <g clipPath="url(#clip1_3309_70907)">
+        <path
+          d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
+          fill="rgb(var(--color-text-200))"
+          stroke="rgb(var(--color-text-200))"
+          strokeWidth="0.5"
+        />
+      </g>
+    </g>
+    <defs>
+      <clipPath id="clip0_3309_70907">
+        <rect width="18" height="18" fill="white" />
+      </clipPath>
+      <clipPath id="clip1_3309_70907">
+        <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/contrast-icon.tsx b/packages/ui/src/icons/contrast-icon.tsx
new file mode 100644
index 000000000..d02bf4f7e
--- /dev/null
+++ b/packages/ui/src/icons/contrast-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ContrastIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/copy-icon.tsx b/packages/ui/src/icons/copy-icon.tsx
new file mode 100644
index 000000000..53db42f86
--- /dev/null
+++ b/packages/ui/src/icons/copy-icon.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CopyIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 8H10C8.89543 8 8 8.89543 8 10V20C8 21.1046 8.89543 22 10 22H20C21.1046 22 22 21.1046 22 20V10C22 8.89543 21.1046 8 20 8Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 16C2.9 16 2 15.1 2 14V4C2 2.9 2.9 2 4 2H14C15.1 2 16 2.9 16 4"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
new file mode 100644
index 000000000..75286f289
--- /dev/null
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CreateIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M16 5H22" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M19 2V8" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/dice-icon.tsx b/packages/ui/src/icons/dice-icon.tsx
new file mode 100644
index 000000000..b27a16cdf
--- /dev/null
+++ b/packages/ui/src/icons/dice-icon.tsx
@@ -0,0 +1,47 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiceIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/discord-icon.tsx b/packages/ui/src/icons/discord-icon.tsx
new file mode 100644
index 000000000..6903b46d0
--- /dev/null
+++ b/packages/ui/src/icons/discord-icon.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DiscordIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_229)">
+      <path
+        fill={color ? color : "rgb(var(--color-text-200))"}
+        d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_229">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/double-circle-icon.tsx b/packages/ui/src/icons/double-circle-icon.tsx
new file mode 100644
index 000000000..b5ced3f8a
--- /dev/null
+++ b/packages/ui/src/icons/double-circle-icon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DoubleCircleIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <circle cx="12" cy="12" r="9" />
+    <circle cx="12" cy="12" r="5.625" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/external-link-icon.tsx b/packages/ui/src/icons/external-link-icon.tsx
new file mode 100644
index 000000000..5cf926f78
--- /dev/null
+++ b/packages/ui/src/icons/external-link-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ExternalLinkIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-[1.5]`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path d="M15 3H21V9" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M10 14L21 3" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/github-icon.tsx b/packages/ui/src/icons/github-icon.tsx
new file mode 100644
index 000000000..b979e75b0
--- /dev/null
+++ b/packages/ui/src/icons/github-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const GithubIcon: React.FC<ISvgIcons> = ({
+  width = "24",
+  height = "24",
+  className,
+  color,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_282_232)">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
+        fill={color ? color : "rgb(var(--color-text-200))"}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_282_232">
+        <rect width={width} height={height} />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
new file mode 100644
index 000000000..2e98e7138
--- /dev/null
+++ b/packages/ui/src/icons/index.tsx
@@ -0,0 +1,28 @@
+export * from "./user-group-icon";
+export * from "./contrast-icon";
+export * from "./dice-icon";
+export * from "./layers-icon";
+export * from "./photo-filter-icon";
+export * from "./archive-icon";
+export * from "./admin-profile-icon";
+export * from "./create-icon";
+export * from "./subscribe-icon";
+export * from "./double-circle-icon";
+export * from "./external-link-icon";
+export * from "./copy-icon";
+export * from "./layer-stack";
+export * from "./side-peek-icon";
+export * from "./modal-peek-icon";
+export * from "./panel-center-icon";
+export * from "./priority-icon";
+export * from "./state";
+export * from "./blocked-icon";
+export * from "./blocker-icon";
+export * from "./related-icon";
+export * from "./module";
+export * from "./github-icon";
+export * from "./discord-icon";
+export * from "./transfer-icon";
+export * from "./running-icon";
+export * from "./calendar-before-icon";
+export * from "./calendar-after-icon";
diff --git a/packages/ui/src/icons/layer-stack.tsx b/packages/ui/src/icons/layer-stack.tsx
new file mode 100644
index 000000000..99d50a778
--- /dev/null
+++ b/packages/ui/src/icons/layer-stack.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayerStackIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/layers-icon.tsx b/packages/ui/src/icons/layers-icon.tsx
new file mode 100644
index 000000000..30409b5e8
--- /dev/null
+++ b/packages/ui/src/icons/layers-icon.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LayersIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clip-path="url(#clip0_7258_81938)">
+      <path
+        d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_7258_81938">
+        <rect
+          width="24"
+          height="24"
+          fill="white"
+          transform="translate(24) rotate(90)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/modal-peek-icon.tsx b/packages/ui/src/icons/modal-peek-icon.tsx
new file mode 100644
index 000000000..d24887427
--- /dev/null
+++ b/packages/ui/src/icons/modal-peek-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ModalPeekIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/backlog.tsx b/packages/ui/src/icons/module/backlog.tsx
new file mode 100644
index 000000000..22d87cd28
--- /dev/null
+++ b/packages/ui/src/icons/module/backlog.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleBacklogIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/cancelled.tsx b/packages/ui/src/icons/module/cancelled.tsx
new file mode 100644
index 000000000..97103bb66
--- /dev/null
+++ b/packages/ui/src/icons/module/cancelled.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill="#ef4444"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/completed.tsx b/packages/ui/src/icons/module/completed.tsx
new file mode 100644
index 000000000..d70e459f3
--- /dev/null
+++ b/packages/ui/src/icons/module/completed.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill="#16a34a"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/in-progress.tsx b/packages/ui/src/icons/module/in-progress.tsx
new file mode 100644
index 000000000..2fdcdbe69
--- /dev/null
+++ b/packages/ui/src/icons/module/in-progress.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModuleInProgressIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/index.ts b/packages/ui/src/icons/module/index.ts
new file mode 100644
index 000000000..e82014b2f
--- /dev/null
+++ b/packages/ui/src/icons/module/index.ts
@@ -0,0 +1,7 @@
+export * from "./backlog";
+export * from "./cancelled";
+export * from "./completed";
+export * from "./in-progress";
+export * from "./module-status-icon";
+export * from "./paused";
+export * from "./planned";
diff --git a/packages/ui/src/icons/module/module-status-icon.tsx b/packages/ui/src/icons/module/module-status-icon.tsx
new file mode 100644
index 000000000..5fcb65de4
--- /dev/null
+++ b/packages/ui/src/icons/module/module-status-icon.tsx
@@ -0,0 +1,67 @@
+import * as React from "react";
+
+import { ModuleBacklogIcon } from "./backlog";
+import { ModuleCancelledIcon } from "./cancelled";
+import { ModuleCompletedIcon } from "./completed";
+import { ModuleInProgressIcon } from "./in-progress";
+import { ModulePausedIcon } from "./paused";
+import { ModulePlannedIcon } from "./planned";
+
+export type TModuleStatus =
+  | "backlog"
+  | "planned"
+  | "in-progress"
+  | "paused"
+  | "completed"
+  | "cancelled";
+
+type Props = {
+  status: TModuleStatus;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const ModuleStatusIcon: React.FC<Props> = ({
+  status,
+  className,
+  height = "12px",
+  width = "12px",
+}) => {
+  if (status === "backlog")
+    return (
+      <ModuleBacklogIcon className={className} height={height} width={width} />
+    );
+  else if (status === "cancelled")
+    return (
+      <ModuleCancelledIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "completed")
+    return (
+      <ModuleCompletedIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "in-progress")
+    return (
+      <ModuleInProgressIcon
+        className={className}
+        height={height}
+        width={width}
+      />
+    );
+  else if (status === "paused")
+    return (
+      <ModulePausedIcon className={className} height={height} width={width} />
+    );
+  else
+    return (
+      <ModulePlannedIcon className={className} height={height} width={width} />
+    );
+};
diff --git a/packages/ui/src/icons/module/paused.tsx b/packages/ui/src/icons/module/paused.tsx
new file mode 100644
index 000000000..eedc8ca8a
--- /dev/null
+++ b/packages/ui/src/icons/module/paused.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePausedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_4052_100275)">
+      <path
+        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+        fill="#525252"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100275">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/module/planned.tsx b/packages/ui/src/icons/module/planned.tsx
new file mode 100644
index 000000000..2ac67774b
--- /dev/null
+++ b/packages/ui/src/icons/module/planned.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const ModulePlannedIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+      fill="#3f76ff"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/panel-center-icon.tsx b/packages/ui/src/icons/panel-center-icon.tsx
new file mode 100644
index 000000000..83b759e0f
--- /dev/null
+++ b/packages/ui/src/icons/panel-center-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const FullScreenPeekIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/photo-filter-icon.tsx b/packages/ui/src/icons/photo-filter-icon.tsx
new file mode 100644
index 000000000..81460bc65
--- /dev/null
+++ b/packages/ui/src/icons/photo-filter-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const PhotoFilterIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/priority-icon.tsx b/packages/ui/src/icons/priority-icon.tsx
new file mode 100644
index 000000000..36c6fa18f
--- /dev/null
+++ b/packages/ui/src/icons/priority-icon.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+// icons
+import {
+  AlertCircle,
+  Ban,
+  SignalHigh,
+  SignalLow,
+  SignalMedium,
+} from "lucide-react";
+
+// types
+import { IPriorityIcon } from "./type";
+
+export const PriorityIcon: React.FC<IPriorityIcon> = ({
+  priority,
+  className = "",
+}) => {
+  if (!className || className === "") className = "h-3.5 w-3.5";
+
+  return (
+    <>
+      {priority === "urgent" ? (
+        <AlertCircle className={`${className}`} />
+      ) : priority === "high" ? (
+        <SignalHigh className={`${className}`} />
+      ) : priority === "medium" ? (
+        <SignalMedium className={`${className}`} />
+      ) : priority === "low" ? (
+        <SignalLow className={`${className}`} />
+      ) : (
+        <Ban className={`${className}`} />
+      )}
+    </>
+  );
+};
diff --git a/packages/ui/src/icons/related-icon.tsx b/packages/ui/src/icons/related-icon.tsx
new file mode 100644
index 000000000..a211f9c8b
--- /dev/null
+++ b/packages/ui/src/icons/related-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RelatedIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.125 19.25L9 16.125L12.125 13"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/running-icon.tsx b/packages/ui/src/icons/running-icon.tsx
new file mode 100644
index 000000000..9908fc17f
--- /dev/null
+++ b/packages/ui/src/icons/running-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RunningIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path d="M4.05 12L3.2625 11.2125L10.9125 3.5625H8.25V5.0625H7.125V2.4375H11.3063C11.4813 2.4375 11.65 2.46875 11.8125 2.53125C11.975 2.59375 12.1188 2.6875 12.2438 2.8125L14.4938 5.04375C14.8563 5.40625 15.275 5.68125 15.75 5.86875C16.225 6.05625 16.725 6.1625 17.25 6.1875V7.3125C16.6 7.2875 15.975 7.16563 15.375 6.94688C14.775 6.72813 14.25 6.3875 13.8 5.925L12.9375 5.0625L10.8 7.2L12.4125 8.8125L7.8375 11.4563L7.275 10.4813L10.575 8.56875L9.0375 7.03125L4.05 12ZM2.25 6.75V5.625H6V6.75H2.25ZM0.75 4.3125V3.1875H4.5V4.3125H0.75ZM14.8125 2.8125C14.45 2.8125 14.1406 2.68438 13.8844 2.42813C13.6281 2.17188 13.5 1.8625 13.5 1.5C13.5 1.1375 13.6281 0.828125 13.8844 0.571875C14.1406 0.315625 14.45 0.1875 14.8125 0.1875C15.175 0.1875 15.4844 0.315625 15.7406 0.571875C15.9969 0.828125 16.125 1.1375 16.125 1.5C16.125 1.8625 15.9969 2.17188 15.7406 2.42813C15.4844 2.68438 15.175 2.8125 14.8125 2.8125ZM2.25 1.875V0.75H6V1.875H2.25Z" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/side-peek-icon.tsx b/packages/ui/src/icons/side-peek-icon.tsx
new file mode 100644
index 000000000..b6edb07d4
--- /dev/null
+++ b/packages/ui/src/icons/side-peek-icon.tsx
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SidePeekIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+      fill="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/backlog-group-icon.tsx b/packages/ui/src/icons/state/backlog-group-icon.tsx
new file mode 100644
index 000000000..fce4f0024
--- /dev/null
+++ b/packages/ui/src/icons/state/backlog-group-icon.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#a3a3a3",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 323.15 323.03"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+        />
+        <path
+          fill={color}
+          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+        />
+        <path
+          fill={color}
+          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+        />
+        <path
+          fill={color}
+          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/cancelled-group-icon.tsx b/packages/ui/src/icons/state/cancelled-group-icon.tsx
new file mode 100644
index 000000000..c18a2570a
--- /dev/null
+++ b/packages/ui/src/icons/state/cancelled-group-icon.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CancelledGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#ef4444",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <g clipPath="url(#clip0_4052_100277)">
+      <path
+        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_4052_100277">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/completed-group-icon.tsx b/packages/ui/src/icons/state/completed-group-icon.tsx
new file mode 100644
index 000000000..b53292687
--- /dev/null
+++ b/packages/ui/src/icons/state/completed-group-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const CompletedGroupIcon: React.FC<ISvgIcons> = ({
+  className = "",
+  color = "#16a34a",
+  height = "20",
+  width = "20",
+  ...rest
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/helper.tsx b/packages/ui/src/icons/state/helper.tsx
new file mode 100644
index 000000000..469644067
--- /dev/null
+++ b/packages/ui/src/icons/state/helper.tsx
@@ -0,0 +1,24 @@
+export interface IStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TStateGroups;
+  height?: string;
+  width?: string;
+}
+
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
+
+export const STATE_GROUP_COLORS: {
+  [key in TStateGroups]: string;
+} = {
+  backlog: "#d9d9d9",
+  unstarted: "#3f76ff",
+  started: "#f59e0b",
+  completed: "#16a34a",
+  cancelled: "#dc2626",
+};
diff --git a/packages/ui/src/icons/state/index.tsx b/packages/ui/src/icons/state/index.tsx
new file mode 100644
index 000000000..0e5fdadd6
--- /dev/null
+++ b/packages/ui/src/icons/state/index.tsx
@@ -0,0 +1,6 @@
+export * from "./backlog-group-icon";
+export * from "./cancelled-group-icon";
+export * from "./completed-group-icon";
+export * from "./started-group-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-group-icon";
diff --git a/packages/ui/src/icons/state/started-group-icon.tsx b/packages/ui/src/icons/state/started-group-icon.tsx
new file mode 100644
index 000000000..77f1d1609
--- /dev/null
+++ b/packages/ui/src/icons/state/started-group-icon.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const StartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#f39e1f",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 152.93 152.95"
+  >
+    <g id="Layer_2" data-name="Layer 2">
+      <g id="Layer_1-2" data-name="Layer 1">
+        <path
+          fill={color}
+          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+        />
+        <path
+          fill={color}
+          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+        />
+        <path
+          fill={color}
+          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+        />
+        <path
+          fill={color}
+          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+        />
+        <path
+          fill={color}
+          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+        />
+      </g>
+    </g>
+  </svg>
+);
diff --git a/packages/ui/src/icons/state/state-group-icon.tsx b/packages/ui/src/icons/state/state-group-icon.tsx
new file mode 100644
index 000000000..e771fff5e
--- /dev/null
+++ b/packages/ui/src/icons/state/state-group-icon.tsx
@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import { BacklogGroupIcon } from "./backlog-group-icon";
+import { CancelledGroupIcon } from "./cancelled-group-icon";
+import { CompletedGroupIcon } from "./completed-group-icon";
+import { StartedGroupIcon } from "./started-group-icon";
+import { UnstartedGroupIcon } from "./unstarted-group-icon";
+import { IStateGroupIcon, STATE_GROUP_COLORS } from "./helper";
+
+const iconComponents = {
+  backlog: BacklogGroupIcon,
+  cancelled: CancelledGroupIcon,
+  completed: CompletedGroupIcon,
+  started: StartedGroupIcon,
+  unstarted: UnstartedGroupIcon,
+};
+
+export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
+  className = "",
+  color,
+  stateGroup,
+  height = "12px",
+  width = "12px",
+}) => {
+  const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
+
+  return (
+    <StateIconComponent
+      height={height}
+      width={width}
+      color={color ?? STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+};
diff --git a/packages/ui/src/icons/state/unstarted-group-icon.tsx b/packages/ui/src/icons/state/unstarted-group-icon.tsx
new file mode 100644
index 000000000..5c62b1f12
--- /dev/null
+++ b/packages/ui/src/icons/state/unstarted-group-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { ISvgIcons } from "../type";
+
+export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
+  width = "20",
+  height = "20",
+  className,
+  color = "#3a3a3a",
+}) => (
+  <svg
+    height={height}
+    width={width}
+    className={className}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/subscribe-icon.tsx b/packages/ui/src/icons/subscribe-icon.tsx
new file mode 100644
index 000000000..847c62f73
--- /dev/null
+++ b/packages/ui/src/icons/subscribe-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const SubscribeIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M15 5.1C15 4.54305 15.2107 4.0089 15.5858 3.61508C15.9609 3.22125 16.4696 3 17 3C17.5304 3 18.0391 3.22125 18.4142 3.61508C18.7893 4.0089 19 4.54305 19 5.1C19 7.55 20 8.25 20 8.25H14C14 8.25 15 7.55 15 5.1Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16.25 11C16.3238 11 16.4324 11 16.5643 11C16.6963 11 16.8467 11 17 11C17.1533 11 17.3037 11 17.4357 11C17.5676 11 17.6762 11 17.75 11"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/icons/transfer-icon.tsx b/packages/ui/src/icons/transfer-icon.tsx
new file mode 100644
index 000000000..93f5b0002
--- /dev/null
+++ b/packages/ui/src/icons/transfer-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const TransferIcon: React.FC<ISvgIcons> = ({
+  className = "fill-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} `}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path d="M6.16683 14.6667C4.54183 14.6667 3.16336 14.1007 2.03141 12.9688C0.899468 11.8368 0.333496 10.4583 0.333496 8.83333C0.333496 7.125 0.941135 5.73264 2.15641 4.65625C3.37169 3.57986 4.72933 3.09028 6.22933 3.1875L4.87516 1.83333C4.75016 1.70833 4.68766 1.55903 4.68766 1.38542C4.68766 1.21181 4.75016 1.0625 4.87516 0.9375C5.00016 0.8125 5.14947 0.75 5.32308 0.75C5.49669 0.75 5.646 0.8125 5.771 0.9375L8.22933 3.39583C8.29877 3.46528 8.34739 3.53472 8.37516 3.60417C8.40294 3.67361 8.41683 3.75 8.41683 3.83333C8.41683 3.91667 8.40294 3.99306 8.37516 4.0625C8.34739 4.13194 8.29877 4.20139 8.22933 4.27083L5.771 6.72917C5.646 6.85417 5.50016 6.91319 5.3335 6.90625C5.16683 6.89931 5.021 6.83333 4.896 6.70833C4.771 6.58333 4.7085 6.43403 4.7085 6.26042C4.7085 6.08681 4.771 5.9375 4.896 5.8125L6.29183 4.41667C4.97239 4.38889 3.8578 4.79167 2.94808 5.625C2.03836 6.45833 1.5835 7.52778 1.5835 8.83333C1.5835 10.0972 2.03141 11.1771 2.92725 12.0729C3.82308 12.9688 4.90294 13.4167 6.16683 13.4167H8.04183C8.22239 13.4167 8.37169 13.4757 8.48975 13.5938C8.6078 13.7118 8.66683 13.8611 8.66683 14.0417C8.66683 14.2222 8.6078 14.3715 8.48975 14.4896C8.37169 14.6076 8.22239 14.6667 8.04183 14.6667H6.16683ZM11.5835 14.6667C11.2363 14.6667 10.9411 14.5451 10.6981 14.3021C10.455 14.059 10.3335 13.7639 10.3335 13.4167V10.0833C10.3335 9.73611 10.455 9.44097 10.6981 9.19792C10.9411 8.95486 11.2363 8.83333 11.5835 8.83333H16.5835C16.9307 8.83333 17.2259 8.95486 17.4689 9.19792C17.712 9.44097 17.8335 9.73611 17.8335 10.0833V13.4167C17.8335 13.7639 17.712 14.059 17.4689 14.3021C17.2259 14.5451 16.9307 14.6667 16.5835 14.6667H11.5835ZM11.5835 13.4167H16.5835V10.0833H11.5835V13.4167ZM11.5835 7.16667C11.2363 7.16667 10.9411 7.04514 10.6981 6.80208C10.455 6.55903 10.3335 6.26389 10.3335 5.91667V2.58333C10.3335 2.23611 10.455 1.94097 10.6981 1.69792C10.9411 1.45486 11.2363 1.33333 11.5835 1.33333H16.5835C16.9307 1.33333 17.2259 1.45486 17.4689 1.69792C17.712 1.94097 17.8335 2.23611 17.8335 2.58333V5.91667C17.8335 6.26389 17.712 6.55903 17.4689 6.80208C17.2259 7.04514 16.9307 7.16667 16.5835 7.16667H11.5835Z" />
+  </svg>
+);
diff --git a/packages/ui/src/icons/type.d.ts b/packages/ui/src/icons/type.d.ts
new file mode 100644
index 000000000..0261ab163
--- /dev/null
+++ b/packages/ui/src/icons/type.d.ts
@@ -0,0 +1,10 @@
+export interface ISvgIcons extends React.SVGAttributes<SVGElement> {
+  className?: string | undefined;
+}
+
+export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
+
+export interface IPriorityIcon {
+  priority: TIssuePriorities | null;
+  className?: string;
+}
diff --git a/packages/ui/src/icons/user-group-icon.tsx b/packages/ui/src/icons/user-group-icon.tsx
new file mode 100644
index 000000000..3c49e5981
--- /dev/null
+++ b/packages/ui/src/icons/user-group-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const UserGroupIcon: React.FC<ISvgIcons> = ({
+  className = "text-current",
+  ...rest
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    className={`${className} stroke-2`}
+    stroke="currentColor"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...rest}
+  >
+    <path
+      d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 1cff8eeac..9cb3bc13a 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -4,3 +4,4 @@ export * from "./progress";
 export * from "./spinners";
 export * from "./loader";
 export * from "./tooltip";
+export * from "./icons";
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
index dde3bd834..c99a7cece 100644
--- a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -11,10 +11,9 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
 // ui
-import { Button } from "@plane/ui";
+import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { CalendarDays, Download, RefreshCw } from "lucide-react";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
@@ -165,12 +164,12 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
       >
         <div className="flex items-center gap-2 flex-wrap">
           <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
-            <LayerDiagonalIcon height={14} width={14} />
+            <LayersIcon height={14} width={14} />
             {analytics ? analytics.total : "..."} Issues
           </div>
           {isProjectLevel && (
             <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
-              <CalendarDaysIcon className="h-3.5 w-3.5" />
+              <CalendarDays className="h-3.5 w-3.5" />
               {renderShortDate(
                 (cycleId
                   ? cycleDetails?.created_at
@@ -196,7 +195,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
         <div className="flex items-center gap-2 flex-wrap justify-self-end">
           <Button
             variant="neutral-primary"
-            prependIcon={<ArrowPathIcon className="h-3.5 w-3.5" />}
+            prependIcon={<RefreshCw className="h-3.5 w-3.5" />}
             onClick={() => {
               if (!workspaceSlug) return;
 
@@ -205,7 +204,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer(
           >
             Refresh
           </Button>
-          <Button variant="primary" prependIcon={<ArrowDownTrayIcon />} onClick={exportAnalytics}>
+          <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
             Export as CSV
           </Button>
         </div>
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index c5c36c71a..1d578b0d8 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -1,7 +1,7 @@
 import { BarDatum } from "@nivo/bar";
 
 // icons
-import { PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
 // helpers
 import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
 // types
diff --git a/web/components/analytics/scope-and-demand/demand.tsx b/web/components/analytics/scope-and-demand/demand.tsx
index 23af2b384..0ff82c7af 100644
--- a/web/components/analytics/scope-and-demand/demand.tsx
+++ b/web/components/analytics/scope-and-demand/demand.tsx
@@ -1,5 +1,5 @@
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // types
 import { IDefaultAnalyticsResponse, TStateGroups } from "types";
 // constants
@@ -52,7 +52,7 @@ export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
     </div>
     <div className="!mt-6 flex w-min items-center gap-2 whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
       <p className="flex items-center gap-1 text-custom-text-200">
-        <PlayIcon className="h-4 w-4 -rotate-90" aria-hidden="true" />
+        <Triangle className="h-4 w-4" />
         <span>Estimate Demand:</span>
       </p>
       <p className="font-medium">
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index f67fca4a8..0f5ccd297 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { AssignmentClipboardIcon } from "components/icons";
+import { ClipboardList } from "lucide-react";
 // images
 import JoinProjectImg from "public/auth/project-not-authorized.svg";
 // fetch-keys
@@ -52,7 +52,7 @@ export const JoinProject: React.FC = () => {
       <div>
         <Button
           variant="primary"
-          prependIcon={<AssignmentClipboardIcon color="white" />}
+          prependIcon={<ClipboardList color="white" />}
           loading={isJoiningProject}
           onClick={handleJoin}
         >
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 5231324f6..1bd49a3f1 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -4,10 +4,8 @@ import { useRouter } from "next/router";
 // component
 import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { SelectMonthModal } from "components/automation";
-import { ToggleSwitch } from "@plane/ui";
+import { ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
 // icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
 import { ArchiveX } from "lucide-react";
 // services
 import { ProjectStateService } from "services/project";
@@ -157,7 +155,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
                             width="16px"
                           />
                         ) : (
-                          <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
+                          <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
                         )}
                         {selectedOption?.name
                           ? selectedOption.name
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
index 0e5cfb9c4..2702b8e68 100644
--- a/web/components/breadcrumbs/index.tsx
+++ b/web/components/breadcrumbs/index.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // icons
-import { Icon } from "components/ui";
+import { MoveLeft } from "lucide-react";
 
 type BreadcrumbsProps = {
   children: any;
@@ -19,10 +19,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
           className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
-          <Icon
-            iconName="keyboard_backspace"
-            className="text-base leading-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100"
-          />
+          <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
         </button>
         {children}
       </div>
@@ -48,14 +45,8 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   <>
     {link ? (
       <Link href={link}>
-        <a
-          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
-            linkTruncate ? "truncate" : ""
-          }`}
-        >
-          <p
-            className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
-          >
+        <a className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${linkTruncate ? "truncate" : ""}`}>
+          <p className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}>
             {icon ?? null}
             {title}
           </p>
diff --git a/web/components/command-palette/change-interface-theme.tsx b/web/components/command-palette/change-interface-theme.tsx
index 1285eeb21..ee5d12d29 100644
--- a/web/components/command-palette/change-interface-theme.tsx
+++ b/web/components/command-palette/change-interface-theme.tsx
@@ -4,8 +4,8 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { THEMES_OBJ } from "constants/themes";
 import { useTheme } from "next-themes";
-import { SettingIcon } from "components/icons";
 import useUser from "hooks/use-user";
+import { Settings } from "lucide-react";
 // helper
 import { unsetCustomCssVariables } from "helpers/theme.helper";
 // mobx react lite
@@ -54,7 +54,7 @@ export const ChangeInterfaceTheme: React.FC<Props> = observer(({ setIsPaletteOpe
           className="focus:outline-none"
         >
           <div className="flex items-center gap-2 text-custom-text-200">
-            <SettingIcon className="h-4 w-4 text-custom-text-200" />
+            <Settings className="h-4 w-4 text-custom-text-200" />
             {theme.label}
           </div>
         </Command.Item>
diff --git a/web/components/command-palette/command-k.tsx b/web/components/command-palette/command-k.tsx
index 59a455e98..7e89d3844 100644
--- a/web/components/command-palette/command-k.tsx
+++ b/web/components/command-palette/command-k.tsx
@@ -24,8 +24,29 @@ import {
   commandGroups,
 } from "components/command-palette";
 // ui
-import { Icon } from "components/ui";
-import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import {
+  FileText,
+  FolderPlus,
+  LinkIcon,
+  MessageSquare,
+  Rocket,
+  Settings,
+  Signal,
+  Trash2,
+  UserMinus2,
+  UserPlus2,
+} from "lucide-react";
+import {
+  ContrastIcon,
+  DiceIcon,
+  DoubleCircleIcon,
+  LayersIcon,
+  Loader,
+  PhotoFilterIcon,
+  ToggleSwitch,
+  Tooltip,
+  UserGroupIcon,
+} from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -351,7 +372,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                                 className="focus:outline-none"
                               >
                                 <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
-                                  <Icon iconName={currentSection.icon} />
+                                  {currentSection.icon}
                                   <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
                                 </div>
                               </Command.Item>
@@ -375,7 +396,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="grid_view" />
+                              <DoubleCircleIcon className="h-3.5 w-3.5" />
                               Change state...
                             </div>
                           </Command.Item>
@@ -388,7 +409,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="bar_chart" />
+                              <Signal className="h-3.5 w-3.5" />
                               Change priority...
                             </div>
                           </Command.Item>
@@ -401,7 +422,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="group" />
+                              <UserGroupIcon className="h-3.5 w-3.5" />
                               Assign to...
                             </div>
                           </Command.Item>
@@ -415,12 +436,12 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             <div className="flex items-center gap-2 text-custom-text-200">
                               {issueDetails?.assignees.includes(user.id) ? (
                                 <>
-                                  <Icon iconName="person_remove" />
+                                  <UserMinus2 className="h-3.5 w-3.5" />
                                   Un-assign from me
                                 </>
                               ) : (
                                 <>
-                                  <Icon iconName="person_add" />
+                                  <UserPlus2 className="h-3.5 w-3.5" />
                                   Assign to me
                                 </>
                               )}
@@ -428,7 +449,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           </Command.Item>
                           <Command.Item onSelect={deleteIssue} className="focus:outline-none">
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="delete" />
+                              <Trash2 className="h-3.5 w-3.5" />
                               Delete issue
                             </div>
                           </Command.Item>
@@ -440,7 +461,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="link" />
+                              <LinkIcon className="h-3.5 w-3.5" />
                               Copy issue URL
                             </div>
                           </Command.Item>
@@ -458,7 +479,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:bg-custom-background-80"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="stack" />
+                            <LayersIcon className="h-3.5 w-3.5" />
                             Create new issue
                           </div>
                           <kbd>C</kbd>
@@ -478,7 +499,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                             className="focus:outline-none"
                           >
                             <div className="flex items-center gap-2 text-custom-text-200">
-                              <Icon iconName="create_new_folder" />
+                              <FolderPlus className="h-3.5 w-3.5" />
                               Create new project
                             </div>
                             <kbd>P</kbd>
@@ -500,7 +521,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="contrast" />
+                                <ContrastIcon className="h-3.5 w-3.5" />
                                 Create new cycle
                               </div>
                               <kbd>Q</kbd>
@@ -518,7 +539,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="dataset" />
+                                <DiceIcon className="h-3.5 w-3.5" />
                                 Create new module
                               </div>
                               <kbd>M</kbd>
@@ -536,7 +557,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="photo_filter" />
+                                <PhotoFilterIcon className="h-3.5 w-3.5" />
                                 Create new view
                               </div>
                               <kbd>V</kbd>
@@ -554,7 +575,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               className="focus:outline-none"
                             >
                               <div className="flex items-center gap-2 text-custom-text-200">
-                                <Icon iconName="article" />
+                                <FileText className="h-3.5 w-3.5" />
                                 Create new page
                               </div>
                               <kbd>D</kbd>
@@ -573,7 +594,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="settings" />
+                            <Settings className="h-3.5 w-3.5" />
                             Search settings...
                           </div>
                         </Command.Item>
@@ -581,7 +602,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                       <Command.Group heading="Account">
                         <Command.Item onSelect={createNewWorkspace} className="focus:outline-none">
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="create_new_folder" />
+                            <FolderPlus className="h-3.5 w-3.5" />
                             Create new workspace
                           </div>
                         </Command.Item>
@@ -594,7 +615,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="settings" />
+                            <Settings className="h-3.5 w-3.5" />
                             Change interface theme...
                           </div>
                         </Command.Item>
@@ -611,7 +632,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="rocket_launch" />
+                            <Rocket className="h-3.5 w-3.5" />
                             Open keyboard shortcuts
                           </div>
                         </Command.Item>
@@ -623,7 +644,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="article" />
+                            <FileText className="h-3.5 w-3.5" />
                             Open Plane documentation
                           </div>
                         </Command.Item>
@@ -659,7 +680,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                           className="focus:outline-none"
                         >
                           <div className="flex items-center gap-2 text-custom-text-200">
-                            <Icon iconName="sms" />
+                            <MessageSquare className="h-3.5 w-3.5" />
                             Chat with us
                           </div>
                         </Command.Item>
diff --git a/web/components/command-palette/helpers.tsx b/web/components/command-palette/helpers.tsx
index 0b232b7dc..90511f907 100644
--- a/web/components/command-palette/helpers.tsx
+++ b/web/components/command-palette/helpers.tsx
@@ -1,4 +1,6 @@
 // types
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { Briefcase, FileText, LayoutGrid } from "lucide-react";
 import {
   IWorkspaceDefaultSearchResult,
   IWorkspaceIssueSearchResult,
@@ -8,14 +10,14 @@ import {
 
 export const commandGroups: {
   [key: string]: {
-    icon: string;
+    icon: JSX.Element;
     itemName: (item: any) => React.ReactNode;
     path: (item: any) => string;
     title: string;
   };
 } = {
   cycle: {
-    icon: "contrast",
+    icon: <ContrastIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{cycle.project__identifier}</span>
@@ -28,7 +30,7 @@ export const commandGroups: {
     title: "Cycles",
   },
   issue: {
-    icon: "stack",
+    icon: <LayersIcon className="h-3 w-3" />,
     itemName: (issue: IWorkspaceIssueSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{issue.project__identifier}</span>
@@ -41,7 +43,7 @@ export const commandGroups: {
     title: "Issues",
   },
   issue_view: {
-    icon: "photo_filter",
+    icon: <PhotoFilterIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{view.project__identifier}</span>
@@ -54,7 +56,7 @@ export const commandGroups: {
     title: "Views",
   },
   module: {
-    icon: "dataset",
+    icon: <DiceIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{module.project__identifier}</span>
@@ -67,7 +69,7 @@ export const commandGroups: {
     title: "Modules",
   },
   page: {
-    icon: "article",
+    icon: <FileText className="h-3 w-3" />,
     itemName: (page: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-custom-text-200 text-xs">{page.project__identifier}</span>
@@ -80,14 +82,13 @@ export const commandGroups: {
     title: "Pages",
   },
   project: {
-    icon: "work",
+    icon: <Briefcase className="h-3 w-3" />,
     itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
-    path: (project: IWorkspaceProjectSearchResult) =>
-      `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
+    path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
     title: "Projects",
   },
   workspace: {
-    icon: "grid_view",
+    icon: <LayoutGrid className="h-3 w-3" />,
     itemName: (workspace: IWorkspaceSearchResult) => workspace?.name,
     path: (workspace: IWorkspaceSearchResult) => `/${workspace?.slug}/`,
     title: "Workspaces",
diff --git a/web/components/command-palette/issue/change-issue-assignee.tsx b/web/components/command-palette/issue/change-issue-assignee.tsx
index dbab764d2..d7ed90bd6 100644
--- a/web/components/command-palette/issue/change-issue-assignee.tsx
+++ b/web/components/command-palette/issue/change-issue-assignee.tsx
@@ -11,7 +11,7 @@ import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // ui
 import { Avatar } from "components/ui";
 // icons
-import { CheckIcon } from "components/icons";
+import { Check } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
 
@@ -42,7 +42,7 @@ export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }
           </div>
           {issue.assignees.includes(member.id) && (
             <div>
-              <CheckIcon className="h-3 w-3" />
+              <Check className="h-3 w-3" />
             </div>
           )}
         </>
diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
index e38fb1b83..5551a8a3a 100644
--- a/web/components/command-palette/issue/change-issue-priority.tsx
+++ b/web/components/command-palette/issue/change-issue-priority.tsx
@@ -14,7 +14,8 @@ import { IIssue, IUser, TIssuePriorities } from "types";
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 import { PRIORITIES } from "constants/project";
 // icons
-import { CheckIcon, PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
+import { Check } from "lucide-react";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
@@ -72,7 +73,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
             <PriorityIcon priority={priority} />
             <span className="capitalize">{priority ?? "None"}</span>
           </div>
-          <div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>
+          <div>{priority === issue.priority && <Check className="h-3 w-3" />}</div>
         </Command.Item>
       ))}
     </>
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 0dfa23e6a..03f495603 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -10,9 +10,9 @@ import { Command } from "cmdk";
 import { IssueService } from "services/issue";
 import { ProjectStateService } from "services/project";
 // ui
-import { Spinner } from "@plane/ui";
+import { Spinner, StateGroupIcon } from "@plane/ui";
 // icons
-import { CheckIcon, StateGroupIcon } from "components/icons";
+import { Check } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
@@ -85,7 +85,7 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
                 <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
                 <p>{state.name}</p>
               </div>
-              <div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div>
+              <div>{state.id === issue.state && <Check className="h-3 w-3" />}</div>
             </Command.Item>
           ))
         ) : (
diff --git a/web/components/command-palette/shortcuts-modal.tsx b/web/components/command-palette/shortcuts-modal.tsx
index 44f3d5442..56f70ddea 100644
--- a/web/components/command-palette/shortcuts-modal.tsx
+++ b/web/components/command-palette/shortcuts-modal.tsx
@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { CommandIcon } from "components/icons";
+import { Command, Search, X } from "lucide-react";
 // ui
 import { Input } from "@plane/ui";
 
@@ -92,16 +90,13 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         <span>Keyboard Shortcuts</span>
                         <span>
                           <button type="button" onClick={() => setIsOpen(false)}>
-                            <XMarkIcon
-                              className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                              aria-hidden="true"
-                            />
+                            <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                           </button>
                         </span>
                       </Dialog.Title>
                       <div>
                         <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
-                          <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                          <Search className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
                             id="search"
                             name="search"
@@ -126,11 +121,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
                                             <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
@@ -169,11 +164,11 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
                                             <span className="flex h-full items-center rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 fill-current text-custom-text-200" />
                                             </span>
                                           ) : key === "Ctrl" ? (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 p-1.5 text-sm font-medium text-custom-text-200">
-                                              <CommandIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                                              <Command className="h-4 w-4 fill-current text-custom-text-200" />
                                             </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-custom-border-200 bg-custom-background-90 px-2 py-1 text-sm font-medium text-custom-text-200">
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
index f309b8303..aa4618d3a 100644
--- a/web/components/common/product-updates-modal.tsx
+++ b/web/components/common/product-updates-modal.tsx
@@ -10,7 +10,7 @@ import { WorkspaceService } from "services/workspace.service";
 import { MarkdownRenderer } from "components/ui";
 import { Loader } from "@plane/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
+import { X } from "lucide-react";
 // helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
@@ -57,10 +57,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     <span>Product Updates</span>
                     <span>
                       <button type="button" onClick={() => setIsOpen(false)}>
-                        <XMarkIcon
-                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                          aria-hidden="true"
-                        />
+                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                       </button>
                     </span>
                   </Dialog.Title>
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index affb2aa46..b44447fb9 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -7,8 +7,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // services
 import { IssueLabelService } from "services/issue";
 // icons
-import { Tooltip } from "@plane/ui";
-import { Icon } from "components/ui";
+import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon } from "@plane/ui";
 import {
   TagIcon,
   CopyPlus,
@@ -23,8 +22,8 @@ import {
   LayoutGridIcon,
   SignalMediumIcon,
   MessageSquareIcon,
+  UsersIcon,
 } from "lucide-react";
-import { BlockedIcon, BlockerIcon, RelatedIcon, StackedLayersHorizontalIcon } from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -359,7 +358,7 @@ const activityDetails: {
       if (activity.verb === "created") return "created the issue.";
       else return "deleted an issue.";
     },
-    icon: <StackedLayersHorizontalIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
+    icon: <LayersIcon width={12} height={12} color="#6b7280" aria-hidden="true" />,
   },
   labels: {
     message: (activity, showIssue) => {
@@ -517,7 +516,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Icon iconName="dataset" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
+    icon: <DiceIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -563,7 +562,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <Icon iconName="supervised_user_circle" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
+    icon: <UsersIcon className="h-3 w-3 !text-[#6b7280]" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index a94dd809e..66c4f4771 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -8,7 +8,7 @@ import { DateFilterSelect } from "./date-filter-select";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
+import { X } from "lucide-react";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
@@ -85,7 +85,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
-                    <XMarkIcon className="border-base h-4 w-4 cursor-pointer" onClick={handleClose} />
+                    <X className="h-4 w-4 cursor-pointer" onClick={handleClose} />
                   </div>
                   <div className="flex w-full justify-between gap-4">
                     <Controller
diff --git a/web/components/core/filters/date-filter-select.tsx b/web/components/core/filters/date-filter-select.tsx
index b35b585ce..7575fc768 100644
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@@ -3,7 +3,8 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { CalendarBeforeIcon, CalendarAfterIcon, CalendarMonthIcon } from "components/icons";
+import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
+import { CalendarDays } from "lucide-react";
 // fetch-keys
 
 type Props = {
@@ -32,7 +33,7 @@ const dueDateRange: DueDate[] = [
   {
     name: "range",
     value: "range",
-    icon: <CalendarMonthIcon className="h-4 w-4 " />,
+    icon: <CalendarDays className="h-4 w-4 " />,
   },
 ];
 
diff --git a/web/components/core/filters/filters-list.tsx b/web/components/core/filters/filters-list.tsx
index 697844a15..f92958504 100644
--- a/web/components/core/filters/filters-list.tsx
+++ b/web/components/core/filters/filters-list.tsx
@@ -1,8 +1,7 @@
 import React from "react";
 
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // ui
 import { Avatar } from "components/ui";
 // helpers
@@ -13,6 +12,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { IIssueFilterOptions, IIssueLabels, IState, IUserLite, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
+import { X } from "lucide-react";
 
 type Props = {
   filters: Partial<IIssueFilterOptions>;
@@ -23,19 +23,10 @@ type Props = {
   states: IState[] | undefined;
 };
 
-export const FiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  states,
-}) => {
+export const FiltersList: React.FC<Props> = ({ filters, setFilters, clearAllFilters, labels, members, states }) => {
   if (!filters) return <></>;
 
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
+  const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
 
   return (
     <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
@@ -71,10 +62,7 @@ export const FiltersList: React.FC<Props> = ({
                             }}
                           >
                             <span>
-                              <StateGroupIcon
-                                stateGroup={state?.group ?? "backlog"}
-                                color={state?.color}
-                              />
+                              <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} />
                             </span>
                             <span>{state?.name ?? ""}</span>
                             <span
@@ -85,7 +73,7 @@ export const FiltersList: React.FC<Props> = ({
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </p>
                         );
@@ -115,7 +103,7 @@ export const FiltersList: React.FC<Props> = ({
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </p>
                         );
@@ -137,7 +125,7 @@ export const FiltersList: React.FC<Props> = ({
                           }`}
                         >
                           <span>
-                            <PriorityIcon priority={priority} />
+                            <PriorityIcon priority={priority} className="h-3 w-3" />
                           </span>
                           <span>{priority === "null" ? "None" : priority}</span>
                           <span
@@ -148,7 +136,7 @@ export const FiltersList: React.FC<Props> = ({
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </span>
                         </p>
                       ))
@@ -167,13 +155,11 @@ export const FiltersList: React.FC<Props> = ({
                               className="cursor-pointer"
                               onClick={() =>
                                 setFilters({
-                                  subscriber: filters.subscriber?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
+                                  subscriber: filters.subscriber?.filter((p: any) => p !== memberId),
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -193,13 +179,11 @@ export const FiltersList: React.FC<Props> = ({
                               className="cursor-pointer"
                               onClick={() =>
                                 setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
+                                  created_by: filters.created_by?.filter((p: any) => p !== memberId),
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -234,7 +218,7 @@ export const FiltersList: React.FC<Props> = ({
                                 })
                               }
                             >
-                              <XMarkIcon
+                              <X
                                 className="h-3 w-3"
                                 style={{
                                   color: color,
@@ -267,7 +251,7 @@ export const FiltersList: React.FC<Props> = ({
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -295,7 +279,7 @@ export const FiltersList: React.FC<Props> = ({
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -309,7 +293,7 @@ export const FiltersList: React.FC<Props> = ({
                       })
                     }
                   >
-                    <XMarkIcon className="h-3 w-3" />
+                    <X className="h-3 w-3" />
                   </button>
                 </div>
               </div>
@@ -324,7 +308,7 @@ export const FiltersList: React.FC<Props> = ({
                     })
                   }
                 >
-                  <XMarkIcon className="h-3 w-3" />
+                  <X className="h-3 w-3" />
                 </button>
               </div>
             )}
@@ -338,7 +322,7 @@ export const FiltersList: React.FC<Props> = ({
           className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
+          <X className="h-3 w-3" />
         </button>
       )}
     </div>
diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index 91fd564fd..d090f569b 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -14,14 +14,7 @@ import { SelectFilters } from "components/views";
 import { CustomMenu } from "components/ui";
 import { ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import {
-  CalendarMonthOutlined,
-  FormatListBulletedOutlined,
-  GridViewOutlined,
-  TableChartOutlined,
-  WaterfallChartOutlined,
-} from "@mui/icons-material";
+import { CalendarDays, ChevronDown, GanttChart, Kanban, List, Sheet } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@@ -33,34 +26,34 @@ import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS }
 const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
-    Icon: FormatListBulletedOutlined,
+    Icon: List,
   },
   {
     type: "kanban",
-    Icon: GridViewOutlined,
+    Icon: Kanban,
   },
   {
     type: "calendar",
-    Icon: CalendarMonthOutlined,
+    Icon: CalendarDays,
   },
   {
     type: "spreadsheet",
-    Icon: TableChartOutlined,
+    Icon: Sheet,
   },
   {
     type: "gantt_chart",
-    Icon: WaterfallChartOutlined,
+    Icon: GanttChart,
   },
 ];
 
 const issueViewForDraftIssues: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
-    Icon: FormatListBulletedOutlined,
+    Icon: List,
   },
   {
     type: "kanban",
-    Icon: GridViewOutlined,
+    Icon: Kanban,
   },
 ];
 
@@ -96,12 +89,7 @@ export const IssuesFilterView: React.FC = () => {
                 }`}
                 onClick={() => setDisplayFilters({ layout: option.type })}
               >
-                <option.Icon
-                  sx={{
-                    fontSize: 16,
-                  }}
-                  className={option.type === "gantt_chart" ? "rotate-90" : ""}
-                />
+                <option.Icon className="h-4 w-4" />
               </button>
             </Tooltip>
           ))}
@@ -177,7 +165,7 @@ export const IssuesFilterView: React.FC = () => {
               }`}
             >
               Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+              <ChevronDown className="h-3 w-3" />
             </Popover.Button>
 
             <Transition
diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
index 10ffeec07..b2c2ef1b8 100644
--- a/web/components/core/filters/workspace-filters-list.tsx
+++ b/web/components/core/filters/workspace-filters-list.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon, StateGroupIcon } from "components/icons";
+import { X } from "lucide-react";
+import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // ui
 import { Avatar } from "components/ui";
 // helpers
@@ -75,7 +75,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </p>
                         );
@@ -108,7 +108,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </span>
                         </p>
                       ))
@@ -130,7 +130,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -154,7 +154,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -178,7 +178,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -213,7 +213,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon
+                              <X
                                 className="h-3 w-3"
                                 style={{
                                   color: color,
@@ -246,7 +246,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -274,7 +274,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </div>
                         );
@@ -296,7 +296,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                                 })
                               }
                             >
-                              <XMarkIcon className="h-3 w-3" />
+                              <X className="h-3 w-3" />
                             </span>
                           </p>
                         );
@@ -310,7 +310,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                       })
                     }
                   >
-                    <XMarkIcon className="h-3 w-3" />
+                    <X className="h-3 w-3" />
                   </button>
                 </div>
               </div>
@@ -325,7 +325,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
                     })
                   }
                 >
-                  <XMarkIcon className="h-3 w-3" />
+                  <X className="h-3 w-3" />
                 </button>
               </div>
             )}
@@ -339,7 +339,7 @@ export const WorkspaceFiltersList: FC<Props> = (props) => {
           className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-xs"
         >
           <span>Clear all filters</span>
-          <XMarkIcon className="h-3 w-3" />
+          <X className="h-3 w-3" />
         </button>
       )}
     </div>
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index a751657c6..188ddfa30 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -11,10 +11,9 @@ import { IssueService } from "services/issue";
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 // ui
-import { Button } from "@plane/ui";
+import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Search } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
 // fetch keys
@@ -170,7 +169,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -228,7 +227,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                       </li>
                     ) : (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                        <LayerDiagonalIcon height="56" width="56" />
+                        <LayersIcon height="56" width="56" />
                         <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
                           <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index 57231f241..799968791 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -13,11 +13,9 @@ import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Button, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { Button, LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Rocket, Search, X } from "lucide-react";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
 // fetch-keys
@@ -153,7 +151,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -179,7 +177,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                               className="group p-1"
                               onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
-                              <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
+                              <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
@@ -227,7 +225,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
                     {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                        <LayerDiagonalIcon height="52" width="52" />
+                        <LayersIcon height="52" width="52" />
                         <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
                           <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
@@ -279,11 +277,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                 rel="noopener noreferrer"
                                 onClick={(e) => e.stopPropagation()}
                               >
-                                <LaunchOutlined
-                                  sx={{
-                                    fontSize: 16,
-                                  }}
-                                />
+                                <Rocket className="h-4 w-4" />
                               </a>
                             </Combobox.Option>
                           );
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index 84f4b03b6..5fa66ef7a 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -13,7 +13,7 @@ import useWorkspaceDetails from "hooks/use-workspace-details";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { UserCircleIcon } from "components/icons";
+import { UserCircle2 } from "lucide-react";
 
 type Props = {
   value?: string | null;
@@ -159,7 +159,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           </>
                         ) : (
                           <div>
-                            <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
diff --git a/web/components/core/reaction-selector.tsx b/web/components/core/reaction-selector.tsx
index 6676b0be8..d988b9539 100644
--- a/web/components/core/reaction-selector.tsx
+++ b/web/components/core/reaction-selector.tsx
@@ -3,7 +3,7 @@ import { Popover, Transition } from "@headlessui/react";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
 // icons
-import { Icon } from "components/ui";
+import { SmilePlus } from "lucide-react";
 
 const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
 
@@ -31,7 +31,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
                 size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
               }`}
             >
-              <Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
+              <SmilePlus className="text-custom-text-100 h-3.5 w-3.5" />
             </span>
           </Popover.Button>
           <Transition
diff --git a/web/components/core/sidebar/links-list.tsx b/web/components/core/sidebar/links-list.tsx
index fb8f3243d..6de940296 100644
--- a/web/components/core/sidebar/links-list.tsx
+++ b/web/components/core/sidebar/links-list.tsx
@@ -1,6 +1,6 @@
 // icons
-import { ArrowTopRightOnSquareIcon, LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Icon } from "components/ui";
+import { ExternalLinkIcon } from "@plane/ui";
+import { Pencil, Trash2, LinkIcon } from "lucide-react";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
@@ -13,12 +13,7 @@ type Props = {
   userAuth: UserAuth;
 };
 
-export const LinksList: React.FC<Props> = ({
-  links,
-  handleDeleteLink,
-  handleEditLink,
-  userAuth,
-}) => {
+export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
   const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
 
   return (
@@ -32,7 +27,7 @@ export const LinksList: React.FC<Props> = ({
                 className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
                 onClick={() => handleEditLink(link)}
               >
-                <Icon iconName="edit" className="text-custom-text-200" />
+                <Pencil className="text-custom-text-200" />
               </button>
               <a
                 href={link.url}
@@ -40,14 +35,14 @@ export const LinksList: React.FC<Props> = ({
                 rel="noopener noreferrer"
                 className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
               >
-                <ArrowTopRightOnSquareIcon className="h-4 w-4 text-custom-text-200" />
+                <ExternalLinkIcon className="h-4 w-4 text-custom-text-200" />
               </a>
               <button
                 type="button"
                 className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
                 onClick={() => handleDeleteLink(link.id)}
               >
-                <TrashIcon className="h-4 w-4" />
+                <Trash2 className="h-4 w-4" />
               </button>
             </div>
           )}
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index acafe93ae..331008c47 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -16,7 +16,7 @@ import { ColorResult, SketchPicker } from "react-color";
 import { Popover, Transition } from "@headlessui/react";
 import { Input } from "@plane/ui";
 // icons
-import { ColorPickerIcon } from "components/icons";
+import { Palette } from "lucide-react";
 // types
 import { ICustomTheme } from "types";
 
@@ -98,7 +98,7 @@ export const ColorPickerInput: FC<Props> = (props) => {
                     }}
                   />
                 ) : (
-                  <ColorPickerIcon height={14} width={14} className="fill-current text-custom-text-100" />
+                  <Palette className="h-3.5 w-3.5 text-custom-text-100" />
                 )}
               </Popover.Button>
 
diff --git a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
index 7d93f8098..dca055f61 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@@ -5,8 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { Popover2 } from "@blueprintjs/popover2";
 // icons
-import { Icon } from "components/ui";
-import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { MoreHorizontal, LinkIcon, Pencil, Trash2, ChevronRight } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 // types
@@ -100,7 +99,7 @@ export const IssueColumn: React.FC<Props> = ({
                         }}
                       >
                         <div className="flex items-center justify-start gap-2">
-                          <PencilIcon className="h-4 w-4" />
+                          <Pencil className="h-4 w-4" />
                           <span>Edit issue</span>
                         </div>
                       </button>
@@ -114,7 +113,7 @@ export const IssueColumn: React.FC<Props> = ({
                         }}
                       >
                         <div className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                           <span>Delete issue</span>
                         </div>
                       </button>
@@ -136,7 +135,7 @@ export const IssueColumn: React.FC<Props> = ({
                   }
                   placement="bottom-start"
                 >
-                  <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                  <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
                 </Popover2>
               </div>
             )}
@@ -148,7 +147,7 @@ export const IssueColumn: React.FC<Props> = ({
                 className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
                 onClick={() => handleToggleExpand(issue.id)}
               >
-                <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+                <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
               </button>
             </div>
           )}
diff --git a/web/components/core/views/spreadsheet-view/single-issue.tsx b/web/components/core/views/spreadsheet-view/single-issue.tsx
index b06ffad1b..0c1ac8744 100644
--- a/web/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/web/components/core/views/spreadsheet-view/single-issue.tsx
@@ -7,8 +7,7 @@ import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "comp
 import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
 // icons
-import { Icon } from "components/ui";
-import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { MoreHorizontal, LinkIcon, Pencil, Trash2, ChevronRight } from "lucide-react";
 // services
 import { IssueService } from "services/issue";
 import { TrackEventService } from "services/track_event.service";
@@ -281,7 +280,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
                           }}
                         >
                           <div className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
+                            <Pencil className="h-4 w-4" />
                             <span>Edit issue</span>
                           </div>
                         </button>
@@ -295,7 +294,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
                           }}
                         >
                           <div className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
+                            <Trash2 className="h-4 w-4" />
                             <span>Delete issue</span>
                           </div>
                         </button>
@@ -317,7 +316,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
                     }
                     placement="bottom-start"
                   >
-                    <EllipsisHorizontalIcon className="h-5 w-5 text-custom-text-200" />
+                    <MoreHorizontal className="h-5 w-5 text-custom-text-200" />
                   </Popover2>
                 </div>
               )}
@@ -329,7 +328,7 @@ export const SingleSpreadsheetIssue: FC<Props> = (props) => {
                   className="h-5 w-5 hover:bg-custom-background-90 hover:text-custom-text-100 rounded-sm cursor-pointer"
                   onClick={() => handleToggleExpand(issue.id)}
                 >
-                  <Icon iconName="chevron_right" className={`${expanded ? "rotate-90" : ""}`} />
+                  <ChevronRight className={`h-3.5 w-3.5 ${expanded ? "rotate-90" : ""}`} />
                 </button>
               </div>
             )}
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index f2900cf96..707340c64 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -18,13 +18,22 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { CustomMenu, Icon } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
 import { Spinner } from "@plane/ui";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
 // icon
-import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  CheckIcon,
+  ChevronDownIcon,
+  Eraser,
+  ListFilter,
+  MoveRight,
+  PlusIcon,
+} from "lucide-react";
 
 type Props = {
   displayProperties: IIssueDisplayProperties;
@@ -98,11 +107,8 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
               }`}
             >
               {activeSortingProperty === propertyName && (
-                <div className="absolute top-1 right-1.5">
-                  <Icon
-                    iconName="filter_list"
-                    className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                  />
+                <div className="absolute top-1 right-1.5 bg-custom-primary rounded-full flex items-center justify-center h-3.5 w-3.5">
+                  <ListFilter className="h-3 w-3 text-white" />
                 </div>
               )}
 
@@ -127,32 +133,23 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
               <div className="flex gap-2 items-center">
                 {propertyName === "assignee" || propertyName === "labels" ? (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
+                    <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
                     <span>A</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>Z</span>
                   </>
                 ) : propertyName === "due_date" || propertyName === "created_on" || propertyName === "updated_on" ? (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
+                    <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
                     <span>New</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>Old</span>
                   </>
                 ) : (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute right-0 text-sm" />
-                    </span>
+                    <ArrowDownWideNarrow className="h-4 w-4 stroke-[1.5]" />
                     <span>First</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>Last</span>
                   </>
                 )}
@@ -184,32 +181,23 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
               <div className="flex gap-2 items-center">
                 {propertyName === "assignee" || propertyName === "labels" ? (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
-                    </span>
+                    <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
                     <span>Z</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>A</span>
                   </>
                 ) : propertyName === "due_date" ? (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
-                    </span>
+                    <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
                     <span>Old</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>New</span>
                   </>
                 ) : (
                   <>
-                    <span className="relative flex items-center h-6 w-6">
-                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
-                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
-                    </span>
+                    <ArrowUpNarrowWide className="h-4 w-4 stroke-[1.5]" />
                     <span>Last</span>
-                    <Icon iconName="east" className="text-sm" />
+                    <MoveRight className="h-3.5 w-3.5" />
                     <span>First</span>
                   </>
                 )}
@@ -238,7 +226,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
                   <div className="flex gap-1.5 items-center">
                     <span className="relative flex items-center justify-center h-6 w-6">
-                      <Icon iconName="ink_eraser" className="text-sm" />
+                      <Eraser className="h-3.5 w-3.5" />
                     </span>
 
                     <span>Clear sorting</span>
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index eb1fb8a09..1ececf4dc 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -10,25 +10,23 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
-import { Loader, Tooltip, LinearProgressIndicator } from "@plane/ui";
+import {
+  Loader,
+  Tooltip,
+  LinearProgressIndicator,
+  ContrastIcon,
+  RunningIcon,
+  LayersIcon,
+  StateGroupIcon,
+  PriorityIcon,
+} from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
 import { ViewIssueLabel } from "components/issues";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
-import { PriorityIcon } from "components/icons/priority-icon";
-import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-  LayerDiagonalIcon,
-  StateGroupIcon,
-} from "components/icons";
-import { StarIcon } from "@heroicons/react/24/outline";
+import { AlarmClock, AlertTriangle, ArrowRight, CalendarDays, Star, Target } from "lucide-react";
+
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
@@ -229,12 +227,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                   >
                     {cycleStatus === "current" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
+                        <RunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClockIcon className="h-4 w-4" />
+                        <AlarmClock className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
@@ -246,7 +244,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                             }`}
                           >
                             <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                              <AlertTriangle className="h-3.5 w-3.5" />
                             </span>
                           </Tooltip>
                         )}{" "}
@@ -262,7 +260,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                         handleRemoveFromFavorites(e);
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -270,7 +268,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
                         handleAddToFavorites(e);
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
@@ -278,12 +276,12 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
 
               <div className="flex items-center justify-start gap-5 text-custom-text-200">
                 <div className="flex items-start gap-1">
-                  <CalendarDaysIcon className="h-4 w-4" />
+                  <CalendarDays className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(startDate)}</span>
                 </div>
-                <ArrowRightIcon className="h-4 w-4 text-custom-text-200" />
+                <ArrowRight className="h-4 w-4 text-custom-text-200" />
                 <div className="flex items-start gap-1">
-                  <TargetIcon className="h-4 w-4" />
+                  <Target className="h-4 w-4" />
                   <span>{renderShortDateWithYearFormat(endDate)}</span>
                 </div>
               </div>
@@ -315,7 +313,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
 
               <div className="flex items-center gap-4 text-custom-text-200">
                 <div className="flex gap-2">
-                  <LayerDiagonalIcon className="h-4 w-4 flex-shrink-0" />
+                  <LayersIcon className="h-4 w-4 flex-shrink-0" />
                   {cycle.total_issues} issues
                 </div>
                 <div className="flex items-center gap-2">
@@ -468,7 +466,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = (props) => {
             </div>
             <div className="flex items-center gap-1">
               <span>
-                <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
+                <LayersIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
               </span>
               <span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span>
             </div>
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
index c39dedb78..ff5e28eef 100644
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -12,18 +12,20 @@ import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
 import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
-import { Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-} from "components/icons";
-import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  ChevronDown,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -202,12 +204,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                   >
                     {cycleStatus === "current" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
+                        <RunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClockIcon className="h-4 w-4" />
+                        <AlarmClock className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
@@ -219,7 +221,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                             }`}
                           >
                             <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                              <AlertTriangle className="h-3.5 w-3.5" />
                             </span>
                           </Tooltip>
                         )}{" "}
@@ -231,11 +233,11 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                   </span>
                   {cycle.is_favorite ? (
                     <button onClick={handleRemoveFromFavorites}>
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button onClick={handleAddToFavorites}>
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
@@ -244,12 +246,12 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                 {cycleStatus !== "draft" && (
                   <>
                     <div className="flex items-start gap-1">
-                      <CalendarDaysIcon className="h-4 w-4" />
+                      <CalendarDays className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(startDate)}</span>
                     </div>
-                    <ArrowRightIcon className="h-4 w-4" />
+                    <ArrowRight className="h-4 w-4" />
                     <div className="flex items-start gap-1">
-                      <TargetIcon className="h-4 w-4" />
+                      <Target className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(endDate)}</span>
                     </div>
                   </>
@@ -298,7 +300,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                       }}
                       className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
                     >
-                      <PencilIcon className="h-4 w-4" />
+                      <Pencil className="h-4 w-4" />
                     </button>
                   )}
 
@@ -311,7 +313,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                         }}
                       >
                         <span className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                           <span>Delete cycle</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -375,7 +377,7 @@ export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
                   </Tooltip>
                   <Disclosure.Button>
                     <span className="p-1">
-                      <ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                      <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                     </span>
                   </Disclosure.Button>
                 </div>
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
index 16f129b74..1941dcf24 100644
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -6,26 +6,26 @@ import useToast from "hooks/use-toast";
 import { CycleCreateEditModal } from "./cycle-create-edit-modal";
 import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
-import { RadialProgressBar, Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-} from "components/icons";
-// hooks
-import { useMobxStore } from "lib/mobx/store-provider";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type TCyclesListItem = {
   cycle: ICycle;
@@ -188,12 +188,12 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 >
                   {cycleStatus === "current" ? (
                     <span className="flex items-center gap-1 whitespace-nowrap">
-                      <PersonRunningIcon className="h-3.5 w-3.5" />
+                      <RunningIcon className="h-3.5 w-3.5" />
                       {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
                     </span>
                   ) : cycleStatus === "upcoming" ? (
                     <span className="flex items-center gap-1">
-                      <AlarmClockIcon className="h-3.5 w-3.5" />
+                      <AlarmClock className="h-3.5 w-3.5" />
                       {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
                     </span>
                   ) : cycleStatus === "completed" ? (
@@ -205,7 +205,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                           }`}
                         >
                           <span>
-                            <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            <AlertTriangle className="h-3.5 w-3.5" />
                           </span>
                         </Tooltip>
                       )}{" "}
@@ -220,14 +220,14 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 {cycleStatus !== "draft" && (
                   <div className="flex items-center justify-start gap-2 text-custom-text-200">
                     <div className="flex items-start gap-1 whitespace-nowrap">
-                      <CalendarDaysIcon className="h-4 w-4" />
+                      <CalendarDays className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(startDate)}</span>
                     </div>
 
-                    <ArrowRightIcon className="h-4 w-4" />
+                    <ArrowRight className="h-4 w-4" />
 
                     <div className="flex items-start gap-1 whitespace-nowrap">
-                      <TargetIcon className="h-4 w-4" />
+                      <Target className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(endDate)}</span>
                     </div>
                   </div>
@@ -306,11 +306,11 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
                 {/* cycle favorite */}
                 {cycle.is_favorite ? (
                   <button type="button" onClick={handleRemoveFromFavorites}>
-                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                   </button>
                 ) : (
                   <button type="button" onClick={handleAddToFavorites}>
-                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                   </button>
                 )}
               </div>
@@ -323,7 +323,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
             {!isCompleted && (
               <CustomMenu.MenuItem onClick={() => setUpdateModal(true)}>
                 <span className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-4 w-4" />
+                  <Pencil className="h-4 w-4" />
                   <span>Edit Cycle</span>
                 </span>
               </CustomMenu.MenuItem>
@@ -332,7 +332,7 @@ export const CyclesListItem: FC<TCyclesListItem> = (props) => {
             {!isCompleted && (
               <CustomMenu.MenuItem onClick={() => setDeleteModal(true)}>
                 <span className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
+                  <Trash2 className="h-4 w-4" />
                   <span>Delete cycle</span>
                 </span>
               </CustomMenu.MenuItem>
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index bb8330cb6..99a1d25e5 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "@plane/ui";
-// icons
-import { ContrastIcon } from "components/icons";
+import { Tooltip, ContrastIcon } from "@plane/ui";
 // helpers
 import { getDateRangeStatus, renderShortDate } from "helpers/date-time.helper";
 // types
diff --git a/web/components/cycles/select.tsx b/web/components/cycles/select.tsx
index 3bd10eae7..966106573 100644
--- a/web/components/cycles/select.tsx
+++ b/web/components/cycles/select.tsx
@@ -4,8 +4,8 @@ import useSWR from "swr";
 import useUserAuth from "hooks/use-user-auth";
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CyclesIcon } from "components/icons";
+import { ContrastIcon } from "@plane/ui";
+import { Plus } from "lucide-react";
 // services
 import { CycleService } from "services/cycle.service";
 // components
@@ -57,7 +57,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value,
             <Listbox.Button
               className={`flex cursor-pointer items-center gap-1 rounded-md border border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
             >
-              <CyclesIcon className="h-3 w-3 text-custom-text-200" />
+              <ContrastIcon className="h-3 w-3 text-custom-text-200" />
               <div className="flex items-center gap-2 truncate">
                 {cycles?.find((c) => c.id === value)?.name ?? "Cycles"}
               </div>
@@ -104,7 +104,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value,
                     className="relative w-full flex select-none items-center gap-x-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-custom-text-100"
                     onClick={openCycleModal}
                   >
-                    <PlusIcon className="h-4 w-4 text-gray-400" aria-hidden="true" />
+                    <Plus className="h-4 w-4 text-gray-400" aria-hidden="true" />
                     <span>Create cycle</span>
                   </button>
                 </div>
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 2872fd122..0073cfef1 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -17,16 +17,16 @@ import { CustomMenu, CustomRangeDatePicker } from "components/ui";
 import { Loader, ProgressBar } from "@plane/ui";
 // icons
 import {
-  CalendarDaysIcon,
-  ChartPieIcon,
-  ArrowLongRightIcon,
-  TrashIcon,
-  UserCircleIcon,
-  ChevronDownIcon,
-  DocumentIcon,
+  CalendarDays,
+  ChevronDown,
+  File,
+  MoveRight,
   LinkIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+  PieChart,
+  Trash2,
+  UserCircle2,
+  AlertCircle,
+} from "lucide-react";
 // helpers
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 import { isDateGreaterThanToday, renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
@@ -299,7 +299,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                             cycle.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
-                          <CalendarDaysIcon className="h-3 w-3" />
+                          <CalendarDays className="h-3 w-3" />
                           <span>
                             {renderShortDateWithYearFormat(
                               new Date(`${watch("start_date") ? watch("start_date") : cycle?.start_date}`),
@@ -336,7 +336,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
+                    <MoveRight className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({}) => (
@@ -347,7 +347,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                             cycle.end_date ? "" : "text-custom-text-200"
                           }`}
                         >
-                          <CalendarDaysIcon className="h-3 w-3" />
+                          <CalendarDays className="h-3 w-3" />
 
                           <span>
                             {renderShortDateWithYearFormat(
@@ -397,7 +397,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                       {!isCompleted && (
                         <CustomMenu.MenuItem onClick={() => setCycleDeleteModal(true)}>
                           <span className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
+                            <Trash2 className="h-4 w-4" />
                             <span>Delete</span>
                           </span>
                         </CustomMenu.MenuItem>
@@ -419,7 +419,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                 <div className="flex flex-col  gap-4  text-sm">
                   <div className="flex items-center justify-start gap-1">
                     <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <UserCircleIcon className="h-5 w-5" />
+                      <UserCircle2 className="h-5 w-5" />
                       <span>Lead</span>
                     </div>
 
@@ -443,7 +443,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
 
                   <div className="flex items-center justify-start gap-1">
                     <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <ChartPieIcon className="h-5 w-5" />
+                      <PieChart className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
@@ -474,14 +474,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                       </div>
                       {isStartValid && isEndValid ? (
                         <Disclosure.Button>
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             {cycleStatus === "upcoming"
                               ? "Cycle is yet to start."
@@ -497,7 +494,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
+                                  <File className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -545,14 +542,11 @@ export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatu
 
                       {cycle.total_issues > 0 ? (
                         <Disclosure.Button>
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
diff --git a/web/components/cycles/single-cycle-card.tsx b/web/components/cycles/single-cycle-card.tsx
index 95f065056..0747b5bf9 100644
--- a/web/components/cycles/single-cycle-card.tsx
+++ b/web/components/cycles/single-cycle-card.tsx
@@ -10,20 +10,22 @@ import useToast from "hooks/use-toast";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-} from "components/icons";
-import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  ChevronDown,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -155,12 +157,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                   >
                     {cycleStatus === "current" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
+                        <RunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <AlarmClockIcon className="h-4 w-4" />
+                        <AlarmClock className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
                       </span>
                     ) : cycleStatus === "completed" ? (
@@ -172,7 +174,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                             }`}
                           >
                             <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                              <AlertTriangle className="h-3.5 w-3.5" />
                             </span>
                           </Tooltip>
                         )}{" "}
@@ -189,7 +191,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         handleRemoveFromFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -198,7 +200,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                 </span>
@@ -207,12 +209,12 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                 {cycleStatus !== "draft" && (
                   <>
                     <div className="flex items-start gap-1">
-                      <CalendarDaysIcon className="h-4 w-4" />
+                      <CalendarDays className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(startDate)}</span>
                     </div>
-                    <ArrowRightIcon className="h-4 w-4" />
+                    <ArrowRight className="h-4 w-4" />
                     <div className="flex items-start gap-1">
-                      <TargetIcon className="h-4 w-4" />
+                      <Target className="h-4 w-4" />
                       <span>{renderShortDateWithYearFormat(endDate)}</span>
                     </div>
                   </>
@@ -261,7 +263,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                       }}
                       className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
                     >
-                      <PencilIcon className="h-4 w-4" />
+                      <Pencil className="h-4 w-4" />
                     </button>
                   )}
 
@@ -274,7 +276,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         <span className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                           <span>Delete cycle</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -338,7 +340,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                   </Tooltip>
                   <Disclosure.Button>
                     <span className="p-1">
-                      <ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                      <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                     </span>
                   </Disclosure.Button>
                 </div>
diff --git a/web/components/cycles/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx
index 5f0aaca2d..b039c7005 100644
--- a/web/components/cycles/single-cycle-list.tsx
+++ b/web/components/cycles/single-cycle-list.tsx
@@ -7,18 +7,19 @@ import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
 // ui
 import { CustomMenu } from "components/ui";
-import { Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
-import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {
-  TargetIcon,
-  ContrastIcon,
-  PersonRunningIcon,
-  ArrowRightIcon,
-  TriangleExclamationIcon,
-  AlarmClockIcon,
-} from "components/icons";
-import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+  AlarmClock,
+  AlertTriangle,
+  ArrowRight,
+  CalendarDays,
+  LinkIcon,
+  Pencil,
+  Star,
+  Target,
+  Trash2,
+} from "lucide-react";
 // helpers
 import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -190,12 +191,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                   >
                     {cycleStatus === "current" ? (
                       <span className="flex gap-1 whitespace-nowrap">
-                        <PersonRunningIcon className="h-4 w-4" />
+                        <RunningIcon className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1">
-                        <AlarmClockIcon className="h-4 w-4" />
+                        <AlarmClock className="h-4 w-4" />
                         {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "completed" ? (
@@ -207,7 +208,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                             }`}
                           >
                             <span>
-                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                              <AlertTriangle className="h-3.5 w-3.5" />
                             </span>
                           </Tooltip>
                         )}{" "}
@@ -221,12 +222,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                   {cycleStatus !== "draft" && (
                     <div className="flex items-center justify-start gap-2 text-custom-text-200">
                       <div className="flex items-start gap-1 whitespace-nowrap">
-                        <CalendarDaysIcon className="h-4 w-4" />
+                        <CalendarDays className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(startDate)}</span>
                       </div>
-                      <ArrowRightIcon className="h-4 w-4" />
+                      <ArrowRight className="h-4 w-4" />
                       <div className="flex items-start gap-1 whitespace-nowrap">
-                        <TargetIcon className="h-4 w-4" />
+                        <Target className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(endDate)}</span>
                       </div>
                     </div>
@@ -305,7 +306,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         handleRemoveFromFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -314,7 +315,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   <div className="flex items-center">
@@ -327,7 +328,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                           }}
                         >
                           <span className="flex items-center justify-start gap-2">
-                            <PencilIcon className="h-4 w-4" />
+                            <Pencil className="h-4 w-4" />
                             <span>Edit Cycle</span>
                           </span>
                         </CustomMenu.MenuItem>
@@ -340,7 +341,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                           }}
                         >
                           <span className="flex items-center justify-start gap-2">
-                            <TrashIcon className="h-4 w-4" />
+                            <Trash2 className="h-4 w-4" />
                             <span>Delete cycle</span>
                           </span>
                         </CustomMenu.MenuItem>
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index 43f9595fc..28964551b 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -8,8 +8,8 @@ import { CycleService } from "services/cycle.service";
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 //icons
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ContrastIcon, ExclamationIcon, TransferIcon } from "components/icons";
+import { ContrastIcon, TransferIcon } from "@plane/ui";
+import { AlertCircle, Search, X } from "lucide-react";
 // fetch-key
 import { CYCLE_ISSUES_WITH_PARAMS, INCOMPLETE_CYCLES_LIST } from "constants/fetch-keys";
 // types
@@ -104,15 +104,15 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
                     <div className="flex items-center gap-3">
-                      <TransferIcon className="h-4 w-5" color="#495057" />
+                      <TransferIcon className="h-4 w-4" color="#495057" />
                       <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
-                      <XMarkIcon className="h-4 w-4" />
+                      <X className="h-4 w-4" />
                     </button>
                   </div>
                   <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
-                    <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
+                    <Search className="h-4 w-4 text-custom-text-200" />
                     <input
                       className="bg-custom-background-90 outline-none"
                       placeholder="Search for a cycle..."
@@ -145,7 +145,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         ))
                       ) : (
                         <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
-                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+                          <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
                           <span className="text-center text-custom-text-200">
                             You don’t have any current cycle. Please create one to transfer the issues.
                           </span>
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index 8636df6ef..a4291f4c0 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -5,9 +5,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // component
-import { Button } from "@plane/ui";
+import { Button, TransferIcon } from "@plane/ui";
 // icon
-import { ExclamationIcon, TransferIcon } from "components/icons";
+import { AlertCircle } from "lucide-react";
 // services
 import { CycleService } from "services/cycle.service";
 // fetch-key
@@ -36,7 +36,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
   return (
     <div className="-mt-2 mb-4 flex items-center justify-between px-8 pt-6">
       <div className="flex items-center gap-2 text-sm text-custom-text-200">
-        <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+        <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
         <span>Completed cycles are not editable.</span>
       </div>
 
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index ce5eb9db5..59f8e10be 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -6,7 +6,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { IEstimate } from "types";
 
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 
@@ -59,7 +59,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index dc5c43afe..1511259e9 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -13,7 +13,7 @@ import { DeleteEstimateModal } from "components/estimates";
 import { Button } from "@plane/ui";
 import { CustomMenu } from "components/ui";
 //icons
-import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { Pencil, Trash2 } from "lucide-react";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -89,7 +89,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
                 }}
               >
                 <div className="flex items-center justify-start gap-2">
-                  <PencilIcon className="h-3.5 w-3.5" />
+                  <Pencil className="h-3.5 w-3.5" />
                   <span>Edit estimate</span>
                 </div>
               </CustomMenu.MenuItem>
@@ -100,7 +100,7 @@ export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate,
                   }}
                 >
                   <div className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" />
                     <span>Delete estimate</span>
                   </div>
                 </CustomMenu.MenuItem>
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 893197f22..73e88874b 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -14,9 +14,8 @@ import { IntegrationService } from "services/integrations";
 import { Exporter, SingleExport } from "components/exporter";
 // ui
 import { Button, Loader } from "@plane/ui";
-import { Icon } from "components/ui";
 // icons
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
 // fetch-keys
 import { EXPORT_SERVICES_LIST } from "constants/fetch-keys";
 // constants
@@ -92,7 +91,7 @@ const IntegrationGuide = () => {
                     );
                   }}
                 >
-                  <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                  <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
                   {refreshing ? "Refreshing..." : "Refresh status"}
                 </button>
               </div>
@@ -106,7 +105,7 @@ const IntegrationGuide = () => {
                       : "cursor-not-allowed opacity-75"
                   }`}
                 >
-                  <Icon iconName="keyboard_arrow_left" className="!text-lg" />
+                  <MoveLeft className="h-4 w-4" />
                   <div className="pr-1">Prev</div>
                 </button>
                 <button
@@ -119,7 +118,7 @@ const IntegrationGuide = () => {
                   }`}
                 >
                   <div className="pl-1">Next</div>
-                  <Icon iconName="keyboard_arrow_right" className="!text-lg" />
+                  <MoveRight className="h-4 w-4" />
                 </button>
               </div>
             </div>
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index 184187674..bcee02ebc 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -2,7 +2,6 @@ import { FC, useEffect, useState } from "react";
 // next
 import { useRouter } from "next/router";
 // icons
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/20/solid";
 // components
 import { GanttChartBlocks } from "components/gantt-chart";
 import { GanttSidebar } from "../sidebar";
@@ -14,7 +13,7 @@ import { MonthChartView } from "./month";
 // import { QuarterChartView } from "./quarter";
 // import { YearChartView } from "./year";
 // icons
-import { PlusIcon } from "lucide-react";
+import { Expand, PlusIcon, Shrink } from "lucide-react";
 // views
 import {
   // generateHourChart,
@@ -275,11 +274,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           className="transition-all border border-custom-border-200 p-1 flex justify-center items-center cursor-pointer rounded-sm hover:bg-custom-background-80"
           onClick={() => setFullScreenMode((prevData) => !prevData)}
         >
-          {fullScreenMode ? (
-            <ArrowsPointingInIcon className="h-4 w-4" />
-          ) : (
-            <ArrowsPointingOutIcon className="h-4 w-4" />
-          )}
+          {fullScreenMode ? <Shrink className="h-4 w-4" /> : <Expand className="h-4 w-4" />}
         </div>
       </div>
 
diff --git a/web/components/gantt-chart/helpers/draggable.tsx b/web/components/gantt-chart/helpers/draggable.tsx
index 79dc2a72a..6f2cafe8e 100644
--- a/web/components/gantt-chart/helpers/draggable.tsx
+++ b/web/components/gantt-chart/helpers/draggable.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 // icons
-import { Icon } from "components/ui";
+import { ArrowLeft, ArrowRight } from "lucide-react";
 // hooks
 import { useChart } from "../hooks";
 // types
@@ -48,10 +48,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const posFromLeft = e.clientX;
     // manually scroll to left if reached the left end while dragging
-    if (
-      posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <=
-      SCROLL_THRESHOLD
-    ) {
+    if (posFromLeft - (ganttContainer.getBoundingClientRect().left + ganttSidebar.clientWidth) <= SCROLL_THRESHOLD) {
       if (e.movementX > 0) return 0;
 
       delWidth = -5;
@@ -82,8 +79,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
     let initialMarginLeft = parseInt(resizableDiv.style.marginLeft);
@@ -116,9 +112,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "left");
     };
@@ -137,8 +131,7 @@ export const ChartDraggable: React.FC<Props> = ({
 
     const columnWidth = currentViewData.data.width;
 
-    const blockInitialWidth =
-      resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
+    const blockInitialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
     let initialWidth = resizableDiv.clientWidth ?? parseInt(block.position.width.toString(), 10);
 
@@ -162,9 +155,7 @@ export const ChartDraggable: React.FC<Props> = ({
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
 
-      const totalBlockShifts = Math.ceil(
-        (resizableDiv.clientWidth - blockInitialWidth) / columnWidth
-      );
+      const totalBlockShifts = Math.ceil((resizableDiv.clientWidth - blockInitialWidth) / columnWidth);
 
       handleBlock(totalBlockShifts, "right");
     };
@@ -254,7 +245,7 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed ml-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_back" />
+          <ArrowLeft className="h-3.5 w-3.5" />
         </div>
       )}
       {/* move to right side hidden block button */}
@@ -263,7 +254,7 @@ export const ChartDraggable: React.FC<Props> = ({
           className="fixed right-1 mt-1.5 z-[1] h-8 w-8 grid place-items-center border border-custom-border-300 rounded cursor-pointer bg-custom-background-80 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleScrollToBlock}
         >
-          <Icon iconName="arrow_forward" />
+          <ArrowRight className="h-3.5 w-3.5" />
         </div>
       )}
       <div
@@ -292,9 +283,7 @@ export const ChartDraggable: React.FC<Props> = ({
           </>
         )}
         <div
-          className={`relative z-[2] rounded h-8 w-full flex items-center ${
-            isMoving ? "pointer-events-none" : ""
-          }`}
+          className={`relative z-[2] rounded h-8 w-full flex items-center ${isMoving ? "pointer-events-none" : ""}`}
           onMouseDown={handleBlockMove}
         >
           <BlockRender data={block.data} />
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 7924467b0..86e086790 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -7,7 +7,7 @@ import { useChart } from "./hooks";
 // ui
 import { Loader } from "@plane/ui";
 // icons
-import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
+import { MoreVertical } from "lucide-react";
 // helpers
 import { findTotalDaysInRange } from "helpers/date-time.helper";
 // types
@@ -124,8 +124,8 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                                 className="rounded p-0.5 text-custom-sidebar-text-200 flex flex-shrink-0 opacity-0 group-hover:opacity-100"
                                 {...provided.dragHandleProps}
                               >
-                                <EllipsisVerticalIcon className="h-4" />
-                                <EllipsisVerticalIcon className="h-4 -ml-5" />
+                                <MoreVertical className="h-4" />
+                                <MoreVertical className="h-4 -ml-5" />
                               </button>
                             )}
                             <div className="flex-grow truncate h-full flex items-center justify-between gap-2">
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index 45f47e551..527402913 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -5,7 +5,7 @@ import { CreateUpdateProjectViewModal } from "components/views";
 // ui
 import { PrimaryButton } from "components/ui";
 // icons
-import { PlusIcon } from "lucide-react";
+import { Plus } from "lucide-react";
 
 export const ProjectViewsHeader = () => {
   const [createViewModal, setCreateViewModal] = useState(false);
@@ -22,7 +22,7 @@ export const ProjectViewsHeader = () => {
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon size={14} strokeWidth={2} />
+          <Plus size={14} strokeWidth={2} />
           Create View
         </PrimaryButton>
       </div>
diff --git a/web/components/inbox/filters-dropdown.tsx b/web/components/inbox/filters-dropdown.tsx
index cd7cf8093..dc5e627a8 100644
--- a/web/components/inbox/filters-dropdown.tsx
+++ b/web/components/inbox/filters-dropdown.tsx
@@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
-import { PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
 // types
 import { IInboxFilterOptions } from "types";
 // constants
diff --git a/web/components/inbox/filters-list.tsx b/web/components/inbox/filters-list.tsx
index 75657d47b..2f70db99d 100644
--- a/web/components/inbox/filters-list.tsx
+++ b/web/components/inbox/filters-list.tsx
@@ -4,8 +4,8 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon } from "components/icons";
+import { X } from "lucide-react";
+import { PriorityIcon } from "@plane/ui";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
@@ -97,7 +97,7 @@ export const InboxFiltersList = observer(() => {
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </button>
                         </div>
                       ))}
@@ -109,7 +109,7 @@ export const InboxFiltersList = observer(() => {
                           })
                         }
                       >
-                        <XMarkIcon className="h-3 w-3" />
+                        <X className="h-3 w-3" />
                       </button>
                     </div>
                   ) : filterKey === "inbox_status" ? (
@@ -129,7 +129,7 @@ export const InboxFiltersList = observer(() => {
                               })
                             }
                           >
-                            <XMarkIcon className="h-3 w-3" />
+                            <X className="h-3 w-3" />
                           </button>
                         </div>
                       ))}
@@ -141,7 +141,7 @@ export const InboxFiltersList = observer(() => {
                           })
                         }
                       >
-                        <XMarkIcon className="h-3 w-3" />
+                        <X className="h-3 w-3" />
                       </button>
                     </div>
                   ) : (
@@ -158,7 +158,7 @@ export const InboxFiltersList = observer(() => {
         className="flex items-center gap-x-1 rounded-full border border-custom-border-200 bg-custom-background-80 px-3 py-1.5 text-custom-text-200 hover:text-custom-text-100"
       >
         <span>Clear all</span>
-        <XMarkIcon className="h-3 w-3" />
+        <X className="h-3 w-3" />
       </button>
     </div>
   );
diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx
index a223e7c09..edaed1cd5 100644
--- a/web/components/inbox/issue-card.tsx
+++ b/web/components/inbox/issue-card.tsx
@@ -2,10 +2,9 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip, PriorityIcon } from "@plane/ui";
 // icons
-import { PriorityIcon } from "components/icons";
-import { AlertTriangle, Calendar, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+import { AlertTriangle, CalendarDays, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -64,7 +63,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               tooltipContent={`${renderShortDateWithYearFormat(issue.created_at ?? "")}`}
             >
               <div className="flex items-center gap-1 rounded border border-custom-border-200 shadow-sm text-xs px-2 py-[0.19rem] text-custom-text-200">
-                <Calendar size={12} strokeWidth={1.5} />
+                <CalendarDays size={12} strokeWidth={1.5} />
                 <span>{renderShortDateWithYearFormat(issue.created_at ?? "")}</span>
               </div>
             </Tooltip>
diff --git a/web/components/inbox/modals/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
index 569061bdf..11ff416b2 100644
--- a/web/components/inbox/modals/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 
 // icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
@@ -59,7 +59,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-green-500/20 p-4">
-                      <CheckCircleIcon className="h-6 w-6 text-green-600" aria-hidden="true" />
+                      <CheckCircle className="h-6 w-6 text-green-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Accept Issue</h3>
diff --git a/web/components/inbox/modals/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
index 35309815f..50fccdd74 100644
--- a/web/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
@@ -59,7 +59,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3>
diff --git a/web/components/inbox/modals/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
index 65e23afcb..29129cd70 100644
--- a/web/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
@@ -96,7 +96,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
diff --git a/web/components/inbox/modals/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
index 11334d45d..ac0c63a95 100644
--- a/web/components/inbox/modals/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -8,10 +8,9 @@ import useToast from "hooks/use-toast";
 // services
 import { IssueService } from "services/issue";
 // ui
-import { Button } from "@plane/ui";
+import { Button, LayersIcon } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { LayerDiagonalIcon } from "components/icons";
+import { Search } from "lucide-react";
 // fetch-keys
 import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
 
@@ -103,7 +102,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                     }}
                   >
                     <div className="relative m-1">
-                      <MagnifyingGlassIcon
+                      <Search
                         className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                         aria-hidden="true"
                       />
@@ -155,7 +154,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                         </li>
                       ) : (
                         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="56" width="56" />
+                          <LayersIcon height="56" width="56" />
                           <h3 className="text-sm text-custom-text-200">
                             No issues found. Create a new issue with{" "}
                             <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index f9a9517d9..49f9e5c28 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button, Input } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
 import { IUser, IImporterService } from "types";
 // fetch-keys
@@ -96,7 +96,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-500" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index 0716a4768..6d0d7e6c2 100644
--- a/web/components/integration/github/root.tsx
+++ b/web/components/integration/github/root.tsx
@@ -21,8 +21,8 @@ import {
   GithubImportConfirm,
 } from "components/integration";
 // icons
-import { CogIcon, CloudUploadIcon, UsersIcon, CheckIcon } from "components/icons";
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
+import { UserGroupIcon } from "@plane/ui";
+import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
 // images
 import GithubLogo from "public/services/github.png";
 // types
@@ -59,23 +59,23 @@ const integrationWorkflowData = [
   {
     title: "Configure",
     key: "import-configure",
-    icon: CogIcon,
+    icon: Settings,
   },
   {
     title: "Import Data",
     key: "import-data",
-    icon: CloudUploadIcon,
+    icon: UploadCloud,
   },
-  { title: "Issues", key: "repo-details", icon: ListBulletIcon },
+  { title: "Issues", key: "repo-details", icon: List },
   {
     title: "Users",
     key: "import-users",
-    icon: UsersIcon,
+    icon: UserGroupIcon,
   },
   {
     title: "Confirm",
     key: "import-confirm",
-    icon: CheckIcon,
+    icon: Check,
   },
 ];
 
@@ -166,7 +166,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
       <div className="space-y-2">
         <Link href={`/${workspaceSlug}/settings/imports`}>
           <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
-            <ArrowLeftIcon className="h-3 w-3" />
+            <ArrowLeft className="h-3 w-3" />
             <div>Cancel import & go back</div>
           </div>
         </Link>
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index fe8f29b24..a0876e673 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -15,7 +15,7 @@ import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport }
 // ui
 import { Button, Loader } from "@plane/ui";
 // icons
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { RefreshCw } from "lucide-react";
 // types
 import { IImporterService } from "types";
 // fetch-keys
@@ -111,7 +111,7 @@ const IntegrationGuide = () => {
                       mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() => setRefreshing(false));
                     }}
                   >
-                    <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
+                    <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
                     {refreshing ? "Refreshing..." : "Refresh status"}
                   </button>
                 </h3>
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index 9697dd01d..ada403f43 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Link from "next/link";
 import { useFormContext, Controller } from "react-hook-form";
 // icons
-import { PlusIcon } from "@heroicons/react/20/solid";
+import { Plus } from "lucide-react";
 // hooks
 import useProjects from "hooks/use-projects";
 // components
@@ -190,7 +190,7 @@ export const JiraGetImportDetail: React.FC = () => {
                     }}
                     className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200"
                   >
-                    <PlusIcon className="h-4 w-4 text-custom-text-200" />
+                    <Plus className="h-4 w-4 text-custom-text-200" />
                     <span>Create new project</span>
                   </button>
                 </div>
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 505785544..9ebb68b7b 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -12,8 +12,7 @@ import { mutate } from "swr";
 import { FormProvider, useForm } from "react-hook-form";
 
 // icons
-import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
-import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
+import { ArrowLeft, Check, List, Settings } from "lucide-react";
 
 // services
 import { JiraImporterService } from "services/integrations";
@@ -22,7 +21,7 @@ import { JiraImporterService } from "services/integrations";
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
 // components
-import { Button } from "@plane/ui";
+import { Button, UserGroupIcon } from "@plane/ui";
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -45,22 +44,22 @@ const integrationWorkflowData: Array<{
   {
     title: "Configure",
     key: "import-configure",
-    icon: CogIcon,
+    icon: Settings,
   },
   {
     title: "Import Data",
     key: "display-import-data",
-    icon: ListBulletIcon,
+    icon: List,
   },
   {
     title: "Users",
     key: "import-users",
-    icon: UsersIcon,
+    icon: UserGroupIcon,
   },
   {
     title: "Confirm",
     key: "import-confirmation",
-    icon: CheckIcon,
+    icon: Check,
   },
 ];
 
@@ -113,7 +112,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
       <Link href={`/${workspaceSlug}/settings/imports`}>
         <div className="inline-flex cursor-pointer items-center gap-2 text-sm font-medium text-custom-text-200 hover:text-custom-text-100">
           <div>
-            <ArrowLeftIcon className="h-3 w-3" />
+            <ArrowLeft className="h-3 w-3" />
           </div>
           <div>Cancel import & go back</div>
         </div>
diff --git a/web/components/integration/single-import.tsx b/web/components/integration/single-import.tsx
index 9ebe1ad22..a67eba628 100644
--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@@ -1,7 +1,7 @@
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { Trash2 } from "lucide-react";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -48,7 +48,7 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
     <CustomMenu ellipsis>
       <CustomMenu.MenuItem onClick={handleDelete}>
         <span className="flex items-center justify-start gap-2">
-          <TrashIcon className="h-3.5 w-3.5" />
+          <Trash2 className="h-3.5 w-3.5" />
           Delete import
         </span>
       </CustomMenu.MenuItem>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index cf2b0c661..56c0c2408 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -15,7 +15,7 @@ import { Button, Loader } from "@plane/ui";
 // icons
 import GithubLogo from "public/services/github.png";
 import SlackLogo from "public/services/slack.png";
-import { CheckCircle2 } from "lucide-react";
+import { CheckCircle } from "lucide-react";
 // types
 import { IAppIntegration, IWorkspaceIntegration } from "types";
 // fetch-keys
@@ -102,7 +102,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
           <h3 className="flex items-center gap-2 text-sm font-medium">
             {integration.title}
             {workspaceIntegrations
-              ? isInstalled && <CheckCircle2 className="h-3.5 w-3.5 text-white fill-green-500" />
+              ? isInstalled && <CheckCircle className="h-3.5 w-3.5 text-white fill-green-500" />
               : null}
           </h3>
           <p className="text-sm text-custom-text-200 tracking-tight">
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
index 6e12435cc..e6c29251c 100644
--- a/web/components/issues/activity.tsx
+++ b/web/components/issues/activity.tsx
@@ -7,12 +7,12 @@ import { useRouter } from "next/router";
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { CommentCard } from "components/issues/comment";
 // ui
-import { Icon } from "components/ui";
 import { Loader, Tooltip } from "@plane/ui";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
 // types
 import { IIssueActivity, IIssueComment } from "types";
+import { History } from "lucide-react";
 
 type Props = {
   activity: IIssueActivity[] | undefined;
@@ -72,7 +72,7 @@ export const IssueActivitySection: React.FC<Props> = ({
                           <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
                             {activityItem.field ? (
                               activityItem.new_value === "restore" ? (
-                                <Icon iconName="history" className="text-sm text-custom-text-200" />
+                                <History className="h-3.5 w-3.5 text-custom-text-200" />
                               ) : (
                                 <ActivityIcon activity={activityItem} />
                               )
diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx
index afa5441ee..176ff5f7c 100644
--- a/web/components/issues/attachment/attachments.tsx
+++ b/web/components/issues/attachment/attachments.tsx
@@ -9,8 +9,8 @@ import useSWR from "swr";
 import { Tooltip } from "@plane/ui";
 import { DeleteAttachmentModal } from "./delete-attachment-modal";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { ExclamationIcon, getFileIcon } from "components/icons";
+import { getFileIcon } from "components/icons";
+import { AlertCircle, X } from "lucide-react";
 // services
 import { IssueAttachmentService } from "services/issue";
 import { ProjectService } from "services/project";
@@ -77,7 +77,7 @@ export const IssueAttachments = () => {
                         } uploaded on ${renderLongDateFormat(file.updated_at)}`}
                       >
                         <span>
-                          <ExclamationIcon className="h-3 w-3 fill-current" />
+                          <AlertCircle className="h-3 w-3" />
                         </span>
                       </Tooltip>
                     </div>
@@ -97,7 +97,7 @@ export const IssueAttachments = () => {
                 setAttachmentDeleteModal(true);
               }}
             >
-              <XMarkIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+              <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
             </button>
           </div>
         ))}
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 863318835..f2b346b87 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // helper
 import { getFileName } from "helpers/attachment.helper";
 // types
@@ -92,7 +92,7 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                   <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                     <div className="sm:flex sm:items-start">
                       <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                        <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                       </div>
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                         <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index 87d391f01..f836efb01 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -7,8 +7,9 @@ import { FileService } from "services/file.service";
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
 // ui
-import { Icon } from "components/ui";
 import { Button, Tooltip } from "@plane/ui";
+import { Globe2, Lock } from "lucide-react";
+
 // types
 import type { IIssueComment } from "types";
 
@@ -24,18 +25,18 @@ type Props = {
 };
 
 type commentAccessType = {
-  icon: string;
+  icon: any;
   key: string;
   label: "Private" | "Public";
 };
 const commentAccess: commentAccessType[] = [
   {
-    icon: "lock",
+    icon: Lock,
     key: "INTERNAL",
     label: "Private",
   },
   {
-    icon: "public",
+    icon: Globe2,
     key: "EXTERNAL",
     label: "Public",
   },
@@ -87,8 +88,7 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAc
                               value === access.key ? "bg-custom-background-80" : ""
                             }`}
                           >
-                            <Icon
-                              iconName={access.icon}
+                            <access.icon
                               className={`w-4 h-4 -mt-1 ${
                                 value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
                               }`}
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index 180722382..be2f60c7b 100644
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@@ -4,11 +4,11 @@ import { useForm } from "react-hook-form";
 // services
 import { FileService } from "services/file.service";
 // icons
-import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu, Icon } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 // helpers
@@ -87,7 +87,7 @@ export const CommentCard: React.FC<Props> = ({
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+          <MessageSquare className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -120,21 +120,21 @@ export const CommentCard: React.FC<Props> = ({
                 disabled={isSubmitting}
                 className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
               </button>
               <button
                 type="button"
                 className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 onClick={() => setIsEditing(false)}
               >
-                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
               </button>
             </div>
           </form>
           <div className={`relative ${isEditing ? "hidden" : ""}`}>
             {showAccessSpecifier && (
               <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
-                <Icon iconName={comment.access === "INTERNAL" ? "lock" : "public"} className="!text-xs" />
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
               </div>
             )}
             <LiteReadOnlyEditorWithRef
@@ -149,7 +149,7 @@ export const CommentCard: React.FC<Props> = ({
       {user?.id === comment.actor && (
         <CustomMenu ellipsis>
           <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
-            <Icon iconName="edit" />
+            <Pencil className="h-3 w-3" />
             Edit comment
           </CustomMenu.MenuItem>
           {showAccessSpecifier && (
@@ -160,7 +160,7 @@ export const CommentCard: React.FC<Props> = ({
                   onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="public" />
+                  <Globe2 className="h-3 w-3" />
                   Switch to public comment
                 </CustomMenu.MenuItem>
               ) : (
@@ -169,7 +169,7 @@ export const CommentCard: React.FC<Props> = ({
                   onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="lock" />
+                  <Lock className="h-3 w-3" />
                   Switch to private comment
                 </CustomMenu.MenuItem>
               )}
@@ -181,7 +181,7 @@ export const CommentCard: React.FC<Props> = ({
             }}
             className="flex items-center gap-1"
           >
-            <Icon iconName="delete" />
+            <Trash2 className="h-3 w-3" />
             Delete comment
           </CustomMenu.MenuItem>
         </CustomMenu>
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index d1c8ec9b5..4a0b0fd9a 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -14,7 +14,7 @@ import { IssueDraftService } from "services/issue";
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
@@ -114,7 +114,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Draft Issue</h3>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 37990c327..0ca58f62d 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -8,7 +8,7 @@ import { IssueService, IssueArchiveService } from "services/issue";
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 // types
@@ -162,7 +162,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index 538f846cf..b40d53500 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -25,7 +25,7 @@ import { CreateLabelModal } from "components/labels";
 import { CustomMenu } from "components/ui";
 import { Button, Input, ToggleSwitch } from "@plane/ui";
 // icons
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Sparkle, X } from "lucide-react";
 // types
 import type { IUser, IIssue, ISearchIssueResponse } from "types";
 // components
@@ -358,7 +358,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                     {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                   </span>
                   <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
-                  <XMarkIcon
+                  <X
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
                       setValue("parent", null);
@@ -414,7 +414,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                           "Generating response..."
                         ) : (
                           <>
-                            <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                           </>
                         )}
                       </button>
@@ -424,7 +424,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                       className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
-                      <SparklesIcon className="h-4 w-4" />
+                      <Sparkle className="h-4 w-4" />
                       AI
                     </button>
                   </div>
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index 07b55ae38..62443f764 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -24,7 +24,7 @@ import { CreateLabelModal } from "components/labels";
 import { CustomMenu } from "components/ui";
 import { Button, Input, ToggleSwitch } from "@plane/ui";
 // icons
-import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Sparkle, X } from "lucide-react";
 // types
 import type { IUser, IIssue, ISearchIssueResponse } from "types";
 // components
@@ -302,7 +302,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                     {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                   </span>
                   <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
-                  <XMarkIcon
+                  <X
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
                       setValue("parent", null);
@@ -358,7 +358,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                           "Generating response..."
                         ) : (
                           <>
-                            <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                            <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                           </>
                         )}
                       </button>
@@ -368,7 +368,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                       className="flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                       onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     >
-                      <SparklesIcon className="h-4 w-4" />
+                      <Sparkle className="h-4 w-4" />
                       AI
                     </button>
                   </div>
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 44328afff..7b76f8b51 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
 import { X } from "lucide-react";
 // types
 import { TIssuePriorities } from "types";
@@ -20,7 +20,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
         <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <PriorityIcon
             priority={priority as TIssuePriorities}
-            className={`!text-xs ${
+            className={`h-3 w-3 ${
               priority === "urgent"
                 ? "text-red-500"
                 : priority === "high"
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index bfeab73ab..d0707efda 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
 import { TStateGroups } from "types";
 
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
index 830c92088..5293a623a 100644
--- a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 
 // icons
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 import { X } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index c5551a30d..3a7b77df7 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // icons
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { ISSUE_STATE_GROUPS } from "constants/issue";
 
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
index 6f3472c8e..afb64fad6 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/state.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -3,9 +3,7 @@ import React, { useState } from "react";
 // components
 import { FilterHeader, FilterOption } from "components/issues";
 // ui
-import { Loader } from "@plane/ui";
-// icons
-import { StateGroupIcon } from "components/icons";
+import { Loader, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
diff --git a/web/components/issues/issue-layouts/gantt/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
index ef3a0e7e2..e29dc81d0 100644
--- a/web/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "@plane/ui";
-// icons
-import { StateGroupIcon } from "components/icons";
+import { Tooltip, StateGroupIcon } from "@plane/ui";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
diff --git a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
index d4efc909a..0ed233615 100644
--- a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
+++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
 import { HeaderSubGroupByCard } from "./sub-group-by-card";
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueStateGroupByKey } from "constants/issue";
 
diff --git a/web/components/issues/issue-layouts/list/headers/state-group.tsx b/web/components/issues/issue-layouts/list/headers/state-group.tsx
index 4e9169852..203fdd2ac 100644
--- a/web/components/issues/issue-layouts/list/headers/state-group.tsx
+++ b/web/components/issues/issue-layouts/list/headers/state-group.tsx
@@ -2,7 +2,7 @@
 import { observer } from "mobx-react-lite";
 // components
 import { HeaderGroupByCard } from "./group-by-card";
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueStateGroupByKey } from "constants/issue";
 
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
index 8674a45ac..a3ee4e044 100644
--- a/web/components/issues/issue-layouts/properties/state.tsx
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -6,8 +6,7 @@ import { ChevronDown, Search, X, Check } from "lucide-react";
 // mobx
 import { observer } from "mobx-react-lite";
 // components
-import { Tooltip } from "@plane/ui";
-import { StateGroupIcon } from "components/icons";
+import { Tooltip, StateGroupIcon } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // mobx
diff --git a/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx
index 7478b9c61..0b74ecf0d 100644
--- a/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx
@@ -14,7 +14,7 @@ import { IssuePeekOverview } from "components/issues";
 import { CustomMenu } from "components/ui";
 import { Spinner } from "@plane/ui";
 // icon
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -117,7 +117,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
                       className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
                       type="button"
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add Issue
                     </button>
                   }
diff --git a/web/components/issues/issue-layouts/spreadsheet/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
index d82289baf..a72cf40fe 100644
--- a/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
@@ -14,7 +14,7 @@ import { IssuePeekOverview } from "components/issues";
 import { CustomMenu } from "components/ui";
 import { Spinner } from "@plane/ui";
 // icon
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -117,7 +117,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
                       className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
                       type="button"
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add Issue
                     </button>
                   }
diff --git a/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx
index cbfabeb6e..ad0a935a6 100644
--- a/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx
@@ -13,7 +13,7 @@ import { IssuePeekOverview } from "components/issues";
 // ui
 import { Spinner } from "components/ui";
 // icon
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -114,7 +114,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
                   document.dispatchEvent(e);
                 }}
               >
-                <PlusIcon className="h-4 w-4" />
+                <Plus className="h-4 w-4" />
                 Add Issue
               </button>
             </div>
diff --git a/web/components/issues/issue-layouts/spreadsheet/root.tsx b/web/components/issues/issue-layouts/spreadsheet/root.tsx
index 6c14ebf69..387419c7b 100644
--- a/web/components/issues/issue-layouts/spreadsheet/root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/root.tsx
@@ -14,7 +14,7 @@ import { IssuePeekOverview } from "components/issues";
 import { CustomMenu } from "components/ui";
 import { Spinner } from "@plane/ui";
 // icon
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // types
 import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
 import { IIssueUnGroupedStructure } from "store/issue";
@@ -118,7 +118,7 @@ export const SpreadsheetLayout: React.FC = observer(() => {
                     document.dispatchEvent(e);
                   }}
                 >
-                  <PlusIcon className="h-4 w-4" />
+                  <Plus className="h-4 w-4" />
                   Add Issue
                 </button>
               ) : (
@@ -130,7 +130,7 @@ export const SpreadsheetLayout: React.FC = observer(() => {
                         className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
                         type="button"
                       >
-                        <PlusIcon className="h-4 w-4" />
+                        <Plus className="h-4 w-4" />
                         Add Issue
                       </button>
                     }
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index f77146d37..b6587a1a1 100644
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@@ -24,8 +24,8 @@ import { SubIssuesRoot } from "./sub-issues";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { LayerDiagonalIcon } from "components/icons";
-import { MinusCircleIcon } from "@heroicons/react/24/outline";
+import { LayersIcon } from "@plane/ui";
+import { MinusCircle } from "lucide-react";
 // types
 import { IIssue, IIssueComment } from "types";
 // fetch-keys
@@ -142,7 +142,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                         href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
                         className="flex items-center gap-2 py-2"
                       >
-                        <LayerDiagonalIcon className="h-4 w-4" />
+                        <LayersIcon className="h-4 w-4" />
                         {issueDetails.project_detail.identifier}-{issue.sequence_id}
                       </CustomMenu.MenuItem>
                     ))}
@@ -158,7 +158,7 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                 onClick={() => submitChanges({ parent: null })}
                 className="flex items-center gap-2 text-red-500 py-2"
               >
-                <MinusCircleIcon className="h-4 w-4" />
+                <MinusCircle className="h-4 w-4" />
                 <span> Remove Parent Issue</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx
index e165a7d6c..355496888 100644
--- a/web/components/issues/my-issues/my-issues-select-filters.tsx
+++ b/web/components/issues/my-issues/my-issues-select-filters.tsx
@@ -8,7 +8,7 @@ import { DateFilterModal } from "components/core";
 // ui
 import { MultiLevelDropdown } from "components/ui";
 // icons
-import { PriorityIcon, StateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
index f9314b775..7ca6dfce7 100644
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ b/web/components/issues/my-issues/my-issues-view-options.tsx
@@ -9,8 +9,7 @@ import { MyIssuesSelectFilters } from "components/issues";
 // ui
 import { Tooltip } from "@plane/ui";
 // icons
-import { FormatListBulletedOutlined } from "@mui/icons-material";
-import { CreditCard } from "lucide-react";
+import { List, Sheet } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@@ -20,11 +19,11 @@ import { TIssueLayouts } from "types";
 const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
-    Icon: FormatListBulletedOutlined,
+    Icon: List,
   },
   {
     type: "spreadsheet",
-    Icon: CreditCard,
+    Icon: Sheet,
   },
 ];
 
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index fcc8b8cc1..792ce0031 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -8,13 +8,10 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 import { ProjectService } from "services/project";
 // hooks
 import useDebounce from "hooks/use-debounce";
-// components
-import { LayerDiagonalIcon } from "components/icons";
 // ui
-import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { LaunchOutlined } from "@mui/icons-material";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Rocket, Search } from "lucide-react";
 // types
 import { ISearchIssueResponse } from "types";
 
@@ -105,7 +102,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                   }}
                 >
                   <div className="relative m-1">
-                    <MagnifyingGlassIcon
+                    <Search
                       className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
@@ -154,7 +151,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
 
                     {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
                       <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                        <LayerDiagonalIcon height="52" width="52" />
+                        <LayersIcon height="52" width="52" />
                         <h3 className="text-custom-text-200">
                           No issues found. Create a new issue with{" "}
                           <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
@@ -200,11 +197,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                               rel="noopener noreferrer"
                               onClick={(e) => e.stopPropagation()}
                             >
-                              <LaunchOutlined
-                                sx={{
-                                  fontSize: 16,
-                                }}
-                              />
+                              <Rocket className="h-4 w-4" />
                             </a>
                           </Combobox.Option>
                         ))}
diff --git a/web/components/issues/peek-overview/header.tsx b/web/components/issues/peek-overview/header.tsx
index b607e4089..44fa22e54 100644
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@@ -3,9 +3,10 @@ import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Icon } from "components/ui";
+import { CustomSelect } from "components/ui";
 // icons
-import { East, OpenInFull } from "@mui/icons-material";
+import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
+import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -23,18 +24,18 @@ type Props = {
 
 const peekModes: {
   key: TPeekOverviewModes;
-  icon: string;
+  icon: any;
   label: string;
 }[] = [
-  { key: "side", icon: "side_navigation", label: "Side Peek" },
+  { key: "side", icon: SidePeekIcon, label: "Side Peek" },
   {
     key: "modal",
-    icon: "dialogs",
+    icon: ModalPeekIcon,
     label: "Modal Peek",
   },
   {
     key: "full",
-    icon: "nearby",
+    icon: FullScreenPeekIcon,
     label: "Full Screen Peek",
   },
 ];
@@ -61,48 +62,34 @@ export const PeekOverviewHeader: React.FC<Props> = ({
     });
   };
 
+  const currentMode = peekModes.find((m) => m.key === mode);
+
   return (
     <div className="flex justify-between items-center">
       <div className="flex items-center gap-4">
         {mode === "side" && (
           <button type="button" onClick={handleClose}>
-            <East
-              sx={{
-                fontSize: "14px",
-              }}
-            />
+            <MoveRight className="h-3.5 w-3.5" />
           </button>
         )}
         <Link href={`/${workspaceSlug}/projects/${issue?.project}/issues/${issue?.id}`}>
           <a>
-            <OpenInFull
-              sx={{
-                fontSize: "14px",
-              }}
-            />
+            <FullScreenPeekIcon className="h-3.5 w-3.5" />
           </a>
         </Link>
         <CustomSelect
           value={mode}
           onChange={(val: TPeekOverviewModes) => setMode(val)}
           customButton={
-            <button
-              type="button"
-              className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}
-            >
-              <Icon iconName={peekModes.find((m) => m.key === mode)?.icon ?? ""} />
+            <button type="button" className={`grid place-items-center ${mode === "full" ? "rotate-45" : ""}`}>
+              {currentMode && <currentMode.icon className="h-3.5 w-3.5" />}
             </button>
           }
         >
           {peekModes.map((mode) => (
             <CustomSelect.Option key={mode.key} value={mode.key}>
               <div className="flex items-center gap-1.5">
-                <Icon
-                  iconName={mode.icon}
-                  className={`!text-base flex-shrink-0 -my-1 ${
-                    mode.key === "full" ? "rotate-45" : ""
-                  }`}
-                />
+                <mode.icon className={`h-4 w-4 flex-shrink-0 -my-1 ${mode.key === "full" ? "rotate-45" : ""}`} />
                 {mode.label}
               </div>
             </CustomSelect.Option>
@@ -112,10 +99,10 @@ export const PeekOverviewHeader: React.FC<Props> = ({
       {(mode === "side" || mode === "modal") && (
         <div className="flex items-center gap-2 flex-shrink-0">
           <button type="button" onClick={handleCopyLink} className="-rotate-45">
-            <Icon iconName="link" />
+            <LinkIcon className="h-3.5 w-3.5" />
           </button>
           <button type="button" onClick={handleDeleteIssue}>
-            <Icon iconName="delete" />
+            <Trash2 className="h-3.5 w-3.5" />
           </button>
         </div>
       )}
diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
index 7a4fec277..9a871dfa2 100644
--- a/web/components/issues/peek-overview/issue-properties.tsx
+++ b/web/components/issues/peek-overview/issue-properties.tsx
@@ -1,6 +1,6 @@
 import { FC } from "react";
 // components
-import { StateGroupIcon } from "components/icons";
+import { DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -11,11 +11,12 @@ import {
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { CustomDatePicker, Icon } from "components/ui";
+import { CustomDatePicker } from "components/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import { IIssue } from "types";
+import { CalendarDays, LinkIcon, Signal, Trash2 } from "lucide-react";
 
 type Props = {
   handleDeleteIssue: () => void;
@@ -62,10 +63,10 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="h-3.5 w-3.5" />
             </button>
             <button type="button" onClick={handleDeleteIssue}>
-              <Icon iconName="delete" />
+              <Trash2 className="h-3.5 w-3.5" />
             </button>
           </div>
         </div>
@@ -73,7 +74,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
       <div className={`space-y-4 ${mode === "full" ? "pt-3" : ""}`}>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="radio_button_checked" className="!text-base flex-shrink-0" />
+            <DoubleCircleIcon className="h-3.5 w-3.5 flex-shrink-0" />
             <span className="flex-grow truncate">State</span>
           </div>
           <div className="w-3/4">
@@ -86,7 +87,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="group" className="!text-base flex-shrink-0" />
+            <UserGroupIcon className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Assignees</span>
           </div>
           <div className="w-3/4">
@@ -99,7 +100,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="signal_cellular_alt" className="!text-base flex-shrink-0" />
+            <Signal className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Priority</span>
           </div>
           <div className="w-3/4">
@@ -112,7 +113,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <CalendarDays className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Start date</span>
           </div>
           <div>
@@ -132,7 +133,7 @@ export const PeekOverviewIssueProperties: FC<Props> = (props) => {
         </div>
         <div className="flex items-center gap-2 text-sm">
           <div className="flex-shrink-0 w-1/4 flex items-center gap-2 font-medium">
-            <Icon iconName="calendar_today" className="!text-base flex-shrink-0" />
+            <CalendarDays className="h-3.5 w-3.5" />
             <span className="flex-grow truncate">Due date</span>
           </div>
           <div>
diff --git a/web/components/issues/select/assignee.tsx b/web/components/issues/select/assignee.tsx
index 7deb7603f..431d944d6 100644
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@@ -5,7 +5,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { User2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -52,7 +53,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
             </div>
           ) : (
             <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-              <Icon iconName="person" className="!text-base !leading-4" />
+              <User2 className="h-4 w-4" />
               <span className="text-custom-text-200">Assignee</span>
             </div>
           )}
diff --git a/web/components/issues/select/date.tsx b/web/components/issues/select/date.tsx
index 01fbacda3..2408bf4e1 100644
--- a/web/components/issues/select/date.tsx
+++ b/web/components/issues/select/date.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { CalendarDays, X } from "lucide-react";
 // react-datepicker
 import DatePicker from "react-datepicker";
 // import "react-datepicker/dist/react-datepicker.css";
@@ -25,12 +25,12 @@ export const IssueDateSelect: React.FC<Props> = ({ label, maxDate, minDate, onCh
               <>
                 <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
+                  <X className="h-3 w-3" />
                 </button>
               </>
             ) : (
               <>
-                <CalendarDaysIcon className="h-3.5 w-3.5 flex-shrink-0" />
+                <CalendarDays className="h-3.5 w-3.5 flex-shrink-0" />
                 <span>{label}</span>
               </>
             )}
diff --git a/web/components/issues/select/estimate.tsx b/web/components/issues/select/estimate.tsx
index 7ac86f6b9..7141a24a0 100644
--- a/web/components/issues/select/estimate.tsx
+++ b/web/components/issues/select/estimate.tsx
@@ -3,7 +3,7 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // fetch-keys
 import useEstimateOption from "hooks/use-estimate-option";
 
@@ -22,11 +22,7 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2 text-xs">
-          <PlayIcon
-            className={`h-3.5 w-3.5 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
+          <Triangle className={`h-3.5 w-3.5 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
           <span className={value !== null ? "text-custom-text-100" : "text-custom-text-200"}>
             {estimatePoints?.find((e) => e.key === value)?.value ?? "Estimate"}
           </span>
@@ -39,7 +35,7 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-4 w-4" />
           </span>
           None
         </>
@@ -49,7 +45,7 @@ export const IssueEstimateSelect: React.FC<Props> = ({ value, onChange }) => {
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
+                <Triangle className="h-4 w-4" />
               </span>
               {point.value}
             </>
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index 3c9713469..a6d1ea8fa 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -7,7 +7,7 @@ import { IssueLabelService } from "services/issue";
 // ui
 import { IssueLabelsList } from "components/ui";
 // icons
-import { CheckIcon, MagnifyingGlassIcon, PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
+import { Check, Component, Plus, Search, Tag } from "lucide-react";
 // types
 import type { IIssueLabels } from "types";
 // fetch-keys
@@ -54,7 +54,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
               </span>
             ) : (
               <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs rounded shadow-sm border border-custom-border-300 hover:bg-custom-background-80">
-                <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                <Tag className="h-3.5 w-3.5 text-custom-text-200" />
                 <span className=" text-custom-text-200">Label</span>
               </span>
             )}
@@ -75,7 +75,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                 bg-custom-background-90 px-2 py-2 text-xs shadow-md focus:outline-none`}
             >
               <div className="flex w-full items-center justify-start rounded-sm  border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
+                <Search className="h-3 w-3 text-custom-text-200" />
                 <Combobox.Input
                   className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                   onChange={(event) => setQuery(event.target.value)}
@@ -113,7 +113,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     <span>{label.name}</span>
                                   </div>
                                   <div className="flex items-center justify-center rounded p-1">
-                                    <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                    <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                   </div>
                                 </div>
                               )}
@@ -123,7 +123,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                         return (
                           <div className="border-y border-custom-border-200">
                             <div className="flex select-none items-center gap-2 truncate p-2 text-custom-text-100">
-                              <RectangleGroupIcon className="h-3 w-3" /> {label.name}
+                              <Component className="h-3 w-3" /> {label.name}
                             </div>
                             <div>
                               {children.map((child) => (
@@ -148,7 +148,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                         <span>{child.name}</span>
                                       </div>
                                       <div className="flex items-center justify-center rounded p-1">
-                                        <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                        <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                       </div>
                                     </div>
                                   )}
@@ -170,7 +170,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                   onClick={() => setIsOpen(true)}
                 >
                   <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                    <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                    <Plus className="h-4 w-4" aria-hidden="true" />
                     <span>Create New Label</span>
                   </span>
                 </button>
diff --git a/web/components/issues/select/priority.tsx b/web/components/issues/select/priority.tsx
index 8624f8cf8..6657ec120 100644
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@@ -3,7 +3,7 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
@@ -20,14 +20,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
     label={
       <div className="flex items-center justify-center gap-2 text-xs">
         <span className="flex items-center">
-          <PriorityIcon
-            priority={value}
-            className={`text-xs ${value ? "" : "text-custom-text-200"}`}
-          />
-        </span>
-        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
-          {value ?? "Priority"}
+          <PriorityIcon priority={value} className={`h-3.5 w-3.5 ${value ? "" : "text-custom-text-200"}`} />
         </span>
+        <span className={`${value ? "" : "text-custom-text-200"} capitalize`}>{value ?? "Priority"}</span>
       </div>
     }
     onChange={onChange}
diff --git a/web/components/issues/select/project.tsx b/web/components/issues/select/project.tsx
index 5d1c964e1..3adeef258 100644
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@@ -3,7 +3,7 @@ import useProjects from "hooks/use-projects";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
+import { Clipboard } from "lucide-react";
 
 export interface IssueProjectSelectProps {
   value: string;
@@ -18,10 +18,8 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, o
       value={value}
       label={
         <>
-          <ClipboardDocumentListIcon className="h-3 w-3" />
-          <span className="block truncate">
-            {projects?.find((i) => i.id === value)?.identifier ?? "Project"}
-          </span>
+          <Clipboard className="h-3 w-3" />
+          <span className="block truncate">{projects?.find((i) => i.id === value)?.identifier ?? "Project"}</span>
         </>
       }
       onChange={(val: string) => onChange(val)}
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index b7424a52b..0abea45af 100644
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@@ -9,8 +9,8 @@ import { ProjectStateService } from "services/project";
 // ui
 import { CustomSearchSelect } from "components/ui";
 // icons
-import { PlusIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
+import { DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
+import { Plus } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // fetch keys
@@ -63,7 +63,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           ) : currentDefaultState ? (
             <StateGroupIcon stateGroup={currentDefaultState.group} color={currentDefaultState.color} />
           ) : (
-            <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
+            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
           )}
           {selectedOption?.name
             ? selectedOption.name
@@ -76,7 +76,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           className="flex w-full select-none items-center gap-2 rounded px-1 py-1.5 text-xs text-custom-text-200 hover:bg-custom-background-80"
           onClick={() => setIsOpen(true)}
         >
-          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+          <Plus className="h-4 w-4" aria-hidden="true" />
           Create New State
         </button>
       }
diff --git a/web/components/issues/sidebar-select/blocked.tsx b/web/components/issues/sidebar-select/blocked.tsx
index 3db9c7184..73bf747af 100644
--- a/web/components/issues/sidebar-select/blocked.tsx
+++ b/web/components/issues/sidebar-select/blocked.tsx
@@ -11,8 +11,8 @@ import { IssueService } from "services/issue";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon } from "components/icons";
+import { X } from "lucide-react";
+import { BlockedIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -139,7 +139,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges,
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))
diff --git a/web/components/issues/sidebar-select/blocker.tsx b/web/components/issues/sidebar-select/blocker.tsx
index 8d174e448..139212313 100644
--- a/web/components/issues/sidebar-select/blocker.tsx
+++ b/web/components/issues/sidebar-select/blocker.tsx
@@ -12,8 +12,8 @@ import { ExistingIssuesListModal } from "components/core";
 // services
 import { IssueService } from "services/issue";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
-import { BlockerIcon } from "components/icons";
+import { X } from "lucide-react";
+import { BlockerIcon } from "@plane/ui";
 // types
 import { BlockeIssueDetail, IIssue, ISearchIssueResponse } from "types";
 
@@ -149,7 +149,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges,
                         );
                       }}
                     >
-                      <XMarkIcon className="h-2 w-2" />
+                      <X className="h-2 w-2" />
                     </button>
                   </div>
                 ))
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 976dae14b..561072ceb 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -9,7 +9,7 @@ import useUser from "hooks/use-user";
 // icons
 import { X, CopyPlus } from "lucide-react";
 // components
-import { BlockerIcon } from "components/icons";
+import { BlockerIcon } from "@plane/ui";
 import { ExistingIssuesListModal } from "components/core";
 // services
 import { IssueService } from "services/issue";
diff --git a/web/components/issues/sidebar-select/estimate.tsx b/web/components/issues/sidebar-select/estimate.tsx
index 75c168853..a3a4c421c 100644
--- a/web/components/issues/sidebar-select/estimate.tsx
+++ b/web/components/issues/sidebar-select/estimate.tsx
@@ -5,7 +5,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 
 type Props = {
   value: number | null;
@@ -21,11 +21,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
       value={value}
       customButton={
         <div className="flex items-center gap-1.5 !text-sm bg-custom-background-80 rounded px-2.5 py-0.5">
-          <PlayIcon
-            className={`h-4 w-4 -rotate-90 ${
-              value !== null ? "text-custom-text-100" : "text-custom-text-200"
-            }`}
-          />
+          <Triangle className={`h-4 w-4 ${value !== null ? "text-custom-text-100" : "text-custom-text-200"}`} />
           {estimatePoints?.find((e) => e.key === value)?.value ?? "No estimate"}
         </div>
       }
@@ -35,7 +31,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-4 w-4" />
           </span>
           None
         </>
@@ -45,7 +41,7 @@ export const SidebarEstimateSelect: React.FC<Props> = ({ value, onChange, disabl
           <CustomSelect.Option key={point.key} value={point.key}>
             <>
               <span>
-                <PlayIcon className="h-4 w-4 -rotate-90" />
+                <Triangle className="h-4 w-4" />
               </span>
               {point.value}
             </>
diff --git a/web/components/issues/sidebar-select/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 99b4ceb15..dffb97f56 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -12,7 +12,7 @@ import useUser from "hooks/use-user";
 // ui
 import { Input, Spinner } from "@plane/ui";
 // icons
-import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Component, Plus, Tag, X } from "lucide-react";
 // types
 import { IIssue, IIssueLabels } from "types";
 // fetch-keys
@@ -94,7 +94,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
     <div className={`space-y-3 py-3 ${uneditable ? "opacity-60" : ""}`}>
       <div className="flex items-start justify-between">
         <div className="flex basis-1/2 items-center gap-x-2 text-sm text-custom-text-200">
-          <TagIcon className="h-4 w-4" />
+          <Tag className="h-4 w-4" />
           <p>Label</p>
         </div>
         <div className="basis-1/2">
@@ -121,7 +121,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                       }}
                     />
                     {label.name}
-                    <XMarkIcon className="h-2 w-2 group-hover:text-red-500" />
+                    <X className="h-2 w-2 group-hover:text-red-500" />
                   </span>
                 );
             })}
@@ -188,7 +188,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                                     return (
                                       <div className="border-y border-custom-border-100 bg-custom-background-90">
                                         <div className="flex select-none items-center gap-2 truncate p-2 font-medium text-custom-text-100">
-                                          <RectangleGroupIcon className="h-3 w-3" />
+                                          <Component className="h-3 w-3" />
                                           {label.name}
                                         </div>
                                         <div>
@@ -240,11 +240,11 @@ export const SidebarLabelSelect: React.FC<Props> = ({
               >
                 {createLabelForm ? (
                   <>
-                    <XMarkIcon className="h-3 w-3" /> Cancel
+                    <X className="h-3 w-3" /> Cancel
                   </>
                 ) : (
                   <>
-                    <PlusIcon className="h-3 w-3" /> New
+                    <Plus className="h-3 w-3" /> New
                   </>
                 )}
               </button>
@@ -317,10 +317,10 @@ export const SidebarLabelSelect: React.FC<Props> = ({
             className="grid place-items-center rounded bg-red-500 p-2.5"
             onClick={() => setCreateLabelForm(false)}
           >
-            <XMarkIcon className="h-4 w-4 text-white" />
+            <X className="h-4 w-4 text-white" />
           </button>
           <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
-            <PlusIcon className="h-4 w-4 text-white" />
+            <Plus className="h-4 w-4 text-white" />
           </button>
         </form>
       )}
diff --git a/web/components/issues/sidebar-select/priority.tsx b/web/components/issues/sidebar-select/priority.tsx
index 512aba5c6..2ea835bc2 100644
--- a/web/components/issues/sidebar-select/priority.tsx
+++ b/web/components/issues/sidebar-select/priority.tsx
@@ -3,7 +3,7 @@ import React from "react";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
@@ -32,7 +32,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
         }`}
       >
         <span className="grid place-items-center -my-1">
-          <PriorityIcon priority={value} className="!text-sm" />
+          <PriorityIcon priority={value} className="h-3.5 w-3.5" />
         </span>
         <span>{value ?? "None"}</span>
       </div>
@@ -45,7 +45,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
     {PRIORITIES.map((option) => (
       <CustomSelect.Option key={option} value={option} className="capitalize">
         <>
-          <PriorityIcon priority={option} className="text-sm" />
+          <PriorityIcon priority={option} className="h-3.5 w-3.5" />
           {option ?? "None"}
         </>
       </CustomSelect.Option>
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index 393c6fa3b..3ffc18886 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -8,7 +8,7 @@ import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
 import { X } from "lucide-react";
-import { BlockerIcon, RelatedIcon } from "components/icons";
+import { BlockerIcon, RelatedIcon } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services
diff --git a/web/components/issues/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index ca62831b6..cea535c2f 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -8,9 +8,7 @@ import useSWR from "swr";
 import { ProjectStateService } from "services/project";
 // ui
 import { CustomSelect } from "components/ui";
-import { Spinner } from "@plane/ui";
-// icons
-import { StateGroupIcon } from "components/icons";
+import { Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index b695c3d8f..d92b58b98 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -30,27 +30,16 @@ import {
   SidebarRelatesSelect,
 } from "components/issues";
 // ui
-import { CustomDatePicker, Icon } from "components/ui";
+import { CustomDatePicker } from "components/ui";
 // icons
-import {
-  LinkIcon,
-  CalendarDaysIcon,
-  TrashIcon,
-  PlusIcon,
-  Squares2X2Icon,
-  ChartBarIcon,
-  UserGroupIcon,
-  PlayIcon,
-  UserIcon,
-  RectangleGroupIcon,
-} from "@heroicons/react/24/outline";
+import { Bell, CalendarDays, LinkIcon, Plus, Signal, Trash2, Triangle, User2 } from "lucide-react";
+import { ContrastIcon, DiceIcon, DoubleCircleIcon, UserGroupIcon } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
 import type { ICycle, IIssue, IIssueLink, linkDetails, IModule } from "types";
 // fetch-keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-import { ContrastIcon } from "components/icons";
 
 type Props = {
   control: any;
@@ -312,7 +301,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     else handleSubscribe();
                   }}
                 >
-                  <Icon iconName="notifications" />
+                  <Bell className="h-3.5 w-3.5" />
                   {loading ? "Loading..." : subscribed ? "Unsubscribe" : "Subscribe"}
                 </button>
               )}
@@ -331,7 +320,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 className="rounded-md border border-red-500 p-2 text-red-500 shadow-sm duration-300 hover:bg-red-500/20 focus:outline-none"
                 onClick={() => setDeleteIssueModal(true)}
               >
-                <TrashIcon className="h-3.5 w-3.5" />
+                <Trash2 className="h-3.5 w-3.5" />
               </button>
             )}
           </div>
@@ -344,7 +333,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+                      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
                       <p>State</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -386,7 +375,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <ChartBarIcon className="h-4 w-4 flex-shrink-0" />
+                      <Signal className="h-4 w-4 flex-shrink-0" />
                       <p>Priority</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -407,7 +396,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && isEstimateActive && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+                      <Triangle className="h-4 w-4 flex-shrink-0 " />
                       <p>Estimate</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -432,7 +421,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <UserIcon className="h-4 w-4 flex-shrink-0" />
+                      <User2 className="h-4 w-4 flex-shrink-0" />
                       <p>Parent</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -534,7 +523,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
                       <p>Start date</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -562,7 +551,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                      <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                      <CalendarDays className="h-4 w-4 flex-shrink-0" />
                       <p>Due date</p>
                     </div>
                     <div className="sm:basis-1/2">
@@ -609,7 +598,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                 {(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && (
                   <div className="flex flex-wrap items-center py-2">
                     <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
-                      <RectangleGroupIcon className="h-4 w-4 flex-shrink-0" />
+                      <DiceIcon className="h-4 w-4 flex-shrink-0" />
                       <p>Module</p>
                     </div>
                     <div className="space-y-1 sm:w-1/2">
@@ -647,7 +636,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     onClick={() => setLinkModal(true)}
                     disabled={uneditable}
                   >
-                    <PlusIcon className="h-4 w-4" />
+                    <Plus className="h-4 w-4" />
                   </button>
                 )}
               </div>
diff --git a/web/components/issues/view-select/assignee.tsx b/web/components/issues/view-select/assignee.tsx
index dba80eba6..089e04691 100644
--- a/web/components/issues/view-select/assignee.tsx
+++ b/web/components/issues/view-select/assignee.tsx
@@ -3,8 +3,9 @@ import { useRouter } from "next/router";
 // services
 import { TrackEventService } from "services/track_event.service";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
+import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
 import { Tooltip } from "@plane/ui";
+import { User2 } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
 // hooks
@@ -72,7 +73,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
           </div>
         ) : (
           <div className="flex items-center justify-center gap-2 px-1.5 py-1 rounded shadow-sm border border-custom-border-300">
-            <Icon iconName="person" className="text-sm !leading-4" />
+            <User2 className="h-4 w-4" />
           </div>
         )}
       </div>
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
index 0cbce8281..8bf702ada 100644
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@@ -8,7 +8,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 import { CustomSelect } from "components/ui";
 import { Tooltip } from "@plane/ui";
 // icons
-import { PlayIcon } from "@heroicons/react/24/outline";
+import { Triangle } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
 
@@ -45,7 +45,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
   const estimateLabels = (
     <Tooltip tooltipHeading="Estimate" tooltipContent={estimateValue} position={tooltipPosition}>
       <div className="flex items-center gap-1 text-custom-text-200">
-        <PlayIcon className="h-3.5 w-3.5 -rotate-90" />
+        <Triangle className="h-3.5 w-3.5" />
         {estimateValue ?? "None"}
       </div>
     </Tooltip>
@@ -80,7 +80,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
       <CustomSelect.Option value={null}>
         <>
           <span>
-            <PlayIcon className="h-4 w-4 -rotate-90" />
+            <Triangle className="h-4 w-4" />
           </span>
           None
         </>
@@ -89,7 +89,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
         <CustomSelect.Option key={estimate.id} value={estimate.key}>
           <>
             <span>
-              <PlayIcon className="h-4 w-4 -rotate-90" />
+              <Triangle className="h-4 w-4" />
             </span>
             {estimate.value}
           </>
diff --git a/web/components/issues/view-select/label.tsx b/web/components/issues/view-select/label.tsx
index e3e54f4d3..5a1043fb0 100644
--- a/web/components/issues/view-select/label.tsx
+++ b/web/components/issues/view-select/label.tsx
@@ -9,7 +9,7 @@ import { CreateLabelModal } from "components/labels";
 import { CustomSearchSelect } from "components/ui";
 import { Tooltip } from "@plane/ui";
 // icons
-import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
+import { Plus, Tag } from "lucide-react";
 // types
 import { IUser, IIssue, IIssueLabels } from "types";
 // fetch-keys
@@ -107,7 +107,7 @@ export const ViewLabelSelect: FC<Props> = ({
           </>
         ) : (
           <>
-            <TagIcon className="h-3.5 w-3.5 text-custom-text-200" />
+            <Tag className="h-3.5 w-3.5 text-custom-text-200" />
           </>
         )}
       </div>
@@ -121,7 +121,7 @@ export const ViewLabelSelect: FC<Props> = ({
       onClick={() => setLabelModal(true)}
     >
       <span className="flex items-center justify-start gap-1 text-custom-text-200">
-        <PlusIcon className="h-4 w-4" aria-hidden="true" />
+        <Plus className="h-4 w-4" aria-hidden="true" />
         <span>Create New Label</span>
       </span>
     </button>
diff --git a/web/components/issues/view-select/priority.tsx b/web/components/issues/view-select/priority.tsx
index 5d9bca529..419013a30 100644
--- a/web/components/issues/view-select/priority.tsx
+++ b/web/components/issues/view-select/priority.tsx
@@ -4,9 +4,7 @@ import { useRouter } from "next/router";
 import { TrackEventService } from "services/track_event.service";
 // ui
 import { CustomSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
-// icons
-import { PriorityIcon } from "components/icons/priority-icon";
+import { Tooltip, PriorityIcon } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
@@ -76,7 +74,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             <span className="flex gap-1 items-center text-custom-text-200 text-xs">
               <PriorityIcon
                 priority={issue.priority}
-                className={`text-sm ${
+                className={`h-3.5 w-3.5 ${
                   issue.priority === "urgent"
                     ? "text-white"
                     : issue.priority === "high"
@@ -99,7 +97,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
       {PRIORITIES?.map((priority) => (
         <CustomSelect.Option key={priority} value={priority} className="capitalize">
           <>
-            <PriorityIcon priority={priority} className="text-sm" />
+            <PriorityIcon priority={priority} className="h-3.5 w-3.5" />
             {priority ?? "None"}
           </>
         </CustomSelect.Option>
diff --git a/web/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index fa05ae93f..d55e1233d 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -9,7 +9,7 @@ import { IssueLabelService } from "services/issue";
 // ui
 import { Button, Input } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // types
 import type { IUser, IIssueLabels, IState } from "types";
 // constants
@@ -120,7 +120,7 @@ export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                   }}
                                 />
                               )}
-                              <ChevronDownIcon
+                              <ChevronDown
                                 className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                   open ? "text-gray-600" : "text-gray-400"
                                 }`}
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 99c69827f..dee1c2f68 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // services
 import { IssueLabelService } from "services/issue";
 // hooks
@@ -98,7 +98,7 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
index e73ea3c5b..078a07d86 100644
--- a/web/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // icons
-import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { LayerStackIcon } from "@plane/ui";
+import { Search } from "lucide-react";
 // services
 import { IssueLabelService } from "services/issue";
 // types
@@ -97,7 +98,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
             <Dialog.Panel className="relative mx-auto max-w-2xl transform rounded-xl border border-custom-border-200 bg-custom-background-100 shadow-2xl transition-all">
               <Combobox>
                 <div className="relative m-1">
-                  <MagnifyingGlassIcon
+                  <Search
                     className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-100 text-opacity-40"
                     aria-hidden="true"
                   />
@@ -156,7 +157,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
 
                 {query !== "" && filteredLabels.length === 0 && (
                   <div className="py-14 px-6 text-center sm:px-14">
-                    <RectangleStackIcon
+                    <LayerStackIcon
                       className="mx-auto h-6 w-6 text-custom-text-100 text-opacity-40"
                       aria-hidden="true"
                     />
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index 1e8ec3086..74442d6c1 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -11,8 +11,7 @@ import { IssueLabelService } from "services/issue";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, XMarkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { Component, X } from "lucide-react";
+import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
 import { IUser, IIssueLabels } from "types";
 // fetch-keys
@@ -87,26 +86,26 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
                 <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
                   <span className="flex items-center justify-start gap-2">
-                    <PlusIcon className="h-4 w-4" />
+                    <Plus className="h-4 w-4" />
                     <span>Add more labels</span>
                   </span>
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={() => editLabel(label)}>
                   <span className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-4 w-4" />
+                    <Pencil className="h-4 w-4" />
                     <span>Edit label</span>
                   </span>
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem onClick={handleLabelDelete}>
                   <span className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-4 w-4" />
+                    <Trash2 className="h-4 w-4" />
                     <span>Delete label</span>
                   </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
               <Disclosure.Button>
                 <span>
-                  <ChevronDownIcon
+                  <ChevronDown
                     className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
@@ -149,13 +148,13 @@ export const SingleLabelGroup: React.FC<Props> = ({
                         >
                           <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
                             <span className="flex items-center justify-start gap-2">
-                              <XMarkIcon className="h-4 w-4" />
+                              <X className="h-4 w-4" />
                               <span>Remove from group</span>
                             </span>
                           </CustomMenu.MenuItem>
                           <CustomMenu.MenuItem onClick={() => editLabel(child)}>
                             <span className="flex items-center justify-start gap-2">
-                              <PencilIcon className="h-4 w-4" />
+                              <Pencil className="h-4 w-4" />
                               <span>Edit label</span>
                             </span>
                           </CustomMenu.MenuItem>
diff --git a/web/components/labels/single-label.tsx b/web/components/labels/single-label.tsx
index c163a3735..c23dbf2ff 100644
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@@ -7,8 +7,7 @@ import { CustomMenu } from "components/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
-import { PencilIcon } from "@heroicons/react/24/outline";
-import { Component, X } from "lucide-react";
+import { Component, Pencil, X } from "lucide-react";
 
 type Props = {
   label: IIssueLabels;
@@ -17,12 +16,7 @@ type Props = {
   handleLabelDelete: () => void;
 };
 
-export const SingleLabel: React.FC<Props> = ({
-  label,
-  addLabelToGroup,
-  editLabel,
-  handleLabelDelete,
-}) => {
+export const SingleLabel: React.FC<Props> = ({ label, addLabelToGroup, editLabel, handleLabelDelete }) => {
   const [isMenuActive, setIsMenuActive] = useState(false);
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
 
@@ -60,16 +54,13 @@ export const SingleLabel: React.FC<Props> = ({
           </CustomMenu.MenuItem>
           <CustomMenu.MenuItem onClick={() => editLabel(label)}>
             <span className="flex items-center justify-start gap-2">
-              <PencilIcon className="h-4 w-4" />
+              <Pencil className="h-4 w-4" />
               <span>Edit label</span>
             </span>
           </CustomMenu.MenuItem>
         </CustomMenu>
         <div className="py-0.5">
-          <button
-            className="flex h-4 w-4 items-center justify-start gap-2"
-            onClick={handleLabelDelete}
-          >
+          <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={handleLabelDelete}>
             <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
           </button>
         </div>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 7b362ba12..6d06c493d 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
 import type { IUser, IModule } from "types";
 // fetch-keys
@@ -95,7 +95,7 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index f35d88e4c..5b527073a 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "@plane/ui";
-// icons
-import { ModuleStatusIcon } from "components/icons";
+import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // helpers
 import { renderShortDate } from "helpers/date-time.helper";
 // types
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index 8ca5c66c0..59b2987ab 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -6,7 +6,7 @@ import { ProjectService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { UserCircle } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -47,11 +47,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
       value={value}
       label={
         <div className="flex items-center gap-2">
-          {selectedOption ? (
-            <Avatar user={selectedOption} />
-          ) : (
-            <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
-          )}
+          {selectedOption ? <Avatar user={selectedOption} /> : <UserCircle className="h-4 w-4 text-custom-text-200" />}
           {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
         </div>
       }
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
index ce95fae9d..1947c3cb4 100644
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@@ -6,7 +6,7 @@ import { ProjectService } from "services/project";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
diff --git a/web/components/modules/select/status.tsx b/web/components/modules/select/status.tsx
index 8c16ca14c..715b09c52 100644
--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@@ -5,8 +5,7 @@ import { Controller, FieldError, Control } from "react-hook-form";
 // ui
 import { CustomSelect } from "components/ui";
 // icons
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { ModuleStatusIcon } from "components/icons";
+import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
 import type { IModule } from "types";
 // constants
@@ -26,17 +25,11 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error }) => (
       <CustomSelect
         value={value}
         label={
-          <div
-            className={`flex items-center justify-center gap-2 text-xs ${
-              error ? "text-red-500" : ""
-            }`}
-          >
+          <div className={`flex items-center justify-center gap-2 text-xs ${error ? "text-red-500" : ""}`}>
             {value ? (
               <ModuleStatusIcon status={value} />
             ) : (
-              <Squares2X2Icon
-                className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`}
-              />
+              <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
             )}
             {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
               <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
index 88ddd73b4..8d7e770cb 100644
--- a/web/components/modules/sidebar-select/select-lead.tsx
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@@ -6,7 +6,7 @@ import { ProjectService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
-import { UserCircleIcon } from "@heroicons/react/24/outline";
+import { UserCircle2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -46,7 +46,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
   return (
     <div className="flex items-center justify-start gap-1">
       <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-        <UserCircleIcon className="h-5 w-5" />
+        <UserCircle2 className="h-5 w-5" />
         <span>Lead</span>
       </div>
       <div className="sm:basis-1/2">
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index b37acc4c1..f31e9b1a4 100644
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@@ -8,8 +8,8 @@ import useSWR from "swr";
 import { ProjectService } from "services/project";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { UserGroupIcon } from "@plane/ui";
 // icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
diff --git a/web/components/modules/sidebar-select/select-status.tsx b/web/components/modules/sidebar-select/select-status.tsx
index f67f40222..c7b40b316 100644
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@@ -3,9 +3,8 @@ import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
 // ui
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
+import { DoubleCircleIcon } from "@plane/ui";
 import { CustomSelect } from "components/ui";
-// icons
 // types
 import { IModule } from "types";
 // common
@@ -21,7 +20,7 @@ type Props = {
 export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
   <div className="flex flex-wrap items-center py-2">
     <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-      <Squares2X2Icon className="h-4 w-4 flex-shrink-0" />
+      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
       <p>Status</p>
     </div>
     <div className="sm:basis-1/2">
@@ -31,11 +30,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
         render={({ field: { value } }) => (
           <CustomSelect
             label={
-              <span
-                className={`flex items-center gap-2 text-left capitalize ${
-                  value ? "" : "text-custom-text-100"
-                }`}
-              >
+              <span className={`flex items-center gap-2 text-left capitalize ${value ? "" : "text-custom-text-100"}`}>
                 <span
                   className="h-2 w-2 flex-shrink-0 rounded-full"
                   style={{
@@ -53,10 +48,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
             {MODULE_STATUS.map((option) => (
               <CustomSelect.Option key={option.value} value={option.value}>
                 <>
-                  <span
-                    className="h-2 w-2 flex-shrink-0 rounded-full"
-                    style={{ backgroundColor: option.color }}
-                  />
+                  <span className="h-2 w-2 flex-shrink-0 rounded-full" style={{ backgroundColor: option.color }} />
                   {option.label}
                 </>
               </CustomSelect.Option>
diff --git a/web/components/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index 90f33effe..3e1e25ccd 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -2,15 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Controller, useForm } from "react-hook-form";
-import {
-  ArrowLongRightIcon,
-  CalendarDaysIcon,
-  ChartPieIcon,
-  ChevronDownIcon,
-  DocumentIcon,
-  PlusIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
 import { Disclosure, Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // services
@@ -26,8 +17,17 @@ import ProgressChart from "components/core/sidebar/progress-chart";
 import { CustomMenu, CustomSelect } from "components/ui";
 import { Loader, ProgressBar } from "@plane/ui";
 // icon
-import { ExclamationIcon } from "components/icons";
-import { LinkIcon } from "@heroicons/react/20/solid";
+import {
+  AlertCircle,
+  CalendarDays,
+  ChevronDown,
+  File,
+  LinkIcon,
+  MoveRight,
+  PieChart,
+  Plus,
+  Trash2,
+} from "lucide-react";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
@@ -258,7 +258,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                             module.start_date ? "" : "text-custom-text-200"
                           }`}
                         >
-                          <CalendarDaysIcon className="h-3 w-3" />
+                          <CalendarDays className="h-3 w-3" />
                           <span>{renderShortDateWithYearFormat(new Date(`${module.start_date}`), "Start date")}</span>
                         </Popover.Button>
 
@@ -292,7 +292,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     )}
                   </Popover>
                   <span>
-                    <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
+                    <MoveRight className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
                     {({}) => (
@@ -302,7 +302,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                             module.target_date ? "" : "text-custom-text-200"
                           }`}
                         >
-                          <CalendarDaysIcon className="h-3 w-3 " />
+                          <CalendarDays className="h-3 w-3 " />
 
                           <span>{renderShortDateWithYearFormat(new Date(`${module?.target_date}`), "End date")}</span>
                         </Popover.Button>
@@ -348,7 +348,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
                         <span className="flex items-center justify-start gap-2">
-                          <TrashIcon className="h-4 w-4" />
+                          <Trash2 className="h-4 w-4" />
                           <span>Delete</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -394,7 +394,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
                   <div className="flex items-center justify-start gap-1">
                     <div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
-                      <ChartPieIcon className="h-5 w-5" />
+                      <PieChart className="h-5 w-5" />
                       <span>Progress</span>
                     </div>
 
@@ -427,14 +427,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
                       {isStartValid && isEndValid ? (
                         <Disclosure.Button className="p-1">
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             Invalid date. Please enter valid date.
                           </span>
@@ -448,7 +445,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                             <div className="flex  items-start justify-between gap-4 py-2 text-xs">
                               <div className="flex items-center gap-1">
                                 <span>
-                                  <DocumentIcon className="h-3 w-3 text-custom-text-200" />
+                                  <File className="h-3 w-3 text-custom-text-200" />
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
@@ -497,14 +494,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
                       {module.total_issues > 0 ? (
                         <Disclosure.Button className="p-1">
-                          <ChevronDownIcon
-                            className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                            aria-hidden="true"
-                          />
+                          <ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
+                          <AlertCircle height={14} width={14} className="text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
@@ -547,7 +541,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                   className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
                   onClick={() => setModuleLinkModal(true)}
                 >
-                  <PlusIcon className="h-4 w-4" />
+                  <Plus className="h-4 w-4" />
                 </button>
               </div>
               <div className="mt-2 space-y-2 hover:bg-custom-background-80">
diff --git a/web/components/modules/single-module-card.tsx b/web/components/modules/single-module-card.tsx
index 981815736..542b902ed 100644
--- a/web/components/modules/single-module-card.tsx
+++ b/web/components/modules/single-module-card.tsx
@@ -12,9 +12,7 @@ import { DeleteModuleModal } from "components/modules";
 import { AssigneesList, CustomMenu } from "components/ui";
 import { Tooltip } from "@plane/ui";
 // icons
-import { CalendarDaysIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { TargetIcon } from "components/icons";
-
+import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
@@ -134,24 +132,24 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
                 </div>
                 {module.is_favorite ? (
                   <button type="button" onClick={handleRemoveFromFavorites}>
-                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                   </button>
                 ) : (
                   <button type="button" onClick={handleAddToFavorites}>
-                    <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                   </button>
                 )}
 
                 <CustomMenu width="auto" verticalEllipsis>
                   <CustomMenu.MenuItem onClick={handleEditModule}>
                     <span className="flex items-center justify-start gap-2">
-                      <PencilIcon className="h-4 w-4" />
+                      <Pencil className="h-4 w-4" />
                       <span>Edit module</span>
                     </span>
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={handleDeleteModule}>
                     <span className="flex items-center justify-start gap-2">
-                      <TrashIcon className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                       <span>Delete module</span>
                     </span>
                   </CustomMenu.MenuItem>
@@ -166,12 +164,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
             </div>
             <div className="grid grid-cols-2 gap-2 text-custom-text-200">
               <div className="flex items-start gap-1">
-                <CalendarDaysIcon className="h-4 w-4" />
+                <CalendarDays className="h-4 w-4" />
                 <span>Start:</span>
                 <span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
               </div>
               <div className="flex items-start gap-1">
-                <TargetIcon className="h-4 w-4" />
+                <Target className="h-4 w-4" />
                 <span>End:</span>
                 <span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
               </div>
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index ec3c8300b..473998964 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -7,8 +7,9 @@ import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
 
 // icons
-import { CustomMenu, Icon } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveRestore, Clock, User2 } from "lucide-react";
 
 // helper
 import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@@ -85,7 +86,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               ) : notification.triggered_by_details.display_name?.[0] ? (
                 notification.triggered_by_details.display_name?.[0]?.toUpperCase()
               ) : (
-                <Icon iconName="person" className="h-6 w-6" />
+                <User2 className="h-4 w-4" />
               )}
             </span>
           </div>
@@ -144,7 +145,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           </p>
           {notification.snoozed_till ? (
             <p className="text-custom-text-300 flex items-center justify-end gap-x-1 flex-shrink-0">
-              <Icon iconName="schedule" className="!text-base -my-0.5" />
+              <Clock className="h-4 w-4" />
               <span>
                 Till {renderShortDate(notification.snoozed_till)}, {render12HourFormatTime(notification.snoozed_till)}
               </span>
@@ -172,7 +173,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
           {
             id: 2,
             name: notification.archived_at ? "Unarchive" : "Archive",
-            icon: notification.archived_at ? "unarchive" : "archive",
+            icon: notification.archived_at ? (
+              <ArchiveRestore className="h-4 w-4 text-custom-text-300" />
+            ) : (
+              <ArchiveIcon className="h-4 w-4 text-custom-text-300" />
+            ),
             onClick: () => {
               markNotificationArchivedStatus(notification.id).then(() => {
                 setToastAlert({
@@ -193,7 +198,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               key={item.id}
               className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded outline-none"
             >
-              <Icon iconName={item.icon} className="h-5 w-5 text-custom-text-300" />
+              {item.icon}
             </button>
           </Tooltip>
         ))}
@@ -206,7 +211,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               }}
               customButton={
                 <div className="text-sm flex w-full items-center gap-x-2 bg-custom-background-80 hover:bg-custom-background-100 p-0.5 rounded">
-                  <Icon iconName="schedule" className="h-5 w-5 text-custom-text-300" />
+                  <Clock className="h-4 w-4 text-custom-text-300" />
                 </div>
               }
               optionsClassName="!z-20"
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 7bc390453..3ccf29793 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 
 // components
-import { CustomMenu, Icon } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+import { ArchiveIcon, Tooltip } from "@plane/ui";
+
+//icon
+import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
+
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 
@@ -76,7 +80,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 notificationMutate();
               }}
             >
-              <Icon iconName="refresh" className={`${isRefreshing ? "animate-spin" : ""}`} />
+              <RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? "animate-spin" : ""}`} />
             </button>
           </Tooltip>
           <Tooltip tooltipContent="Unread notifications">
@@ -88,19 +92,19 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
                 setReadNotification((prev) => !prev);
               }}
             >
-              <Icon iconName="filter_list" />
+              <ListFilter className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
           <CustomMenu
             customButton={
               <div className="grid place-items-center ">
-                <Icon iconName="more_vert" />
+                <MoreVertical className="h-3.5 w-3.5" />
               </div>
             }
           >
             <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
               <div className="flex items-center gap-2">
-                <Icon iconName="done_all" />
+                <CheckCheck className="h-3.5 w-3.5" />
                 Mark all as read
               </div>
             </CustomMenu.MenuItem>
@@ -113,7 +117,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="schedule" />
+                <Clock className="h-3.5 w-3.5" />
                 Show snoozed
               </div>
             </CustomMenu.MenuItem>
@@ -126,14 +130,14 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
               }}
             >
               <div className="flex items-center gap-2">
-                <Icon iconName="archive" />
+                <ArchiveIcon className="h-3.5 w-3.5" />
                 Show archived
               </div>
             </CustomMenu.MenuItem>
           </CustomMenu>
           <Tooltip tooltipContent="Close">
             <button type="button" onClick={() => closePopover()}>
-              <Icon iconName="close" />
+              <X className="h-3.5 w-3.5" />
             </button>
           </Tooltip>
         </div>
@@ -149,7 +153,7 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
             }}
           >
             <h4 className="flex items-center gap-2 pb-4">
-              <Icon iconName="arrow_back" />
+              <ArrowLeft className="h-3.5 w-3.5" />
               <span className="ml-2 font-medium">
                 {snoozed
                   ? "Snoozed Notifications"
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index 8a9f2822f..c84fddcc7 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -7,7 +7,7 @@ import { EmptyState } from "components/common";
 import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
 import { Loader, Tooltip } from "@plane/ui";
 // icons
-import { NotificationsOutlined } from "@mui/icons-material";
+import { Bell } from "lucide-react";
 // images
 import emptyNotification from "public/empty-state/notification.svg";
 // helpers
@@ -75,7 +75,7 @@ export const NotificationPopover = () => {
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                   } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  <NotificationsOutlined fontSize="small" />
+                  <Bell className="h-5 w-5" />
                   {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
                     store?.theme?.sidebarCollapsed ? (
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 2a64853dd..4688104f4 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -8,7 +8,8 @@ import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 import useToast from "hooks/use-toast";
 // components
 import { Button } from "@plane/ui";
-import { Icon, CustomDatePicker, CustomSelect } from "components/ui";
+import { CustomDatePicker, CustomSelect } from "components/ui";
+import { X } from "lucide-react";
 // types
 import type { IUserNotification } from "types";
 
@@ -150,7 +151,7 @@ export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
 
                     <div>
                       <button type="button" onClick={handleClose}>
-                        <Icon iconName="close" className="w-5 h-5 text-custom-text-100" />
+                        <X className="w-5 h-5 text-custom-text-100" />
                       </button>
                     </div>
                   </div>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index c33101b5b..207ecedb1 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -13,8 +13,7 @@ import { Button, Input } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Plus, X } from "lucide-react";
 // types
 import { IUser, IWorkspace, TOnboardingSteps } from "types";
 // constants
@@ -108,7 +107,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                 className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
               >
                 <span className="text-xs sm:text-sm">{ROLE[value]}</span>
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
               </Listbox.Button>
 
               <Transition
@@ -139,7 +138,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
                         {({ selected }) => (
                           <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">{value}</div>
-                            {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                            {selected && <Check className="h-4 w-4 flex-shrink-0" />}
                           </div>
                         )}
                       </Listbox.Option>
@@ -157,7 +156,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
           className="hidden group-hover:grid self-center place-items-center rounded -ml-3"
           onClick={() => remove(index)}
         >
-          <XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
+          <X className="h-3.5 w-3.5 text-custom-text-200" />
         </button>
       )}
     </div>
@@ -255,7 +254,7 @@ export const InviteMembers: React.FC<Props> = (props) => {
           className="flex items-center gap-2 outline-custom-primary-100 bg-transparent text-custom-primary-100 text-xs font-medium py-2 pr-3"
           onClick={appendField}
         >
-          <PlusIcon className="h-3 w-3" />
+          <Plus className="h-3 w-3" />
           Add another
         </button>
       </div>
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 736480b55..d846614dd 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -9,7 +9,7 @@ import useUser from "hooks/use-user";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircle } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -110,7 +110,7 @@ export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange,
                   <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
                 </div>
                 <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
-                  <CheckCircleIcon className="h-5 w-5" />
+                  <CheckCircle className="h-5 w-5" />
                 </span>
               </div>
             );
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index 001e13be8..9b3384f44 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -9,7 +9,7 @@ import { TourSidebar } from "components/onboarding";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { X } from "lucide-react";
 // images
 import PlaneWhiteLogo from "public/plane-logos/white-horizontal.svg";
 import IssuesTour from "public/onboarding/issues.webp";
@@ -121,7 +121,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
             className="fixed top-[19%] sm:top-[11.5%] right-[9%] md:right-[24%] lg:right-[19%] border border-custom-text-100 rounded-full p-1 translate-x-1/2 -translate-y-1/2 z-10 cursor-pointer"
             onClick={onComplete}
           >
-            <XMarkIcon className="h-3 w-3 text-custom-text-100" />
+            <X className="h-3 w-3 text-custom-text-100" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 lg:col-span-7 h-full overflow-hidden">
diff --git a/web/components/onboarding/tour/sidebar.tsx b/web/components/onboarding/tour/sidebar.tsx
index dce49f098..dbabab4f5 100644
--- a/web/components/onboarding/tour/sidebar.tsx
+++ b/web/components/onboarding/tour/sidebar.tsx
@@ -1,11 +1,6 @@
 // icons
-import {
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-} from "@mui/icons-material";
+import { ContrastIcon, DiceIcon, LayersIcon, PhotoFilterIcon } from "@plane/ui";
+import { FileText } from "lucide-react";
 // types
 import { TTourSteps } from "./root";
 
@@ -15,23 +10,23 @@ const sidebarOptions: {
 }[] = [
   {
     key: "issues",
-    Icon: FilterNoneOutlined,
+    Icon: LayersIcon,
   },
   {
     key: "cycles",
-    Icon: ContrastOutlined,
+    Icon: ContrastIcon,
   },
   {
     key: "modules",
-    Icon: DatasetOutlined,
+    Icon: DiceIcon,
   },
   {
     key: "views",
-    Icon: PhotoFilterOutlined,
+    Icon: PhotoFilterIcon,
   },
   {
     key: "pages",
-    Icon: ArticleOutlined,
+    Icon: FileText,
   },
 ];
 
@@ -58,12 +53,7 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
           }`}
           onClick={() => setStep(option.key)}
         >
-          <option.Icon
-            sx={{
-              fontSize: 18,
-            }}
-            aria-hidden="true"
-          />
+          <option.Icon className="h-4 w-4" aria-hidden="true" />
           {option.key}
         </h5>
       ))}
diff --git a/web/components/pages/create-block.tsx b/web/components/pages/create-block.tsx
index 22f140bc3..1decabae0 100644
--- a/web/components/pages/create-block.tsx
+++ b/web/components/pages/create-block.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
-import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { SendHorizonal } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { PageService } from "services/page.service";
@@ -114,7 +114,7 @@ export const CreateBlock: FC<Props> = ({ user }) => {
 
         <div className="absolute right-2 bottom-2 flex items-center p-1">
           <button type="submit">
-            <PaperAirplaneIcon className="h-5 w-5 text-custom-text-100" />
+            <SendHorizonal className="h-5 w-5 text-custom-text-100" />
           </button>
         </div>
       </form>
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index f87b1e6f3..45d463555 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState, FC, Dispatch, SetStateAction, useRef } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
-import { SparklesIcon } from "@heroicons/react/24/outline";
+import { Sparkle } from "lucide-react";
 import { Controller, useForm } from "react-hook-form";
 // services
 import { PageService } from "services/page.service";
@@ -344,7 +344,7 @@ export const CreateUpdateBlockInline: FC<Props> = ({
                   "Generating response..."
                 ) : (
                   <>
-                    <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                    <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                   </>
                 )}
               </button>
@@ -354,7 +354,7 @@ export const CreateUpdateBlockInline: FC<Props> = ({
                 className="ml-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-80"
                 onClick={() => setGptAssistantModal(true)}
               >
-                <SparklesIcon className="h-4 w-4" />
+                <Sparkle className="h-4 w-4" />
                 AI
               </button>
             </div>
diff --git a/web/components/pages/delete-page-modal.tsx b/web/components/pages/delete-page-modal.tsx
index ef6f7c909..f66f178c1 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -13,7 +13,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
 import type { IUser, IPage } from "types";
 // fetch-keys
@@ -114,7 +114,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, s
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/pages/pages-list/recent-pages-list.tsx b/web/components/pages/pages-list/recent-pages-list.tsx
index 95f6fdcdd..09225fc04 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -12,7 +12,7 @@ import { PagesView } from "components/pages";
 import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // helpers
@@ -46,9 +46,7 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
 
             return (
               <div key={key} className="h-full overflow-hidden pb-9">
-                <h2 className="text-xl font-semibold capitalize mb-2">
-                  {replaceUnderscoreIfSnakeCase(key)}
-                </h2>
+                <h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
                 <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
               </div>
             );
@@ -59,7 +57,7 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             description="You can think of Pages as an AI-powered notepad."
             image={emptyPage}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
+              icon: <Plus className="h-4 w-4" />,
               text: "New Page",
               onClick: () => {
                 const e = new KeyboardEvent("keydown", {
diff --git a/web/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
index 942b68ba8..d3eb8af71 100644
--- a/web/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -15,7 +15,7 @@ import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SingleP
 import { EmptyState } from "components/common";
 import { Loader } from "@plane/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // types
@@ -255,7 +255,7 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
               description="You can think of Pages as an AI-powered notepad."
               image={emptyPage}
               primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
+                icon: <Plus className="h-4 w-4" />,
                 text: "New Page",
                 onClick: () => {
                   const e = new KeyboardEvent("keydown", {
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index ffad1a200..a9b16be96 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -18,18 +18,9 @@ import { CreateUpdateBlockInline } from "components/pages";
 import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
 import { CustomMenu } from "components/ui";
-import { TextArea } from "@plane/ui";
+import { LayersIcon, TextArea } from "@plane/ui";
 // icons
-import { LayerDiagonalIcon } from "components/icons";
-import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
-import {
-  BoltIcon,
-  CheckIcon,
-  EllipsisVerticalIcon,
-  PencilIcon,
-  SparklesIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -312,8 +303,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                 className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
-                <EllipsisVerticalIcon className="h-[18px]" />
-                <EllipsisVerticalIcon className="-ml-2.5 h-[18px]" />
+                <MoreVertical className="h-[18px]" />
+                <MoreVertical className="-ml-2.5 h-[18px]" />
               </button>
               <div
                 ref={actionSectionRef}
@@ -323,7 +314,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
               >
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
-                    {isSyncing ? <ArrowPathIcon className="h-3 w-3 animate-spin" /> : <CheckIcon className="h-3 w-3" />}
+                    {isSyncing ? <RefreshCw className="h-3 w-3 animate-spin" /> : <Check className="h-3 w-3" />}
                     {isSyncing ? "Syncing..." : "Synced"}
                   </div>
                 )}
@@ -339,7 +330,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                     "Generating response..."
                   ) : (
                     <>
-                      <SparklesIcon className="h-4 w-4" />I{"'"}m feeling lucky
+                      <Sparkle className="h-4 w-4" />I{"'"}m feeling lucky
                     </>
                   )}
                 </button>
@@ -348,7 +339,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
-                  <SparklesIcon className="h-4 w-4" />
+                  <Sparkle className="h-4 w-4" />
                   AI
                 </button>
                 <button
@@ -356,7 +347,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                   className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90"
                   onClick={() => setCreateBlockForm(true)}
                 >
-                  <PencilIcon className="h-3.5 w-3.5" />
+                  <Pencil className="h-3.5 w-3.5" />
                 </button>
                 <CustomMenu
                   customButton={
@@ -364,7 +355,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                       className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-custom-background-90"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
-                      <BoltIcon className="h-4.5 w-3.5" />
+                      <Zap className="h-3.5 w-3.5" />
                     </div>
                   }
                 >
@@ -372,7 +363,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                     <>
                       <CustomMenu.MenuItem onClick={handleBlockSync}>
                         <span className="flex items-center gap-1">
-                          <ArrowPathIcon className="h-4 w-4" />
+                          <RefreshCw className="h-4 w-4" />
                           <span>Turn sync {block.sync ? "off" : "on"}</span>
                         </span>
                       </CustomMenu.MenuItem>
@@ -386,14 +377,14 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                   ) : (
                     <CustomMenu.MenuItem onClick={pushBlockIntoIssues}>
                       <span className="flex items-center gap-1">
-                        <LayerDiagonalIcon className="h-4 w-4" />
+                        <LayersIcon className="h-4 w-4" />
                         Push into issues
                       </span>
                     </CustomMenu.MenuItem>
                   )}
                   <CustomMenu.MenuItem onClick={deletePageBlock}>
                     <span className="flex items-center gap-1">
-                      <TrashIcon className="h-4 w-4" />
+                      <Trash2 className="h-4 w-4" />
                       Delete block
                     </span>
                   </CustomMenu.MenuItem>
@@ -409,7 +400,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                       <div className="mr-1.5 flex">
                         <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
                           <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
-                            <LayerDiagonalIcon height="16" width="16" />
+                            <LayersIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
                         </Link>
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
index cbb094e29..ca70d32e0 100644
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -10,8 +10,7 @@ import useToast from "hooks/use-toast";
 import { CustomMenu } from "components/ui";
 import { Tooltip } from "@plane/ui";
 // icons
-import { LinkIcon, LockClosedIcon, LockOpenIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { render24HourFormatTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
@@ -101,7 +100,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                 </button>
               ) : (
                 <button
@@ -113,7 +112,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                   className="z-10 grid place-items-center"
                 >
-                  <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                  <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                 </button>
               )}
               {page.created_by === user?.id && (
@@ -133,9 +132,9 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     }}
                   >
                     {page.access ? (
-                      <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     ) : (
-                      <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                      <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                     )}
                   </button>
                 </Tooltip>
@@ -147,7 +146,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                 } on ${renderLongDateFormat(`${page.created_at}`)}`}
               >
                 <span>
-                  <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                  <AlertCircle className="h-4 w-4 text-custom-text-200" />
                 </span>
               </Tooltip>
               <CustomMenu verticalEllipsis>
@@ -159,7 +158,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <PencilIcon className="h-3.5 w-3.5" />
+                    <Pencil className="h-3.5 w-3.5" />
                     <span>Edit Page</span>
                   </span>
                 </CustomMenu.MenuItem>
@@ -171,7 +170,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   }}
                 >
                   <span className="flex items-center justify-start gap-2">
-                    <TrashIcon className="h-3.5 w-3.5" />
+                    <Trash2 className="h-3.5 w-3.5" />
                     <span>Delete Page</span>
                   </span>
                 </CustomMenu.MenuItem>
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
index 1dd31c29a..d4f092495 100644
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -10,16 +10,7 @@ import useToast from "hooks/use-toast";
 import { CustomMenu } from "components/ui";
 import { Tooltip } from "@plane/ui";
 // icons
-import {
-  DocumentTextIcon,
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { renderLongDateFormat, renderShortDate, render24HourFormatTime } from "helpers/date-time.helper";
@@ -70,7 +61,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
           <div className="relative rounded p-4 text-custom-text-200 hover:bg-custom-background-80">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
-                <DocumentTextIcon className="h-4 w-4" />
+                <FileText className="h-4 w-4" />
                 <p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
@@ -109,7 +100,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleRemoveFromFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button
@@ -120,7 +111,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         handleAddToFavorites();
                       }}
                     >
-                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                      <Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
                     </button>
                   )}
                   {page.created_by === user?.id && (
@@ -140,9 +131,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                         }}
                       >
                         {page.access ? (
-                          <LockClosedIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Lock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         ) : (
-                          <LockOpenIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
+                          <Unlock className="h-4 w-4" color="rgb(var(--color-text-200))" />
                         )}
                       </button>
                     </Tooltip>
@@ -154,7 +145,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                     } on ${renderLongDateFormat(`${page.created_at}`)}`}
                   >
                     <span>
-                      <ExclamationIcon className="h-4 w-4 fill-current text-custom-text-200" />
+                      <AlertCircle className="h-4 w-4 text-custom-text-200" />
                     </span>
                   </Tooltip>
 
@@ -167,7 +158,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <PencilIcon className="h-3.5 w-3.5" />
+                        <Pencil className="h-3.5 w-3.5" />
                         <span>Edit Page</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -179,7 +170,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <TrashIcon className="h-3.5 w-3.5" />
+                        <Trash2 className="h-3.5 w-3.5" />
                         <span>Delete Page</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 9a4973aaa..e8c8bf984 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -7,8 +7,9 @@ import { UserService } from "services/user.service";
 // components
 import { ActivityMessage } from "components/core";
 // ui
-import { ProfileEmptyState, Icon } from "components/ui";
+import { ProfileEmptyState } from "components/ui";
 import { Loader } from "@plane/ui";
+import { Rocket } from "lucide-react";
 // image
 import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // helpers
@@ -69,7 +70,7 @@ export const ProfileActivity = () => {
                             className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
                           >
                             Issue
-                            <Icon iconName="launch" className="!text-xs" />
+                            <Rocket className="h-3 w-3" />
                           </a>
                         </span>
                       )}
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index f6ec73778..b109b508d 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -2,8 +2,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Icon } from "components/ui";
-import { Loader } from "@plane/ui";
+import { CreateIcon, LayerStackIcon, Loader } from "@plane/ui";
+import { UserCircle2 } from "lucide-react";
 // types
 import { IUserProfileData } from "types";
 
@@ -17,19 +17,19 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
 
   const overviewCards = [
     {
-      icon: "new_window",
+      icon: CreateIcon,
       route: "created",
       title: "Issues created",
       value: userProfile?.created_issues ?? "...",
     },
     {
-      icon: "account_circle",
+      icon: UserCircle2,
       route: "assigned",
       title: "Issues assigned",
       value: userProfile?.assigned_issues ?? "...",
     },
     {
-      icon: "subscriptions",
+      icon: LayerStackIcon,
       route: "subscribed",
       title: "Issues subscribed",
       value: userProfile?.subscribed_issues ?? "...",
@@ -45,7 +45,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
             <Link key={card.route} href={`/${workspaceSlug}/profile/${userId}/${card.route}`}>
               <a className="flex items-center gap-3 p-4 rounded border border-custom-border-100 whitespace-nowrap">
                 <div className="h-11 w-11 bg-custom-background-90 rounded grid place-items-center">
-                  <Icon iconName={card.icon} className="!text-xl" />
+                  <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
                   <p className="text-custom-text-400 text-sm">{card.title}</p>
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index cc5a93062..1c68a1a69 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -13,8 +13,7 @@ import { MyIssuesSelectFilters } from "components/issues";
 import { CustomMenu } from "components/ui";
 import { ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
+import { ChevronDown, Kanban, List } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
@@ -26,11 +25,11 @@ import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS }
 const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
-    Icon: FormatListBulletedOutlined,
+    Icon: List,
   },
   {
     type: "kanban",
-    Icon: GridViewOutlined,
+    Icon: Kanban,
   },
 ];
 
@@ -116,7 +115,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
               }`}
             >
               Display
-              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+              <ChevronDown className="h-3 w-3" aria-hidden="true" />
             </Popover.Button>
 
             <Transition
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 928417486..8c3976633 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -10,10 +10,9 @@ import { UserService } from "services/user.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Icon } from "components/ui";
 import { Loader, Tooltip } from "@plane/ui";
 // icons
-import { EditOutlined } from "@mui/icons-material";
+import { ChevronDown, Pencil } from "lucide-react";
 // helpers
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 import { renderEmoji } from "helpers/emoji.helper";
@@ -70,11 +69,7 @@ export const ProfileSidebar = () => {
               <div className="absolute top-3.5 right-3.5 h-5 w-5 bg-white rounded grid place-items-center">
                 <Link href={`/${workspaceSlug}/me/profile`}>
                   <a className="grid place-items-center text-black">
-                    <EditOutlined
-                      sx={{
-                        fontSize: 12,
-                      }}
-                    />
+                    <Pencil className="h-3 w-3" />
                   </a>
                 </Link>
               </div>
@@ -162,7 +157,7 @@ export const ProfileSidebar = () => {
                                 </div>
                               </Tooltip>
                             )}
-                            <Icon iconName="arrow_drop_down" className="!text-lg" />
+                            <ChevronDown className="h-4 w-4" />
                           </div>
                         </Disclosure.Button>
                         <Transition
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 3711fe224..512e979a3 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 
@@ -57,7 +57,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                 <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index 6c4f0033b..64c455551 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -3,13 +3,13 @@ import { useRouter } from "next/router";
 import { useForm, Controller } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { Users2, X } from "lucide-react";
 // hooks
 import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
-import { CustomSelect, Icon, Avatar, CustomSearchSelect } from "components/ui";
+import { CustomSelect, Avatar, CustomSearchSelect } from "components/ui";
 import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
@@ -212,7 +212,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
 
                   <div className="absolute right-2 top-2 p-2">
                     <button type="button" onClick={handleClose}>
-                      <XMarkIcon className="h-5 w-5 text-white" />
+                      <X className="h-5 w-5 text-white" />
                     </button>
                   </div>
                   <div className="absolute bottom-2 right-2">
@@ -337,7 +337,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                                 <div className="flex items-center gap-2 -mb-0.5 py-1">
                                   {currentNetwork ? (
                                     <>
-                                      <Icon iconName={currentNetwork?.icon} className="!text-xs" />
+                                      <currentNetwork.icon className="h-3 w-3" />
                                       {currentNetwork.label}
                                     </>
                                   ) : (
@@ -353,7 +353,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                                   value={network.key}
                                   className="flex items-center gap-1"
                                 >
-                                  <Icon iconName={network.icon} className="!text-xs" />
+                                  <network.icon className="h-3 w-3" />
                                   {network.label}
                                 </CustomSelect.Option>
                               ))}
@@ -381,15 +381,12 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
                                         <Avatar user={selectedMember?.member} />
                                         <span>{selectedMember?.member.display_name} </span>
                                         <span onClick={() => onChange(null)}>
-                                          <Icon
-                                            iconName="close"
-                                            className="!text-xs -mb-0.5 text-custom-text-200 hover:text-custom-text-100"
-                                          />
+                                          <X className="h-3 w-3 -mb-0.5 text-custom-text-200 hover:text-custom-text-100" />
                                         </span>
                                       </>
                                     ) : (
                                       <>
-                                        <Icon iconName="group" className="!text-sm text-custom-text-400" />
+                                        <Users2 className="h-3.5 w-3.5 text-custom-text-400" />
                                         <span className="text-custom-text-400">Lead</span>
                                       </>
                                     )}
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index d3185665b..010341688 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
@@ -100,7 +100,7 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
diff --git a/web/components/project/label-select.tsx b/web/components/project/label-select.tsx
index 01052a8b4..353937d7a 100644
--- a/web/components/project/label-select.tsx
+++ b/web/components/project/label-select.tsx
@@ -13,9 +13,7 @@ import { Combobox } from "@headlessui/react";
 // component
 import { CreateLabelModal } from "components/labels";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
+import { Check, ChevronDown, PlusIcon, Search } from "lucide-react";
 // types
 import { Tooltip } from "components/ui";
 import { IUser, IIssueLabels } from "types";
@@ -187,7 +185,7 @@ export const LabelSelect: React.FC<Props> = ({
                   }  ${buttonClassName}`}
                 >
                   {label}
-                  {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                  {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
                 </button>
               </Combobox.Button>
 
@@ -199,7 +197,7 @@ export const LabelSelect: React.FC<Props> = ({
                   {...attributes.popper}
                 >
                   <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                    <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
+                    <Search className="h-3.5 w-3.5 text-custom-text-300" />
                     <Combobox.Input
                       className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                       value={query}
@@ -224,7 +222,7 @@ export const LabelSelect: React.FC<Props> = ({
                             {({ selected }) => (
                               <>
                                 {option.content}
-                                {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
+                                {selected && <Check className="h-3.5 w-3.5" />}
                               </>
                             )}
                           </Combobox.Option>
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 7722b51ff..e36fa0ae2 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -2,7 +2,7 @@ import { FC, Fragment } from "react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangleIcon } from "lucide-react";
 import { observer } from "mobx-react-lite";
 // ui
 import { Button, Input } from "@plane/ui";
@@ -122,7 +122,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
diff --git a/web/components/project/members-select.tsx b/web/components/project/members-select.tsx
index 9ce7404b8..914441121 100644
--- a/web/components/project/members-select.tsx
+++ b/web/components/project/members-select.tsx
@@ -10,10 +10,9 @@ import useWorkspaceMembers from "hooks/use-workspace-members";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // components
-import { AssigneesList, Avatar, Icon, Tooltip } from "components/ui";
+import { AssigneesList, Avatar, Tooltip } from "components/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Search, User2 } from "lucide-react";
 // types
 import { IUser } from "types";
 import { Placement } from "@popperjs/core";
@@ -99,7 +98,7 @@ export const MembersSelect: React.FC<Props> = ({
             className="flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none
           "
           >
-            <Icon iconName="person" className="text-sm !leading-4" />
+            <User2 className="h-3.5 w-3.5" />
           </span>
         )}
       </div>
@@ -129,7 +128,7 @@ export const MembersSelect: React.FC<Props> = ({
                 } ${buttonClassName}`}
               >
                 {label}
-                {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
               </button>
             </Combobox.Button>
             <Combobox.Options>
@@ -140,7 +139,7 @@ export const MembersSelect: React.FC<Props> = ({
                 {...attributes.popper}
               >
                 <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
+                  <Search className="h-3.5 w-3.5 text-custom-text-300" />
                   <Combobox.Input
                     className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                     value={query}
@@ -165,7 +164,7 @@ export const MembersSelect: React.FC<Props> = ({
                           {({ selected }) => (
                             <>
                               {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
+                              {selected && <Check className="h-3.5 w-3.5" />}
                             </>
                           )}
                         </Combobox.Option>
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
index a02d6a1df..690265292 100644
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@@ -5,9 +5,8 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PriorityIcon } from "components/icons";
+import { Check, ChevronDown, Search } from "lucide-react";
+import { PriorityIcon } from "@plane/ui";
 // components
 import { Tooltip } from "components/ui";
 // types
@@ -51,7 +50,7 @@ export const PrioritySelect: React.FC<Props> = ({
     query: priority,
     content: (
       <div className="flex items-center gap-2">
-        <PriorityIcon priority={priority} className="text-sm" />
+        <PriorityIcon priority={priority} className="h-3.5 w-3.5" />
         {priority ?? "None"}
       </div>
     ),
@@ -69,10 +68,10 @@ export const PrioritySelect: React.FC<Props> = ({
           value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300 bg-custom-background-100"
         } items-center`}
       >
-        <span className="flex gap-1 items-center text-custom-text-200 text-xs">
+        <span className="flex gap-1 items-center text-custom-text-200 ">
           <PriorityIcon
             priority={value}
-            className={`text-sm ${
+            className={`w-3.5 ${
               value === "urgent"
                 ? "text-white"
                 : value === "high"
@@ -106,7 +105,7 @@ export const PrioritySelect: React.FC<Props> = ({
           } ${buttonClassName}`}
         >
           {label}
-          {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
       <Combobox.Options>
@@ -117,7 +116,7 @@ export const PrioritySelect: React.FC<Props> = ({
           {...attributes.popper}
         >
           <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-            <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
+            <Search className="h-3.5 w-3.5 text-custom-text-300" />
             <Combobox.Input
               className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
               value={query}
@@ -142,7 +141,7 @@ export const PrioritySelect: React.FC<Props> = ({
                     {({ selected }) => (
                       <>
                         {option.content}
-                        {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
+                        {selected && <Check className="h-3.5 w-3.5" />}
                       </>
                     )}
                   </Combobox.Option>
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 1f356e780..caa88c250 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -7,7 +7,7 @@ import { Controller, useForm } from "react-hook-form";
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
 import { Button, Loader, ToggleSwitch } from "@plane/ui";
-import { Icon } from "components/ui";
+import { Check, CircleDot, Globe2 } from "lucide-react";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
@@ -341,7 +341,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                           </div>
                           <div className="flex items-center gap-1 text-custom-primary-100 mt-3">
                             <div className="w-5 h-5 overflow-hidden flex items-center">
-                              <Icon iconName="radio_button_checked" className="!text-lg" />
+                              <CircleDot className="h-5 w-5" />
                             </div>
                             <div className="text-sm">This project is live on web</div>
                           </div>
@@ -392,7 +392,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                                       <div className="text-sm">{option.label}</div>
                                       <div className={`w-[18px] h-[18px] relative flex justify-center items-center`}>
                                         {value.length > 0 && value.includes(option.key) && (
-                                          <Icon iconName="done" className="!text-lg" />
+                                          <Check className="h-5 w-5" />
                                         )}
                                       </div>
                                     </div>
@@ -471,7 +471,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   {/* modal handlers */}
                   <div className="border-t border-custom-border-200 px-6 py-5 relative flex justify-between items-center">
                     <div className="flex items-center gap-1 text-custom-text-400 text-sm">
-                      <Icon iconName="public" className="!text-base" />
+                      <Globe2 className="h-4 w-4" />
                       <div className="text-sm">Anyone with the link can access</div>
                     </div>
                     {!projectPublish.fetchSettingsLoader && (
diff --git a/web/components/project/publish-project/popover.tsx b/web/components/project/publish-project/popover.tsx
index 5ab2d6432..b116ea3dc 100644
--- a/web/components/project/publish-project/popover.tsx
+++ b/web/components/project/publish-project/popover.tsx
@@ -3,7 +3,7 @@ import React, { Fragment } from "react";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // icons
-import { Icon } from "components/ui";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
 export const CustomPopover = ({
   children,
@@ -18,16 +18,10 @@ export const CustomPopover = ({
     <Popover className="relative">
       {({ open }) => (
         <>
-          <Popover.Button
-            className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}
-          >
+          <Popover.Button className={`${open ? "" : ""}  relative flex items-center gap-1 ring-0 outline-none`}>
             <div className="text-sm">{label ?? placeholder}</div>
             <div className="w-5 h-5 grid place-items-center">
-              {!open ? (
-                <Icon iconName="expand_more" className="!text-base" />
-              ) : (
-                <Icon iconName="expand_less" className="!text-base" />
-              )}
+              {!open ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
             </div>
           </Popover.Button>
 
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index eef46f3ca..75002f5d9 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -11,8 +11,7 @@ import { Dialog, Transition } from "@headlessui/react";
 import { Button } from "@plane/ui";
 import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
 //icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import { ChevronDown, Plus, X } from "lucide-react";
 // services
 import { ProjectService } from "services/project";
 import { WorkspaceService } from "services/workspace.service";
@@ -205,7 +204,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                       ) : (
                                         <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
                                       )}
-                                      <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                                      <ChevronDown className="h-3 w-3" aria-hidden="true" />
                                     </button>
                                   }
                                   onChange={(val: string) => {
@@ -237,7 +236,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
-                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
                                       </div>
                                     }
                                     input
@@ -268,7 +267,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                   className="self-center place-items-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <XMarkIcon className="h-4 w-4 text-custom-text-200" />
+                                  <X className="h-4 w-4 text-custom-text-200" />
                                 </button>
                               )}
                             </div>
@@ -284,7 +283,7 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                       className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index 0e2086ccc..5ad4f60f6 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -6,7 +6,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { CustomMenu } from "components/ui";
 import { Button, Input } from "@plane/ui";
 // icons
-import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+import { Component, Pencil } from "lucide-react";
 // types
 import { IIssueLabels } from "types";
 
@@ -129,7 +129,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
       ) : (
         <div className="rounded-md bg-custom-background-80 p-4 text-custom-text-100">
           <h3 className="flex items-center gap-2 font-medium leading-5">
-            <RectangleGroupIcon className="h-5 w-5" />
+            <Component className="h-5 w-5" />
             This is the label group title
           </h3>
           <div className="mt-4 pl-5">
@@ -139,7 +139,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                 This is the label title
               </h5>
               <button type="button" className="hidden group-hover:block">
-                <PencilIcon className="h-3 w-3" />
+                <Pencil className="h-3 w-3" />
               </button>
             </div>
           </div>
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index 5dad6adda..5f6f090f7 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -5,18 +5,19 @@ import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
 import { Disclosure, Transition } from "@headlessui/react";
 import { observer } from "mobx-react-lite";
 // icons
-import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 import {
-  ArchiveOutlined,
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  ExpandMoreOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-  SettingsOutlined,
-} from "@mui/icons-material";
-import { PenSquare } from "lucide-react";
+  MoreVertical,
+  PenSquare,
+  LinkIcon,
+  Star,
+  Trash2,
+  FileText,
+  Settings,
+  Share2,
+  LogOut,
+  ChevronDown,
+} from "lucide-react";
+import { Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // helpers
@@ -27,10 +28,9 @@ import { IProject } from "types";
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // components
-import { CustomMenu, Icon } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { LeaveProjectModal, DeleteProjectModal } from "components/project";
 import { PublishProjectModal } from "components/project/publish-project";
-import { Tooltip } from "@plane/ui";
 
 type Props = {
   project: IProject;
@@ -45,32 +45,32 @@ const navigation = (workspaceSlug: string, projectId: string) => [
   {
     name: "Issues",
     href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    Icon: FilterNoneOutlined,
+    Icon: LayersIcon,
   },
   {
     name: "Cycles",
     href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    Icon: ContrastOutlined,
+    Icon: ContrastIcon,
   },
   {
     name: "Modules",
     href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    Icon: DatasetOutlined,
+    Icon: DiceIcon,
   },
   {
     name: "Views",
     href: `/${workspaceSlug}/projects/${projectId}/views`,
-    Icon: PhotoFilterOutlined,
+    Icon: PhotoFilterIcon,
   },
   {
     name: "Pages",
     href: `/${workspaceSlug}/projects/${projectId}/pages`,
-    Icon: ArticleOutlined,
+    Icon: FileText,
   },
   {
     name: "Settings",
     href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    Icon: SettingsOutlined,
+    Icon: Settings,
   },
 ];
 
@@ -156,8 +156,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
                     {...provided?.dragHandleProps}
                   >
-                    <EllipsisVerticalIcon className="h-4" />
-                    <EllipsisVerticalIcon className="-ml-5 h-4" />
+                    <MoreVertical className="h-4" />
+                    <MoreVertical className="-ml-5 h-4" />
                   </button>
                 </Tooltip>
               )}
@@ -192,9 +192,8 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     )}
                   </div>
                   {!sidebarCollapse && (
-                    <ExpandMoreOutlined
-                      fontSize="small"
-                      className={`flex-shrink-0 ${
+                    <ChevronDown
+                      className={`h-4 w-4 flex-shrink-0 ${
                         open ? "rotate-180" : ""
                       } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
                     />
@@ -211,7 +210,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {!shortContextMenu && isAdmin && (
                     <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
                       <span className="flex items-center justify-start gap-2 ">
-                        <TrashIcon className="h-4 w-4" />
+                        <Trash2 className="h-4 w-4" />
                         <span>Delete project</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -219,7 +218,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {!project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleAddToFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4" />
+                        <Star className="h-4 w-4" />
                         <span>Add to favorites</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -227,7 +226,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {project.is_favorite && (
                     <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
                       <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                        <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                         <span>Remove from favorites</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -244,7 +243,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
                       <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
                         <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
-                          <Icon iconName="ios_share" className="!text-base" />
+                          <Share2 className="h-4 w-4" />
                         </div>
                         <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
                       </div>
@@ -256,7 +255,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                       onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
                     >
                       <div className="flex items-center justify-start gap-2">
-                        <ArchiveOutlined fontSize="small" />
+                        <ArchiveIcon className="h-3.5 w-3.5" />
                         <span>Archived Issues</span>
                       </div>
                     </CustomMenu.MenuItem>
@@ -273,7 +272,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                     onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
                   >
                     <div className="flex items-center justify-start gap-2">
-                      <Icon iconName="settings" className="!text-base !leading-4" />
+                      <Settings className="h-4 w-4" />
                       <span>Settings</span>
                     </div>
                   </CustomMenu.MenuItem>
@@ -282,7 +281,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                   {isViewerOrGuest && (
                     <CustomMenu.MenuItem onClick={handleLeaveProject}>
                       <div className="flex items-center justify-start gap-2">
-                        <Icon iconName="logout" className="!text-base !leading-4" />
+                        <LogOut className="h-4 w-4" />
                         <span>Leave Project</span>
                       </div>
                     </CustomMenu.MenuItem>
@@ -325,11 +324,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
                                 : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                             } ${sidebarCollapse ? "justify-center" : ""}`}
                           >
-                            <item.Icon
-                              sx={{
-                                fontSize: 18,
-                              }}
-                            />
+                            <item.Icon className="h-4 w-4" />
                             {!sidebarCollapse && item.name}
                           </div>
                         </Tooltip>
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index e79a87b01..cd6eae038 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -11,8 +11,7 @@ import useUserAuth from "hooks/use-user-auth";
 import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
 
 // icons
-import { Icon } from "components/ui";
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { ChevronDown, ChevronRight, Plus } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
@@ -128,17 +127,18 @@ export const ProjectSidebarList: FC = observer(() => {
                     {({ open }) => (
                       <>
                         {!themeStore?.sidebarCollapsed && (
-                          <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
                               type="button"
                               className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
                             >
                               Favorites
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
@@ -147,7 +147,7 @@ export const ProjectSidebarList: FC = observer(() => {
                                 setIsProjectModalOpen(true);
                               }}
                             >
-                              <Icon iconName="add" />
+                              <Plus className="h-3 w-3" />
                             </button>
                           </div>
                         )}
@@ -193,17 +193,18 @@ export const ProjectSidebarList: FC = observer(() => {
                     {({ open }) => (
                       <>
                         {!themeStore?.sidebarCollapsed && (
-                          <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
+                          <div className="group flex justify-between items-center text-xs p-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
                               type="button"
                               className="flex items-center gap-1 font-semibold text-left whitespace-nowrap"
                             >
                               Projects
-                              <Icon
-                                iconName={open ? "arrow_drop_down" : "arrow_right"}
-                                className="group-hover:opacity-100 opacity-0 !text-lg"
-                              />
+                              {open ? (
+                                <ChevronDown className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              ) : (
+                                <ChevronRight className="h-3 w-3 group-hover:opacity-100 opacity-0" />
+                              )}
                             </Disclosure.Button>
                             <button
                               className="group-hover:opacity-100 opacity-0"
@@ -212,7 +213,7 @@ export const ProjectSidebarList: FC = observer(() => {
                                 setIsProjectModalOpen(true);
                               }}
                             >
-                              <Icon iconName="add" />
+                              <Plus className="h-3 w-3" />
                             </button>
                           </div>
                         )}
@@ -264,7 +265,7 @@ export const ProjectSidebarList: FC = observer(() => {
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-5 w-5" />
+            <Plus className="h-5 w-5" />
             {!themeStore?.sidebarCollapsed && "Add Project"}
           </button>
         )}
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index b67ad417e..046857e09 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -12,7 +12,7 @@ import useToast from "hooks/use-toast";
 import { CustomSelect } from "components/ui";
 import { Button, Input, TextArea } from "@plane/ui";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDown } from "lucide-react";
 // types
 import type { IUser, IState, IStateResponse } from "types";
 // fetch keys
@@ -197,7 +197,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                     }}
                                   />
                                 )}
-                                <ChevronDownIcon
+                                <ChevronDown
                                   className={`ml-2 h-5 w-5 group-hover:text-custom-text-200 ${
                                     open ? "text-gray-600" : "text-gray-400"
                                   }`}
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index 775dd8db9..726be5007 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // services
 import { ProjectStateService } from "services/project";
 // hooks
@@ -110,7 +110,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                 <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index c62c0c954..ec0282fb4 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -7,11 +7,9 @@ import { mutate } from "swr";
 // services
 import { ProjectStateService } from "services/project";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip, StateGroupIcon } from "@plane/ui";
 // icons
-import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
-import { Pencil, X } from "lucide-react";
+import { ArrowDown, ArrowUp, Pencil, X } from "lucide-react";
 
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
@@ -167,7 +165,7 @@ export const SingleState: React.FC<Props> = ({
             className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "up")}
           >
-            <ArrowUpIcon className="h-4 w-4" />
+            <ArrowUp className="h-4 w-4" />
           </button>
         )}
         {!(index === groupLength - 1) && (
@@ -176,7 +174,7 @@ export const SingleState: React.FC<Props> = ({
             className="hidden text-custom-text-200 group-hover:inline-block"
             onClick={() => handleMove(state, "down")}
           >
-            <ArrowDownIcon className="h-4 w-4" />
+            <ArrowDown className="h-4 w-4" />
           </button>
         )}
 
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 1d5846019..f8a6067f3 100644
--- a/web/components/states/state-select.tsx
+++ b/web/components/states/state-select.tsx
@@ -11,9 +11,9 @@ import { ProjectStateService } from "services/project";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { StateGroupIcon } from "components/icons";
+import { Check, ChevronDown, Search } from "lucide-react";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // types
 import { Tooltip } from "components/ui";
 import { Placement } from "@popperjs/core";
@@ -119,7 +119,7 @@ export const StateSelect: React.FC<Props> = ({
                 } ${buttonClassName}`}
               >
                 {label}
-                {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
               </button>
             </Combobox.Button>
             <Combobox.Options>
@@ -130,7 +130,7 @@ export const StateSelect: React.FC<Props> = ({
                 {...attributes.popper}
               >
                 <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-300" />
+                  <Search className="h-3.5 w-3.5 text-custom-text-300" />
                   <Combobox.Input
                     className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                     value={query}
@@ -155,7 +155,7 @@ export const StateSelect: React.FC<Props> = ({
                           {({ selected }) => (
                             <>
                               {option.content}
-                              {selected && <CheckIcon className={`h-3.5 w-3.5`} />}
+                              {selected && <Check className="h-3.5 w-3.5" />}
                             </>
                           )}
                         </Combobox.Option>
diff --git a/web/components/toast-alert/index.tsx b/web/components/toast-alert/index.tsx
index 5d0c0123c..84d596bed 100644
--- a/web/components/toast-alert/index.tsx
+++ b/web/components/toast-alert/index.tsx
@@ -1,14 +1,8 @@
 import React from "react";
 // hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
 // icons
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
 
 const ToastAlerts = () => {
   const { alerts, removeAlert } = useToast();
@@ -26,7 +20,7 @@ const ToastAlerts = () => {
               onClick={() => removeAlert(alert.id)}
             >
               <span className="sr-only">Dismiss</span>
-              <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+              <X className="h-5 w-5" aria-hidden="true" />
             </button>
           </div>
           <div
@@ -43,13 +37,13 @@ const ToastAlerts = () => {
             <div className="flex items-center gap-x-3">
               <div className="flex-shrink-0">
                 {alert.type === "success" ? (
-                  <CheckCircleIcon className="h-8 w-8" aria-hidden="true" />
+                  <CheckCircle className="h-8 w-8" aria-hidden="true" />
                 ) : alert.type === "error" ? (
-                  <XCircleIcon className="h-8 w-8" />
+                  <XCircle className="h-8 w-8" />
                 ) : alert.type === "warning" ? (
-                  <ExclamationTriangleIcon className="h-8 w-8" aria-hidden="true" />
+                  <AlertTriangle className="h-8 w-8" aria-hidden="true" />
                 ) : (
-                  <InformationCircleIcon className="h-8 w-8" />
+                  <Info className="h-8 w-8" />
                 )}
               </div>
               <div>
diff --git a/web/components/ui/avatar.tsx b/web/components/ui/avatar.tsx
index 0c12093f4..cef8e2c62 100644
--- a/web/components/ui/avatar.tsx
+++ b/web/components/ui/avatar.tsx
@@ -2,13 +2,11 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
-
-// component
-import { Icon } from "components/ui";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // icons
 import User from "public/user.png";
+import { Plus } from "lucide-react";
 // types
 import { IUser, IUserLite } from "types";
 // fetch-keys
@@ -99,7 +97,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
           {users.length > length ? (
             <div className="-ml-3.5 relative h-6 w-6 rounded">
               <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
+                <Plus className="h-3 w-3 -mr-0.5" />
                 {users.length - length}
               </div>
             </div>
@@ -117,7 +115,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
             userIds.length > length ? (
               <div className="-ml-3.5 relative h-6 w-6 rounded">
                 <div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
-                  <Icon iconName="add" className="text-xs !leading-3 -mr-0.5" />
+                  <Plus className="h-3 w-3 -mr-0.5" />
                   {userIds.length - length}
                 </div>
               </div>
diff --git a/web/components/ui/date.tsx b/web/components/ui/date.tsx
index f33aadde5..31cbdc9fd 100644
--- a/web/components/ui/date.tsx
+++ b/web/components/ui/date.tsx
@@ -1,9 +1,10 @@
 import React from "react";
 
 import { Popover, Transition } from "@headlessui/react";
-import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // react-datepicker
 import DatePicker from "react-datepicker";
+// icons
+import { CalendarDays, X } from "lucide-react";
 // import "react-datepicker/dist/react-datepicker.css";
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 
@@ -16,14 +17,7 @@ type Props = {
   closeOnSelect?: boolean;
 };
 
-export const DateSelect: React.FC<Props> = ({
-  value,
-  onChange,
-  label,
-  minDate,
-  maxDate,
-  closeOnSelect = true,
-}) => (
+export const DateSelect: React.FC<Props> = ({ value, onChange, label, minDate, maxDate, closeOnSelect = true }) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
     {({ close }) => (
       <>
@@ -33,12 +27,12 @@ export const DateSelect: React.FC<Props> = ({
               <>
                 <span className="text-custom-text-100">{renderShortDateWithYearFormat(value)}</span>
                 <button onClick={() => onChange(null)}>
-                  <XMarkIcon className="h-3 w-3" />
+                  <X className="h-3 w-3" />
                 </button>
               </>
             ) : (
               <>
-                <CalendarDaysIcon className="h-4 w-4 flex-shrink-0" />
+                <CalendarDays className="h-4 w-4 flex-shrink-0" />
                 <span>{label}</span>
               </>
             )}
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
index 1ae644535..46c15ae64 100644
--- a/web/components/ui/dropdowns/custom-menu.tsx
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -9,7 +9,7 @@ import { Menu } from "@headlessui/react";
 // ui
 import { DropdownProps } from "components/ui";
 // icons
-import { ExpandMoreOutlined, MoreHorizOutlined } from "@mui/icons-material";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 
 export type CustomMenuProps = DropdownProps & {
   children: React.ReactNode;
@@ -71,7 +71,7 @@ const CustomMenu = ({
                       disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
                   >
-                    <MoreHorizOutlined fontSize="small" className={verticalEllipsis ? "rotate-90" : ""} />
+                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
                 </Menu.Button>
               ) : (
@@ -88,14 +88,7 @@ const CustomMenu = ({
                     } ${buttonClassName}`}
                   >
                     {label}
-                    {!noChevron && (
-                      <ExpandMoreOutlined
-                        sx={{
-                          fontSize: 14,
-                        }}
-                        aria-hidden="true"
-                      />
-                    )}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
                   </button>
                 </Menu.Button>
               )}
diff --git a/web/components/ui/dropdowns/custom-search-select.tsx b/web/components/ui/dropdowns/custom-search-select.tsx
index b72cced4c..09db05d10 100644
--- a/web/components/ui/dropdowns/custom-search-select.tsx
+++ b/web/components/ui/dropdowns/custom-search-select.tsx
@@ -5,8 +5,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown, Search } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -103,7 +102,7 @@ export const CustomSearchSelect = ({
                   } ${buttonClassName}`}
                 >
                   {label}
-                  {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                  {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
                 </button>
               </Combobox.Button>
             )}
@@ -117,7 +116,7 @@ export const CustomSearchSelect = ({
                 {...attributes.popper}
               >
                 <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                  <MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
+                  <Search className="h-3 w-3 text-custom-text-200" />
                   <Combobox.Input
                     className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                     value={query}
@@ -160,10 +159,10 @@ export const CustomSearchSelect = ({
                                     active || selected ? "opacity-100" : "opacity-0"
                                   }`}
                                 >
-                                  <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               ) : (
-                                <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
+                                <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                               )}
                             </>
                           )}
diff --git a/web/components/ui/dropdowns/custom-select.tsx b/web/components/ui/dropdowns/custom-select.tsx
index cee441f66..422356a95 100644
--- a/web/components/ui/dropdowns/custom-select.tsx
+++ b/web/components/ui/dropdowns/custom-select.tsx
@@ -5,8 +5,7 @@ import { usePopper } from "react-popper";
 // headless ui
 import { Listbox } from "@headlessui/react";
 // icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-import { CheckIcon } from "@heroicons/react/24/outline";
+import { Check, ChevronDown } from "lucide-react";
 // types
 import { DropdownProps } from "./types";
 
@@ -73,7 +72,7 @@ const CustomSelect = ({
               } ${buttonClassName}`}
             >
               {label}
-              {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
             </button>
           </Listbox.Button>
         )}
@@ -120,7 +119,7 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
     {({ selected }) => (
       <div className="flex items-center justify-between gap-2">
         <div className="flex items-center gap-2">{children}</div>
-        {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+        {selected && <Check className="h-4 w-4 flex-shrink-0" />}
       </div>
     )}
   </Listbox.Option>
diff --git a/web/components/ui/empty-space.tsx b/web/components/ui/empty-space.tsx
index 1a8c5d9a3..5e5746a54 100644
--- a/web/components/ui/empty-space.tsx
+++ b/web/components/ui/empty-space.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // react
 import React from "react";
 // icons
-import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import { ChevronRight } from "lucide-react";
 
 type EmptySpaceProps = {
   title: string;
@@ -24,10 +24,7 @@ const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, I
 
       <h2 className="text-lg font-medium text-custom-text-100">{title}</h2>
       <div className="mt-1 text-sm text-custom-text-200">{description}</div>
-      <ul
-        role="list"
-        className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200"
-      >
+      <ul role="list" className="mt-6 divide-y divide-custom-border-200 border-t border-b border-custom-border-200">
         {children}
       </ul>
       {link ? (
@@ -54,11 +51,7 @@ type EmptySpaceItemProps = {
 const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action }) => (
   <>
     <li className="cursor-pointer" onClick={action}>
-      <div
-        className={`group relative flex ${
-          description ? "items-start" : "items-center"
-        } space-x-3 py-4`}
-      >
+      <div className={`group relative flex ${description ? "items-start" : "items-center"} space-x-3 py-4`}>
         <div className="flex-shrink-0">
           <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-custom-primary">
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
@@ -69,10 +62,7 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
           {description ? <div className="text-sm">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
-          <ChevronRightIcon
-            className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
-            aria-hidden="true"
-          />
+          <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
         </div>
       </div>
     </li>
diff --git a/web/components/ui/icon.tsx b/web/components/ui/icon.tsx
index ff093a1ce..418186291 100644
--- a/web/components/ui/icon.tsx
+++ b/web/components/ui/icon.tsx
@@ -6,7 +6,5 @@ type Props = {
 };
 
 export const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>
-    {iconName}
-  </span>
+  <span className={`material-symbols-rounded text-sm leading-5 font-light ${className}`}>{iconName}</span>
 );
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index aa79abaf3..f1f637efc 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -1,4 +1,4 @@
-import { ExclamationIcon } from "components/icons";
+import { AlertCircle } from "lucide-react";
 
 type Props = {
   bannerName: string;
@@ -10,7 +10,7 @@ export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName,
     <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
       <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
-        <ExclamationIcon height={24} width={24} className="fill-current text-custom-text-100" />
+        <AlertCircle className="h-6 w-6 text-custom-text-100" />
         <p className="leading-5">{description}</p>
       </div>
     )}
diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx
index cfdaa72d5..d31eaed72 100644
--- a/web/components/ui/multi-level-dropdown.tsx
+++ b/web/components/ui/multi-level-dropdown.tsx
@@ -5,8 +5,7 @@ import { Menu, Transition } from "@headlessui/react";
 // ui
 import { Loader } from "components/ui";
 // icons
-import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
-import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 
 type MultiLevelDropdownProps = {
   label: string;
@@ -52,7 +51,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                 }`}
               >
                 {label}
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
               </Menu.Button>
             </div>
             <Transition
@@ -94,13 +93,9 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               direction === "right" ? "justify-between" : ""
                             }`}
                           >
-                            {direction === "left" && option.hasChildren && (
-                              <ChevronLeftIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "left" && option.hasChildren && <ChevronLeft className="h-4 w-4" />}
                             <span>{option.label}</span>
-                            {direction === "right" && option.hasChildren && (
-                              <ChevronRightIcon className="h-4 w-4" aria-hidden="true" />
-                            )}
+                            {direction === "right" && option.hasChildren && <ChevronRight className="h-4 w-4" />}
                           </div>
                         </>
                       )}
@@ -108,9 +103,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     {option.hasChildren && option.id === openChildFor && (
                       <div
                         className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
-                          direction === "left"
-                            ? "right-full -translate-x-1"
-                            : "left-full translate-x-1"
+                          direction === "left" ? "right-full -translate-x-1" : "left-full translate-x-1"
                         } ${
                           height === "sm"
                             ? "max-h-28"
@@ -126,9 +119,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                         {option.children ? (
                           <div className="space-y-1 p-1">
                             {option.children.length === 0 ? (
-                              <p className="text-custom-text-200 text-center px-1 py-1.5">
-                                No {option.label} found
-                              </p> //if no children found, show this message.
+                              <p className="text-custom-text-200 text-center px-1 py-1.5">No {option.label} found</p> //if no children found, show this message.
                             ) : (
                               option.children.map((child) => {
                                 if (child.element) return child.element;
@@ -143,10 +134,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                                       } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
                                     >
                                       {child.label}{" "}
-                                      <CheckIcon
-                                        className={`h-3.5 w-3.5 opacity-0 ${
-                                          child.selected ? "opacity-100" : ""
-                                        }`}
+                                      <Check
+                                        className={`h-3.5 w-3.5 opacity-0 ${child.selected ? "opacity-100" : ""}`}
                                       />
                                     </button>
                                   );
diff --git a/web/components/ui/multi-level-select.tsx b/web/components/ui/multi-level-select.tsx
index 4d0340604..addd6206c 100644
--- a/web/components/ui/multi-level-select.tsx
+++ b/web/components/ui/multi-level-select.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
-import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronsUpDown } from "lucide-react";
 
 type TSelectOption = {
   id: string;
@@ -52,7 +52,7 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
             >
               <span className="block truncate">{selected?.label ?? label}</span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
-                <ChevronUpDownIcon className="h-5 w-5 text-custom-text-200" aria-hidden="true" />
+                <ChevronsUpDown className="h-5 w-5 text-custom-text-200" />
               </span>
             </Listbox.Button>
             <Transition
@@ -105,16 +105,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                               >
                                 {({ selected }) => (
                                   <>
-                                    <span
-                                      className={`block truncate ${
-                                        selected ? "font-medium" : "font-normal"
-                                      }`}
-                                    >
+                                    <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                                       {child.label}
                                     </span>
                                     {selected ? (
                                       <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                                        <Check className="h-5 w-5" aria-hidden="true" />
                                       </span>
                                     ) : null}
                                   </>
@@ -131,14 +127,12 @@ export const MultiLevelSelect: React.FC<TMultipleSelectProps> = ({
                             />
                           </div>
                         )}
-                        <span
-                          className={`block truncate ${selected ? "font-medium" : "font-normal"}`}
-                        >
+                        <span className={`block truncate ${selected ? "font-medium" : "font-normal"}`}>
                           {option.label}
                         </span>
                         {selected ? (
                           <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-custom-text-200">
-                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                            <Check className="h-5 w-5" aria-hidden="true" />
                           </span>
                         ) : null}
                       </>
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index 1c27c224c..f5298be6e 100644
--- a/web/components/ui/product-updates-modal.tsx
+++ b/web/components/ui/product-updates-modal.tsx
@@ -9,7 +9,7 @@ import { WorkspaceService } from "services/workspace.service";
 // components
 import { Loader, MarkdownRenderer } from "components/ui";
 // icons
-import { XMarkIcon } from "@heroicons/react/20/solid";
+import { X } from "lucide-react";
 // helpers
 import { renderLongDateFormat } from "helpers/date-time.helper";
 
@@ -55,10 +55,7 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                     <span>Product Updates</span>
                     <span>
                       <button type="button" onClick={() => setIsOpen(false)}>
-                        <XMarkIcon
-                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
-                          aria-hidden="true"
-                        />
+                        <X className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
                       </button>
                     </span>
                   </Dialog.Title>
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 68b143616..b4167e369 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { DangerButton, SecondaryButton } from "components/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
 import { IProjectView } from "types";
 
@@ -95,7 +95,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/views/select-filters.tsx b/web/components/views/select-filters.tsx
index deacdccd0..b566bb96e 100644
--- a/web/components/views/select-filters.tsx
+++ b/web/components/views/select-filters.tsx
@@ -7,7 +7,7 @@ import { IssueLabelService } from "services/issue";
 // ui
 import { Avatar, MultiLevelDropdown } from "components/ui";
 // icons
-import { PriorityIcon, StateGroupIcon } from "components/icons";
+import { PriorityIcon, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
diff --git a/web/components/web-view/activity-message.tsx b/web/components/web-view/activity-message.tsx
index 6ccad61d5..77018141d 100644
--- a/web/components/web-view/activity-message.tsx
+++ b/web/components/web-view/activity-message.tsx
@@ -1,11 +1,30 @@
 import { useRouter } from "next/router";
 
 // icons
-import { CopyPlus } from "lucide-react";
-import { Icon } from "components/ui";
-import { Tooltip } from "@plane/ui";
-import { Squares2X2Icon } from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
+import {
+  CalendarDays,
+  CopyPlus,
+  History,
+  LinkIcon,
+  MessageSquare,
+  Paperclip,
+  Rocket,
+  Signal,
+  Tag,
+  Users2,
+} from "lucide-react";
+import {
+  DoubleCircleIcon,
+  Tooltip,
+  BlockedIcon,
+  BlockerIcon,
+  RelatedIcon,
+  UserGroupIcon,
+  ArchiveIcon,
+  ContrastIcon,
+  LayersIcon,
+  DiceIcon,
+} from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -28,7 +47,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
       className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
     >
       {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
-      <Icon iconName="launch" className="!text-xs" />
+      <Rocket className="h-3 w-3" />
     </button>
   </Tooltip>
 );
@@ -63,7 +82,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="group" className="!text-2xl" aria-hidden="true" />,
+    icon: <UserGroupIcon className="h-3 w-3" />,
   },
 
   archived_at: {
@@ -71,7 +90,7 @@ const activityDetails: {
       if (activity.new_value === "restore") return "restored the issue.";
       else return "archived the issue.";
     },
-    icon: <Icon iconName="archive" className="!text-2xl" aria-hidden="true" />,
+    icon: <ArchiveIcon className="h-5 w-5" />,
   },
 
   attachment: {
@@ -89,7 +108,7 @@ const activityDetails: {
         {showIssue && <IssueLink activity={activity} />}
       </>
     ),
-    icon: <Icon iconName="attach_file" className="!text-2xl" aria-hidden="true" />,
+    icon: <Paperclip className="h-5 w-5" aria-hidden="true" />,
   },
 
   blocking: {
@@ -223,11 +242,11 @@ const activityDetails: {
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
           {activity.verb === "created" || activity.verb === "updated" ? activity.new_value : activity.old_value}
-          <Icon iconName="launch" className="!text-xs" />
+          <Rocket className="h-3 w-3" />
         </button>
       </>
     ),
-    icon: <Icon iconName="contrast" className="!text-2xl" aria-hidden="true" />,
+    icon: <ContrastIcon className="h-5 w-5" aria-hidden="true" />,
   },
 
   description: {
@@ -243,7 +262,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
+    icon: <MessageSquare className="h-5 w-5" />,
   },
 
   estimate_point: {
@@ -259,7 +278,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <Icon iconName="change_history" className="!text-2xl" aria-hidden="true" />,
+    icon: <History className="h-5 w-5" />,
   },
 
   issue: {
@@ -267,7 +286,7 @@ const activityDetails: {
       if (activity.verb === "created") return "created the issue.";
       else return "deleted an issue.";
     },
-    icon: <Icon iconName="stack" className="!text-2xl" aria-hidden="true" />,
+    icon: <LayersIcon className="h-5 w-5" />,
   },
 
   labels: {
@@ -294,7 +313,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <Icon iconName="sell" className="!text-2xl" aria-hidden="true" />,
+    icon: <Tag className="h-5 w-5" />,
   },
 
   link: {
@@ -308,7 +327,7 @@ const activityDetails: {
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
           link
-          <Icon iconName="launch" className="!text-xs" />
+          <Rocket className="h-3 w-3" />
         </button>
         {showIssue && (
           <>
@@ -319,7 +338,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="link" className="!text-2xl" aria-hidden="true" />,
+    icon: <LinkIcon className="h-5 w-5" />,
   },
 
   modules: {
@@ -343,12 +362,12 @@ const activityDetails: {
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
           {activity.verb === "created" || activity.verb === "updated" ? activity.new_value : activity.old_value}
-          <Icon iconName="launch" className="!text-xs" />
+          <Rocket className="h-5 w-5" />
         </button>
         .
       </>
     ),
-    icon: <Icon iconName="dataset" className="!text-2xl" aria-hidden="true" />,
+    icon: <DiceIcon className="h-5 w-5" />,
   },
 
   name: {
@@ -364,7 +383,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="chat" className="!text-2xl" aria-hidden="true" />,
+    icon: <MessageSquare className="h-5 w-5" />,
   },
 
   parent: {
@@ -397,7 +416,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="supervised_user_circle" className="!text-2xl" aria-hidden="true" />,
+    icon: <Users2 className="h-5 w-5" />,
   },
 
   priority: {
@@ -416,7 +435,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Icon iconName="signal_cellular_alt" className="!text-2xl" aria-hidden="true" />,
+    icon: <Signal className="h-5 w-5" />,
   },
 
   start_date: {
@@ -434,7 +453,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
+    icon: <CalendarDays className="h-5 w-5" />,
   },
 
   state: {
@@ -450,7 +469,7 @@ const activityDetails: {
         .
       </>
     ),
-    icon: <Squares2X2Icon className="h-3 w-3" aria-hidden="true" />,
+    icon: <DoubleCircleIcon className="h-3 w-3" aria-hidden="true" />,
   },
 
   target_date: {
@@ -469,7 +488,7 @@ const activityDetails: {
         )}
       </>
     ),
-    icon: <Icon iconName="calendar_today" className="!text-2xl" aria-hidden="true" />,
+    icon: <CalendarDays className="h-5 w-5" />,
   },
 };
 
diff --git a/web/components/web-view/comment-card.tsx b/web/components/web-view/comment-card.tsx
index 54ee30ad8..db7a512ae 100644
--- a/web/components/web-view/comment-card.tsx
+++ b/web/components/web-view/comment-card.tsx
@@ -3,13 +3,13 @@ import React, { useEffect, useState } from "react";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // icons
-import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react";
 // service
 import { FileService } from "services/file.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu, Icon } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 
@@ -86,7 +86,7 @@ export const CommentCard: React.FC<Props> = (props) => {
         )}
 
         <span className="absolute -bottom-0.5 -right-1 rounded-tl bg-custom-background-80 px-0.5 py-px">
-          <ChatBubbleLeftEllipsisIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />
+          <MessageSquare className="h-3.5 w-3.5 text-custom-text-200" />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -119,21 +119,21 @@ export const CommentCard: React.FC<Props> = (props) => {
                 disabled={isSubmitting || disabled}
                 className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <CheckIcon className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
               </button>
               <button
                 type="button"
                 className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 onClick={() => setIsEditing(false)}
               >
-                <XMarkIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
               </button>
             </div>
           </form>
           <div className={`relative ${isEditing ? "hidden" : ""}`}>
             {showAccessSpecifier && (
               <div className="absolute top-1 right-1.5 z-[1] text-custom-text-300">
-                <Icon iconName={comment.access === "INTERNAL" ? "lock" : "public"} className="!text-xs" />
+                {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
               </div>
             )}
             <LiteReadOnlyEditorWithRef
@@ -148,7 +148,7 @@ export const CommentCard: React.FC<Props> = (props) => {
       {user?.id === comment.actor && !disabled && (
         <CustomMenu ellipsis>
           <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
-            <Icon iconName="edit" />
+            <Pencil className="h-3 w-3" />
             Edit comment
           </CustomMenu.MenuItem>
           {showAccessSpecifier && (
@@ -159,7 +159,7 @@ export const CommentCard: React.FC<Props> = (props) => {
                   onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="public" />
+                  <Globe2 className="h-3 w-3" />
                   Switch to public comment
                 </CustomMenu.MenuItem>
               ) : (
@@ -168,7 +168,7 @@ export const CommentCard: React.FC<Props> = (props) => {
                   onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                   className="flex items-center gap-1"
                 >
-                  <Icon iconName="lock" />
+                  <Lock className="h-3 w-3" />
                   Switch to private comment
                 </CustomMenu.MenuItem>
               )}
@@ -180,7 +180,7 @@ export const CommentCard: React.FC<Props> = (props) => {
             }}
             className="flex items-center gap-1"
           >
-            <Icon iconName="delete" />
+            <Trash2 className="h-3 w-3" />
             Delete comment
           </CustomMenu.MenuItem>
         </CustomMenu>
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
index 34bb0e907..fed555e22 100644
--- a/web/components/web-view/issue-activity.tsx
+++ b/web/components/web-view/issue-activity.tsx
@@ -14,7 +14,7 @@ import { Label, AddComment, ActivityMessage, ActivityIcon, CommentCard } from "c
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // ui
-import { Icon } from "components/ui";
+import { History } from "lucide-react";
 // types
 import type { IIssue, IIssueComment } from "types";
 
@@ -123,7 +123,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
                             <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
                               {activityItem.field ? (
                                 activityItem.new_value === "restore" ? (
-                                  <Icon iconName="history" className="text-sm text-custom-text-200" />
+                                  <History className="h-3.5 w-3.5 text-custom-text-200" />
                                 ) : (
                                   <ActivityIcon activity={activityItem} />
                                 )
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
index 92fdb5ecd..c152f059e 100644
--- a/web/components/web-view/issue-properties-detail.tsx
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -10,12 +10,10 @@ import useEstimateOption from "hooks/use-estimate-option";
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // icons
 import { PlayIcon, User, X, CalendarDays, LayoutGrid, Users, CopyPlus } from "lucide-react";
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
-import { BlockedIcon, BlockerIcon, RelatedIcon, ContrastIcon } from "components/icons";
 //services
 import { IssueService } from "services/issue";
 // components
-import { Button } from "@plane/ui";
+import { Button, DiceIcon, BlockedIcon, BlockerIcon, RelatedIcon, ContrastIcon } from "@plane/ui";
 import {
   Label,
   StateSelect,
@@ -493,7 +491,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
             <div className="border border-custom-border-200 rounded-[4px] p-2">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-1">
-                  <RectangleGroupIcon className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
+                  <DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-400" />
                   <span className="text-sm text-custom-text-400">Module</span>
                 </div>
                 <div>
diff --git a/web/components/web-view/issues-select-bottom-sheet.tsx b/web/components/web-view/issues-select-bottom-sheet.tsx
index 80bf13795..0ac2f5346 100644
--- a/web/components/web-view/issues-select-bottom-sheet.tsx
+++ b/web/components/web-view/issues-select-bottom-sheet.tsx
@@ -8,7 +8,7 @@ import useDebounce from "hooks/use-debounce";
 import { ProjectService } from "services/project";
 // components
 import { WebViewModal } from "components/web-view";
-import { LayerDiagonalIcon } from "components/icons";
+import { LayersIcon } from "@plane/ui";
 import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "types";
@@ -88,7 +88,7 @@ export const IssuesSelectBottomSheet: React.FC<IssuesSelectBottomSheetProps> = (
     <WebViewModal isOpen={isOpen} onClose={handleClose} modalTitle="Select issue">
       {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
         <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-          <LayerDiagonalIcon height="52" width="52" />
+          <LayersIcon height="52" width="52" />
           <h3 className="text-custom-text-200">
             No issues found. Create a new issue with{" "}
             <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
diff --git a/web/components/web-view/select-priority.tsx b/web/components/web-view/select-priority.tsx
index 59a22ef45..61467a40e 100644
--- a/web/components/web-view/select-priority.tsx
+++ b/web/components/web-view/select-priority.tsx
@@ -8,7 +8,7 @@ import { ChevronDown } from "lucide-react";
 import { PRIORITIES } from "constants/project";
 
 // components
-import { PriorityIcon } from "components/icons";
+import { PriorityIcon } from "@plane/ui";
 import { WebViewModal } from "./web-view-modal";
 
 // helpers
@@ -61,7 +61,7 @@ export const PrioritySelect: React.FC<Props> = (props) => {
                       : "border-custom-border-200 text-custom-text-200"
                   }`}
                 >
-                  <PriorityIcon priority={priority} className="text-sm" />
+                  <PriorityIcon priority={priority} className="h-3.5 w-3.5" />
                 </span>
               ),
             })) || []
@@ -73,13 +73,9 @@ export const PrioritySelect: React.FC<Props> = (props) => {
         type="button"
         disabled={disabled}
         onClick={() => setIsOpen(true)}
-        className={
-          "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"
-        }
+        className={"relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5"}
       >
-        <span className="text-custom-text-200">
-          {value ? capitalizeFirstLetter(value) : "None"}
-        </span>
+        <span className="text-custom-text-200">{value ? capitalizeFirstLetter(value) : "None"}</span>
         <ChevronDown className="w-4 h-4 text-custom-text-200" />
       </button>
     </>
diff --git a/web/components/web-view/select-state.tsx b/web/components/web-view/select-state.tsx
index 966a2f300..b9b40908a 100644
--- a/web/components/web-view/select-state.tsx
+++ b/web/components/web-view/select-state.tsx
@@ -9,7 +9,7 @@ import { ProjectStateService } from "services/project";
 // fetch key
 import { STATES_LIST } from "constants/fetch-keys";
 // components
-import { StateGroupIcon } from "components/icons";
+import { StateGroupIcon } from "@plane/ui";
 import { WebViewModal } from "./web-view-modal";
 // helpers
 import { getStatesList } from "helpers/state.helper";
diff --git a/web/components/web-view/web-view-modal.tsx b/web/components/web-view/web-view-modal.tsx
index 57f394c90..7893944a8 100644
--- a/web/components/web-view/web-view-modal.tsx
+++ b/web/components/web-view/web-view-modal.tsx
@@ -5,7 +5,7 @@ import React, { Fragment } from "react";
 import { Transition, Dialog } from "@headlessui/react";
 
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { X } from "lucide-react";
 
 type Props = {
   isOpen: boolean;
@@ -49,10 +49,7 @@ export const WebViewModal = (props: Props) => {
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-none rounded-tr-[20px] rounded-tl-[20px] bg-custom-background-100 p-6 text-left shadow-xl transition-all sm:mt-8 w-full">
                 <div className="flex justify-between items-center w-full">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-2xl font-semibold leading-6 text-custom-text-100"
-                  >
+                  <Dialog.Title as="h3" className="text-2xl font-semibold leading-6 text-custom-text-100">
                     {modalTitle}
                   </Dialog.Title>
                   <button
@@ -60,7 +57,7 @@ export const WebViewModal = (props: Props) => {
                     className="inline-flex justify-center items-center p-2 rounded-md text-custom-text-200 hover:text-custom-text-100 focus:outline-none"
                     onClick={handleClose}
                   >
-                    <XMarkIcon className="w-6 h-6 text-custom-text-200" />
+                    <X className="w-6 h-6 text-custom-text-200" />
                   </button>
                 </div>
                 <div className="flex flex-col mt-6 h-full max-h-[70vh]">{children}</div>
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index aa2f4cd4d..2cf3c27af 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button } from "@plane/ui";
 
@@ -57,7 +57,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                 <div className="bg-custom-background-80 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 1fbac7bf4..14ab211ce 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -13,7 +13,7 @@ import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
@@ -117,7 +117,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Workspace</h3>
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 097ed188f..03d0cef8b 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -8,9 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // icons
-import { Bolt, HelpOutlineOutlined, WestOutlined } from "@mui/icons-material";
-import { DiscordIcon } from "components/icons";
-import { FileText, Github, MessagesSquare } from "lucide-react";
+import { FileText, HelpCircle, MessagesSquare, MoveLeft, Zap } from "lucide-react";
+import { DiscordIcon, GithubIcon } from "@plane/ui";
 // assets
 import packageJson from "package.json";
 
@@ -28,7 +27,7 @@ const helpOptions = [
   {
     name: "Report a bug",
     href: "https://github.com/makeplane/plane/issues/new/choose",
-    Icon: Github,
+    Icon: GithubIcon,
   },
   {
     name: "Chat with us",
@@ -81,7 +80,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
               document.dispatchEvent(e);
             }}
           >
-            <Bolt fontSize="small" />
+            <Zap className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
@@ -90,14 +89,14 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
-            <HelpOutlineOutlined fontSize="small" />
+            <HelpCircle className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
             className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
             onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
           >
-            <WestOutlined fontSize="small" />
+            <MoveLeft className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
@@ -106,10 +105,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observe
             }`}
             onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
           >
-            <WestOutlined
-              fontSize="small"
-              className={`duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`}
-            />
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`} />
           </button>
         </div>
 
diff --git a/web/components/workspace/issues-list.tsx b/web/components/workspace/issues-list.tsx
index a27951280..5ec0769af 100644
--- a/web/components/workspace/issues-list.tsx
+++ b/web/components/workspace/issues-list.tsx
@@ -2,14 +2,13 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { AlertTriangle } from "lucide-react";
+import { LayersIcon, Loader } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IIssueLite } from "types";
-import { Loader } from "@plane/ui";
-import { LayerDiagonalIcon } from "components/icons";
 
 type Props = {
   issues: IIssueLite[] | undefined;
@@ -63,7 +62,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                             type === "overdue" ? (dateDifference > 6 ? "text-red-500" : "text-yellow-400") : ""
                           }`}
                         >
-                          {type === "overdue" && <ExclamationTriangleIcon className="h-3.5 w-3.5" />}
+                          {type === "overdue" && <AlertTriangle className="h-3.5 w-3.5" />}
                           {dateDifference} {dateDifference > 1 ? "days" : "day"}
                         </h5>
                         <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
@@ -78,7 +77,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
             ) : (
               <div className="grid h-full place-items-center">
                 <div className="my-5 flex flex-col items-center gap-4">
-                  <LayerDiagonalIcon height={60} width={60} />
+                  <LayersIcon height={60} width={60} />
                   <span className="text-custom-text-200">
                     No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
                     shortcut to create a new issue
diff --git a/web/components/workspace/issues-stats.tsx b/web/components/workspace/issues-stats.tsx
index a025306ff..22e966ac8 100644
--- a/web/components/workspace/issues-stats.tsx
+++ b/web/components/workspace/issues-stats.tsx
@@ -3,7 +3,7 @@ import { ActivityGraph } from "components/workspace";
 // ui
 import { Loader, Tooltip } from "@plane/ui";
 // icons
-import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { Info } from "lucide-react";
 // types
 import { IUserWorkspaceDashboard } from "types";
 import { useRouter } from "next/router";
@@ -80,7 +80,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => {
             tooltipContent="Your profile activity graph is a record of actions you've performed on issues across the workspace."
             className="w-72 border border-custom-border-200"
           >
-            <InformationCircleIcon className="h-3 w-3" />
+            <Info className="h-3 w-3" />
           </Tooltip>
         </h3>
         <ActivityGraph activities={data?.issue_activities} />
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 5422c147d..87bc4b108 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
 import { CustomSelect } from "components/ui";
 import { Button, Input } from "@plane/ui";
 // icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Plus, X } from "lucide-react";
 // types
 import { IUser } from "types";
 // constants
@@ -215,7 +215,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                               className="self-center place-items-center rounded -ml-3"
                               onClick={() => remove(index)}
                             >
-                              <XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                              <X className="h-3.5 w-3.5 text-custom-text-200" />
                             </button>
                           )}
                         </div>
@@ -229,7 +229,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
                       onClick={appendField}
                     >
-                      <PlusIcon className="h-4 w-4" />
+                      <Plus className="h-4 w-4" />
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index ecd1c1249..f93c83d65 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -13,10 +13,10 @@ import useToast from "hooks/use-toast";
 import { UserService } from "services/user.service";
 import { AuthService } from "services/auth.service";
 // components
-import { Avatar, Icon } from "components/ui";
+import { Avatar } from "components/ui";
 import { Loader } from "@plane/ui";
 // icons
-import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { Check, LogOut, Plus, Settings, UserCircle2 } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -43,12 +43,12 @@ const userLinks = (workspaceSlug: string, userId: string) => [
 const profileLinks = (workspaceSlug: string, userId: string) => [
   {
     name: "View profile",
-    icon: "account_circle",
+    icon: UserCircle2,
     link: `/${workspaceSlug}/profile/${userId}`,
   },
   {
     name: "Settings",
-    icon: "settings",
+    icon: Settings,
     link: `/${workspaceSlug}/me/profile`,
   },
 ];
@@ -180,7 +180,7 @@ export const WorkspaceSidebarDropdown = () => {
                               </h5>
                             </div>
                             <span className="p-1">
-                              <CheckIcon
+                              <Check
                                 className={`h-3 w-3.5 text-custom-sidebar-text-100 ${
                                   workspace.id === activeWorkspace?.id ? "opacity-100" : "opacity-0"
                                 }`}
@@ -201,7 +201,7 @@ export const WorkspaceSidebarDropdown = () => {
                     }}
                     className="flex w-full items-center gap-2 px-2 py-1 text-sm text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                   >
-                    <PlusIcon className="h-4 w-4" />
+                    <Plus className="h-4 w-4" />
                     Create Workspace
                   </Menu.Item>
                 </div>
@@ -266,7 +266,7 @@ export const WorkspaceSidebarDropdown = () => {
                   <Menu.Item key={index} as="button" type="button">
                     <Link href={link.link}>
                       <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                        <Icon iconName={link.icon} className="!text-lg !leading-5" />
+                        <link.icon className="h-4 w-4" />
                         {link.name}
                       </a>
                     </Link>
@@ -280,7 +280,7 @@ export const WorkspaceSidebarDropdown = () => {
                   className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
                   onClick={handleSignOut}
                 >
-                  <Icon iconName="logout" className="!text-lg !leading-5" />
+                  <LogOut className="h-5 w-5" />
                   Sign out
                 </Menu.Item>
               </div>
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index af06b2c38..c090a4e3b 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -5,29 +5,29 @@ import { useRouter } from "next/router";
 import { NotificationPopover } from "components/notifications";
 import { Tooltip } from "@plane/ui";
 // icons
-import { BarChartRounded, GridViewOutlined, TaskAltOutlined, WorkOutlineOutlined } from "@mui/icons-material";
+import { BarChart, Briefcase, CheckCircle, LayoutGrid } from "lucide-react";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { observer } from "mobx-react-lite";
 
 const workspaceLinks = (workspaceSlug: string) => [
   {
-    Icon: GridViewOutlined,
+    Icon: LayoutGrid,
     name: "Dashboard",
     href: `/${workspaceSlug}`,
   },
   {
-    Icon: BarChartRounded,
+    Icon: BarChart,
     name: "Analytics",
     href: `/${workspaceSlug}/analytics`,
   },
   {
-    Icon: WorkOutlineOutlined,
+    Icon: Briefcase,
     name: "Projects",
     href: `/${workspaceSlug}/projects`,
   },
   {
-    Icon: TaskAltOutlined,
+    Icon: CheckCircle,
     name: "All Issues",
     href: `/${workspaceSlug}/workspace-views/all-issues`,
   },
@@ -60,7 +60,7 @@ export const WorkspaceSidebarMenu = observer(() => {
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                   } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  {<link.Icon fontSize="small" />}
+                  {<link.Icon className="h-5 w-5" />}
                   {!themeStore?.sidebarCollapsed && link.name}
                 </div>
               </Tooltip>
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 52b0276ae..b09496cc4 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from "react";
 
 // ui
-import { Icon } from "components/ui";
-import { ChevronDown, PenSquare } from "lucide-react";
+import { ChevronDown, PenSquare, Search } from "lucide-react";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 // components
@@ -52,7 +51,7 @@ export const WorkspaceSidebarQuickAction = () => {
               document.dispatchEvent(e);
             }}
           >
-            <Icon iconName="edit_square" className="!text-lg !leading-4 text-custom-sidebar-text-300" />
+            <PenSquare className="h-4 w-4 text-custom-sidebar-text-300" />
             {!store?.theme?.sidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
           </button>
 
@@ -106,7 +105,7 @@ export const WorkspaceSidebarQuickAction = () => {
             document.dispatchEvent(e);
           }}
         >
-          <Icon iconName="search" className="!text-lg !leading-4 text-custom-sidebar-text-300" />
+          <Search className="h-4 w-4 text-custom-sidebar-text-300" />
         </button>
       </div>
     </>
diff --git a/web/components/workspace/views/delete-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
index 28f351037..432eba165 100644
--- a/web/components/workspace/views/delete-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -10,7 +10,7 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { AlertTriangle } from "lucide-react";
 // types
 import { IWorkspaceView } from "types/workspace-views";
 
@@ -89,7 +89,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
+                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </div>
                     <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                       <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
diff --git a/web/components/workspace/views/header.tsx b/web/components/workspace/views/header.tsx
index 6c782e4c7..6406a994d 100644
--- a/web/components/workspace/views/header.tsx
+++ b/web/components/workspace/views/header.tsx
@@ -9,7 +9,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { CreateUpdateWorkspaceViewModal } from "components/workspace";
 // icon
-import { PlusIcon } from "lucide-react";
+import { Plus } from "lucide-react";
 // constants
 import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
 
@@ -74,7 +74,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
           className="flex items-center justify-center flex-shrink-0 sticky -right-4 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
           onClick={() => setCreateViewModal(true)}
         >
-          <PlusIcon className="h-4 w-4 text-custom-primary-200" />
+          <Plus className="h-4 w-4 text-custom-primary-200" />
         </button>
       </div>
     </>
diff --git a/web/components/workspace/views/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
index b603ed2cd..556be3d91 100644
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -8,7 +8,7 @@ import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "component
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { PencilIcon, Sparkles, TrashIcon } from "lucide-react";
+import { Pencil, Sparkles, Trash2 } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { calculateTotalFilters } from "helpers/filter.helper";
@@ -59,7 +59,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <PencilIcon size={14} strokeWidth={2} />
+                        <Pencil size={14} strokeWidth={2} />
                         <span>Edit View</span>
                       </span>
                     </CustomMenu.MenuItem>
@@ -71,7 +71,7 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
                       }}
                     >
                       <span className="flex items-center justify-start gap-2">
-                        <TrashIcon size={14} strokeWidth={2} />
+                        <Trash2 size={14} strokeWidth={2} />
                         <span>Delete View</span>
                       </span>
                     </CustomMenu.MenuItem>
diff --git a/web/constants/cycle.ts b/web/constants/cycle.tsx
similarity index 67%
rename from web/constants/cycle.ts
rename to web/constants/cycle.tsx
index f4d805858..a2433d70c 100644
--- a/web/constants/cycle.ts
+++ b/web/constants/cycle.tsx
@@ -1,3 +1,5 @@
+import { GanttChart, Kanban, List } from "lucide-react";
+
 export const CYCLE_TAB_LIST = [
   {
     key: "all",
@@ -24,14 +26,14 @@ export const CYCLE_TAB_LIST = [
 export const CYCLE_VIEWS = [
   {
     key: "list",
-    icon: "list",
+    icon: <List className="h-4 w-4" />,
   },
   {
     key: "board",
-    icon: "dataset",
+    icon: <Kanban className="h-4 w-4" />,
   },
   {
     key: "gantt",
-    icon: "view_timeline",
+    icon: <GanttChart className="h-4 w-4" />,
   },
 ];
diff --git a/web/constants/project.ts b/web/constants/project.ts
index 2f15b74bc..3de846415 100644
--- a/web/constants/project.ts
+++ b/web/constants/project.ts
@@ -1,15 +1,16 @@
+import { Globe2, Lock, LucideIcon } from "lucide-react";
 import { TIssuePriorities } from "types";
 
-export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
+export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: LucideIcon }[] = [
   {
     key: 0,
     label: "Private",
-    icon: "lock",
+    icon: Lock,
   },
   {
     key: 2,
     label: "Public",
-    icon: "public",
+    icon: Globe2,
   },
 ];
 
diff --git a/web/constants/spreadsheet.ts b/web/constants/spreadsheet.ts
index df6cd5aef..acb18b8de 100644
--- a/web/constants/spreadsheet.ts
+++ b/web/constants/spreadsheet.ts
@@ -1,10 +1,4 @@
-import {
-  CalendarDaysIcon,
-  PlayIcon,
-  Squares2X2Icon,
-  TagIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+import { CalendarDaysIcon, PlayIcon, Squares2X2Icon, TagIcon, UserGroupIcon } from "@heroicons/react/24/outline";
 
 export const SPREADSHEET_COLUMN = [
   {
diff --git a/web/layouts/app-layout-legacy/app-header.tsx b/web/layouts/app-layout-legacy/app-header.tsx
index c37b3908c..f9ae83497 100644
--- a/web/layouts/app-layout-legacy/app-header.tsx
+++ b/web/layouts/app-layout-legacy/app-header.tsx
@@ -2,7 +2,7 @@
 import { useRouter } from "next/router";
 import Link from "next/link";
 // icons
-import { Bars3Icon } from "@heroicons/react/24/outline";
+import { Menu } from "lucide-react";
 // ui components
 import { Tooltip } from "@plane/ui";
 // hooks
@@ -42,7 +42,7 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
             className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
             onClick={() => setToggleSidebar((prevData) => !prevData)}
           >
-            <Bars3Icon className="h-5 w-5" />
+            <Menu className="h-5 w-5" />
           </button>
         </div>
         <div>{breadcrumbs}</div>
diff --git a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index cb2abc56f..69f33b509 100644
--- a/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -12,10 +12,8 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
-import { Button, Spinner } from "@plane/ui";
+import { Button, LayersIcon, Spinner } from "@plane/ui";
 import { EmptyState } from "components/common";
-// icons
-import { LayerDiagonalIcon } from "components/icons";
 // images
 import emptyProject from "public/empty-state/project.svg";
 
@@ -88,7 +86,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
             actionButton={
               <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
                 <a>
-                  <Button variant="primary" prependIcon={<LayerDiagonalIcon color="white" />}>
+                  <Button variant="primary" prependIcon={<LayersIcon color="white" />}>
                     Go to issues
                   </Button>
                 </a>
diff --git a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index 9a443c136..0f8b7a3d4 100644
--- a/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -11,11 +11,9 @@ import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 import AppHeader from "layouts/app-layout-legacy/app-header";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
-import { Button, Spinner } from "@plane/ui";
+import { Button, LayersIcon, Spinner } from "@plane/ui";
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
-// icons
-import { LayerDiagonalIcon } from "components/icons";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
@@ -89,7 +87,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                 <Link href={`/${workspaceSlug}`}>
                   <a>
                     <Button className="flex items-center gap-1">
-                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                      <LayersIcon height={16} width={16} color="white" /> Go to workspace
                     </Button>
                   </a>
                 </Link>
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index ff991988c..55870cd06 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -13,7 +13,7 @@ import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
 import { WorkspaceAnalyticsHeader } from "components/headers";
 import { EmptyState } from "components/common";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // assets
 import emptyAnalytics from "public/empty-state/analytics.svg";
 // constants
@@ -93,7 +93,7 @@ const AnalyticsPage = observer(() => {
               description="Let's create your first project and analyze the stats with various graphs."
               image={emptyAnalytics}
               primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
+                icon: <Plus className="h-4 w-4" />,
                 text: "New Project",
                 onClick: () => {
                   const e = new KeyboardEvent("keydown", {
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
index 697e739e5..afd2cd654 100644
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // hooks
@@ -87,7 +87,7 @@ const MyIssuesPage: NextPage = () => {
           <MyIssuesViewOptions />
           <Button
             variant="primary"
-            prependIcon={<PlusIcon />}
+            prependIcon={<Plus />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
               document.dispatchEvent(e);
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 29c2a5fbe..a24f6f6dc 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -9,11 +9,10 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
-import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
+import { History, MessageSquare } from "lucide-react";
 // ui
-import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { Loader } from "@plane/ui";
+import { ExternalLinkIcon, Loader } from "@plane/ui";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
@@ -59,7 +58,7 @@ const ProfileActivity = () => {
                           <div className="relative px-1">
                             {activityItem.field ? (
                               activityItem.new_value === "restore" && (
-                                <Icon iconName="history" className="text-sm text-custom-text-200" />
+                                <History className="h-3.5 w-3.5 text-custom-text-200" />
                               )
                             ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                               <img
@@ -78,10 +77,7 @@ const ProfileActivity = () => {
                             )}
 
                             <span className="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
-                              <ChatBubbleLeftEllipsisIcon
-                                className="h-6 w-6 !text-2xl text-custom-text-200"
-                                aria-hidden="true"
-                              />
+                              <MessageSquare className="h-6 w-6 !text-2xl text-custom-text-200" aria-hidden="true" />
                             </span>
                           </div>
                           <div className="min-w-0 flex-1">
@@ -120,7 +116,7 @@ const ProfileActivity = () => {
                         created{" "}
                         <Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
                           <a className="inline-flex items-center hover:underline">
-                            this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
+                            this issue. <ExternalLinkIcon className="ml-1 h-3.5 w-3.5" />
                           </a>
                         </Link>
                       </span>
@@ -142,7 +138,7 @@ const ProfileActivity = () => {
                                     <div className="flex h-6 w-6 items-center justify-center">
                                       {activityItem.field ? (
                                         activityItem.new_value === "restore" ? (
-                                          <Icon iconName="history" className="!text-2xl text-custom-text-200" />
+                                          <History className="h-5 w-5 text-custom-text-200" />
                                         ) : (
                                           <ActivityIcon activity={activityItem} />
                                         )
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index f104fe867..c9456900c 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -18,8 +18,7 @@ import { Button, Input, Spinner } from "@plane/ui";
 import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { UserIcon } from "@heroicons/react/24/outline";
-import { UserCircle } from "lucide-react";
+import { User2, UserCircle2 } from "lucide-react";
 // types
 import type { NextPage } from "next";
 import type { IUser } from "types";
@@ -185,7 +184,7 @@ const Profile: NextPage = () => {
                       <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                         {!watch("avatar") || watch("avatar") === "" ? (
                           <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                            <UserIcon className="h-full w-full text-custom-text-200" />
+                            <User2 className="h-full w-full text-custom-text-200" />
                           </div>
                         ) : (
                           <div className="relative h-16 w-16 overflow-hidden">
@@ -231,7 +230,7 @@ const Profile: NextPage = () => {
                 <Link href={`/${workspaceSlug}/profile/${myProfile.id}`}>
                   <a className="flex item-center cursor-pointer gap-2 h-4 leading-4 text-sm text-custom-primary-100">
                     <span className="h-4 w-4">
-                      <UserCircle className="h-4 w-4" />
+                      <UserCircle2 className="h-4 w-4" />
                     </span>
                     View Profile
                   </a>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index a7729d847..33792f8ba 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -16,9 +16,10 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Icon } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
-import { Loader } from "@plane/ui";
+import { ArchiveIcon, Loader } from "@plane/ui";
+// icons
+import { History } from "lucide-react";
 // types
 import { IIssue } from "types";
 import type { NextPage } from "next";
@@ -165,7 +166,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
             {issueDetails.archived_at && (
               <div className="flex items-center justify-between gap-2 px-2.5 py-2 text-sm border rounded-md text-custom-text-200 border-custom-border-200 bg-custom-background-90">
                 <div className="flex gap-2 items-center">
-                  <Icon iconName="archive" className="" />
+                  <ArchiveIcon className="h-3.5 w-3.5" />
                   <p>This issue has been archived by Plane.</p>
                 </div>
                 <button
@@ -173,7 +174,8 @@ const ArchivedIssueDetailsPage: NextPage = () => {
                   onClick={handleUnArchive}
                   disabled={isRestoring}
                 >
-                  <Icon iconName="history" />
+                  <History className="h-3.5 w-3.5" />
+
                   <span>{isRestoring ? "Restoring..." : "Restore Issue"}</span>
                 </button>
               </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index debdd5425..64ead028c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -13,10 +13,10 @@ import { truncateText } from "helpers/string.helper";
 // components
 import { IssuesFilterView, IssuesView } from "components/core";
 // ui
-import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { X } from "lucide-react";
+import { ArchiveIcon } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -56,10 +56,10 @@ const ProjectArchivedIssues: NextPage = () => {
               onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/`)}
               className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
             >
-              <Icon iconName="archive" className="text-base" />
+              <ArchiveIcon className="h-4 w-4" />
               <span>Archived Issues</span>
 
-              <XMarkIcon className="h-3 w-3" />
+              <X className="h-3 w-3" />
             </button>
           </div>
           <IssuesView />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 8b1a6eee1..a66b13d0b 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // icons
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
-import { CyclesIcon } from "components/icons";
+import { ContrastIcon } from "@plane/ui";
+import { ArrowLeft } from "lucide-react";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
@@ -109,7 +109,7 @@ const SingleCycle: React.FC = () => {
           <CustomMenu
             label={
               <>
-                <CyclesIcon className="h-3 w-3" />
+                <ContrastIcon className="h-3 w-3" />
                 {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
               </>
             }
@@ -137,7 +137,7 @@ const SingleCycle: React.FC = () => {
               }`}
               onClick={() => setCycleSidebar((prevData) => !prevData)}
             >
-              <ArrowLeftIcon className="h-4 w-4" />
+              <ArrowLeft className="h-4 w-4" />
             </button>
           </div>
         }
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 0e4d3d5db..225d1b8c4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -11,7 +11,6 @@ import { CycleCreateEditModal } from "components/cycles/cycle-create-edit-modal"
 // ui
 import { Button } from "@plane/ui";
 import { EmptyState } from "components/common";
-import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
@@ -168,7 +167,7 @@ const ProjectCyclesPage: NextPage = observer(() => {
                       }`}
                       onClick={() => handleCurrentLayout(view.key as TCycleLayout)}
                     >
-                      <Icon iconName={view.icon} className="!text-base" />
+                      {view.icon}
                     </button>
                   );
                 })}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 58573c958..7dd472cb1 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 // icons
-import { RectangleGroupIcon } from "@heroicons/react/24/outline";
+import { DiceIcon } from "@plane/ui";
 // services
 import { ModuleService } from "services/module.service";
 // hooks
@@ -105,7 +105,7 @@ const SingleModule: React.FC = () => {
           <CustomMenu
             label={
               <>
-                <RectangleGroupIcon className="h-3 w-3" />
+                <DiceIcon className="h-3 w-3" />
                 {moduleDetails?.name && truncateText(moduleDetails.name, 40)}
               </>
             }
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 4176ba426..a2c4cc1c3 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -15,11 +15,10 @@ import { ModuleService } from "services/module.service";
 import { CreateUpdateModuleModal, ModulesListGanttChartView, SingleModuleCard } from "components/modules";
 // ui
 import { Button, Loader, Tooltip } from "@plane/ui";
-import { Icon } from "components/ui";
 import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { GanttChart, LayoutGrid, Plus } from "lucide-react";
 // images
 import emptyModule from "public/empty-state/module.svg";
 // types
@@ -33,11 +32,11 @@ import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helpe
 const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
   {
     type: "gantt_chart",
-    icon: "view_timeline",
+    icon: GanttChart,
   },
   {
     type: "grid",
-    icon: "table_rows",
+    icon: LayoutGrid,
   },
 ];
 
@@ -103,13 +102,13 @@ const ProjectModules: NextPage = () => {
                 }`}
                 onClick={() => setModulesView(option.type)}
               >
-                <Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
+                <option.icon className="h-4 w-4" />
               </button>
             </Tooltip>
           ))}
           <Button
             variant="primary"
-            prependIcon={<PlusIcon />}
+            prependIcon={<Plus />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "m" });
               document.dispatchEvent(e);
@@ -153,7 +152,7 @@ const ProjectModules: NextPage = () => {
             description="Modules are smaller, focused projects that help you group and organize issues."
             image={emptyModule}
             primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
+              icon: <Plus className="h-4 w-4" />,
               text: "New Module",
               onClick: () => {
                 const e = new KeyboardEvent("keydown", {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 92c4d6d22..2a1f4422f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -34,17 +34,7 @@ import { TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
-import {
-  ArrowLeftIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PlusIcon,
-  StarIcon,
-  LinkIcon,
-  XMarkIcon,
-  ChevronDownIcon,
-} from "@heroicons/react/24/outline";
-import { ColorPalletteIcon } from "components/icons";
+import { ArrowLeft, Lock, LinkIcon, Palette, Plus, Star, Unlock, X, ChevronDown } from "lucide-react";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
@@ -343,7 +333,7 @@ const SinglePage: NextPage = () => {
                     className="flex items-center gap-2 text-sm text-custom-text-200"
                     onClick={() => router.back()}
                   >
-                    <ArrowLeftIcon className="h-4 w-4" />
+                    <ArrowLeft className="h-4 w-4" />
                   </button>
 
                   <Controller
@@ -392,7 +382,7 @@ const SinglePage: NextPage = () => {
                               }}
                             />
                             {label.name}
-                            <XMarkIcon className="h-2.5 w-2.5 group-hover:text-red-500" />
+                            <X className="h-2.5 w-2.5 group-hover:text-red-500" />
                           </div>
                         );
                       })}
@@ -401,7 +391,7 @@ const SinglePage: NextPage = () => {
                   <CustomSearchSelect
                     customButton={
                       <div className="flex items-center gap-1 rounded-sm bg-custom-background-80 p-1.5 text-xs">
-                        <PlusIcon className="h-3.5 w-3.5" />
+                        <Plus className="h-3.5 w-3.5" />
                         {pageDetails.labels.length <= 0 && <span>Add Label</span>}
                       </div>
                     }
@@ -415,7 +405,7 @@ const SinglePage: NextPage = () => {
                         }}
                       >
                         <span className="flex items-center justify-start gap-1 text-custom-text-200">
-                          <PlusIcon className="h-4 w-4" aria-hidden="true" />
+                          <Plus className="h-4 w-4" aria-hidden="true" />
                           <span>Create New Label</span>
                         </span>
                       </button>
@@ -447,7 +437,7 @@ const SinglePage: NextPage = () => {
                           }`}
                         >
                           Display
-                          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                          <ChevronDown className="h-3 w-3" aria-hidden="true" />
                         </Popover.Button>
 
                         <Transition
@@ -498,7 +488,7 @@ const SinglePage: NextPage = () => {
                                 }}
                               />
                             ) : (
-                              <ColorPalletteIcon height={16} width={16} />
+                              <Palette height={16} width={16} />
                             )}
                           </Popover.Button>
 
@@ -559,22 +549,22 @@ const SinglePage: NextPage = () => {
                     >
                       {pageDetails.access ? (
                         <button onClick={() => partialUpdatePage({ access: 0 })} className="z-10">
-                          <LockClosedIcon className="h-4 w-4" />
+                          <Lock className="h-4 w-4" />
                         </button>
                       ) : (
                         <button onClick={() => partialUpdatePage({ access: 1 })} type="button" className="z-10">
-                          <LockOpenIcon className="h-4 w-4" />
+                          <Unlock className="h-4 w-4" />
                         </button>
                       )}
                     </Tooltip>
                   )}
                   {pageDetails.is_favorite ? (
                     <button onClick={handleRemoveFromFavorites} className="z-10">
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                      <Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
                     </button>
                   ) : (
                     <button onClick={handleAddToFavorites} type="button" className="z-10">
-                      <StarIcon className="h-4 w-4" />
+                      <Star className="h-4 w-4" />
                     </button>
                   )}
                 </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index ca6745f94..cd627a442 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -13,7 +13,7 @@ import { ProjectService } from "services/project";
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // icons
-import { PlusIcon } from "components/icons";
+import { LayoutGrid, List, Plus } from "lucide-react";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
@@ -21,8 +21,6 @@ import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "compone
 // ui
 import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
 // types
 import { TPageViewProps } from "types";
 import type { NextPage } from "next";
@@ -104,7 +102,7 @@ const ProjectPages: NextPage = () => {
         right={
           <Button
             variant="primary"
-            prependIcon={<PlusIcon />}
+            prependIcon={<Plus />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "d" });
               document.dispatchEvent(e);
@@ -125,7 +123,7 @@ const ProjectPages: NextPage = () => {
                 }`}
                 onClick={() => setViewType("list")}
               >
-                <ListBulletIcon className="h-4 w-4" />
+                <List className="h-4 w-4" />
               </button>
               <button
                 type="button"
@@ -134,7 +132,7 @@ const ProjectPages: NextPage = () => {
                 }`}
                 onClick={() => setViewType("detailed")}
               >
-                <Squares2X2Icon className="h-4 w-4" />
+                <LayoutGrid className="h-4 w-4" />
               </button>
             </div>
           </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 217fe3d04..255d5a139 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -18,7 +18,7 @@ import { Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // images
 import emptyEstimate from "public/empty-state/estimate.svg";
 // types
@@ -168,7 +168,7 @@ const EstimatesSettings: NextPage = () => {
                     description="Estimates help you communicate the complexity of an issue."
                     image={emptyEstimate}
                     primaryButton={{
-                      icon: <PlusIcon className="h-4 w-4" />,
+                      icon: <Plus className="h-4 w-4" />,
                       text: "Add Estimate",
                       onClick: () => {
                         setEstimateToUpdate(undefined);
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 9e3872c4a..fba5dd3ab 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -12,12 +12,10 @@ import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ToggleSwitch } from "@plane/ui";
+import { ContrastIcon, DiceIcon, ToggleSwitch } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { ModuleIcon } from "components/icons";
 import { FileText, Inbox, Layers } from "lucide-react";
-import { ContrastOutlined } from "@mui/icons-material";
 // types
 import { IProject, IUser } from "types";
 import type { NextPage } from "next";
@@ -30,14 +28,14 @@ const featuresList = [
   {
     title: "Cycles",
     description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
-    icon: <ContrastOutlined className="!text-base !leading-4 text-purple-500 flex-shrink-0 rotate-180" />,
+    icon: <ContrastIcon className="h-4 w-4 text-purple-500 flex-shrink-0 rotate-180" />,
 
     property: "cycle_view",
   },
   {
     title: "Modules",
     description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
-    icon: <ModuleIcon width={16} height={16} className="flex-shrink-0" />,
+    icon: <DiceIcon width={16} height={16} className="flex-shrink-0" />,
     property: "module_view",
   },
   {
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index dbb905ca2..178f5bcea 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -8,10 +8,9 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 import { ProjectService } from "services/project";
 // components
 import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
-// components
 import { Button, Loader } from "@plane/ui";
-import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { ChevronDown, ChevronUp } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -98,7 +97,7 @@ const GeneralSettings: NextPage = observer(() => {
                     className="flex items-center justify-between w-full py-4"
                   >
                     <span className="text-xl tracking-tight">Delete Project</span>
-                    <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
+                    {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
                   </Disclosure.Button>
 
                   <Transition
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index e4459ca32..589ef3151 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -19,10 +19,10 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
 import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect, Icon } from "components/ui";
+import { CustomMenu, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { ChevronDown, X } from "lucide-react";
 // types
 import type { NextPage } from "next";
 import { IProject, IUserLite, IWorkspace } from "types";
@@ -379,9 +379,7 @@ const MembersSettings: NextPage = () => {
                               >
                                 {ROLE[member.role as keyof typeof ROLE]}
                               </span>
-                              {member.memberId !== user?.id && (
-                                <Icon iconName="expand_more" className="text-lg font-medium" />
-                              )}
+                              {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
                             </div>
                           }
                           value={member.role}
@@ -430,7 +428,7 @@ const MembersSettings: NextPage = () => {
                             }}
                           >
                             <span className="flex items-center justify-start gap-2">
-                              <XMarkIcon className="h-4 w-4" />
+                              <X className="h-4 w-4" />
 
                               <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
                             </span>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 0da70905a..9bb1a195f 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -18,7 +18,7 @@ import { SettingsSidebar } from "components/project";
 import { Loader } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { Plus } from "lucide-react";
 // helpers
 import { getStatesList, orderStateGroups } from "helpers/state.helper";
 import { truncateText } from "helpers/string.helper";
@@ -92,7 +92,7 @@ const StatesSettings: NextPage = () => {
                             className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
                             onClick={() => setActiveGroup(key as keyof StateGroup)}
                           >
-                            <PlusIcon className="h-4 w-4" />
+                            <Plus className="h-4 w-4" />
                           </button>
                         </div>
                         <div className="flex flex-col gap-2 rounded">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 8623bdda6..d42281fbb 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -14,7 +14,7 @@ import { CustomMenu } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { EmptyState } from "components/common";
 // icons
-import { StackedLayersIcon } from "components/icons";
+import { PhotoFilterIcon } from "@plane/ui";
 // images
 import emptyView from "public/empty-state/view.svg";
 // helpers
@@ -62,7 +62,7 @@ const SingleView: React.FC = () => {
         <CustomMenu
           label={
             <>
-              <StackedLayersIcon height={12} width={12} />
+              <PhotoFilterIcon height={12} width={12} />
               {viewDetails?.name && truncateText(viewDetails.name, 40)}
             </>
           }
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 2acf2f960..3d4a7352f 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -20,11 +20,11 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { CustomSelect, Icon } from "components/ui";
+import { CustomSelect } from "components/ui";
 import { Button, Input, Spinner } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { Pencil } from "lucide-react";
+import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -329,7 +329,8 @@ const WorkspaceSettings: NextPage = () => {
                       className="flex items-center justify-between w-full py-4"
                     >
                       <span className="text-xl tracking-tight">Delete Workspace</span>
-                      <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
+                      {/* <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" /> */}
+                      {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
                     </Disclosure.Button>
 
                     <Transition
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 3408540dc..80548b686 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -19,10 +19,10 @@ import SendWorkspaceInvitationModal from "components/workspace/send-workspace-in
 import { SettingsSidebar } from "components/project";
 // ui
 import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect, Icon } from "components/ui";
+import { CustomMenu, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { XMarkIcon } from "components/icons";
+import { ChevronDown, X } from "lucide-react";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -260,9 +260,7 @@ const MembersSettings: NextPage = () => {
                               >
                                 {ROLE[member.role as keyof typeof ROLE]}
                               </span>
-                              {member.memberId !== user?.id && (
-                                <Icon iconName="expand_more" className="text-lg font-medium" />
-                              )}
+                              {member.memberId !== user?.id && <ChevronDown className="h-4 w-4" />}
                             </div>
                           }
                           value={member.role}
@@ -314,7 +312,7 @@ const MembersSettings: NextPage = () => {
                             }}
                           >
                             <span className="flex items-center justify-start gap-2">
-                              <XMarkIcon className="h-4 w-4" />
+                              <X className="h-4 w-4" />
 
                               <span> {user?.id === member.memberId ? "Leave" : "Remove member"}</span>
                             </span>
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
index abda7d8e8..d17008338 100644
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
@@ -6,8 +6,7 @@ import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // ui
 import { PrimaryButton } from "components/ui";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
+import { CheckCircle, Plus } from "lucide-react";
 
 const WorkspaceView = () => (
   <WorkspaceAuthorizationLayout
@@ -27,7 +26,7 @@ const WorkspaceView = () => (
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
+          <Plus className="h-4 w-4" />
           Add Issue
         </PrimaryButton>
       </div>
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 5581c93cb..799bdf609 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -16,7 +16,7 @@ import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authori
 // ui
 import { Button } from "@plane/ui";
 // icons
-import { CheckCircleIcon } from "@heroicons/react/24/outline";
+import { CheckCircle2 } from "lucide-react";
 // images
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
@@ -167,7 +167,7 @@ const UserInvitationsPage: NextPage = () => {
                               isSelected ? "text-custom-primary-100" : "text-custom-text-200"
                             }`}
                           >
-                            <CheckCircleIcon className="h-5 w-5" />
+                            <CheckCircle2 className="h-5 w-5" />
                           </span>
                         </div>
                       );
diff --git a/web/pages/workspace-invitations/index.tsx b/web/pages/workspace-invitations/index.tsx
index dd97afd65..7288a669c 100644
--- a/web/pages/workspace-invitations/index.tsx
+++ b/web/pages/workspace-invitations/index.tsx
@@ -3,8 +3,8 @@ import React from "react";
 
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import { CheckIcon, CubeIcon, ShareIcon, StarIcon, UserIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // swr
+import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // hooks
@@ -73,7 +73,7 @@ const WorkspaceInvitation: NextPage = () => {
                       title={`You are already a member of ${invitationDetail.workspace.name}`}
                       description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
                     >
-                      <EmptySpaceItem Icon={CubeIcon} title="Continue to Dashboard" action={() => router.push("/")} />
+                      <EmptySpaceItem Icon={Boxes} title="Continue to Dashboard" action={() => router.push("/")} />
                     </EmptySpace>
                   </>
                 ) : (
@@ -81,9 +81,9 @@ const WorkspaceInvitation: NextPage = () => {
                     title={`You have been invited to ${invitationDetail.workspace.name}`}
                     description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
                   >
-                    <EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
+                    <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
                     <EmptySpaceItem
-                      Icon={XMarkIcon}
+                      Icon={X}
                       title="Ignore"
                       action={() => {
                         router.push("/");
@@ -102,7 +102,7 @@ const WorkspaceInvitation: NextPage = () => {
           >
             {!user ? (
               <EmptySpaceItem
-                Icon={UserIcon}
+                Icon={User2}
                 title="Sign in to continue"
                 action={() => {
                   router.push("/");
@@ -110,7 +110,7 @@ const WorkspaceInvitation: NextPage = () => {
               />
             ) : (
               <EmptySpaceItem
-                Icon={CubeIcon}
+                Icon={Boxes}
                 title="Continue to Dashboard"
                 action={() => {
                   router.push("/");
@@ -118,14 +118,14 @@ const WorkspaceInvitation: NextPage = () => {
               />
             )}
             <EmptySpaceItem
-              Icon={StarIcon}
+              Icon={Star}
               title="Star us on GitHub"
               action={() => {
                 router.push("https://github.com/makeplane");
               }}
             />
             <EmptySpaceItem
-              Icon={ShareIcon}
+              Icon={Share2}
               title="Join our community of active creators"
               action={() => {
                 router.push("https://discord.com/invite/8SR2N9PAcJ");