diff --git a/.gitignore b/.gitignore
index 4a756d030..31c1ae088 100644
--- a/.gitignore
+++ b/.gitignore
@@ -103,5 +103,4 @@ storybook-static
 
 CLAUDE.md
 AGENTS.md
-
 temp/
diff --git a/apps/admin/app/(all)/(home)/auth-banner.tsx b/apps/admin/app/(all)/(home)/auth-banner.tsx
index c0a9a0e92..bb0adaa4d 100644
--- a/apps/admin/app/(all)/(home)/auth-banner.tsx
+++ b/apps/admin/app/(all)/(home)/auth-banner.tsx
@@ -1,7 +1,9 @@
 import type { FC } from "react";
-import { Info, X } from "lucide-react";
+import { Info } from "lucide-react";
 // plane constants
 import type { TAdminAuthErrorInfo } from "@plane/constants";
+// icons
+import { CloseIcon } from "@plane/propel/icons";
 
 type TAuthBanner = {
   bannerData: TAdminAuthErrorInfo | undefined;
@@ -22,7 +24,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
         className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <X className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="w-4 h-4 flex-shrink-0" />
       </div>
     </div>
   );
diff --git a/apps/space/core/components/account/auth-forms/auth-banner.tsx b/apps/space/core/components/account/auth-forms/auth-banner.tsx
index 30cd6e093..feda960e7 100644
--- a/apps/space/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-banner.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import type { FC } from "react";
-import { Info, X } from "lucide-react";
+import { Info } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 
@@ -24,7 +25,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
         className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
-        <X className="w-4 h-4 flex-shrink-0" />
+        <CloseIcon className="w-4 h-4 flex-shrink-0" />
       </div>
     </div>
   );
diff --git a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx b/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
index cb542face..bffc7c553 100644
--- a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
-// types
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// types
 import type { TFilters } from "@/types/issue";
 // components
 import { AppliedPriorityFilters } from "./priority";
@@ -55,7 +55,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
-                <X size={12} strokeWidth={2} />
+                <CloseIcon height={12} width={12} strokeWidth={2} />
               </button>
             </div>
           </div>
@@ -67,7 +67,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
       >
         {t("common.clear_all")}
-        <X size={12} strokeWidth={2} />
+        <CloseIcon height={12} width={12} strokeWidth={2} />
       </button>
     </div>
   );
diff --git a/apps/space/core/components/issues/filters/applied-filters/label.tsx b/apps/space/core/components/issues/filters/applied-filters/label.tsx
index 5abbd54ba..2b842c152 100644
--- a/apps/space/core/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/label.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@/types/issue";
 
@@ -34,7 +34,7 @@ export const AppliedLabelsFilters: React.FC<Props> = (props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(labelId)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           </div>
         );
diff --git a/apps/space/core/components/issues/filters/applied-filters/priority.tsx b/apps/space/core/components/issues/filters/applied-filters/priority.tsx
index a687cb67c..da151873f 100644
--- a/apps/space/core/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/priority.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
-import { PriorityIcon } from "@plane/propel/icons";
+import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
 import type { TIssuePriorities } from "@plane/propel/icons";
 
 type Props = {
@@ -25,7 +24,7 @@ export const AppliedPriorityFilters: React.FC<Props> = (props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(priority)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           </div>
         ))}
diff --git a/apps/space/core/components/issues/filters/applied-filters/state.tsx b/apps/space/core/components/issues/filters/applied-filters/state.tsx
index c80c8688a..1836c86a7 100644
--- a/apps/space/core/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/state.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
 // hooks
 import { useStates } from "@/hooks/store/use-state";
 
@@ -34,7 +33,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(stateId)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           </div>
         );
diff --git a/apps/space/core/components/issues/filters/helpers/filter-header.tsx b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
index 52d766516..4505efbdb 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-header.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
@@ -1,8 +1,7 @@
 "use client";
-
 import React from "react";
-// lucide icons
-import { ChevronDown, ChevronUp } from "lucide-react";
+// icons
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 interface IFilterHeader {
   title: string;
@@ -18,7 +17,7 @@ export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }
       className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
       onClick={handleIsPreviewEnabled}
     >
-      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+      {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
     </button>
   </div>
 );
diff --git a/apps/space/core/components/issues/filters/selection.tsx b/apps/space/core/components/issues/filters/selection.tsx
index 3042a419d..221e9df8c 100644
--- a/apps/space/core/components/issues/filters/selection.tsx
+++ b/apps/space/core/components/issues/filters/selection.tsx
@@ -2,7 +2,8 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
 // local imports
@@ -37,7 +38,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index fd7ba5f0d..e656ee254 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -1,7 +1,8 @@
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Circle, ChevronDown, ChevronUp } from "lucide-react";
+import { Circle } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 // mobx
 
 interface IHeaderSubGroupByCard {
@@ -20,7 +21,7 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
       onClick={() => toggleExpanded()}
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
-        {isExpanded ? <ChevronUp width={14} strokeWidth={2} /> : <ChevronDown width={14} strokeWidth={2} />}
+        {isExpanded ? <ChevronUpIcon width={14} strokeWidth={2} /> : <ChevronDownIcon width={14} strokeWidth={2} />}
       </div>
 
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm">
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index 6e97ed6ea..c33c1789b 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -1,10 +1,11 @@
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
+import { Check, MessageSquare, MoreVertical } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TIssuePublicComment } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 // components
@@ -136,7 +137,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 onClick={() => setIsEditing(false)}
               >
-                <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <CloseIcon className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
               </button>
             </div>
           </form>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index ef49c8ffb..cee770d80 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -4,10 +4,10 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { ChevronDown, PanelRight } from "lucide-react";
+import { PanelRight } from "lucide-react";
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { YourWorkIcon } from "@plane/propel/icons";
+import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -75,7 +75,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
             customButton={
               <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
                 <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
-                <ChevronDown className="h-4 w-4 text-custom-text-400" />
+                <ChevronDownIcon className="h-4 w-4 text-custom-text-400" />
               </div>
             }
             customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index 5b59b39d4..c6d4e3410 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -3,12 +3,12 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
-import { ChevronDown } from "lucide-react";
 // plane constants
 import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 // plane i18n
 import { useTranslation } from "@plane/i18n";
