diff --git a/space/components/accounts/onboarding-form.tsx b/space/components/accounts/onboarding-form.tsx
index 4cca97a64..c3cb972b2 100644
--- a/space/components/accounts/onboarding-form.tsx
+++ b/space/components/accounts/onboarding-form.tsx
@@ -1,14 +1,11 @@
 import { useEffect, Fragment } from "react";
 import { useRouter } from "next/router";
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
-// mobx
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// headless ui
+import { Controller, useForm } from "react-hook-form";
 import { Listbox, Transition } from "@headlessui/react";
-// icons
-import { ChevronDownIcon, CheckIcon } from "@heroicons/react/20/solid";
+import { Check, ChevronDown } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // constants
 import { USER_ROLES } from "constants/workspace";
 // hooks
@@ -57,18 +54,15 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
 
     const userService = new UserService();
 
-    await userService
-      .updateMe(payload)
-      .then((response) => {
-        userStore.setCurrentUser(response);
-        router.push(next_path?.toString() || "/");
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Details updated successfully.",
-        });
-      })
-      .catch((err) => {});
+    await userService.updateMe(payload).then((response) => {
+      userStore.setCurrentUser(response);
+      router.push(next_path?.toString() || "/");
+      setToastAlert({
+        type: "success",
+        title: "Success!",
+        message: "Details updated successfully.",
+      });
+    });
   };
 
   useEffect(() => {
@@ -132,7 +126,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                     className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none px-3 py-2 text-sm`}
                   >
                     <span className={value ? "" : "text-custom-text-400"}>{value || "Select your role..."}</span>
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" strokeWidth={2} />
                   </Listbox.Button>
 
                   <Transition
@@ -163,7 +157,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
                                 <div className="flex items-center gap-2">
                                   <span>{role.label}</span>
                                 </div>
-                                {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
+                                {selected && <Check className="h-3 w-3 flex-shrink-0" strokeWidth={2} />}
                               </div>
                             )}
                           </Listbox.Option>
diff --git a/space/components/issues/navbar/issue-filter.tsx b/space/components/issues/navbar/issue-filter.tsx
index 852121a5e..08c9f3e2b 100644
--- a/space/components/issues/navbar/issue-filter.tsx
+++ b/space/components/issues/navbar/issue-filter.tsx
@@ -1,8 +1,7 @@
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-// icons
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
-// mobx
+import { ChevronDown } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
 // components
@@ -45,7 +44,7 @@ export const NavbarIssueFilter = observer(() => {
       button={
         <>
           <span>Filters</span>
-          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+          <ChevronDown className="h-3 w-3" aria-hidden="true" />
         </>
       }
       items={[
diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index f6b4d9bf3..b4754f098 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,25 +1,20 @@
 import React, { useState } from "react";
-
-// mobx
 import { observer } from "mobx-react-lite";
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Menu, Transition } from "@headlessui/react";
-// lib
+import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+// mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { LiteReadOnlyEditorWithRef, LiteTextEditorWithRef } from "@plane/lite-text-editor";
 
 import { CommentReactions } from "components/issues/peek-overview";
-// icons
-import { ChatBubbleLeftEllipsisIcon, CheckIcon, XMarkIcon, EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 // helpers
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import { Comment } from "types/issue";
-import fileService from "services/file.service";
 // services
+import fileService from "services/file.service";
 
 type Props = {
   workspaceSlug: string;
@@ -81,7 +76,7 @@ export const CommentCard: React.FC<Props> = observer((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 w-3 text-custom-text-200" aria-hidden="true" strokeWidth={2} />
         </span>
       </div>
       <div className="min-w-0 flex-1">
@@ -124,14 +119,14 @@ export const CommentCard: React.FC<Props> = observer((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" strokeWidth={2} />
               </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" strokeWidth={2} />
               </button>
             </div>
           </form>
@@ -150,10 +145,10 @@ export const CommentCard: React.FC<Props> = observer((props) => {
         <Menu as="div" className="relative w-min text-left">
           <Menu.Button
             type="button"
-            onClick={() => { }}
+            onClick={() => {}}
             className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80"
           >
-            <EllipsisVerticalIcon className="h-5 w-5 text-custom-text-200 duration-300" />
+            <MoreVertical className="h-4 w-4 text-custom-text-200 duration-300" strokeWidth={2} />
           </Menu.Button>
 
           <Transition
@@ -174,8 +169,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : ""
-                        }`}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
                     >
                       Edit
                     </button>
@@ -188,8 +184,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     <button
                       type="button"
                       onClick={handleDelete}
-                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : ""
-                        }`}
+                      className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      }`}
                     >
                       Delete
                     </button>
diff --git a/space/components/ui/dropdown.tsx b/space/components/ui/dropdown.tsx
index d1791de00..6ef6b773f 100644
--- a/space/components/ui/dropdown.tsx
+++ b/space/components/ui/dropdown.tsx
@@ -1,16 +1,9 @@
-"use client";
-
 import { Fragment, useState, useRef } from "react";
-
-// next
 import Link from "next/link";
-
-// headless
 import { Popover, Transition } from "@headlessui/react";
-import { ChevronLeftIcon, CheckIcon } from "@heroicons/react/20/solid";
-
 // hooks
 import useOutSideClick from "hooks/use-outside-click";
