[WEB-5188 | WEB-5190] chore: layout and properties icon revamp

.gitignore

@@ -102,5 +102,6 @@ dev-editor
 storybook-static
 
 CLAUDE.md
+AGENTS.md
 
-temp/
+temp/

apps/space/core/components/issues/issue-layouts/properties/due-date.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { CalendarCheck2 } from "lucide-react";
+import { DueDatePropertyIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // helpers
@@ -33,7 +33,7 @@ export const IssueBlockDate = observer((props: Props) => {
           "border-[0.5px] border-custom-border-300": shouldShowBorder,
         })}
       >
-        <CalendarCheck2 className="size-3 flex-shrink-0" />
+        <DueDatePropertyIcon className="size-3 flex-shrink-0" />
         {formattedDate ? formattedDate : "No Date"}
       </div>
     </Tooltip>

apps/space/core/components/issues/issue-layouts/properties/labels.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Tags } from "lucide-react";
+import { LabelPropertyIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
@@ -25,7 +25,7 @@ export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }:
         <div
           className={`flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs border-[0.5px] border-custom-border-300`}
         >
-          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
           {shouldShowLabel && <span>No Labels</span>}
         </div>
       </Tooltip>

apps/space/core/components/issues/issue-layouts/properties/member.tsx

@@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 // icons
 import type { LucideIcon } from "lucide-react";
-import { Users } from "lucide-react";
+import { MembersPropertyIcon } from "@plane/propel/icons";
 // plane ui
 import { Avatar, AvatarGroup } from "@plane/ui";
 // plane utils
@@ -49,7 +49,11 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props: AvatarProps
     }
   }
 