+// icons
+import { ChevronDownIcon } from "@plane/propel/icons";
 // types
 import type {
   IIssueDisplayFilterOptions,
@@ -88,7 +88,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
         customButton={
           <div className="flex flex-center text-sm text-custom-text-200">
             {t("common.layout")}
-            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+            <ChevronDownIcon className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
           </div>
         }
         customButtonClassName="flex flex-center text-custom-text-200 text-sm"
@@ -117,7 +117,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
           menuButton={
             <div className="flex flex-center text-sm text-custom-text-200">
               {t("common.display")}
-              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+              <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
             </div>
           }
         >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index 747e65c16..75c0a9114 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -3,12 +3,10 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
-import { ChevronDown } from "lucide-react";
 // plane imports
 import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
+import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -125,7 +123,7 @@ export const CycleIssuesMobileHeader = observer(() => {
             menuButton={
               <span className="flex items-center text-custom-text-200 text-sm">
                 {t("common.display")}
-                <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
               </span>
             }
           >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index ed827135a..c714cfaf1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -3,10 +3,10 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronDown } from "lucide-react";
 // plane imports
 import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 // components
@@ -79,7 +79,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 {t("common.display")}
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index ae450f5de..6be0088d6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -3,12 +3,10 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
-import { ChevronDown } from "lucide-react";
 // plane imports
 import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
+import { CalendarLayoutIcon, BoardLayoutIcon, ListLayoutIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -109,7 +107,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
                 Display
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index 138867e4f..94b190457 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { ChevronDown } from "lucide-react";
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { CustomMenu, Row } from "@plane/ui";
 import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
@@ -22,7 +22,7 @@ export const ModulesListMobileHeader = observer(() => {
         // placement="bottom-start"
         customButton={
           <Row className="flex flex-grow justify-center text-custom-text-200 text-sm gap-2">
-            <span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+            <span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
           </Row>
         }
         customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
index e9ef19d1f..3980e977f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@@ -2,7 +2,8 @@
 
 import { observer } from "mobx-react";
 // icons
-import { ChevronDown, ListFilter } from "lucide-react";
+import { ListFilter } from "lucide-react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // components
 import { Row } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -42,7 +43,7 @@ export const ViewMobileHeader = observer(() => {
             menuButton={
               <Row className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
+                <ChevronDownIcon className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
               </Row>
             }
           >
diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
index acf25bb18..4619b186f 100644
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ b/apps/web/app/(all)/profile/sidebar.tsx
@@ -5,22 +5,12 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 // icons
-import {
-  ChevronLeft,
-  LogOut,
-  MoveLeft,
-  Activity,
-  Bell,
-  CircleUser,
-  KeyRound,
-  Settings2,
-  CirclePlus,
-  Mails,
-} from "lucide-react";
+import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
 // plane imports
 import { PROFILE_ACTION_LINKS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { ChevronLeftIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn, getFileURL } from "@plane/utils";
@@ -141,7 +131,7 @@ export const ProfileLayoutSidebar = observer(() => {
             }`}
           >
             <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
-              <ChevronLeft className="h-5 w-5" strokeWidth={1} />
+              <ChevronLeftIcon className="h-5 w-5" strokeWidth={1} />
             </span>
             {!sidebarCollapsed && (
               <h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
diff --git a/apps/web/app/(all)/workspace-invitations/page.tsx b/apps/web/app/(all)/workspace-invitations/page.tsx
index 6f9d78d56..7883b08c6 100644
--- a/apps/web/app/(all)/workspace-invitations/page.tsx
+++ b/apps/web/app/(all)/workspace-invitations/page.tsx
@@ -4,7 +4,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import useSWR from "swr";
-import { Boxes, Check, Share2, Star, User2, X } from "lucide-react";
+import { Boxes, Check, Share2, Star, User2 } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
 import { EmptySpace, EmptySpaceItem } from "@/components/ui/empty-space";
@@ -85,7 +86,7 @@ const WorkspaceInvitationPage = observer(() => {
               description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
             >
               <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
-              <EmptySpaceItem Icon={X} title="Ignore" action={handleReject} />
+              <EmptySpaceItem Icon={CloseIcon} title="Ignore" action={handleReject} />
             </EmptySpace>
           )
         ) : error || invitationDetail?.responded_at ? (
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index 109af7974..033c8ff88 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -2,9 +2,10 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
-import { ChevronRight, CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
+import { CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // plane ui
 import { Tooltip } from "@plane/propel/tooltip";
 // components
@@ -174,7 +175,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                   <item.icon className="flex-shrink-0 size-3" />
                   {item.label}
                 </span>
-                <ChevronRight
+                <ChevronRightIcon
                   className={cn("flex-shrink-0 size-3 opacity-0 pointer-events-none transition-opacity", {
                     "opacity-100 pointer-events-auto": isActiveTask,
                   })}
diff --git a/apps/web/ce/components/projects/mobile-header.tsx b/apps/web/ce/components/projects/mobile-header.tsx
index 829367437..855ea2d8f 100644
--- a/apps/web/ce/components/projects/mobile-header.tsx
+++ b/apps/web/ce/components/projects/mobile-header.tsx
@@ -2,9 +2,10 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronDown, ListFilter } from "lucide-react";
+import { ListFilter } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TProjectFilters } from "@plane/types";
 import { calculateTotalFilters } from "@plane/utils";
 // components
@@ -72,7 +73,7 @@ export const ProjectsListMobileHeader = observer(() => {
             <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
               <ListFilter className="h-3 w-3" />
               {t("common.filters")}
-              <ChevronDown className="h-3 w-3" strokeWidth={2} />
+              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           }
           isFiltersApplied={isFiltersApplied}
diff --git a/apps/web/ce/components/workspace/delete-workspace-section.tsx b/apps/web/ce/components/workspace/delete-workspace-section.tsx
index aa72fdc32..a9975b8f5 100644
--- a/apps/web/ce/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-section.tsx
@@ -1,11 +1,11 @@
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown, ChevronUp } from "lucide-react";
 // types
 import { WORKSPACE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
 // ui
 import { Collapsible } from "@plane/ui";
@@ -42,7 +42,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
                 <span className="text-lg tracking-tight">
                   {t("workspace_settings.settings.general.delete_workspace")}
                 </span>
-                {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+                {isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
               </>
             }
           >
diff --git a/apps/web/core/components/account/auth-forms/auth-banner.tsx b/apps/web/core/components/account/auth-forms/auth-banner.tsx
index 95022dcb2..555d179af 100644
--- a/apps/web/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-banner.tsx
@@ -1,7 +1,8 @@
 import type { FC } from "react";
-import { Info, X } from "lucide-react";
-// plane imports
+import { Info } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 
@@ -32,7 +33,7 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
         onClick={() => handleBannerData?.(undefined)}
         aria-label={t("aria_labels.auth_forms.close_alert")}
       >
-        <X className="size-4" />
+        <CloseIcon className="size-4" />
       </button>
     </div>
   );
diff --git a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
index 3b243b894..3e47dbe1c 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -1,9 +1,9 @@
 import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
-import { X } from "lucide-react";
 import { Popover } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 
 export const ForgotPasswordPopover = () => {
   // popper-js refs
@@ -51,7 +51,7 @@ export const ForgotPasswordPopover = () => {
               onClick={() => close()}
               aria-label={t("aria_labels.auth_forms.close_popover")}
             >
-              <X className="size-3 text-custom-text-200" />
+              <CloseIcon className="size-3 text-custom-text-200" />
             </button>
           </div>
         )}
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 52d32dc5d..5fb6a4276 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -4,11 +4,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { Eye, EyeOff, Info, X, XCircle } from "lucide-react";
+import { Eye, EyeOff, Info, XCircle } from "lucide-react";
 // plane imports
 import { API_BASE_URL, E_PASSWORD_STRENGTH, AUTH_TRACKER_EVENTS, AUTH_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CloseIcon } from "@plane/propel/icons";
 import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
@@ -134,7 +135,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
             onClick={() => setBannerMessage(false)}
           >
-            <X className="w-4 h-4 flex-shrink-0 text-red-500" />
+            <CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
           </div>
         </div>
       )}
diff --git a/apps/web/core/components/analytics/insight-table/data-table.tsx b/apps/web/core/components/analytics/insight-table/data-table.tsx
index 83892ceb4..8c6468793 100644
--- a/apps/web/core/components/analytics/insight-table/data-table.tsx
+++ b/apps/web/core/components/analytics/insight-table/data-table.tsx
@@ -17,10 +17,11 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import { Search, X } from "lucide-react";
-// plane package imports
+import { Search } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
+import { CloseIcon } from "@plane/propel/icons";
+// plane package imports
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@plane/propel/table";
 import { cn } from "@plane/utils";
 // plane web components
@@ -116,7 +117,7 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
                   setIsSearchOpen(false);
                 }}
               >
-                <X className="h-3 w-3" />
+                <CloseIcon className="h-3 w-3" />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/analytics/work-items/modal/header.tsx b/apps/web/core/components/analytics/work-items/modal/header.tsx
index 734eebbf8..22f1a14c3 100644
--- a/apps/web/core/components/analytics/work-items/modal/header.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/header.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 // plane package imports
-import { Expand, Shrink, X } from "lucide-react";
+import { Expand, Shrink } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 import type { ICycle, IModule } from "@plane/types";
 // icons
 
@@ -34,7 +35,7 @@ export const WorkItemsModalHeader: React.FC<Props> = observer((props) => {
           className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
           onClick={handleClose}
         >
-          <X size={14} strokeWidth={2} />
+          <CloseIcon height={14} width={14} strokeWidth={2} />
         </button>
       </div>
     </div>
diff --git a/apps/web/core/components/comments/card/edit-form.tsx b/apps/web/core/components/comments/card/edit-form.tsx
index b370db0a2..fcaa6b352 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
-import { Check, X } from "lucide-react";
-// plane imports
+import { Check } from "lucide-react";
 import type { EditorRefApi } from "@plane/editor";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 import { isCommentEmpty } from "@plane/utils";
 // components
@@ -123,7 +124,7 @@ export const CommentCardEditForm: React.FC<Props> = observer((props) => {
             editorRef.current?.setEditorValue(comment.comment_html ?? "<p></p>");
           }}
         >
-          <X className="size-3 text-red-500 duration-300 group-hover:text-white" />
+          <CloseIcon className="size-3 text-red-500 duration-300 group-hover:text-white" />
         </button>
       </div>
     </form>
diff --git a/apps/web/core/components/common/applied-filters/date.tsx b/apps/web/core/components/common/applied-filters/date.tsx
index 3ecf8a540..3d8d94cf8 100644
--- a/apps/web/core/components/common/applied-filters/date.tsx
+++ b/apps/web/core/components/common/applied-filters/date.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
-// plane constants
 import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// plane constants
 import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
 // helpers
 type Props = {
@@ -44,7 +44,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(date)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/common/applied-filters/members.tsx b/apps/web/core/components/common/applied-filters/members.tsx
index 49b0f1a30..a1823132f 100644
--- a/apps/web/core/components/common/applied-filters/members.tsx
+++ b/apps/web/core/components/common/applied-filters/members.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // plane ui
 import { Avatar } from "@plane/ui";
 // helpers
@@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(memberId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/core/description-versions/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 1dbe5e552..15e291494 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -1,10 +1,11 @@
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
-import { ChevronLeft, ChevronRight, Copy } from "lucide-react";
+import { Copy } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
+import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TDescriptionVersion } from "@plane/types";
@@ -102,7 +103,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
               )}
               disabled={isPrevDisabled}
             >
-              <ChevronLeft className="size-4" />
+              <ChevronLeftIcon className="size-4" />
             </button>
             <button
               type="button"
@@ -116,7 +117,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
               )}
               disabled={isNextDisabled}
             >
-              <ChevronRight className="size-4" />
+              <ChevronRightIcon className="size-4" />
             </button>
           </div>
         </div>
diff --git a/apps/web/core/components/core/filters/date-filter-modal.tsx b/apps/web/core/components/core/filters/date-filter-modal.tsx
index 334d15ae4..32a407414 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -2,12 +2,12 @@
 import { Fragment } from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import { X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 
 import { Button } from "@plane/propel/button";
 import { Calendar } from "@plane/propel/calendar";
 
+import { CloseIcon } from "@plane/propel/icons";
 import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@plane/utils";
 import { DateFilterSelect } from "./date-filter-select";
 type Props = {
@@ -84,7 +84,7 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
-                    <X className="h-4 w-4 cursor-pointer" onClick={handleClose} />
+                    <CloseIcon className="h-4 w-4 cursor-pointer" onClick={handleClose} />
                   </div>
                   <div className="flex w-full justify-between gap-4">
                     <Controller
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index b8c3eaf8b..d67ebb8d6 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { Rocket, Search, X } from "lucide-react";
+import { Rocket, Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
+import { CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
@@ -197,7 +198,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                               className="group p-1"
                               onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
-                              <X className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
+                              <CloseIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
                           </div>
                         ))}
diff --git a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index 224e1ff67..100311e78 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -5,10 +5,10 @@ import { useMemo } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
-import { ChevronUp, ChevronDown } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { ChevronUpIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { ICycle, TCyclePlotType, TProgressSnapshot } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { getDate } from "@plane/utils";
@@ -114,9 +114,9 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                 </Disclosure.Button>
                 <Disclosure.Button className="ml-auto">
                   {open ? (
-                    <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
+                    <ChevronUpIcon className="h-3.5 w-3.5" aria-hidden="true" />
                   ) : (
-                    <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+                    <ChevronDownIcon className="h-3.5 w-3.5" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
               </div>
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index 0c84571c9..41129e9c0 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -4,7 +4,7 @@ import type { FC } from "react";
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { ArrowRight, ChevronRight } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 // Plane Imports
 import {
   CYCLE_TRACKER_EVENTS,
@@ -14,6 +14,7 @@ import {
   CYCLE_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ICycle } from "@plane/types";
 import { getDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -160,7 +161,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
             className="flex size-4 items-center justify-center rounded-full bg-custom-border-200"
             onClick={() => handleClose()}
           >
-            <ChevronRight className="h-3 w-3 stroke-2 text-white" />
+            <ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
           </button>
         </div>
       </div>
diff --git a/apps/web/core/components/cycles/applied-filters/date.tsx b/apps/web/core/components/cycles/applied-filters/date.tsx
index 18a5ece58..e8156fafc 100644
--- a/apps/web/core/components/cycles/applied-filters/date.tsx
+++ b/apps/web/core/components/cycles/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // helpers
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
 import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
 // constants
 
@@ -44,7 +44,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(date)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/cycles/applied-filters/root.tsx b/apps/web/core/components/cycles/applied-filters/root.tsx
index 1ee80e738..59ebf55cb 100644
--- a/apps/web/core/components/cycles/applied-filters/root.tsx
+++ b/apps/web/core/components/cycles/applied-filters/root.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TCycleFilters } from "@plane/types";
 import { Tag } from "@plane/ui";
 import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
@@ -67,7 +67,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
                   className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
-                  <X size={12} strokeWidth={2} />
+                  <CloseIcon height={12} width={12} strokeWidth={2} />
                 </button>
               )}
             </div>
@@ -78,7 +78,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
             {t("common.clear_all")}
-            <X size={12} strokeWidth={2} />
+            <CloseIcon height={12} width={12} strokeWidth={2} />
           </Tag>
         </button>
       )}
diff --git a/apps/web/core/components/cycles/applied-filters/status.tsx b/apps/web/core/components/cycles/applied-filters/status.tsx
index ef2d63b1a..e54edf6b7 100644
--- a/apps/web/core/components/cycles/applied-filters/status.tsx
+++ b/apps/web/core/components/cycles/applied-filters/status.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 import { CYCLE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -34,7 +34,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(status)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/cycles/archived-cycles/header.tsx b/apps/web/core/components/cycles/archived-cycles/header.tsx
index dbbb93dc1..50e8fd67a 100644
--- a/apps/web/core/components/cycles/archived-cycles/header.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -3,9 +3,10 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ListFilter, Search, X } from "lucide-react";
-// plane helpers
+import { ListFilter, Search } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { CloseIcon } from "@plane/propel/icons";
+// plane helpers
 // types
 import type { TCycleFilters } from "@plane/types";
 import { cn, calculateTotalFilters } from "@plane/utils";
@@ -109,7 +110,7 @@ export const ArchivedCyclesHeader: FC = observer(() => {
                 setIsSearchOpen(false);
               }}
             >
-              <X className="h-3 w-3" />
+              <CloseIcon className="h-3 w-3" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/cycles/cycles-view-header.tsx b/apps/web/core/components/cycles/cycles-view-header.tsx
index 4276c1ed2..1cc782f59 100644
--- a/apps/web/core/components/cycles/cycles-view-header.tsx
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
-import { ListFilter, Search, X } from "lucide-react";
+import { ListFilter, Search } from "lucide-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TCycleFilters } from "@plane/types";
 import { cn, calculateTotalFilters } from "@plane/utils";
 // components
@@ -109,7 +110,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
               setIsSearchOpen(false);
             }}
           >
-            <X className="h-3 w-3" />
+            <CloseIcon className="h-3 w-3" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/cycles/dropdowns/filters/root.tsx b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
index 550d7daf7..148de9946 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TCycleFilters, TCycleGroups } from "@plane/types";
 // hooks
@@ -38,7 +39,7 @@ export const CycleFiltersSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
index 5ab265dcf..074bc500c 100644
--- a/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-group-header.tsx
@@ -2,9 +2,8 @@
 
 import type { FC } from "react";
 import React from "react";
-import { ChevronDown } from "lucide-react";
 // types
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // icons
 import { Row } from "@plane/ui";
@@ -33,7 +32,7 @@ export const CycleListGroupHeader: FC<Props> = (props) => {
           {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
         </div>
       </div>
-      <ChevronDown
+      <ChevronDownIcon
         className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
           "rotate-180": isExpanded,
         })}
diff --git a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
index fdf9b1d42..2642502a2 100644
--- a/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -3,7 +3,7 @@
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { ChevronRight } from "lucide-react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // icons
 import { Row } from "@plane/ui";
 // helpers
@@ -29,7 +29,7 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
   if (!project) return null;
   return (
     <Row className="flex items-center gap-2 flex-shrink-0 py-2.5">
-      <ChevronRight
+      <ChevronRightIcon
         className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
           "rotate-90": isExpanded,
         })}
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index 7a1f60e55..71e93237d 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -3,9 +3,9 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { AlertCircle, Search, X } from "lucide-react";
+import { AlertCircle, Search } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { CycleIcon, TransferIcon } from "@plane/propel/icons";
+import { CycleIcon, TransferIcon, CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssuesStoreType } from "@plane/types";
 import { useCycle } from "@/hooks/store/use-cycle";
@@ -116,7 +116,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                       <h4 className="text-xl font-medium text-custom-text-100">Transfer work items</h4>
                     </div>
                     <button onClick={handleClose}>
-                      <X className="h-4 w-4" />
+                      <CloseIcon className="h-4 w-4" />
                     </button>
                   </div>
                   <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
index 15569315c..cb2df4683 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -3,10 +3,9 @@
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { CycleIcon } from "@plane/propel/icons";
+import { CycleIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
@@ -126,7 +125,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
               <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
             )}
             {dropdownArrow && (
-              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
             )}
           </DropdownButton>
         </button>
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
index 69e74c05c..222698042 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -5,14 +5,14 @@ import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-import { ArrowRight, CalendarDays, X } from "lucide-react";
+import { ArrowRight, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 // ui
 import type { DateRange, Matcher } from "@plane/propel/calendar";
 import { Calendar } from "@plane/propel/calendar";
-import { DueDatePropertyIcon } from "@plane/propel/icons";
+import { CloseIcon, DueDatePropertyIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 import { cn, renderFormattedDate } from "@plane/utils";
 // helpers
@@ -208,7 +208,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
               )
             )}
             {isClearable && !disabled && hasDisplayedDates && (
-              <X
+              <CloseIcon
                 className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer", clearIconClassName)}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -241,7 +241,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
               {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
             </span>
             {isClearable && !disabled && hasDisplayedDates && (
-              <X
+              <CloseIcon
                 className={cn("h-2.5 w-2.5 flex-shrink-0 cursor-pointer ml-1", clearIconClassName)}
                 onClick={(e) => {
                   e.stopPropagation();
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index 2600d42b7..a8272dd4b 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -4,11 +4,12 @@ import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-import { CalendarDays, X } from "lucide-react";
+import { CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
 import type { Matcher } from "@plane/propel/calendar";
 import { Calendar } from "@plane/propel/calendar";
+import { CloseIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 import { cn, renderFormattedDate, getDate } from "@plane/utils";
 // helpers
@@ -142,7 +143,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
           <span className="flex-grow truncate">{value ? renderFormattedDate(value, formatToken) : placeholder}</span>
         )}
         {isClearable && !disabled && isDateSelected && (
-          <X
+          <CloseIcon
             className={cn("h-2.5 w-2.5 flex-shrink-0", clearIconClassName)}
             onClick={(e) => {
               e.stopPropagation();
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 2888183eb..ea7c59b6e 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -3,11 +3,11 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { EstimatePropertyIcon } from "@plane/propel/icons";
+import { EstimatePropertyIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { EEstimateSystem } from "@plane/types";
 import { ComboDropDown } from "@plane/ui";
 import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@@ -201,7 +201,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
               </span>
             )}
             {dropdownArrow && (
-              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
             )}
           </DropdownButton>
         </button>
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
index 64ee88450..779b89310 100644
--- a/apps/web/core/components/dropdowns/member/base.tsx
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -1,9 +1,9 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
-import { ChevronDown } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
+// plane imports
 import type { IUserLite } from "@plane/types";
 import { ComboDropDown } from "@plane/ui";
 // helpers
@@ -149,7 +149,7 @@ export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((
               </span>
             )}
             {dropdownArrow && (
-              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
             )}
           </DropdownButton>
         </button>
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index c2dcabb3d..0aa2940d8 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { ChevronDown, X } from "lucide-react";
 // plane imports
-import { ModuleIcon } from "@plane/propel/icons";
+import { CloseIcon, ModuleIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
@@ -96,7 +95,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
                           onChange(newModuleIds);
                         }}
                       >
-                        <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                        <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
                       </button>
                     </Tooltip>
                   )}
@@ -111,7 +110,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
           </>
         )}
         {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
       </>
     );
@@ -123,7 +122,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
           <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
         )}
         {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
       </>
     );
diff --git a/apps/web/core/components/dropdowns/priority.tsx b/apps/web/core/components/dropdowns/priority.tsx
index 24ce73fb9..e987821fd 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -4,12 +4,12 @@ import type { ReactNode } from "react";
 import { Fragment, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search, SignalHigh } from "lucide-react";
+import { Check, Search, SignalHigh } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssuePriorities } from "@plane/types";
 // ui
@@ -125,7 +125,7 @@ const BorderButton = (props: ButtonProps) => {
           ))}
         {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
         {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
       </div>
     </Tooltip>
@@ -210,7 +210,7 @@ const BackgroundButton = (props: ButtonProps) => {
           <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
         )}
         {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
       </div>
     </Tooltip>
@@ -297,7 +297,7 @@ const TransparentButton = (props: ButtonProps) => {
           <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
         )}
         {dropdownArrow && (
-          <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
       </div>
     </Tooltip>
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index 77a2e85fe..01354a6dc 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -2,11 +2,11 @@ import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { ProjectIcon } from "@plane/propel/icons";
+import { ProjectIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
@@ -207,7 +207,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
               <span className="truncate max-w-40">{getDisplayName(value, placeholder)}</span>
             )}
             {dropdownArrow && (
-              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+              <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
             )}
           </DropdownButton>
         </button>
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index cfa51f603..d7ab1f808 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -4,11 +4,11 @@ import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { ChevronDown, Search } from "lucide-react";
+import { Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
 import { ComboDropDown, Spinner } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -185,7 +185,10 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
                   <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
                 )}
                 {dropdownArrow && (
-                  <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+                  <ChevronDownIcon
+                    className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                    aria-hidden="true"
+                  />
                 )}
               </>
             )}
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index a999d0a44..aac52c1f7 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -3,11 +3,11 @@
 import type { FC } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronLeft } from "lucide-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ChevronLeftIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
@@ -152,7 +152,7 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
                 }}
                 className="flex-shrink-0 cursor-pointer w-5 h-5 flex justify-center items-center"
               >
-                <ChevronLeft className="w-4 h-4" />
+                <ChevronLeftIcon className="w-4 h-4" />
               </div>
             )}
             <div className="text-xl font-medium text-custom-text-100">{t("project_settings.estimates.new")}</div>
diff --git a/apps/web/core/components/estimates/points/create.tsx b/apps/web/core/components/estimates/points/create.tsx
index 7baf24152..0ab88fc9d 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -3,9 +3,10 @@
 import type { FC, FormEvent } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Check, Info, X } from "lucide-react";
+import { Check, Info } from "lucide-react";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@@ -204,7 +205,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
         onClick={handleClose}
         disabled={loader}
       >
-        <X size={14} className="text-custom-text-200" />
+        <CloseIcon height={14} width={14} className="text-custom-text-200" />
       </button>
     </form>
   );
diff --git a/apps/web/core/components/estimates/points/update.tsx b/apps/web/core/components/estimates/points/update.tsx
index bbcc4751e..381969fa1 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -3,9 +3,10 @@
 import type { FC, FormEvent } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Check, Info, X } from "lucide-react";
+import { Check, Info } from "lucide-react";
 import { EEstimateSystem, MAX_ESTIMATE_POINT_INPUT_LENGTH } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@@ -212,7 +213,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
         onClick={handleClose}
         disabled={loader}
       >
-        <X size={14} className="text-custom-text-200" />
+        <CloseIcon height={14} width={14} className="text-custom-text-200" />
       </button>
     </form>
   );
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index 1ea8a985f..e6f59952b 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -3,12 +3,12 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Check, Hotel, Users, X } from "lucide-react";
+import { Check, Hotel, Users } from "lucide-react";
 // plane ui
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { ProjectIcon } from "@plane/propel/icons";
+import { ProjectIcon, CloseIcon } from "@plane/propel/icons";
 import { cn, getFileURL } from "@plane/utils";
 // helpers
 // hooks
@@ -142,7 +142,7 @@ export const NoProjectsEmptyState = observer(() => {
             setValue({ ...storedValue, hide: true });
           }}
         >
-          <X className="size-4" />
+          <CloseIcon className="size-4" />
           {t("home.empty.not_right_now")}
         </button>
       </div>
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
index 401915580..adb67b3a5 100644
--- a/apps/web/core/components/home/widgets/recents/filters.tsx
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -2,8 +2,8 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TRecentActivityFilterKeys } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -41,7 +41,9 @@ export const FiltersDropdown: FC<TFiltersDropdown> = observer((props) => {
       customButton={
         <button className="flex hover:bg-custom-background-80 px-2 py-1 rounded gap-1 capitalize border border-custom-border-200">
           <span className="font-medium text-sm my-auto"> {t(title || "")}</span>
-          <ChevronDown className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")} />
+          <ChevronDownIcon
+            className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")}
+          />
         </button>
       }
       customButtonClassName="flex justify-center"
diff --git a/apps/web/core/components/inbox/content/inbox-issue-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
index d442c85a4..21b59ddcf 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -3,23 +3,12 @@
 import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import {
-  CircleCheck,
-  CircleX,
-  ChevronDown,
-  ChevronUp,
-  Clock,
-  ExternalLink,
-  FileStack,
-  Link,
-  Trash2,
-  MoveRight,
-  Copy,
-} from "lucide-react";
+import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, MoveRight, Copy } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { EInboxIssueStatus } from "@plane/types";
@@ -308,14 +297,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                 className="rounded border border-custom-border-200 p-1.5"
                 onClick={() => handleInboxIssueNavigation("prev")}
               >
-                <ChevronUp size={14} strokeWidth={2} />
+                <ChevronUpIcon height={14} width={14} strokeWidth={2} />
               </button>
               <button
                 type="button"
                 className="rounded border border-custom-border-200 p-1.5"
                 onClick={() => handleInboxIssueNavigation("next")}
               >
-                <ChevronDown size={14} strokeWidth={2} />
+                <ChevronDownIcon height={14} width={14} strokeWidth={2} />
               </button>
             </div>
           )}
diff --git a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index d38975864..79e71bbc3 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -2,19 +2,8 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import {
-  CircleCheck,
-  CircleX,
-  ChevronDown,
-  ChevronUp,
-  Clock,
-  ExternalLink,
-  FileStack,
-  Link,
-  Trash2,
-  PanelLeft,
-  MoveRight,
-} from "lucide-react";
+import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { TNameDescriptionLoader } from "@plane/types";
 import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
 import { cn, findHowManyDaysLeft, generateWorkItemLink } from "@plane/utils";
@@ -117,14 +106,14 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
             className="rounded border border-custom-border-200 p-1.5"
             onClick={() => handleInboxIssueNavigation("prev")}
           >
-            <ChevronUp size={14} strokeWidth={2} />
+            <ChevronUpIcon height={14} width={14} strokeWidth={2} />
           </button>
           <button
             type="button"
             className="rounded border border-custom-border-200 p-1.5"
             onClick={() => handleInboxIssueNavigation("next")}
           >
-            <ChevronDown size={14} strokeWidth={2} />
+            <ChevronDownIcon height={14} width={14} strokeWidth={2} />
           </button>
         </div>
         <div className="flex items-center gap-4">
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
index 6d123f7d3..6b85e0115 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 import { PAST_DURATION_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TInboxIssueFilterDateKeys } from "@plane/types";
 // helpers
 import { Tag } from "@plane/ui";
@@ -50,7 +50,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
               className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
             >
-              <X className={`w-3 h-3`} />
+              <CloseIcon className={`w-3 h-3`} />
             </div>
           </div>
         );
@@ -60,7 +60,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
         className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
         onClick={clearFilter}
       >
-        <X className={`w-3 h-3`} />
+        <CloseIcon className={`w-3 h-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
index 3183927d5..64b624a62 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/label.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // hooks
+import { CloseIcon } from "@plane/propel/icons";
 import { Tag } from "@plane/ui";
 import { useLabel } from "@/hooks/store/use-label";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
@@ -40,7 +40,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
               className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
               onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
             >
-              <X className={`w-3 h-3`} />
+              <CloseIcon className={`w-3 h-3`} />
             </div>
           </div>
         );
@@ -50,7 +50,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
         className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
         onClick={clearFilter}
       >
-        <X className={`w-3 h-3`} />
+        <CloseIcon className={`w-3 h-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
index 65e64f069..4b16af6e7 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/member.tsx
@@ -2,8 +2,9 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+
 // plane types
+import { CloseIcon } from "@plane/propel/icons";
 import type { TInboxIssueFilterMemberKeys } from "@plane/types";
 // plane ui
 import { Avatar, Tag } from "@plane/ui";
@@ -54,7 +55,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
               className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
             >
-              <X className={`w-3 h-3`} />
+              <CloseIcon className={`w-3 h-3`} />
             </div>
           </div>
         );
@@ -64,7 +65,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
         className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
         onClick={clearFilter}
       >
-        <X className={`w-3 h-3`} />
+        <CloseIcon className={`w-3 h-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index d290d9255..162317e71 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -2,10 +2,9 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon, CloseIcon } from "@plane/propel/icons";
 import type { TIssuePriorities } from "@plane/types";
 import { Tag } from "@plane/ui";
 // hooks
@@ -42,7 +41,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
               className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
               onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
             >
-              <X className={`w-3 h-3`} />
+              <CloseIcon className={`w-3 h-3`} />
             </div>
           </div>
         );
@@ -52,7 +51,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
         className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
         onClick={clearFilter}
       >
-        <X className={`w-3 h-3`} />
+        <CloseIcon className={`w-3 h-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
index dd743f90c..64ccd16b7 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/state.tsx
@@ -2,9 +2,8 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon, CloseIcon } from "@plane/propel/icons";
 import { Tag } from "@plane/ui";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
@@ -40,7 +39,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
               className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
               onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
             >
-              <X className={`w-3 h-3`} />
+              <CloseIcon className={`w-3 h-3`} />
             </div>
           </div>
         );
@@ -50,7 +49,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
         className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
         onClick={clearFilter}
       >
-        <X className={`w-3 h-3`} />
+        <CloseIcon className={`w-3 h-3`} />
       </div>
     </Tag>
   );
diff --git a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
index 0ef4f9974..0e8487511 100644
--- a/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -1,8 +1,8 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 import { INBOX_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TInboxIssueStatus } from "@plane/types";
 // constants
 import { Tag } from "@plane/ui";
@@ -39,7 +39,7 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
                 className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
                 onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
               >
-                <X className={`w-3 h-3`} />
+                <CloseIcon className={`w-3 h-3`} />
               </div>
             )}
           </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
index c890ea10d..e53c423b3 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/filter-selection.tsx
@@ -1,7 +1,8 @@
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // hooks
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
@@ -41,7 +42,7 @@ export const InboxIssueFilterSelection: FC = observer(() => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 7b6c08072..02501d560 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -1,7 +1,8 @@
 import type { FC } from "react";
-import { ChevronDown, ListFilter } from "lucide-react";
-// plane imports
+import { ListFilter } from "lucide-react";
 import { getButtonStyling } from "@plane/propel/button";
+// plane imports
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues/issue-layouts/filters";
@@ -17,7 +18,7 @@ const largeButton = (
   <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
     <ListFilter className="size-3 " />
     <span>Filters</span>
-    <ChevronDown className="size-3" strokeWidth={2} />
+    <ChevronDownIcon className="size-3" strokeWidth={2} />
   </div>
 );
 export const FiltersRoot: FC = () => {
diff --git a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index 5678994b7..bde31a218 100644
--- a/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -2,10 +2,11 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
 import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // constants
@@ -36,7 +37,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
         <ArrowDownWideNarrow className="size-3 " />
       )}
       {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
-      <ChevronDown className="size-3" strokeWidth={2} />
+      <ChevronDownIcon className="size-3" strokeWidth={2} />
     </div>
   );
   return (
diff --git a/apps/web/core/components/issues/attachment/attachment-detail.tsx b/apps/web/core/components/issues/attachment/attachment-detail.tsx
index cfd1869c7..f7ca525bf 100644
--- a/apps/web/core/components/issues/attachment/attachment-detail.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-detail.tsx
@@ -4,7 +4,8 @@ import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { AlertCircle, X } from "lucide-react";
+import { AlertCircle } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import {
@@ -98,7 +99,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
 
         {!disabled && (
           <button type="button" onClick={() => setIsDeleteIssueAttachmentModalOpen(true)}>
-            <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
+            <CloseIcon className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
index 82135efb4..de1a6658c 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/filters.tsx
@@ -1,8 +1,9 @@
 import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { ListFilter, Search, X } from "lucide-react";
+import { ListFilter, Search } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { IIssueFilterOptions, IState } from "@plane/types";
 import { cn } from "@plane/utils";
 import {
@@ -65,7 +66,7 @@ export const SubIssueFilters: FC<TSubIssueFiltersProps> = observer((props) => {
               />
               {filtersSearchQuery !== "" && (
                 <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-                  <X className="text-custom-text-300" size={12} strokeWidth={2} />
+                  <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
                 </button>
               )}
             </div>
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
index b5e3a0603..4025b67c1 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-group.tsx
@@ -1,8 +1,9 @@
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronRight, CircleDashed } from "lucide-react";
+import { CircleDashed } from "lucide-react";
 import { ALL_ISSUES } from "@plane/constants";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import type { IGroupByColumn, TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
@@ -59,7 +60,7 @@ export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props)
         title={
           !isAllIssues && (
             <div className="flex items-center gap-2 p-3">
-              <ChevronRight
+              <ChevronRightIcon
                 className={cn("size-3.5 transition-all text-custom-text-400", {
                   "rotate-90": isCollapsibleOpen,
                 })}
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
index 2d6cc6852..00bdbbd29 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/list-item.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
-// plane imports
+import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon, ChevronRightIcon } from "@plane/propel/icons";
+// plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, TIssueServiceType, TSubIssueOperations } from "@plane/types";
 import { EIssueServiceType, EIssuesStoreType } from "@plane/types";
@@ -133,7 +134,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
                         setSubIssueHelpers(parentIssueId, "issue_visibility", issueId);
                       }}
                     >
-                      <ChevronRight
+                      <ChevronRightIcon
                         className={cn("size-3.5 transition-all", {
                           "rotate-90": subIssueHelpers.issue_visibility.includes(issue.id),
                         })}
@@ -217,7 +218,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
                     }}
                   >
                     <div className="flex items-center gap-2">
-                      <X className="h-3.5 w-3.5" strokeWidth={2} />
+                      <CloseIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       {issueServiceType === EIssueServiceType.ISSUES
                         ? t("issue.remove.parent.label")
                         : t("issue.remove.label")}
diff --git a/apps/web/core/components/issues/issue-detail/label/create-label.tsx b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
index d6e523faf..ff7e6ac9f 100644
--- a/apps/web/core/components/issues/issue-detail/label/create-label.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/create-label.tsx
@@ -5,8 +5,9 @@ import { useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
 import { usePopper } from "react-popper";
-import { Plus, X, Loader } from "lucide-react";
+import { Plus, Loader } from "lucide-react";
 import { Popover } from "@headlessui/react";
+import { CloseIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 // hooks
 import { Input } from "@plane/ui";
@@ -82,7 +83,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
         onClick={handleIsCreateToggle}
       >
         <div className="flex-shrink-0">
-          {isCreateToggle ? <X className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
+          {isCreateToggle ? <CloseIcon className="h-2.5 w-2.5" /> : <Plus className="h-2.5 w-2.5" />}
         </div>
         <div className="flex-shrink-0">{isCreateToggle ? "Cancel" : "New"}</div>
       </div>
@@ -150,7 +151,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
             onClick={() => setIsCreateToggle(false)}
             disabled={disabled}
           >
-            <X className="h-3.5 w-3.5 text-white" />
+            <CloseIcon className="h-3.5 w-3.5 text-white" />
           </button>
           <button type="submit" className="grid place-items-center rounded bg-green-500 p-1" disabled={isSubmitting}>
             {isSubmitting ? (
diff --git a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
index eeb26f439..f3cef9955 100644
--- a/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/label-list-item.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // types
 import { useLabel } from "@/hooks/store/use-label";
 import type { TLabelOperations } from "./root";
@@ -47,7 +47,7 @@ export const LabelListItem: FC<TLabelListItem> = observer((props) => {
       <div className="truncate">{label.name}</div>
       {!disabled && (
         <div className="flex-shrink-0">
-          <X className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
+          <CloseIcon className="transition-all h-2.5 w-2.5 group-hover:text-red-500" />
         </div>
       )}
     </div>
diff --git a/apps/web/core/components/issues/issue-detail/parent-select.tsx b/apps/web/core/components/issues/issue-detail/parent-select.tsx
index 8c1d156c8..c248d5bfe 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -3,9 +3,10 @@
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Pencil, X } from "lucide-react";
-// plane imports
+import { Pencil } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
@@ -109,7 +110,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
                     handleRemoveSubIssue(workspaceSlug, projectId, parentIssue.id, issueId);
                   }}
                 >
-                  <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                  <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
                 </span>
               </Tooltip>
             )}
diff --git a/apps/web/core/components/issues/issue-detail/relation-select.tsx b/apps/web/core/components/issues/issue-detail/relation-select.tsx
index 7f84e13a1..db8e0822c 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -3,7 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { Pencil, X } from "lucide-react";
+import { Pencil } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // Plane
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -140,7 +141,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                             removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
                           }}
                         >
-                          <X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
+                          <CloseIcon className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
                         </span>
                       </Tooltip>
                     )}
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 890aee149..553e0d2d5 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 //hooks
 // icons
 // constants
@@ -118,7 +118,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
                   handleDateChange(previousYear);
                 }}
               >
-                <ChevronLeft size={14} />
+                <ChevronLeftIcon height={14} width={14} />
               </button>
               <span className="text-xs">{activeMonthDate.getFullYear()}</span>
               <button
@@ -129,7 +129,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
                   handleDateChange(nextYear);
                 }}
               >
-                <ChevronRight size={14} />
+                <ChevronRightIcon height={14} width={14} />
               </button>
             </div>
             <div className="grid grid-cols-4 items-stretch justify-items-stretch gap-4 pt-3">
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index c9d74490d..b0284dfff 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, ChevronUp, MoreVerticalIcon } from "lucide-react";
+import { Check, MoreVerticalIcon } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
 // hooks
 // ui
@@ -12,6 +12,7 @@ import { Popover, Transition } from "@headlessui/react";
 import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
 import { EIssueFilterType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronUpIcon } from "@plane/propel/icons";
 import type { TCalendarLayouts, TSupportedFilterForUpdate } from "@plane/types";
 import { ToggleSwitch } from "@plane/ui";
 // types
@@ -113,7 +114,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                 <div
                   className={`flex h-3.5 w-3.5 items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
                 >
-                  <ChevronUp width={12} strokeWidth={2} />
+                  <ChevronUpIcon width={12} strokeWidth={2} />
                 </div>
               </div>
               <div className="md:hidden">
diff --git a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
index ecc46cc2e..3bf90241c 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 
 // components
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import type { TSupportedFilterTypeForUpdate } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
 import type { TSupportedFilterForUpdate } from "@plane/types";
 import { Row } from "@plane/ui";
 // icons
@@ -104,10 +104,10 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
     <Row className="mb-4 flex items-center justify-between gap-2">
       <div className="flex items-center gap-1.5">
         <button type="button" className="grid place-items-center" onClick={handlePrevious}>
-          <ChevronLeft size={16} strokeWidth={2} />
+          <ChevronLeftIcon height={16} width={16} strokeWidth={2} />
         </button>
         <button type="button" className="grid place-items-center" onClick={handleNext}>
-          <ChevronRight size={16} strokeWidth={2} />
+          <ChevronRightIcon height={16} width={16} strokeWidth={2} />
         </button>
         <CalendarMonthsDropdown issuesFilterStore={issuesFilterStore} />
       </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
index 6ff6c8d43..5d7495f95 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/cycle.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
-import { CycleGroupIcon } from "@plane/propel/icons";
+import { CloseIcon, CycleGroupIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
 // hooks
 import { useCycle } from "@/hooks/store/use-cycle";
@@ -39,7 +38,7 @@ export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(cycleId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
index e17db764b..6a1604265 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
-// helpers
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// helpers
 import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
 // constants
 
@@ -43,7 +43,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
             className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
             onClick={() => handleRemove(date)}
           >
-            <X size={10} strokeWidth={2} />
+            <CloseIcon height={10} width={10} strokeWidth={2} />
           </button>
         </div>
       ))}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
index 5c0e59b32..3a9f0b03a 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 
 // icons
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 // types
 
@@ -37,7 +37,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(labelId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
index 66607cc24..63de17670 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // plane ui
 import { Avatar } from "@plane/ui";
 // helpers
@@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(memberId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 5d9a99796..c3518d584 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // hooks
-import { ModuleIcon } from "@plane/propel/icons";
+import { CloseIcon, ModuleIcon } from "@plane/propel/icons";
 import { useModule } from "@/hooks/store/use-module";
 // ui
 
@@ -35,7 +34,7 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(moduleId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
index 0b5075424..3da99980f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -3,8 +3,7 @@
 import { observer } from "mobx-react";
 
 // icons
-import { X } from "lucide-react";
-import { PriorityIcon } from "@plane/propel/icons";
+import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
 import type { TIssuePriorities } from "@plane/types";
 // types
 
@@ -29,7 +28,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(priority)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
index 04efe576c..fd2cbecb2 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // components
 import { Logo } from "@/components/common/logo";
 // hooks
@@ -35,7 +35,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(projectId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
index 21519d359..8d8b64563 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -3,9 +3,8 @@
 import { observer } from "mobx-react";
 
 // icons
-import { X } from "lucide-react";
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
 import type { TStateGroups } from "@plane/types";
 
 type Props = {
@@ -27,7 +26,7 @@ export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
             className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
             onClick={() => handleRemove(stateGroup)}
           >
-            <X size={10} strokeWidth={2} />
+            <CloseIcon height={10} width={10} strokeWidth={2} />
           </button>
         </div>
       ))}
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
index 58a7fdd47..851bb953d 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -2,10 +2,9 @@
 
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
 import type { IState } from "@plane/types";
 
 type Props = {
@@ -40,7 +39,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(stateId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index 5bf0da8cf..dafd652ad 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -3,12 +3,11 @@
 import React, { Fragment, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
-// icons
-import { ChevronUp } from "lucide-react";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@plane/propel/button";
+import { ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
   children: React.ReactNode;
@@ -63,7 +62,12 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
                       size="sm"
                       prependIcon={icon}
                       appendIcon={
-                        <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                        <ChevronUpIcon
+                          className={`transition-all ${open ? "" : "rotate-180"}`}
+                          height={14}
+                          width={14}
+                          strokeWidth={2}
+                        />
                       }
                       tabIndex={tabIndex}
                       className="relative"
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
index bed805740..41d75cf7f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -1,6 +1,6 @@
 import React from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 // lucide icons
-import { ChevronDown, ChevronUp } from "lucide-react";
 
 interface IFilterHeader {
   title: string;
@@ -16,7 +16,7 @@ export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }
       className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
       onClick={handleIsPreviewEnabled}
     >
-      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+      {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
     </button>
   </div>
 );
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index e7f63f51a..e0000f03f 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -1,7 +1,7 @@
-import { ChevronDown } from "lucide-react";
 import { ISSUE_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { EIssueLayoutTypes } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 import { IssueLayoutIcon } from "../../layout-icon";
@@ -26,12 +26,12 @@ export const MobileLayoutSelection = ({
         activeLayout ? (
           <Button variant="neutral-primary" size="sm" className="relative px-2">
             <IssueLayoutIcon layout={activeLayout} size={14} strokeWidth={2} className={`h-3.5 w-3.5`} />
-            <ChevronDown className="size-3 text-custom-text-200 my-auto" strokeWidth={2} />
+            <ChevronDownIcon className="size-3 text-custom-text-200 my-auto" strokeWidth={2} />
           </Button>
         ) : (
           <div className="flex flex-start text-sm text-custom-text-200">
             {t("common.layout")}
-            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+            <ChevronDownIcon className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
           </div>
         )
       }
diff --git a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 56f950af1..0e6f1378b 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -1,7 +1,8 @@
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { Circle, ChevronDown, ChevronUp } from "lucide-react";
+import { Circle } from "lucide-react";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 // Plane
 import type { TIssueGroupByOptions, TIssueKanbanFilters } from "@plane/types";
 // Plane-web
@@ -27,9 +28,9 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props)
     >
       <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm transition-all hover:bg-custom-background-80">
         {collapsedGroups?.sub_group_by.includes(column_id) ? (
-          <ChevronDown width={14} strokeWidth={2} />
+          <ChevronDownIcon width={14} strokeWidth={2} />
         ) : (
-          <ChevronUp width={14} strokeWidth={2} />
+          <ChevronUpIcon width={14} strokeWidth={2} />
         )}
       </div>
 
diff --git a/apps/web/core/components/issues/issue-layouts/list/block.tsx b/apps/web/core/components/issues/issue-layouts/list/block.tsx
index 360c96f64..98ff75007 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -6,7 +6,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight } from "lucide-react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // types
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -250,7 +250,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                     className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
-                    <ChevronRight
+                    <ChevronRightIcon
                       className={cn("size-4", {
                         "rotate-90": isExpanded,
                       })}
diff --git a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
index ea8603cdb..a71306d42 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -2,12 +2,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Loader, Search } from "lucide-react";
+import { Check, Loader, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
@@ -200,7 +201,7 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
         disabled={disabled}
       >
         {label}
-        {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+        {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
       </button>
     ),
     [buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index cf31e078e..c79e69a09 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -4,10 +4,11 @@ import type { Dispatch, MouseEvent, MutableRefObject, SetStateAction } from "rea
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // types
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
@@ -335,7 +336,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                     className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
                     onClick={handleToggleExpand}
                   >
-                    <ChevronRight
+                    <ChevronRightIcon
                       className={cn("size-4", {
                         "rotate-90": isExpanded,
                       })}
diff --git a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
index 08be8f9ab..499972e48 100644
--- a/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -4,9 +4,9 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { X } from "lucide-react";
-// plane imports
 import { ETabIndices } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 // types
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 // helpers
@@ -65,7 +65,7 @@ export const IssueParentTag: React.FC<TIssueParentTagProps> = observer((props) =
               }}
               tabIndex={getIndex("remove_parent")}
             >
-              <X className="h-3 w-3 cursor-pointer" />
+              <CloseIcon className="h-3 w-3 cursor-pointer" />
             </button>
           </div>
         </div>
diff --git a/apps/web/core/components/issues/relations/issue-list-item.tsx b/apps/web/core/components/issues/relations/issue-list-item.tsx
index e95967a79..853cd754c 100644
--- a/apps/web/core/components/issues/relations/issue-list-item.tsx
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -3,9 +3,10 @@
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
-import { X, Pencil, Trash, Link as LinkIcon } from "lucide-react";
-// plane imports
+import { Pencil, Trash, Link as LinkIcon } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, TIssueServiceType } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
@@ -180,7 +181,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 {!disabled && (
                   <CustomMenu.MenuItem onClick={handleRemoveRelation}>
                     <div className="flex items-center gap-2">
-                      <X className="h-3.5 w-3.5" strokeWidth={2} />
+                      <CloseIcon className="h-3.5 w-3.5" strokeWidth={2} />
                       <span>{t("common.actions.remove_relation")}</span>
                     </div>
                   </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/labels/label-block/label-item-block.tsx b/apps/web/core/components/labels/label-block/label-item-block.tsx
index b55850408..ec5b5f39b 100644
--- a/apps/web/core/components/labels/label-block/label-item-block.tsx
+++ b/apps/web/core/components/labels/label-block/label-item-block.tsx
@@ -3,10 +3,11 @@
 import type { MutableRefObject } from "react";
 import { useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
-import { X } from "lucide-react";
 // plane helpers
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@plane/types";
 // ui
@@ -17,7 +18,7 @@ import { cn } from "@plane/utils";
 import { LabelName } from "./label-name";
 
 export interface ICustomMenuItem {
-  CustomIcon: LucideIcon;
+  CustomIcon: LucideIcon | React.FC<ISvgIcons>;
   onClick: (label: IIssueLabel) => void;
   isVisible: boolean;
   text: string;
@@ -98,7 +99,7 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
                 }}
                 data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.LABELS_DELETE_BUTTON}
               >
-                <X className="size-3.5 flex-shrink-0 text-custom-sidebar-text-300" />
+                <CloseIcon className="size-3.5 flex-shrink-0 text-custom-sidebar-text-300" />
               </button>
             </div>
           )}
diff --git a/apps/web/core/components/labels/project-setting-label-group.tsx b/apps/web/core/components/labels/project-setting-label-group.tsx
index cd2372a87..8abbd67cf 100644
--- a/apps/web/core/components/labels/project-setting-label-group.tsx
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -1,12 +1,13 @@
 import type { Dispatch, SetStateAction } from "react";
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown, Pencil, Trash2 } from "lucide-react";
+import { Pencil, Trash2 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // store
 // icons
 // types
-import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import type { IIssueLabel } from "@plane/types";
 // components
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -121,7 +122,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
 
                       <Disclosure.Button>
                         <span>
-                          <ChevronDown
+                          <ChevronDownIcon
                             className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
                           />
                         </span>
diff --git a/apps/web/core/components/labels/project-setting-label-item.tsx b/apps/web/core/components/labels/project-setting-label-item.tsx
index 5bc748f79..71aa6da9f 100644
--- a/apps/web/core/components/labels/project-setting-label-item.tsx
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -1,9 +1,10 @@
 import type { Dispatch, SetStateAction } from "react";
 import React, { useState } from "react";
 import { useParams } from "next/navigation";
-import { X, Pencil } from "lucide-react";
-// types
+import { Pencil } from "lucide-react";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// types
 import type { IIssueLabel } from "@plane/types";
 // hooks
 import { captureClick } from "@/helpers/event-tracker.helper";
@@ -61,7 +62,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
 
   const customMenuItems: ICustomMenuItem[] = [
     {
-      CustomIcon: X,
+      CustomIcon: CloseIcon,
       onClick: removeFromGroup,
       isVisible: !!label.parent,
       text: "Remove from group",
diff --git a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index 2a033c7d2..87ea34adb 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -4,10 +4,11 @@ import type { FC } from "react";
 import { Fragment, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
-import { AlertCircle, ChevronUp, ChevronDown } from "lucide-react";
+import { AlertCircle } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronUpIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { TModulePlotType } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomSelect, Spinner } from "@plane/ui";
@@ -153,9 +154,9 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                 )}
                 <Disclosure.Button className="ml-auto">
                   {open ? (
-                    <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" />
+                    <ChevronUpIcon className="h-3.5 w-3.5" aria-hidden="true" />
                   ) : (
-                    <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />
+                    <ChevronDownIcon className="h-3.5 w-3.5" aria-hidden="true" />
                   )}
                 </Disclosure.Button>
               </div>
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 5e33b6e43..3026f2e2e 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { ChevronDown, ChevronRight, Info, Plus, SquareUser } from "lucide-react";
+import { Info, Plus, SquareUser } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import {
   MODULE_STATUS,
@@ -16,7 +16,14 @@ import {
 } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import { MembersPropertyIcon, ModuleStatusIcon, WorkItemsIcon, StartDatePropertyIcon } from "@plane/propel/icons";
+import {
+  MembersPropertyIcon,
+  ModuleStatusIcon,
+  WorkItemsIcon,
+  StartDatePropertyIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+} from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
@@ -246,7 +253,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
               className="flex h-5 w-5 items-center justify-center rounded-full bg-custom-border-300"
               onClick={() => handleClose()}
             >
-              <ChevronRight className="h-3 w-3 stroke-2 text-white" />
+              <ChevronRightIcon className="h-3 w-3 stroke-2 text-white" />
             </button>
           </div>
         </div>
@@ -440,7 +447,10 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     </div>
 
                     <div className="flex items-center gap-2.5">
-                      <ChevronDown className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                      <ChevronDownIcon
+                        className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
+                        aria-hidden="true"
+                      />
                     </div>
                   </Disclosure.Button>
                   <Transition show={open}>
diff --git a/apps/web/core/components/modules/applied-filters/date.tsx b/apps/web/core/components/modules/applied-filters/date.tsx
index f3babd765..115176c42 100644
--- a/apps/web/core/components/modules/applied-filters/date.tsx
+++ b/apps/web/core/components/modules/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
 import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
 import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
 // helpers
 // constants
@@ -45,7 +45,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(date)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/modules/applied-filters/members.tsx b/apps/web/core/components/modules/applied-filters/members.tsx
index 06e485ab4..baa58d622 100644
--- a/apps/web/core/components/modules/applied-filters/members.tsx
+++ b/apps/web/core/components/modules/applied-filters/members.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // plane ui
 import { Avatar } from "@plane/ui";
 // helpers
@@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(memberId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/modules/applied-filters/root.tsx b/apps/web/core/components/modules/applied-filters/root.tsx
index ad55953b4..03f01432a 100644
--- a/apps/web/core/components/modules/applied-filters/root.tsx
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -1,5 +1,5 @@
-import { X } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
 import { Header, EHeaderVariant, Tag } from "@plane/ui";
@@ -78,7 +78,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
                     className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                     onClick={() => handleRemoveFilter(filterKey, null)}
                   >
-                    <X size={12} strokeWidth={2} />
+                    <CloseIcon height={12} width={12} strokeWidth={2} />
                   </button>
                 )}
               </div>
@@ -105,7 +105,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
                       })
                     }
                   >
-                    <X size={10} strokeWidth={2} />
+                    <CloseIcon height={10} width={10} strokeWidth={2} />
                   </button>
                 )}
               </div>
@@ -116,7 +116,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
           <button type="button" onClick={handleClearAllFilters}>
             <Tag>
               {t("common.clear_all")}
-              <X size={12} strokeWidth={2} />
+              <CloseIcon height={12} width={12} strokeWidth={2} />
             </Tag>
           </button>
         )}
diff --git a/apps/web/core/components/modules/applied-filters/status.tsx b/apps/web/core/components/modules/applied-filters/status.tsx
index d5c10eea1..a25e1b9f0 100644
--- a/apps/web/core/components/modules/applied-filters/status.tsx
+++ b/apps/web/core/components/modules/applied-filters/status.tsx
@@ -1,11 +1,10 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // ui
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon } from "@plane/propel/icons";
+import { CloseIcon, ModuleStatusIcon } from "@plane/propel/icons";
 // constants
 
 type Props = {
@@ -34,7 +33,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(status)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/modules/archived-modules/header.tsx b/apps/web/core/components/modules/archived-modules/header.tsx
index cf19018b3..7e2469253 100644
--- a/apps/web/core/components/modules/archived-modules/header.tsx
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -3,9 +3,10 @@ import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { ListFilter, Search, X } from "lucide-react";
-// plane helpers
+import { ListFilter, Search } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { CloseIcon } from "@plane/propel/icons";
+// plane helpers
 // types
 import type { TModuleFilters } from "@plane/types";
 import { cn, calculateTotalFilters } from "@plane/utils";
@@ -119,7 +120,7 @@ export const ArchivedModulesHeader: FC = observer(() => {
                 setIsSearchOpen(false);
               }}
             >
-              <X className="h-3 w-3" />
+              <CloseIcon className="h-3 w-3" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/modules/dropdowns/filters/root.tsx b/apps/web/core/components/modules/dropdowns/filters/root.tsx
index 065735188..510eedac8 100644
--- a/apps/web/core/components/modules/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -2,9 +2,10 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
 // plane imports
 import type { TModuleStatus } from "@plane/propel/icons";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
 import { FilterOption } from "@/components/issues/issue-layouts/filters";
@@ -50,7 +51,7 @@ export const ModuleFiltersSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index 64cc770e8..5e0b35cd7 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
 import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -33,7 +34,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
         <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
           {orderByDetails && t(orderByDetails?.i18n_label)}
-          <ChevronDown className="size-3" strokeWidth={2} />
+          <ChevronDownIcon className="size-3" strokeWidth={2} />
         </div>
       }
       placement="bottom-end"
diff --git a/apps/web/core/components/modules/module-view-header.tsx b/apps/web/core/components/modules/module-view-header.tsx
index 6ceba6905..d6b9d652a 100644
--- a/apps/web/core/components/modules/module-view-header.tsx
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -4,12 +4,13 @@ import type { FC } from "react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ListFilter, Search, X } from "lucide-react";
+import { ListFilter, Search } from "lucide-react";
 // plane helpers
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TModuleFilters } from "@plane/types";
 // ui
@@ -134,7 +135,7 @@ export const ModuleViewHeader: FC = observer(() => {
                 setIsSearchOpen(false);
               }}
             >
-              <X className="h-3 w-3" />
+              <CloseIcon className="h-3 w-3" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index 433d1d2f2..fc752e9ce 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -2,9 +2,8 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { ChevronLeft } from "lucide-react";
 // plane imports
-import { PlaneLockup } from "@plane/propel/icons";
+import { PlaneLockup, ChevronLeftIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TOnboardingStep } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
@@ -75,7 +74,7 @@ export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
         <div className="flex items-center gap-2.5">
           {canGoBack && (
             <button onClick={handleStepBack} className="cursor-pointer" type="button" disabled={!canGoBack}>
-              <ChevronLeft className="size-6 text-custom-text-400" />
+              <ChevronLeftIcon className="size-6 text-custom-text-400" />
             </button>
           )}
           <PlaneLockup height={20} width={95} className="text-custom-text-100" />
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index d693ba738..73a734042 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -13,7 +13,7 @@ import type {
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 // icons
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
+import { Check, Plus, XCircle } from "lucide-react";
 import { Listbox } from "@headlessui/react";
 // plane imports
 import type { EUserPermissions } from "@plane/constants";
@@ -21,6 +21,7 @@ import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } fr
 import { useTranslation } from "@plane/i18n";
 // types
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspace } from "@plane/types";
 // ui
@@ -196,7 +197,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                     {ROLE[value]}
                   </span>
 
-                  <ChevronDown
+                  <ChevronDownIcon
                     className={`size-3 ${
                       !getValues(`emails.${index}.role_active`)
                         ? "stroke-onboarding-text-400"
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index 2e04b237e..ed7a801bb 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import React, { useState, useCallback, useMemo } from "react";
-import { Lock, ChevronDown } from "lucide-react";
+import { Lock } from "lucide-react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
 import { cn } from "@plane/utils";
 
@@ -93,7 +94,7 @@ export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
           <span>{`(Optional)`}</span>
         </div>
         <div className="flex items-center gap-2 text-custom-text-400">
-          <ChevronDown className={chevronIconClasses} />
+          <ChevronDownIcon className={chevronIconClasses} />
         </div>
       </div>
 
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index c8481aa85..ecb880d3a 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -13,13 +13,14 @@ import type {
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 // icons
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
+import { Check, Plus, XCircle } from "lucide-react";
 import { Listbox } from "@headlessui/react";
 // plane imports
 import type { EUserPermissions } from "@plane/constants";
 import { ROLE, ROLE_DETAILS, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // types
 import { EOnboardingSteps } from "@plane/types";
@@ -197,7 +198,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                     {ROLE[value]}
                   </span>
 
-                  <ChevronDown
+                  <ChevronDownIcon
                     className={`size-3 ${
                       !getValues(`emails.${index}.role_active`)
                         ? "stroke-onboarding-text-400"
diff --git a/apps/web/core/components/onboarding/tour/root.tsx b/apps/web/core/components/onboarding/tour/root.tsx
index ffa3eefe3..39cdd254a 100644
--- a/apps/web/core/components/onboarding/tour/root.tsx
+++ b/apps/web/core/components/onboarding/tour/root.tsx
@@ -4,11 +4,10 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import type { StaticImageData } from "next/image";
 import Image from "next/image";
-import { X } from "lucide-react";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { PlaneLockup } from "@plane/propel/icons";
+import { CloseIcon, PlaneLockup } from "@plane/propel/icons";
 // helpers
 import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
@@ -144,7 +143,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
             className="fixed right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-1/2 cursor-pointer rounded-full border border-custom-text-100 p-1 sm:top-[11.5%] md:right-[24%] lg:right-[19%]"
             onClick={onComplete}
           >
-            <X className="h-3 w-3 text-custom-text-100" />
+            <CloseIcon className="h-3 w-3 text-custom-text-100" />
           </button>
           <TourSidebar step={step} setStep={setStep} />
           <div className="col-span-10 h-full overflow-hidden lg:col-span-7">
diff --git a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
index f2cedaa5b..af6603dd2 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import React, { useEffect, useState, useCallback } from "react";
-import { Check, ChevronDown } from "lucide-react";
+import { Check } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -102,7 +103,7 @@ export const PageToolbar: React.FC<Props> = (props) => {
         customButton={
           <span className="text-custom-text-300 text-sm border-[0.5px] border-custom-border-300 hover:bg-custom-background-80 h-7 w-24 rounded px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left">
             {activeTypography?.name || "Text"}
-            <ChevronDown className="flex-shrink-0 size-3" />
+            <ChevronDownIcon className="flex-shrink-0 size-3" />
           </span>
         }
         className="pr-2"
diff --git a/apps/web/core/components/pages/list/applied-filters/root.tsx b/apps/web/core/components/pages/list/applied-filters/root.tsx
index 2fa5ad779..3f71495e7 100644
--- a/apps/web/core/components/pages/list/applied-filters/root.tsx
+++ b/apps/web/core/components/pages/list/applied-filters/root.tsx
@@ -1,6 +1,6 @@
-import { X } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import type { TPageFilterProps } from "@plane/types";
 import { Tag } from "@plane/ui";
 import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
@@ -59,7 +59,7 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
                   className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
-                  <X size={12} strokeWidth={2} />
+                  <CloseIcon height={12} width={12} strokeWidth={2} />
                 </button>
               )}
             </div>
@@ -70,7 +70,7 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
             {t("common.clear_all")}
-            <X size={12} strokeWidth={2} />
+            <CloseIcon height={12} strokeWidth={2} />
           </Tag>
         </button>
       )}
diff --git a/apps/web/core/components/pages/list/filters/root.tsx b/apps/web/core/components/pages/list/filters/root.tsx
index c8d4c313a..7e9c0f3c4 100644
--- a/apps/web/core/components/pages/list/filters/root.tsx
+++ b/apps/web/core/components/pages/list/filters/root.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TPageFilterProps, TPageFilters } from "@plane/types";
 // components
 import { FilterCreatedDate } from "@/components/common/filters/created-at";