+import { Check, ChevronLeft } from "lucide-react";
 
 type ItemOptionType = {
   display: React.ReactNode;
@@ -94,10 +87,10 @@ const DropdownItem: React.FC<DropdownItemProps> = (props) => {
             isSelected ? "bg-custom-background-80" : ""
           }`}
         >
-          {children && <ChevronLeftIcon className="h-5 w-5 transition-transform transform" />}
+          {children && <ChevronLeft className="h-4 w-4 transition-transform transform" strokeWidth={2} />}
           {!children && <span />}
           <span className="truncate text-xs">{display}</span>
-          <CheckIcon className={`h-3.5 w-3.5 opacity-0 ${isSelected ? "opacity-100" : ""}`} />
+          <Check className={`h-3 w-3 opacity-0 ${isSelected ? "opacity-100" : ""}`} strokeWidth={2} />
         </button>
       )}
 
diff --git a/space/components/ui/toast-alert.tsx b/space/components/ui/toast-alert.tsx
index 5d0c0123c..fe7a3448e 100644
--- a/space/components/ui/toast-alert.tsx
+++ b/space/components/ui/toast-alert.tsx
@@ -1,12 +1,6 @@
 import React from "react";
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from "lucide-react";
 // hooks
-import {
-  CheckCircleIcon,
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-  XCircleIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 import useToast from "hooks/use-toast";
 // icons
 
@@ -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/space/package.json b/space/package.json
index 86248e2ac..d654aad04 100644
--- a/space/package.json
+++ b/space/package.json
@@ -15,9 +15,9 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.13",
-    "@heroicons/react": "^2.0.12",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
+    "@plane/rich-text-editor": "*",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "js-cookie": "^3.0.1",
@@ -35,8 +35,7 @@
     "swr": "^2.2.2",
     "tailwind-merge": "^1.14.0",
     "typescript": "4.9.5",
-    "uuid": "^9.0.0",
-    "@plane/rich-text-editor": "*"
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.3",
@@ -49,7 +48,7 @@
     "eslint": "8.34.0",
     "eslint-config-custom": "*",
     "eslint-config-next": "13.2.1",
-    "tsconfig": "*",
-    "tailwind-config-custom": "*"
+    "tailwind-config-custom": "*",
+    "tsconfig": "*"
   }
 }
diff --git a/web/components/command-palette/command-modal.tsx b/web/components/command-palette/command-modal.tsx
index 33f8047da..b3a3325eb 100644
--- a/web/components/command-palette/command-modal.tsx
+++ b/web/components/command-palette/command-modal.tsx
@@ -3,6 +3,19 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 import { Command } from "cmdk";
 import { Dialog, Transition } from "@headlessui/react";
+import {
+  FileText,
+  FolderPlus,
+  LinkIcon,
+  MessageSquare,
+  Rocket,
+  Search,
+  Settings,
+  Signal,
+  Trash2,
+  UserMinus2,
+  UserPlus2,
+} from "lucide-react";
 // services
 import { WorkspaceService } from "services/workspace.service";
 import { IssueService } from "services/issue";
@@ -18,19 +31,6 @@ import {
   ChangeIssueState,
   commandGroups,
 } from "components/command-palette";
-// ui
-import {
-  FileText,
-  FolderPlus,
-  LinkIcon,
-  MessageSquare,
-  Rocket,
-  Settings,
-  Signal,
-  Trash2,
-  UserMinus2,
-  UserPlus2,
-} from "lucide-react";
 import {
   ContrastIcon,
   DiceIcon,
@@ -44,7 +44,6 @@ import {
 } from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
@@ -306,9 +305,10 @@ export const CommandModal: React.FC<Props> = (props) => {
                     )}
                   </div>
                   <div className="relative">
-                    <MagnifyingGlassIcon
-                      className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-custom-text-200"
+                    <Search
+                      className="pointer-events-none absolute top-1/2 -translate-y-1/2 left-4 h-4 w-4 text-custom-text-200"
                       aria-hidden="true"
+                      strokeWidth={2}
                     />
                     <Command.Input
                       className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-custom-text-100 placeholder:text-custom-text-400 outline-none focus:ring-0 text-sm"
diff --git a/web/package.json b/web/package.json
index 26add4135..ddfa29633 100644
--- a/web/package.json
+++ b/web/package.json
@@ -16,7 +16,6 @@
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.3",
     "@hello-pangea/dnd": "^16.3.0",
-    "@heroicons/react": "^2.0.12",
     "@jitsu/nextjs": "^3.1.5",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
@@ -27,11 +26,11 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
+    "@plane/lite-text-editor": "*",
+    "@plane/rich-text-editor": "*",
     "@plane/ui": "*",
     "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
-    "@plane/lite-text-editor": "*",
-    "@plane/rich-text-editor": "*",
     "@types/lodash.debounce": "^4.0.7",
     "@types/react-datepicker": "^4.8.0",
     "axios": "^1.1.3",
diff --git a/yarn.lock b/yarn.lock
index 6a05e0fde..a8bbac45d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1422,11 +1422,6 @@
     redux "^4.2.1"
     use-memo-one "^1.1.3"
 
-"@heroicons/react@^2.0.12":
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
-  integrity sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==
-
 "@humanwhocodes/config-array@^0.11.11", "@humanwhocodes/config-array@^0.11.8":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"