[WEB-5191 | WEB-5197] chore: actions and arrows icon revamp (#7984)

.gitignore

@@ -103,5 +103,4 @@ storybook-static
 
 CLAUDE.md
 AGENTS.md
-
 temp/

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>
   );

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>
   );

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>
   );

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>
         );

apps/space/core/components/issues/filters/applied-filters/priority.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import { X } from "lucide-react";
+import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
-import { 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>
         ))}

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>
         );

apps/space/core/components/issues/filters/helpers/filter-header.tsx

@@ -1,8 +1,7 @@
 "use client";
-
 import React from "react";
-// lucide icons
+// icons
-import { ChevronDown, ChevronUp } from "lucide-react";
+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>
 );

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>

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">

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>

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"

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>
           }
         >

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>
             }
           >

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>
             }
           >

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>
             }
           >

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"

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>
             }
           >

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 {
+import { LogOut, MoveLeft, Activity, Bell, CircleUser, KeyRound, Settings2, CirclePlus, Mails } from "lucide-react";
-  ChevronLeft,
-  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>

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 ? (

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,
                   })}

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}

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" />}
               </>
             }
           >

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";
+import { Info } from "lucide-react";
-// plane imports
 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>
   );

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>
         )}

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>
       )}

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";
+import { Search } from "lucide-react";
-// plane package imports
 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>

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>

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";
+import { Check } from "lucide-react";
-// plane imports
 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>

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>

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>

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>

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

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>
                         ))}

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>

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>

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>

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>
       )}

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>

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";
+import { ListFilter, Search } from "lucide-react";
-// plane helpers
 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>

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>

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>

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,
         })}

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,
         })}

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">

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>

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();

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();

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>

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>

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" />
         )}
       </>
     );

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>

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>

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"
+                  />
                 )}
               </>
             )}

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>

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>
   );

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>
   );

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>

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"

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 {
+import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, MoveRight, Copy } from "lucide-react";
-  CircleCheck,
-  CircleX,
-  ChevronDown,
-  ChevronUp,
-  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>
           )}

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 {
+import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
-  CircleCheck,
+import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
-  CircleX,
-  ChevronDown,
-  ChevronUp,
-  Clock,
-  ExternalLink,
-  FileStack,
-  Link,
-  Trash2,
-  PanelLeft,
-  MoveRight,
-} from "lucide-react";
 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">

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>
   );

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>
   );

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>
   );

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>
   );

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>
   );

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>

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>

apps/web/core/components/inbox/inbox-filter/root.tsx

@@ -1,7 +1,8 @@
 import type { FC } from "react";
-import { ChevronDown, ListFilter } from "lucide-react";
+import { ListFilter } from "lucide-react";
-// plane imports
 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 = () => {

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 (

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>

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>

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,
                 })}

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";
+import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
-// plane imports
 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")}

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 ? (

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>

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";
+import { Pencil } 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 { 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>
             )}

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>
                     )}

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">

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">

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>

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 { CloseIcon, CycleGroupIcon } from "@plane/propel/icons";
-import { 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>

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>
       ))}

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>

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>

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>

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 { CloseIcon, PriorityIcon } from "@plane/propel/icons";
-import { 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>

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>

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>
       ))}

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>

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"

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>
 );

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>
         )
       }

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>
 

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,
                       })}

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]

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,
                       })}

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>

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";
+import { Pencil, Trash, Link as LinkIcon } 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 { 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>

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>
           )}