@@ -59,7 +60,7 @@ export const PageFiltersSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index 75b911682..0fc883354 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
 // types
 import { getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -36,7 +37,7 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
         <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
           {orderByDetails?.label}
-          <ChevronDown className="h-3 w-3" strokeWidth={2} />
+          <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
         </div>
       }
       placement="bottom-end"
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index 65c13e38e..c3c1db6f0 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -1,8 +1,9 @@
 import type { FC } from "react";
 import { useState, useRef, useEffect } from "react";
-import { Search, X } from "lucide-react";
-// plane helpers
+import { Search } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { CloseIcon } from "@plane/propel/icons";
+// plane helpers
 // helpers
 import { cn } from "@plane/utils";
 
@@ -76,7 +77,7 @@ export const PageSearchInput: FC<Props> = (props) => {
               setIsSearchOpen(false);
             }}
           >
-            <X className="h-3 w-3" />
+            <CloseIcon className="h-3 w-3" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
index 97250edcd..365271b5a 100644
--- a/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
+++ b/apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx
@@ -2,9 +2,10 @@
 
 import type { FC } from "react";
 import { useState, Fragment } from "react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
+import { CloseIcon } from "@plane/propel/icons";
 import { Input } from "@plane/ui";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
@@ -62,7 +63,10 @@ export const ShortcutsModal: FC<Props> = (props) => {
                   <Dialog.Title as="h3" className="flex justify-between">
                     <span className="text-lg font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
-                      <X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" aria-hidden="true" />
+                      <CloseIcon
+                        className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100"
+                        aria-hidden="true"
+                      />
                     </button>
                   </Dialog.Title>
                   <div className="flex w-full items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2">
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/profile/form.tsx
index e6c041d3a..7bd9e1338 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/profile/form.tsx
@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { ChevronDown, CircleUserRound, InfoIcon } from "lucide-react";
+import { CircleUserRound, InfoIcon } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { PROFILE_SETTINGS_TRACKER_ELEMENTS, PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import type { IUser, TUserProfile } from "@plane/types";
 import { Input } from "@plane/ui";
@@ -376,7 +377,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
           <>
             <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
               <span className="text-lg font-medium tracking-tight">{t("deactivate_account")}</span>
-              <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
+              <ChevronDownIcon className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
             </Disclosure.Button>
             <Transition
               show={open}
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index 6db83dc0e..ccca182f2 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -6,13 +6,14 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // icons
-import { ChevronDown, Pencil } from "lucide-react";
+import { Pencil } from "lucide-react";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IUserProfileProjectSegregation } from "@plane/types";
 // plane ui
@@ -182,7 +183,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                                 </div>
                               </Tooltip>
                             )}