-  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 mx-[4px] flex-shrink-0" />;
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <MembersPropertyIcon className="h-3 w-3 mx-[4px] flex-shrink-0" />
+  );
 });
 
 export const IssueBlockMembers = observer(({ memberIds, shouldShowBorder = true }: Props) => {

apps/space/core/components/issues/navbar/layout-icon.tsx

@@ -1,13 +1,22 @@
-import type { LucideProps } from "lucide-react";
-import { List, Kanban } from "lucide-react";
 import type { TIssueLayout } from "@plane/constants";
+import { ListLayoutIcon, BoardLayoutIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+
+export const IssueLayoutIcon = ({
+  layout,
+  size,
+  ...props
+}: { layout: TIssueLayout; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
+  const iconProps = {
+    ...props,
+    ...(size && { width: size, height: size }),
+  };
 
-export const IssueLayoutIcon = ({ layout, ...props }: { layout: TIssueLayout } & LucideProps) => {
   switch (layout) {
     case "list":
-      return <List {...props} />;
+      return <ListLayoutIcon {...iconProps} />;
     case "kanban":
-      return <Kanban {...props} />;
+      return <BoardLayoutIcon {...iconProps} />;
     default:
       return null;
   }

apps/space/core/components/issues/peek-overview/issue-properties.tsx

@@ -2,10 +2,9 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { CalendarCheck2, Signal } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { DoubleCircleIcon, StateGroupIcon } from "@plane/propel/icons";
+import { StatePropertyIcon, StateGroupIcon, PriorityPropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
 // components
@@ -66,7 +65,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
       <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
         <div className="flex items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <DoubleCircleIcon className="size-4 flex-shrink-0" />
+            <StatePropertyIcon className="size-4 flex-shrink-0" />
             <span>State</span>
           </div>
           <div className="w-3/4 flex items-center gap-1.5 py-0.5 text-sm">
@@ -77,7 +76,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
 
         <div className="flex items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <Signal className="size-4 flex-shrink-0" />
+            <PriorityPropertyIcon className="size-4 flex-shrink-0" />
             <span>Priority</span>
           </div>
           <div className="w-3/4">
@@ -106,7 +105,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
 
         <div className="flex items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <CalendarCheck2 className="size-4 flex-shrink-0" />
+            <DueDatePropertyIcon className="size-4 flex-shrink-0" />
             <span>Due date</span>
           </div>
           <div>
@@ -116,7 +115,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
                   "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
                 })}
               >
-                <CalendarCheck2 className="size-3" />
+                <DueDatePropertyIcon className="size-3" />
                 {renderFormattedDate(issueDetails.target_date)}
               </div>
             ) : (

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx

@@ -4,10 +4,11 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+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 type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -21,9 +22,9 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
 const SUPPORTED_LAYOUTS = [
-  { key: "list", titleTranslationKey: "issue.layouts.list", icon: List },
-  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: Kanban },
-  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: Calendar },
+  { key: "list", titleTranslationKey: "issue.layouts.list", icon: ListLayoutIcon },
+  { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: BoardLayoutIcon },
+  { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarLayoutIcon },
 ];
 
 export const CycleIssuesMobileHeader = observer(() => {

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import type React from "react";
 import { observer } from "mobx-react";
 // ui
-import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
+import type { ISvgIcons } from "@plane/propel/icons";
+import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
 // plane package imports
 import type { TCycleLayoutOptions } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -13,22 +14,22 @@ import { useProject } from "@/hooks/store/use-project";
 
 const CYCLE_VIEW_LAYOUTS: {
   key: TCycleLayoutOptions;
-  icon: LucideIcon;
+  icon: React.FC<ISvgIcons>;
   title: string;
 }[] = [
   {
     key: "list",
-    icon: List,
+    icon: ListLayoutIcon,
     title: "List layout",
   },
   {
     key: "board",
-    icon: LayoutGrid,
+    icon: GridLayoutIcon,
     title: "Gallery layout",
   },
   {
     key: "gantt",
-    icon: GanttChartSquare,
+    icon: TimelineLayoutIcon,
     title: "Timeline layout",
   },
 ];
@@ -45,7 +46,7 @@ export const CyclesListMobileHeader = observer(() => {
         // placement="bottom-start"
         customButton={
           <span className="flex items-center gap-2">
-            <List className="h-4 w-4" />
+            <ListLayoutIcon className="h-4 w-4" />
             <span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>
           </span>
         }

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx

@@ -4,10 +4,11 @@ import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+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 type { IIssueDisplayFilterOptions, IIssueDisplayProperties, EIssueLayoutTypes } from "@plane/types";
 import { EIssuesStoreType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
@@ -21,9 +22,9 @@ import { useModule } from "@/hooks/store/use-module";
 import { useProject } from "@/hooks/store/use-project";
 
 const SUPPORTED_LAYOUTS = [
-  { key: "list", i18n_title: "issue.layouts.list", icon: List },
-  { key: "kanban", i18n_title: "issue.layouts.kanban", icon: Kanban },
-  { key: "calendar", i18n_title: "issue.layouts.calendar", icon: Calendar },
+  { key: "list", i18n_title: "issue.layouts.list", icon: ListLayoutIcon },
+  { key: "kanban", i18n_title: "issue.layouts.kanban", icon: BoardLayoutIcon },
+  { key: "calendar", i18n_title: "issue.layouts.calendar", icon: CalendarLayoutIcon },
 ];
 
 export const ModuleIssuesMobileHeader = observer(() => {

apps/web/ce/components/issues/issue-layouts/utils.tsx

@@ -1,19 +1,18 @@
 import type { FC } from "react";
-import {
-  CalendarCheck2,
-  CalendarClock,
-  CalendarDays,
-  LayersIcon,
-  Link2,
-  Paperclip,
-  Signal,
-  Tag,
-  Triangle,
-  Users,
-} from "lucide-react";
+import { CalendarDays, LayersIcon, Link2, Paperclip } from "lucide-react";
 // types
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
+import {
+  CycleIcon,
+  StatePropertyIcon,
+  ModuleIcon,
+  MembersPropertyIcon,
+  DueDatePropertyIcon,
+  EstimatePropertyIcon,
+  LabelPropertyIcon,
+  PriorityPropertyIcon,
+  StartDatePropertyIcon,
+} from "@plane/propel/icons";
 import type { IGroupByColumn, IIssueDisplayProperties, TGetColumns, TSpreadsheetColumn } from "@plane/types";
 // components
 import {
@@ -66,16 +65,16 @@ export const getScopeMemberIds = ({ isWorkspaceLevel, projectId }: TGetColumns):
 export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;
 
 export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
-  Users: Users,
+  MembersPropertyIcon: MembersPropertyIcon,
   CalenderDays: CalendarDays,
-  CalenderCheck2: CalendarCheck2,
-  Triangle: Triangle,
-  Tag: Tag,
+  DueDatePropertyIcon: DueDatePropertyIcon,
+  EstimatePropertyIcon: EstimatePropertyIcon,
+  LabelPropertyIcon: LabelPropertyIcon,
   ModuleIcon: ModuleIcon,
   ContrastIcon: CycleIcon,
-  Signal: Signal,
-  CalendarClock: CalendarClock,
-  DoubleCircleIcon: DoubleCircleIcon,
+  PriorityPropertyIcon: PriorityPropertyIcon,
+  StartDatePropertyIcon: StartDatePropertyIcon,
+  StatePropertyIcon: StatePropertyIcon,
   Link2: Link2,
   Paperclip: Paperclip,
   LayersIcon: LayersIcon,

apps/web/ce/components/relations/index.tsx

@@ -1,5 +1,5 @@
-import { CircleDot, CopyPlus, XCircle } from "lucide-react";
-import { RelatedIcon } from "@plane/propel/icons";
+import { CircleDot, XCircle } from "lucide-react";
+import { RelatedIcon, DuplicatePropertyIcon } from "@plane/propel/icons";
 import type { TRelationObject } from "@/components/issues/issue-detail-widgets/relations";
 import type { TIssueRelationTypes } from "../../types";
 
@@ -17,7 +17,7 @@ export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject
     key: "duplicate",
     i18n_label: "issue.relation.duplicate",
     className: "bg-custom-background-80 text-custom-text-200",
-    icon: (size) => <CopyPlus size={size} className="text-custom-text-200" />,
+    icon: (size) => <DuplicatePropertyIcon width={size} height={size} className="text-custom-text-200" />,
     placeholder: "None",
   },
   blocked_by: {