-                            <ChevronDown className="h-4 w-4" />
+                            <ChevronDownIcon className="h-4 w-4" />
                           </div>
                         </Disclosure.Button>
                         <Transition
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index cb95f28dd..3ab1340d0 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -3,11 +3,11 @@
 import type { FC } from "react";
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // plane imports
 import { EIconSize, STATE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -73,7 +73,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
               }
             )}
           >
-            <ChevronDown className="w-4 h-4" />
+            <ChevronDownIcon className="w-4 h-4" />
           </div>
           <div className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden">
             <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index e95c26cb4..0028010b1 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -3,9 +3,10 @@
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Loader, X } from "lucide-react";
-// plane imports
+import { Loader } from "lucide-react";
 import { STATE_TRACKER_EVENTS, STATE_TRACKER_ELEMENTS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IState, TStateOperationsCallbacks } from "@plane/types";
@@ -114,7 +115,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
           disabled={!isDeleteDisabled}
           className="focus:outline-none"
         >
-          {isDelete ? <Loader className="w-3.5 h-3.5 text-custom-text-200" /> : <X className="w-3.5 h-3.5" />}
+          {isDelete ? <Loader className="w-3.5 h-3.5 text-custom-text-200" /> : <CloseIcon className="w-3.5 h-3.5" />}
         </Tooltip>
       </button>
     </>
diff --git a/apps/web/core/components/project/applied-filters/access.tsx b/apps/web/core/components/project/applied-filters/access.tsx
index 4748a0175..15d8bb14e 100644
--- a/apps/web/core/components/project/applied-filters/access.tsx
+++ b/apps/web/core/components/project/applied-filters/access.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // constants
 import { NETWORK_CHOICES } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -27,7 +27,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(status)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/project/applied-filters/date.tsx b/apps/web/core/components/project/applied-filters/date.tsx
index 27ac20613..e22bfe645 100644
--- a/apps/web/core/components/project/applied-filters/date.tsx
+++ b/apps/web/core/components/project/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
-// helpers
 import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
+import { CloseIcon } from "@plane/propel/icons";
+// helpers
 import { renderFormattedDate, capitalizeFirstLetter } from "@plane/utils";
 // constants
 
@@ -44,7 +44,7 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
               className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
               onClick={() => handleRemove(date)}
             >
-              <X size={10} strokeWidth={2} />
+              <CloseIcon height={10} width={10} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/project/applied-filters/members.tsx b/apps/web/core/components/project/applied-filters/members.tsx
index 497dd6c32..72ea1eef7 100644
--- a/apps/web/core/components/project/applied-filters/members.tsx
+++ b/apps/web/core/components/project/applied-filters/members.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // ui
 import { Avatar } from "@plane/ui";
 // helpers
@@ -44,7 +44,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(memberId)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/project/applied-filters/project-display-filters.tsx b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
index fb17c0a4c..c19d88ab8 100644
--- a/apps/web/core/components/project/applied-filters/project-display-filters.tsx
+++ b/apps/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
 // types
 import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TProjectAppliedDisplayFilterKeys } from "@plane/types";
 // constants
 
@@ -30,7 +30,7 @@ export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) =>
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(key)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/project/applied-filters/root.tsx b/apps/web/core/components/project/applied-filters/root.tsx
index 3f280d5ba..e8ad5535d 100644
--- a/apps/web/core/components/project/applied-filters/root.tsx
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { X } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 import { EHeaderVariant, Header, Tag } from "@plane/ui";
@@ -85,7 +85,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
                   className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                   onClick={() => handleRemoveFilter(filterKey, null)}
                 >
-                  <X size={12} strokeWidth={2} />
+                  <CloseIcon height={12} width={12} strokeWidth={2} />
                 </button>
               )}
             </Tag>
@@ -106,7 +106,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
           <button type="button" onClick={handleClearAllFilters}>
             <Tag>
               {t("common.clear_all")}
-              <X size={12} strokeWidth={2} />
+              <CloseIcon height={12} width={12} strokeWidth={2} />
             </Tag>
           </button>
         )}
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
index e22c1565b..eaaeecf3e 100644
--- a/apps/web/core/components/project/create/header.tsx
+++ b/apps/web/core/components/project/create/header.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import { X } from "lucide-react";
 // plane imports
 import { ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { CloseIcon } from "@plane/propel/icons";
 // plane types
 import type { IProject } from "@plane/types";
 // plane ui
@@ -43,7 +43,7 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
       </div>
       <div className="absolute right-2 top-2 p-2">
         <button data-posthog="PROJECT_MODAL_CLOSE" type="button" onClick={handleClose} tabIndex={getIndex("close")}>
-          <X className="h-5 w-5 text-white" />
+          <CloseIcon className="h-5 w-5 text-white" />
         </button>
       </div>
       <div className="absolute bottom-2 right-2">
diff --git a/apps/web/core/components/project/dropdowns/filters/member-list.tsx b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
index a3e150922..eb0e6f22e 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { ChevronDown } from "lucide-react";
 // plane imports
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { EUserProjectRoles, EUserWorkspaceRoles } from "@plane/types";
 // plane ui
 import { CustomMenu } from "@plane/ui";
@@ -93,7 +93,7 @@ export const MemberListFiltersDropdown: React.FC<Props> = observer((props) => {
         <div className="relative">
           <Button variant="neutral-primary" size="sm" className="flex items-center gap-2">
             <span>Filters</span>
-            <ChevronDown className="h-3 w-3" />
+            <ChevronDownIcon className="h-3 w-3" />
           </Button>
           {appliedFiltersCount > 0 && (
             <div className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-custom-primary-100" />
diff --git a/apps/web/core/components/project/dropdowns/filters/root.tsx b/apps/web/core/components/project/dropdowns/filters/root.tsx
index e304a157c..16784f9fd 100644
--- a/apps/web/core/components/project/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/root.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 // plane imports
 import type { TProjectDisplayFilters, TProjectFilters } from "@plane/types";
 // components
@@ -43,7 +44,7 @@ export const ProjectFiltersSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/project/dropdowns/order-by.tsx b/apps/web/core/components/project/dropdowns/order-by.tsx
index b244253ec..c474acf5e 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, Check } from "lucide-react";
 import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TProjectOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -38,13 +39,13 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
             <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
               <ArrowDownWideNarrow className="h-3 w-3" />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-              <ChevronDown className="h-3 w-3" strokeWidth={2} />
+              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           ) : (
             <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-200")}>
               <ArrowDownWideNarrow className="h-3 w-3" />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-              <ChevronDown className="h-3 w-3" strokeWidth={2} />
+              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           )}
         </>
diff --git a/apps/web/core/components/project/multi-select-modal.tsx b/apps/web/core/components/project/multi-select-modal.tsx
index 5a0e7b85b..add390304 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -1,11 +1,12 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane ui
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CloseIcon } from "@plane/propel/icons";
 import { Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { cn } from "@plane/utils";
@@ -108,7 +109,7 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
                   <p className="text-xs truncate text-custom-text-300 group-hover:text-custom-text-200 transition-colors">
                     {projectDetails.identifier}
                   </p>
-                  <X className="size-3 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200 transition-colors" />
+                  <CloseIcon className="size-3 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200 transition-colors" />
                 </div>
               );
             })}
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
index 7d01521a9..273161e0a 100644
--- a/apps/web/core/components/project/search-projects.tsx
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -3,11 +3,12 @@
 import type { FC } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // i18n
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "@plane/utils";
 // hooks
@@ -74,7 +75,7 @@ export const ProjectSearch: FC = observer(() => {
               setIsSearchOpen(false);
             }}
           >
-            <X className="h-3 w-3" />
+            <CloseIcon className="h-3 w-3" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/project/send-project-invitation-modal.tsx b/apps/web/core/components/project/send-project-invitation-modal.tsx
index 30ab8d338..e3b4e1fe5 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -3,12 +3,13 @@
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-import { ChevronDown, Plus, X } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
 import { ROLE, EUserPermissions, MEMBER_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Avatar, CustomSelect, CustomSearchSelect } from "@plane/ui";
 // helpers
@@ -250,7 +251,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                         ) : (
                                           <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
                                         )}
-                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                                       </button>
                                     }
                                     onChange={(val: string) => {
@@ -291,7 +292,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
-                                        <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                                        <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                                       </div>
                                     }
                                     input
@@ -324,7 +325,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   className="place-items-center self-center rounded"
                                   onClick={() => remove(index)}
                                 >
-                                  <X className="h-4 w-4 text-custom-text-200" />
+                                  <CloseIcon className="h-4 w-4 text-custom-text-200" />
                                 </button>
                               </div>
                             )}
diff --git a/apps/web/core/components/project/settings/archive-project/selection.tsx b/apps/web/core/components/project/settings/archive-project/selection.tsx
index e542396f4..b21ab7400 100644
--- a/apps/web/core/components/project/settings/archive-project/selection.tsx
+++ b/apps/web/core/components/project/settings/archive-project/selection.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import React from "react";
-import { ChevronRight, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
 import { Button } from "@plane/propel/button";
+import { ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
 // ui
 import { Loader } from "@plane/ui";
@@ -23,7 +23,7 @@ export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
             <span className="text-xl tracking-tight">Archive project</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
           </Disclosure.Button>
           <Transition
             show={open}
diff --git a/apps/web/core/components/project/settings/delete-project-section.tsx b/apps/web/core/components/project/settings/delete-project-section.tsx
index ce397fb6f..30b578247 100644
--- a/apps/web/core/components/project/settings/delete-project-section.tsx
+++ b/apps/web/core/components/project/settings/delete-project-section.tsx
@@ -1,11 +1,11 @@
 "use client";
 
 import React from "react";
-import { ChevronRight, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
 // ui
 import { Loader } from "@plane/ui";
@@ -24,7 +24,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between">
             <span className="text-xl tracking-tight">Delete project</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
           </Disclosure.Button>
 
           <Transition
diff --git a/apps/web/core/components/rich-filters/filter-item/close-button.tsx b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
index 768d7eaa1..e3a73f411 100644
--- a/apps/web/core/components/rich-filters/filter-item/close-button.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/close-button.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // plane imports
+import { CloseIcon } from "@plane/propel/icons";
 import type { IFilterInstance } from "@plane/shared-state";
 import type { TExternalFilter, TFilterProperty } from "@plane/types";
 
@@ -25,7 +25,7 @@ export const FilterItemCloseButton = observer(
         type="button"
         aria-label="Remove filter"
       >
-        <X className="size-3.5" />
+        <CloseIcon className="size-3.5" />
       </button>
     );
   }
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index 138636c75..d2668e0d8 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -1,8 +1,9 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
-import { ChevronRight, Menu } from "lucide-react";
+import { Menu } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { useUserSettings } from "@/hooks/store/user";
 
 type Props = {
@@ -37,7 +38,7 @@ export const SettingsMobileNav = observer((props: Props) => {
         </div>
         {/* path */}
         <div className="flex items-center gap-2">
-          <ChevronRight className="size-4 text-custom-text-300" />
+          <ChevronRightIcon className="size-4 text-custom-text-300" />
           <span className="text-sm font-medium text-custom-text-200">{t(activePath)}</span>
         </div>
       </div>
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
index 640f615a3..339a84250 100644
--- a/apps/web/core/components/stickies/action-bar.tsx
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -2,11 +2,11 @@ import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { Plus, StickyNote as StickyIcon, X } from "lucide-react";
+import { Plus, StickyNote as StickyIcon } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // plane ui
-import { RecentStickyIcon, StickyNoteIcon } from "@plane/propel/icons";
+import { RecentStickyIcon, StickyNoteIcon, CloseIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -113,7 +113,7 @@ export const StickyActionBar = observer(() => {
         onClick={() => setIsExpanded(!isExpanded)}
       >
         {isExpanded ? (
-          <X className="size-5 text-custom-text-350" />
+          <CloseIcon className="size-5 text-custom-text-350" />
         ) : (
           <StickyIcon className="size-5 rotate-90 text-custom-text-350" />
         )}
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
index d8b2f8968..f0ec79b4a 100644
--- a/apps/web/core/components/stickies/modal/search.tsx
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -5,11 +5,12 @@ import { useCallback, useRef, useState } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 import { useSticky } from "@/hooks/use-stickies";
 
@@ -92,7 +93,7 @@ export const StickySearch: FC = observer(() => {
               fetchStickies();
             }}
           >
-            <X className="h-3 w-3" />
+            <CloseIcon className="h-3 w-3" />
           </button>
         )}
       </div>
diff --git a/apps/web/core/components/stickies/modal/stickies.tsx b/apps/web/core/components/stickies/modal/stickies.tsx
index c70665e36..b3e6dd4e6 100644
--- a/apps/web/core/components/stickies/modal/stickies.tsx
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Plus, X } from "lucide-react";
+import { Plus } from "lucide-react";
 // plane ui
-import { RecentStickyIcon } from "@plane/propel/icons";
+import { RecentStickyIcon, CloseIcon } from "@plane/propel/icons";
 // hooks
 import { useSticky } from "@/hooks/use-stickies";
 // components
@@ -60,7 +60,7 @@ export const Stickies = observer((props: TProps) => {
               onClick={handleClose}
               className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto"
             >
-              <X className="text-custom-text-400 size-4" />
+              <CloseIcon className="text-custom-text-400 size-4" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/ui/empty-space.tsx b/apps/web/core/components/ui/empty-space.tsx
index 73fc6ba01..2694baa3e 100644
--- a/apps/web/core/components/ui/empty-space.tsx
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -1,9 +1,7 @@
 // next
 import React from "react";
 import Link from "next/link";
-// react
-// icons
-import { ChevronRight } from "lucide-react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 
 type EmptySpaceProps = {
   title: string;
@@ -62,7 +60,10 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
         {description ? <div className="text-sm">{description}</div> : null}
       </div>
       <div className="flex-shrink-0 self-center">
-        <ChevronRight className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100" aria-hidden="true" />
+        <ChevronRightIcon
+          className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
+          aria-hidden="true"
+        />
       </div>
     </div>
   );
diff --git a/apps/web/core/components/views/applied-filters/access.tsx b/apps/web/core/components/views/applied-filters/access.tsx
index 61be5831c..95430e2c6 100644
--- a/apps/web/core/components/views/applied-filters/access.tsx
+++ b/apps/web/core/components/views/applied-filters/access.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 // icons
-import { X } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 // constants
 // helpers
-import { useTranslation } from "@plane/i18n";
 import type { EViewAccess } from "@plane/types";
 import { VIEW_ACCESS_SPECIFIERS } from "@/helpers/views.helper";
 
@@ -38,7 +38,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemove(access)}
               >
-                <X size={10} strokeWidth={2} />
+                <CloseIcon height={10} width={10} strokeWidth={2} />
               </button>
             )}
           </div>
diff --git a/apps/web/core/components/views/applied-filters/root.tsx b/apps/web/core/components/views/applied-filters/root.tsx
index ce94229e8..dc8eaaa74 100644
--- a/apps/web/core/components/views/applied-filters/root.tsx
+++ b/apps/web/core/components/views/applied-filters/root.tsx
@@ -1,6 +1,6 @@
-import { X } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
+// plane imports
 import type { EViewAccess, TViewFilterProps } from "@plane/types";
 import { Tag } from "@plane/ui";
 import { replaceUnderscoreIfSnakeCase } from "@plane/utils";
@@ -68,7 +68,7 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
                 className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
                 onClick={() => handleRemoveFilter(filterKey, null)}
               >
-                <X size={12} strokeWidth={2} />
+                <CloseIcon height={12} width={12} strokeWidth={2} />
               </button>
             )}
           </Tag>
@@ -78,7 +78,7 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
             {t("common.clear_all")}
-            <X size={12} strokeWidth={2} />
+            <CloseIcon height={12} width={12} strokeWidth={2} />
           </Tag>
         </button>
       )}
diff --git a/apps/web/core/components/views/filters/filter-selection.tsx b/apps/web/core/components/views/filters/filter-selection.tsx
index 694adea24..6e089a2ef 100644
--- a/apps/web/core/components/views/filters/filter-selection.tsx
+++ b/apps/web/core/components/views/filters/filter-selection.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Search, X } from "lucide-react";
+import { Search } from "lucide-react";
+import { CloseIcon } from "@plane/propel/icons";
 import type { TViewFilterProps, TViewFilters } from "@plane/types";
 import { EViewAccess } from "@plane/types";
 // components
@@ -65,7 +66,7 @@ export const ViewFiltersSelection: React.FC<Props> = observer((props) => {
           />
           {filtersSearchQuery !== "" && (
             <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+              <CloseIcon className="text-custom-text-300" height={12} width={12} strokeWidth={2} />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/views/filters/order-by.tsx b/apps/web/core/components/views/filters/order-by.tsx
index 8b65a29b3..1c03f191d 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
 // types
 import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { getButtonStyling } from "@plane/propel/button";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -38,7 +39,7 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
         <span className={buttonClassName}>
           {!isMobile && icon}
           <span className="flex-shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
-          <ChevronDown className={chevronClassName} strokeWidth={2} />
+          <ChevronDownIcon className={chevronClassName} strokeWidth={2} />
         </span>
       }
       placement="bottom-end"
diff --git a/apps/web/core/components/views/view-list-header.tsx b/apps/web/core/components/views/view-list-header.tsx
index a7222e9a0..d67a4efcd 100644
--- a/apps/web/core/components/views/view-list-header.tsx
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
-import { ListFilter, Search, X } from "lucide-react";
-// plane helpers
+import { ListFilter, Search } from "lucide-react";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { CloseIcon } from "@plane/propel/icons";
+// plane helpers
 // helpers
 import { cn } from "@plane/utils";
 // hooks
@@ -86,7 +87,7 @@ export const ViewListHeader = observer(() => {
                 setIsSearchOpen(false);
               }}
             >
-              <X className="h-3 w-3" />
+              <CloseIcon className="h-3 w-3" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/web-hooks/form/delete-section.tsx b/apps/web/core/components/web-hooks/form/delete-section.tsx
index 226b241f6..639dc3f80 100644
--- a/apps/web/core/components/web-hooks/form/delete-section.tsx
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { ChevronDown, ChevronUp } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
   openDeleteModal: () => void;
@@ -18,7 +18,7 @@ export const WebhookDeleteSection: React.FC<Props> = (props) => {
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
             <span className="text-lg tracking-tight">Danger zone</span>
-            {open ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
+            {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
           </Disclosure.Button>
 
           <Transition
diff --git a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index 9fcf348df..1eee3d0cf 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -2,10 +2,10 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { X } from "lucide-react";
 // plane imports
 import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { Header, EHeaderVariant, Tag } from "@plane/ui";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
@@ -51,7 +51,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
             >
               <div className="whitespace-nowrap text-custom-text-200">{t(filter.i18n_label)}</div>
               <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm text-custom-text-200 hover:text-custom-text-100">
-                <X className="h-3 w-3" />
+                <CloseIcon className="h-3 w-3" />
               </div>
             </Tag>
           );
@@ -59,7 +59,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
         <button type="button" onClick={handleClearFilters}>
           <Tag>
             {t("common.clear_all")}
-            <X size={12} strokeWidth={2} />
+            <CloseIcon height={12} width={12} strokeWidth={2} />
           </Tag>
         </button>
       </Header.LeftItem>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index e68e09582..e67c43c77 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -4,11 +4,11 @@ import type { FC } from "react";
 import { Fragment } from "react";
 import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
-import { X } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { CloseIcon } from "@plane/propel/icons";
 import { CustomSelect } from "@plane/ui";
 // components
 import { getDate } from "@plane/utils";
@@ -147,7 +147,7 @@ export const NotificationSnoozeModal: FC<TNotificationSnoozeModal> = (props) =>
 
                     <div>
                       <button type="button" onClick={handleClose}>
-                        <X className="h-5 w-5 text-custom-text-100" />
+                        <CloseIcon className="h-5 w-5 text-custom-text-100" />
                       </button>
                     </div>
                   </div>
diff --git a/apps/web/core/components/workspace/invite-modal/fields.tsx b/apps/web/core/components/workspace/invite-modal/fields.tsx
index 8676963c6..00de28488 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -3,10 +3,10 @@
 import { observer } from "mobx-react";
 import type { Control, FieldArrayWithId, FormState } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { X } from "lucide-react";
 // plane imports
 import { ROLE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { CloseIcon } from "@plane/propel/icons";
 import { CustomSelect, Input } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
@@ -102,7 +102,7 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
             {fields.length > 1 && (
               <div className="flex-item flex w-6">
                 <button type="button" className="place-items-center self-center rounded" onClick={() => remove(index)}>
-                  <X className="h-4 w-4 text-custom-text-200" />
+                  <CloseIcon className="h-4 w-4 text-custom-text-200" />
                 </button>
               </div>
             )}
diff --git a/apps/web/core/components/workspace/settings/invitations-list-item.tsx b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
index 8fe7f55fd..1e62cf505 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -4,10 +4,11 @@ import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronDown, LinkIcon, Trash2 } from "lucide-react";
+import { LinkIcon, Trash2 } from "lucide-react";
 // plane imports
 import { ROLE, EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomSelect, CustomMenu } from "@plane/ui";
@@ -148,7 +149,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
                 </span>
                 {hasRoleChangeAccess && (
                   <span className="grid place-items-center">
-                    <ChevronDown className="h-3 w-3" />
+                    <ChevronDownIcon className="h-3 w-3" />
                   </span>
                 )}
               </div>
diff --git a/apps/web/core/components/workspace/settings/members-list.tsx b/apps/web/core/components/workspace/settings/members-list.tsx
index 5fa2a1c38..b71ca37ed 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -3,10 +3,10 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { ChevronDown } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Collapsible } from "@plane/ui";
 // components
 import { CountChip } from "@/components/common/count-chip";
@@ -86,7 +86,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
                   <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
                 )}
               </div>{" "}
-              <ChevronDown className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
+              <ChevronDownIcon className={`h-5 w-5 transition-all ${showPendingInvites ? "rotate-180" : ""}`} />
             </div>
           }
         >
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 1eb2bb977..b718a7f0a 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -15,12 +15,12 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { orderBy } from "lodash-es";
 import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
+import { Star, MoreHorizontal, GripVertical } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { DraftIcon, FavoriteFolderIcon } from "@plane/propel/icons";
+import { DraftIcon, FavoriteFolderIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IFavorite, InstructionType } from "@plane/types";
 import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui";
@@ -250,7 +250,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                     open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
                   )}
                 >
-                  <ChevronRight
+                  <ChevronRightIcon
                     className={cn("size-3 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                       "rotate-90": open,
                     })}
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 441327e27..02eb45acd 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -11,10 +11,11 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { orderBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight, FolderPlus } from "lucide-react";
+import { FolderPlus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -225,7 +226,7 @@ export const SidebarFavoritesMenu = observer(() => {
                   : "aria_labels.projects_sidebar.open_favorites_menu"
               )}
             >
-              <ChevronRight
+              <ChevronRightIcon
                 className={cn("flex-shrink-0 size-3 transition-all", {
                   "rotate-90": isFavoriteMenuOpen,
                 })}
diff --git a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index af60aed6d..aa8d93eab 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -9,13 +9,13 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
+import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { ArchiveIcon } from "@plane/propel/icons";
+import { ArchiveIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -384,7 +384,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     : "aria_labels.projects_sidebar.open_project_menu"
                 )}
               >
-                <ChevronRight
+                <ChevronRightIcon
                   className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
                     "rotate-90": isProjectListOpen,
                   })}
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index f705e19d5..f3d97e968 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -6,11 +6,12 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { ChevronRight, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Loader } from "@plane/ui";
@@ -193,7 +194,7 @@ export const SidebarProjectsList: FC = observer(() => {
                       : "aria_labels.projects_sidebar.open_projects_menu"
                   )}
                 >
-                  <ChevronRight
+                  <ChevronRightIcon
                     className={cn("flex-shrink-0 size-3 transition-all", {
                       "rotate-90": isAllProjectsListOpen,
                     })}
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
index 6c4a1cad2..f4e5f138c 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -2,7 +2,7 @@
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronRight, Ellipsis } from "lucide-react";
+import { Ellipsis } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import {
@@ -11,6 +11,7 @@ import {
   WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
@@ -87,7 +88,7 @@ export const SidebarMenuItems = observer(() => {
                   : "aria_labels.app_sidebar.open_workspace_menu"
               )}
             >
-              <ChevronRight
+              <ChevronRightIcon
                 className={cn("flex-shrink-0 size-3 transition-all", {
                   "rotate-90": isWorkspaceMenuOpen,
                 })}
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
index 02347201c..ff69427bc 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -2,12 +2,13 @@ import type { FC } from "react";
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { MoreHorizontal, ArchiveIcon, ChevronRight, Settings } from "lucide-react";
+import { MoreHorizontal, ArchiveIcon, Settings } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -90,7 +91,7 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
       >
         {" "}
         <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded hover:bg-custom-sidebar-background-80">
-          <ChevronRight
+          <ChevronRightIcon
             className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
               "rotate-90": isWorkspaceMenuOpen,
             })}
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
index f8f2cbbd7..e574f6e30 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -4,11 +4,12 @@ import React, { Fragment, useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
-import { ChevronDown, CirclePlus, LogOut, Mails } from "lucide-react";
+import { CirclePlus, LogOut, Mails } from "lucide-react";
 // ui
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IWorkspace } from "@plane/types";
 import { Loader } from "@plane/ui";
@@ -118,7 +119,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                     {activeWorkspace?.name ?? t("loading")}
                   </h4>
                 </div>
-                <ChevronDown
+                <ChevronDownIcon
                   className={cn(
                     "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
                     { "rotate-180": open }
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 985a3f440..27d53c386 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -44,6 +44,7 @@
     "@plane/types": "workspace:*",
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
+    "@plane/propel": "workspace:*",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-blockquote": "^2.22.3",
     "@tiptap/extension-character-count": "^2.22.3",
diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
index a4c1dd8b1..a45ce4273 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@@ -1,6 +1,7 @@
 import { Editor } from "@tiptap/react";
-import { Check, ChevronDown } from "lucide-react";
+import { Check } from "lucide-react";
 import { FC } from "react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@@ -67,7 +68,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
       menuButton={
         <>
           <span>{activeItem?.name}</span>
-          <ChevronDown className="shrink-0 size-3" />
+          <ChevronDownIcon className="shrink-0 size-3" />
         </>
       }
       options={options}
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index ddc3b879c..0419fd8fc 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -1,4 +1,5 @@
-import { Ban, ChevronDown } from "lucide-react";
+import { Ban } from "lucide-react";
+import { ChevronDownIcon } from "@plane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
@@ -43,7 +44,7 @@ export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
           disabled={disabled}
         >
           <span>Color</span>
-          <ChevronDown className="flex-shrink-0 size-3" />
+          <ChevronDownIcon className="flex-shrink-0 size-3" />
         </button>
         {isOpen && (
           <section className="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index dbbc42e4c..d6706c6bb 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -1,7 +1,7 @@
-import { ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/ui";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
@@ -38,7 +38,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
-          <ChevronDown className="flex-shrink-0 size-2" />
+          <ChevronDownIcon className="flex-shrink-0 size-2" />
         </button>
       </Tooltip>
       {isDropdownOpen && (
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 65f42ccfd..82e329815 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -1,6 +1,7 @@
-import { Download, ExternalLink, Minus, Plus, X } from "lucide-react";
+import { Download, ExternalLink, Minus, Plus } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
+import { CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 
@@ -212,7 +213,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
           className="absolute top-10 right-10 size-8 grid place-items-center"
           aria-label="Close image viewer"
         >
-          <X className="size-8 text-white/60 hover:text-white transition-colors" />
+          <CloseIcon className="size-8 text-white/60 hover:text-white transition-colors" />
         </button>
         <img
           ref={setImageRef}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
index e6036c3b5..5b8aac23a 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
@@ -1,7 +1,8 @@
 import { Disclosure } from "@headlessui/react";
 import type { Editor } from "@tiptap/core";
-import { Ban, ChevronRight, Palette } from "lucide-react";
+import { Ban, Palette } from "lucide-react";
 // plane imports
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
@@ -50,7 +51,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
               <Palette className="shrink-0 size-3" />
               Color
             </span>
-            <ChevronRight
+            <ChevronRightIcon
               className={cn("shrink-0 size-3 transition-transform duration-200", {
                 "rotate-90": open,
               })}
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
index 562f918cd..5290b3a46 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
+import { ArrowLeft, ArrowRight, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
 // extensions
+import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
@@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
 const DROPDOWN_ITEMS: {
   key: string;
   label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   action: (editor: Editor) => void;
 }[] = [
   {
@@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "clear-contents",
     label: "Clear contents",
-    icon: X,
+    icon: CloseIcon,
     action: (editor) => editor.chain().focus().clearSelectedCells().run(),
   },
   {
diff --git a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
index 09be7415b..7b542662f 100644
--- a/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -1,7 +1,8 @@
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, X, type LucideIcon } from "lucide-react";
+import { ArrowDown, ArrowUp, Copy, ToggleRight, Trash2, type LucideIcon } from "lucide-react";
 // extensions
+import { CloseIcon, ISvgIcons } from "@plane/propel/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
@@ -10,7 +11,7 @@ import { TableDragHandleDropdownColorSelector } from "../color-selector";
 const DROPDOWN_ITEMS: {
   key: string;
   label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   action: (editor: Editor) => void;
 }[] = [
   {
@@ -43,7 +44,7 @@ const DROPDOWN_ITEMS: {
   {
     key: "clear-contents",
     label: "Clear contents",
-    icon: X,
+    icon: CloseIcon,
     action: (editor) => editor.chain().focus().clearSelectedCells().run(),
   },
   {
diff --git a/packages/propel/src/calendar/root.tsx b/packages/propel/src/calendar/root.tsx
index 4483ccc84..e9703f44c 100644
--- a/packages/propel/src/calendar/root.tsx
+++ b/packages/propel/src/calendar/root.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import * as React from "react";
-import { ChevronLeft } from "lucide-react";
 import { DayPicker } from "react-day-picker";
+import { ChevronLeftIcon } from "@plane/propel/icons";
 
 import { cn } from "../utils";
 
@@ -20,7 +20,7 @@ export const Calendar = ({ className, showOutsideDays = true, ...props }: Calend
       weekStartsOn={props.weekStartsOn}
       components={{
         Chevron: ({ className, ...props }) => (
-          <ChevronLeft
+          <ChevronLeftIcon
             className={cn(
               "size-4",
               { "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
index e45d102b5..3167319e5 100644
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown } from "lucide-react";
 import { useArgs } from "storybook/preview-api";
+import { ChevronDownIcon } from "@plane/propel/icons";
 import { Collapsible } from "./collapsible";
 
 const meta = {
@@ -28,7 +28,7 @@ const meta = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
         <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
           <span className="font-semibold">Click to toggle</span>
-          <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
           <div className="rounded-md border border-gray-200 p-4">
@@ -69,7 +69,7 @@ export const Controlled: Story = {
         <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
           <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
             <span className="font-semibold">Controlled Collapsible</span>
-            <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="rounded-md border border-gray-200 p-4">
@@ -90,7 +90,7 @@ export const NestedContent: Story = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
         <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
           <span className="font-semibold">Collapsible with Nested Content</span>
-          <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
           <div className="space-y-2 rounded-md border border-gray-200 p-4">
@@ -117,7 +117,7 @@ export const CustomStyling: Story = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
         <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-white shadow-lg transition-all hover:shadow-xl">
           <span className="text-lg font-bold">Custom Styled Trigger</span>
-          <ChevronDown className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownIcon className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-4">
           <div className="rounded-lg bg-gradient-to-br from-purple-100 to-pink-100 p-6 shadow-md">
@@ -136,7 +136,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
             <span className="font-semibold">First Item</span>
-            <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="rounded-md border border-gray-200 p-4">
@@ -148,7 +148,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
             <span className="font-semibold">Second Item</span>
-            <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="rounded-md border border-gray-200 p-4">
@@ -160,7 +160,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="flex w-full items-center justify-between rounded-md bg-gray-100 px-4 py-2 hover:bg-gray-200">
             <span className="font-semibold">Third Item</span>
-            <ChevronDown className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="rounded-md border border-gray-200 p-4">
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index 014ac03e6..bb907217a 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Copy, Download, Edit, Share, Trash, ChevronRight, Star, Archive } from "lucide-react";
+import { Copy, Download, Edit, Share, Trash, Star, Archive } from "lucide-react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { ContextMenu } from "./context-menu";
 
 // cannot use satisfies here because base-ui does not have portable types.
@@ -113,7 +114,7 @@ export const WithSubmenus: Story = {
               <ContextMenu.SubmenuTrigger>
                 <Share className="mr-2 h-4 w-4" />
                 Share
-                <ChevronRight className="ml-auto h-4 w-4" />
+                <ChevronRightIcon className="ml-auto h-4 w-4" />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Content>
@@ -304,7 +305,7 @@ export const NestedSubmenus: Story = {
             <ContextMenu.Submenu>
               <ContextMenu.SubmenuTrigger>
                 Import
-                <ChevronRight className="ml-auto h-4 w-4" />
+                <ChevronRightIcon className="ml-auto h-4 w-4" />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Content>
@@ -313,7 +314,7 @@ export const NestedSubmenus: Story = {
                   <ContextMenu.Submenu>
                     <ContextMenu.SubmenuTrigger>
                       From Cloud
-                      <ChevronRight className="ml-auto h-4 w-4" />
+                      <ChevronRightIcon className="ml-auto h-4 w-4" />
                     </ContextMenu.SubmenuTrigger>
                     <ContextMenu.Portal>
                       <ContextMenu.Content>
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
index 45ff50c89..e88052de5 100644
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { X } from "lucide-react";
 import { useArgs } from "storybook/preview-api";
+import { CloseIcon } from "@plane/propel/icons";
 import { Dialog, EDialogWidth } from "./root";
 
 const meta = {
@@ -187,7 +187,7 @@ export const WithCloseButton: Story = {
                 <div className="flex items-start justify-between">
                   <Dialog.Title>Dialog with Close Button</Dialog.Title>
                   <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
-                    <X className="h-4 w-4" />
+                    <CloseIcon className="h-4 w-4" />
                   </button>
                 </div>
                 <div className="mt-4">
diff --git a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
index 2aeffc77c..10d4104de 100644
--- a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
+++ b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
@@ -35,10 +35,6 @@ import {
   Check,
   CheckCircle,
   CheckSquare,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
   Clipboard,
   Clock,
   Cloud,
@@ -155,6 +151,7 @@ import {
   Search,
   User,
 } from "lucide-react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 export const LUCIDE_ICONS_LIST = [
   { name: "Activity", element: Activity },
@@ -194,10 +191,10 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Check", element: Check },
   { name: "CheckCircle", element: CheckCircle },
   { name: "CheckSquare", element: CheckSquare },
-  { name: "ChevronDown", element: ChevronDown },
-  { name: "ChevronLeft", element: ChevronLeft },
-  { name: "ChevronRight", element: ChevronRight },
-  { name: "ChevronUp", element: ChevronUp },
+  { name: "ChevronDown", element: ChevronDownIcon },
+  { name: "ChevronLeft", element: ChevronLeftIcon },
+  { name: "ChevronRight", element: ChevronRightIcon },
+  { name: "ChevronUp", element: ChevronUpIcon },
   { name: "Clipboard", element: Clipboard },
   { name: "Clock", element: Clock },
   { name: "Cloud", element: Cloud },
diff --git a/packages/propel/src/icons/actions/close-icon.tsx b/packages/propel/src/icons/actions/close-icon.tsx
new file mode 100644
index 000000000..0e8f8ae60
--- /dev/null
+++ b/packages/propel/src/icons/actions/close-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const CloseIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+    <path
+      d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
index 0ef51f721..0a0b7355d 100644
--- a/packages/propel/src/icons/actions/index.ts
+++ b/packages/propel/src/icons/actions/index.ts
@@ -1 +1,2 @@
 export * from "./add-icon";
+export * from "./close-icon";
diff --git a/packages/propel/src/icons/arrows/chevron-down.tsx b/packages/propel/src/icons/arrows/chevron-down.tsx
new file mode 100644
index 000000000..5fd38210e
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-down.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ChevronDownIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+    <path
+      d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/arrows/chevron-left.tsx b/packages/propel/src/icons/arrows/chevron-left.tsx
new file mode 100644
index 000000000..85a4a887a
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-left.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ChevronLeftIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+    <path
+      d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/arrows/chevron-right.tsx b/packages/propel/src/icons/arrows/chevron-right.tsx
new file mode 100644
index 000000000..8478254fd
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-right.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ChevronRightIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+    <path
+      d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/arrows/chevron-up.tsx b/packages/propel/src/icons/arrows/chevron-up.tsx
new file mode 100644
index 000000000..d4dc2cb50
--- /dev/null
+++ b/packages/propel/src/icons/arrows/chevron-up.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ChevronUpIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+    <path
+      d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/arrows/index.ts b/packages/propel/src/icons/arrows/index.ts
new file mode 100644
index 000000000..eca5a8dee
--- /dev/null
+++ b/packages/propel/src/icons/arrows/index.ts
@@ -0,0 +1,4 @@
+export * from "./chevron-down";
+export * from "./chevron-left";
+export * from "./chevron-right";
+export * from "./chevron-up";
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
index 4dc86d08d..556a02887 100644
--- a/packages/propel/src/icons/constants.tsx
+++ b/packages/propel/src/icons/constants.tsx
@@ -1,5 +1,15 @@
 import { Icon } from "./icon";
-export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }];
+export const ActionsIconsMap = [
+  { icon: <Icon name="action.add" />, title: "AddIcon" },
+  { icon: <Icon name="action.close" />, title: "CloseIcon" },
+];
+
+export const ArrowsIconsMap = [
+  { icon: <Icon name="arrow.chevron-down" />, title: "ChevronDownIcon" },
+  { icon: <Icon name="arrow.chevron-left" />, title: "ChevronLeftIcon" },
+  { icon: <Icon name="arrow.chevron-right" />, title: "ChevronRightIcon" },
+  { icon: <Icon name="arrow.chevron-up" />, title: "ChevronUpIcon" },
+];
 
 export const WorkspaceIconsMap = [
   { icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
index 4bab5581c..6e203504e 100644
--- a/packages/propel/src/icons/icons.stories.tsx
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
   ActionsIconsMap,
+  ArrowsIconsMap,
   LayoutIconsMap,
   ProjectIconsMap,
   PropertyIconsMap,
@@ -102,6 +103,18 @@ export const AllIcons: Story = {
           ))}
         </div>
       </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Arrows Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {ArrowsIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   ),
 };
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
index 00c8f4472..d663c2a39 100644
--- a/packages/propel/src/icons/index.ts
+++ b/packages/propel/src/icons/index.ts
@@ -3,6 +3,7 @@ export type { IconName } from "./registry";
 export type { IconProps } from "./icon";
 export { ICON_REGISTRY } from "./registry";
 export * from "./actions";
+export * from "./arrows";
 export * from "./activity-icon";
 export * from "./ai-icon";
 export * from "./at-risk-icon";
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
index 5bff85850..db44b9ea3 100644
--- a/packages/propel/src/icons/registry.ts
+++ b/packages/propel/src/icons/registry.ts
@@ -1,4 +1,9 @@
 import { AddIcon } from "./actions/add-icon";
+import { CloseIcon } from "./actions/close-icon";
+import { ChevronDownIcon } from "./arrows/chevron-down";
+import { ChevronLeftIcon } from "./arrows/chevron-left";
+import { ChevronRightIcon } from "./arrows/chevron-right";
+import { ChevronUpIcon } from "./arrows/chevron-up";
 import { DefaultIcon } from "./default-icon";
 import { BoardLayoutIcon } from "./layouts/board-icon";
 import { CalendarLayoutIcon } from "./layouts/calendar-icon";
@@ -107,6 +112,13 @@ export const ICON_REGISTRY = {
 
   // Action icons
   "action.add": AddIcon,
+  "action.close": CloseIcon,
+
+  // Arrow icons
+  "arrow.chevron-down": ChevronDownIcon,
+  "arrow.chevron-left": ChevronLeftIcon,
+  "arrow.chevron-right": ChevronRightIcon,
+  "arrow.chevron-up": ChevronUpIcon,
 
   // Default fallback
   default: DefaultIcon,
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index 1510f6b8d..af14ff261 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Menu as BaseMenu } from "@base-ui-components/react/menu";
-import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon } from "@plane/propel/icons";
 import { cn } from "../utils/classname";
 import { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
 
@@ -24,7 +25,7 @@ const SubMenu: React.FC<TSubMenuProps> = (props) => {
     <BaseMenu.SubmenuRoot disabled={disabled}>
       <BaseMenu.SubmenuTrigger className={""}>
         <span className="flex-1">{trigger}</span>
-        <ChevronRight />
+        <ChevronRightIcon />
       </BaseMenu.SubmenuTrigger>
       <BaseMenu.Portal>
         <BaseMenu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
@@ -163,7 +164,7 @@ function Menu(props: TMenuProps) {
               aria-label={ariaLabel}
             >
               {label}
-              {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+              {!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
             </BaseMenu.Trigger>
           )}
         </>
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
index b929cf7ca..363e5fa7d 100644
--- a/packages/propel/src/popover/popover.stories.tsx
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { X } from "lucide-react";
 import { useArgs } from "storybook/preview-api";
+import { CloseIcon } from "@plane/propel/icons";
 import { Popover } from "./root";
 
 // cannot use satifies here because base-ui does not have portable types.
@@ -70,7 +70,7 @@ export const Controlled: Story = {
             <div className="flex items-start justify-between">
               <h3 className="text-sm font-semibold">Controlled State</h3>
               <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
-                <X className="h-4 w-4" />
+                <CloseIcon className="h-4 w-4" />
               </button>
             </div>
             <p className="mt-2 text-sm text-gray-600">Current state: {open ? "Open" : "Closed"}</p>
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
index fd37edc01..3ab3663cb 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Toast as BaseToast } from "@base-ui-components/react/toast";
-import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
+import { AlertTriangle, CheckCircle2, XCircle } from "lucide-react";
+import { CloseIcon } from "../icons";
 // spinner
 import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
 import { cn } from "../utils/classname";
@@ -164,14 +165,14 @@ const ToastRender = ({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
               className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer"
               aria-label="Close"
             >
-              <X strokeWidth={1.5} width={14} height={14} />
+              <CloseIcon strokeWidth={1.5} width={14} height={14} />
             </BaseToast.Close>
           </div>
         </div>
       ) : (
         <>
           <BaseToast.Close className="absolute top-2 right-2.5 text-toast-text-secondary hover:text-toast-text-tertiary cursor-pointer">
-            <X strokeWidth={1.5} width={14} height={14} />
+            <CloseIcon strokeWidth={1.5} width={14} height={14} />
           </BaseToast.Close>
           <div className="w-full flex flex-col gap-2 p-2">
             <div className="flex items-center w-full">
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index ff0a9b346..2da6b88c4 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -1,5 +1,5 @@
-import { ChevronRight } from "lucide-react";
 import * as React from "react";
+import { ChevronRightIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "../utils";
 
@@ -64,7 +64,7 @@ const Breadcrumbs = ({ className, children, onBack, isLoading = false }: Breadcr
                 ...
               </span>
             )}
-            <ChevronRight className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
+            <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5 p-1">
             {isLoading ? (
@@ -146,7 +146,7 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = (props) => {
           containerClassName
         )}
       >
-        <ChevronRight className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
+        <ChevronRightIcon className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
       </div>
     </div>
   );
diff --git a/packages/ui/src/constants/icons.ts b/packages/ui/src/constants/icons.ts
index 634d91686..fa13da33e 100644
--- a/packages/ui/src/constants/icons.ts
+++ b/packages/ui/src/constants/icons.ts
@@ -35,10 +35,6 @@ import {
   Check,
   CheckCircle,
   CheckSquare,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
   Clipboard,
   Clock,
   Cloud,
@@ -155,6 +151,7 @@ import {
   Search,
   User,
 } from "lucide-react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "@plane/propel/icons";
 
 export const MATERIAL_ICONS_LIST = [
   {
@@ -800,10 +797,10 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Check", element: Check },
   { name: "CheckCircle", element: CheckCircle },
   { name: "CheckSquare", element: CheckSquare },
-  { name: "ChevronDown", element: ChevronDown },
-  { name: "ChevronLeft", element: ChevronLeft },
-  { name: "ChevronRight", element: ChevronRight },
-  { name: "ChevronUp", element: ChevronUp },
+  { name: "ChevronDown", element: ChevronDownIcon },
+  { name: "ChevronLeft", element: ChevronLeftIcon },
+  { name: "ChevronRight", element: ChevronRightIcon },
+  { name: "ChevronUp", element: ChevronUpIcon },
   { name: "Clipboard", element: Clipboard },
   { name: "Clock", element: Clock },
   { name: "Cloud", element: Cloud },
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 68626a61d..393dc9a3a 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -1,6 +1,6 @@
-import { ChevronRight } from "lucide-react";
 import React, { useState, useRef, useContext } from "react";
 import { usePopper } from "react-popper";
+import { ChevronRightIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
@@ -177,7 +177,7 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
                 </p>
               )}
             </div>
-            {hasNestedItems && <ChevronRight className="h-3 w-3 flex-shrink-0" />}
+            {hasNestedItems && <ChevronRightIcon className="h-3 w-3 flex-shrink-0" />}
           </>
         )}
       </button>
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 10a33dcfa..944323299 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -1,10 +1,11 @@
 import { Menu } from "@headlessui/react";
-import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon, ChevronRightIcon } from "@plane/propel/icons";
+// plane helpers
 // helpers
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
@@ -283,7 +284,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
                     aria-label={ariaLabel}
                   >
                     {label}
-                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                    {!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
                   </button>
                 </Menu.Button>
               )}
@@ -405,7 +406,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
               onClick={handleClick}
             >
               <span className="flex-1">{trigger}</span>
-              <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
+              <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
             </div>
           )}
         </Menu.Item>
@@ -499,7 +500,7 @@ const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
           )}
         >
           <span className="flex-1">{children}</span>
-          <ChevronRight className="h-3.5 w-3.5 flex-shrink-0" />
+          <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
         </div>
       )}
     </Menu.Item>
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 37b7652ef..ddb2707f0 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -1,10 +1,11 @@
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown, Info, Search } from "lucide-react";
+import { Check, Info, Search } from "lucide-react";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
+// plane imports
 // local imports
 import { Tooltip } from "@plane/propel/tooltip";
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
@@ -129,7 +130,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 >
                   {label}
                   {!noChevron && !disabled && (
-                    <ChevronDown className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
+                    <ChevronDownIcon className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
                   )}
                 </button>
               </Combobox.Button>
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 23485b366..1ef3191a0 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -1,10 +1,11 @@
 import { Combobox } from "@headlessui/react";
-import { Check, ChevronDown } from "lucide-react";
+import { Check } from "lucide-react";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { ChevronDownIcon } from "@plane/propel/icons";
+// plane helpers
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers
@@ -97,7 +98,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
               onClick={toggleDropdown}
             >
               {label}
-              {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+              {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
             </button>
           </Combobox.Button>
         )}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bca8100f8..5b86c9ad8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -715,6 +715,9 @@ importers:
       '@plane/hooks':
         specifier: workspace:*
         version: link:../hooks
+      '@plane/propel':
+        specifier: workspace:*
+        version: link:../propel
       '@plane/types':
         specifier: workspace:*
         version: link:../types
@@ -2170,8 +2173,8 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@napi-rs/wasm-runtime@1.0.5':
-    resolution: {integrity: sha512-TBr9Cf9onSAS2LQ2+QHx6XcC6h9+RIzJgbqG3++9TUZSH204AwEy5jg3BTQ0VATsyoGj4ee49tN/y6rvaOOtcg==}
+  '@napi-rs/wasm-runtime@1.0.3':
+    resolution: {integrity: sha512-rZxtMsLwjdXkMUGC3WwsPwLNVqVqnTJT6MNIB6e+5fhMcSCPP0AOsNWuMQ5mdCq6HNjs/ZeWAEchpqeprqBD2Q==}
 
   '@next/env@14.2.32':
     resolution: {integrity: sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng==}
@@ -9047,7 +9050,7 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@napi-rs/wasm-runtime@1.0.5':
+  '@napi-rs/wasm-runtime@1.0.3':
     dependencies:
       '@emnapi/core': 1.5.0
       '@emnapi/runtime': 1.5.0
@@ -9734,7 +9737,7 @@ snapshots:
 
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.34':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.5
+      '@napi-rs/wasm-runtime': 1.0.3
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.34':