diff --git a/.gitignore b/.gitignore
index 053db6d29e5..4a756d030f7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -102,5 +102,6 @@ dev-editor
 storybook-static
 
 CLAUDE.md
+AGENTS.md
 
-temp/
\ No newline at end of file
+temp/
diff --git a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx b/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
index 2f1669837ed..71afb2489b1 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx b/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
index 12ed76d3a59..9e4b80fff55 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/member.tsx b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
index a5baae8a3b3..6b1bce1f95a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/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) => {
diff --git a/apps/space/core/components/issues/navbar/layout-icon.tsx b/apps/space/core/components/issues/navbar/layout-icon.tsx
index e9aed2b2679..2d5a5db5a6a 100644
--- a/apps/space/core/components/issues/navbar/layout-icon.tsx
+++ b/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;
   }
diff --git a/apps/space/core/components/issues/peek-overview/issue-properties.tsx b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
index 6ea937d19b8..94507922a59 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/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>
             ) : (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index f56a3207991..747e65c1660 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -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(() => {
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index 97838d349c1..4c8e4e9c49b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
+++ b/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>
         }
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index 77b0e2b244f..ae450f5de67 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -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(() => {
diff --git a/apps/web/ce/components/issues/issue-layouts/utils.tsx b/apps/web/ce/components/issues/issue-layouts/utils.tsx
index 61a32c4fd90..2d2a1deb8c1 100644
--- a/apps/web/ce/components/issues/issue-layouts/utils.tsx
+++ b/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,
diff --git a/apps/web/ce/components/relations/index.tsx b/apps/web/ce/components/relations/index.tsx
index 2a7ebf0ebc8..f9d72944c23 100644
--- a/apps/web/ce/components/relations/index.tsx
+++ b/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: {
diff --git a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
index edc6f54fa6f..90ad9394dbc 100644
--- a/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
+++ b/apps/web/ce/hooks/work-item-filters/use-work-item-filters-config.tsx
@@ -1,23 +1,19 @@
 import { useCallback, useMemo } from "react";
-import {
-  AtSign,
-  Briefcase,
-  Calendar,
-  CalendarCheck2,
-  CalendarClock,
-  CircleUserRound,
-  SignalHigh,
-  Tag,
-  Users,
-} from "lucide-react";
+import { AtSign, Briefcase, Calendar } from "lucide-react";
 // plane imports
 import {
   CycleGroupIcon,
   CycleIcon,
   ModuleIcon,
-  DoubleCircleIcon,
+  StatePropertyIcon,
   PriorityIcon,
   StateGroupIcon,
+  MembersPropertyIcon,
+  LabelPropertyIcon,
+  StartDatePropertyIcon,
+  DueDatePropertyIcon,
+  UserCirclePropertyIcon,
+  PriorityPropertyIcon,
 } from "@plane/propel/icons";
 import type {
   ICycle,
@@ -149,7 +145,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getStateGroupFilterConfig<TWorkItemFilterProperty>("state_group")({
         isEnabled: isFilterEnabled("state_group"),
-        filterIcon: DoubleCircleIcon,
+        filterIcon: StatePropertyIcon,
         getOptionIcon: (stateGroupKey) => <StateGroupIcon stateGroup={stateGroupKey} />,
         ...operatorConfigs,
       }),
@@ -161,7 +157,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getStateFilterConfig<TWorkItemFilterProperty>("state_id")({
         isEnabled: isFilterEnabled("state_id") && workItemStates !== undefined,
-        filterIcon: DoubleCircleIcon,
+        filterIcon: StatePropertyIcon,
         getOptionIcon: (state) => <StateGroupIcon stateGroup={state.group} color={state.color} />,
         states: workItemStates ?? [],
         ...operatorConfigs,
@@ -174,7 +170,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getLabelFilterConfig<TWorkItemFilterProperty>("label_id")({
         isEnabled: isFilterEnabled("label_id") && workItemLabels !== undefined,
-        filterIcon: Tag,
+        filterIcon: LabelPropertyIcon,
         labels: workItemLabels ?? [],
         getOptionIcon: (color) => (
           <span className="flex flex-shrink-0 size-2.5 rounded-full" style={{ backgroundColor: color }} />
@@ -215,7 +211,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getAssigneeFilterConfig<TWorkItemFilterProperty>("assignee_id")({
         isEnabled: isFilterEnabled("assignee_id") && members !== undefined,
-        filterIcon: Users,
+        filterIcon: MembersPropertyIcon,
         members: members ?? [],
         getOptionIcon: (memberDetails) => (
           <Avatar
@@ -255,7 +251,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getCreatedByFilterConfig<TWorkItemFilterProperty>("created_by_id")({
         isEnabled: isFilterEnabled("created_by_id") && members !== undefined,
-        filterIcon: CircleUserRound,
+        filterIcon: UserCirclePropertyIcon,
         members: members ?? [],
         getOptionIcon: (memberDetails) => (
           <Avatar
@@ -275,7 +271,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getSubscriberFilterConfig<TWorkItemFilterProperty>("subscriber_id")({
         isEnabled: isFilterEnabled("subscriber_id") && members !== undefined,
-        filterIcon: Users,
+        filterIcon: MembersPropertyIcon,
         members: members ?? [],
         getOptionIcon: (memberDetails) => (
           <Avatar
@@ -295,7 +291,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getPriorityFilterConfig<TWorkItemFilterProperty>("priority")({
         isEnabled: isFilterEnabled("priority"),
-        filterIcon: SignalHigh,
+        filterIcon: PriorityPropertyIcon,
         getOptionIcon: (priority) => <PriorityIcon priority={priority} />,
         ...operatorConfigs,
       }),
@@ -307,7 +303,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getStartDateFilterConfig<TWorkItemFilterProperty>("start_date")({
         isEnabled: true,
-        filterIcon: CalendarClock,
+        filterIcon: StartDatePropertyIcon,
         ...operatorConfigs,
       }),
     [operatorConfigs]
@@ -318,7 +314,7 @@ export const useWorkItemFiltersConfig = (props: TUseWorkItemFiltersConfigProps):
     () =>
       getTargetDateFilterConfig<TWorkItemFilterProperty>("target_date")({
         isEnabled: true,
-        filterIcon: CalendarCheck2,
+        filterIcon: DueDatePropertyIcon,
         ...operatorConfigs,
       }),
     [operatorConfigs]
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index f493f16ae7b..19e294a22d5 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -15,7 +15,7 @@ import {
   PROJECT_SETTINGS_TRACKER_EVENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { StateGroupIcon, DoubleCircleIcon } from "@plane/propel/icons";
+import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
 // ui
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
@@ -188,7 +188,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                               size={EIconSize.LG}
                             />
                           ) : (
-                            <DoubleCircleIcon className="h-3.5 w-3.5 text-custom-text-200" />
+                            <StatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           )}
                           {selectedOption?.name
                             ? selectedOption.name
diff --git a/apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx b/apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
index 0af68d137a6..eefe3dabc80 100644
--- a/apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
+++ b/apps/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
@@ -3,8 +3,8 @@
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
-import { DoubleCircleIcon } from "@plane/propel/icons";
+import { LinkIcon, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
+import { StatePropertyIcon, PriorityPropertyIcon, MembersPropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TIssue } from "@plane/types";
 import { EIssueServiceType } from "@plane/types";
@@ -90,7 +90,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <DoubleCircleIcon className="h-3.5 w-3.5" />
+          <StatePropertyIcon className="h-3.5 w-3.5" />
           Change state...
         </div>
       </Command.Item>
@@ -103,7 +103,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <Signal className="h-3.5 w-3.5" />
+          <PriorityPropertyIcon className="h-3.5 w-3.5" />
           Change priority...
         </div>
       </Command.Item>
@@ -116,7 +116,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <Users className="h-3.5 w-3.5" />
+          <MembersPropertyIcon className="h-3.5 w-3.5" />
           Assign to...
         </div>
       </Command.Item>
diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx
index 48cc39b8742..8c656f33e21 100644
--- a/apps/web/core/components/common/activity/helper.tsx
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -1,17 +1,13 @@
 import type { ReactNode } from "react";
 import {
-  Signal,
   RotateCcw,
   Network,
   Link as LinkIcon,
   Calendar,
-  Tag,
   Inbox,
   AlignLeft,
-  Users,
   Paperclip,
   Type,
-  Triangle,
   FileText,
   Globe,
   Hash,
@@ -25,7 +21,19 @@ import {
 } from "lucide-react";
 
 // components
-import { ArchiveIcon, CycleIcon, DoubleCircleIcon, IntakeIcon, ModuleIcon } from "@plane/propel/icons";
+import {
+  ArchiveIcon,
+  CycleIcon,
+  StatePropertyIcon,
+  IntakeIcon,
+  ModuleIcon,
+  PriorityPropertyIcon,
+  StartDatePropertyIcon,
+  DueDatePropertyIcon,
+  LabelPropertyIcon,
+  MembersPropertyIcon,
+  EstimatePropertyIcon,
+} from "@plane/propel/icons";
 import { store } from "@/lib/store-context";
 import type { TProjectActivity } from "@/plane-web/types";
 
@@ -33,20 +41,20 @@ type ActivityIconMap = {
   [key: string]: ReactNode;
 };
 export const iconsMap: ActivityIconMap = {
-  priority: <Signal size={14} className="text-custom-text-200" />,
+  priority: <PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   restored: <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" />,
   link: <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  start_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
-  target_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
-  label: <Tag className="h-3.5 w-3.5 text-custom-text-200" />,
+  start_date: <StartDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  target_date: <DueDatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  label: <LabelPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   inbox: <Inbox className="h-3.5 w-3.5 text-custom-text-200" />,
   description: <AlignLeft className="h-3.5 w-3.5 text-custom-text-200" />,
-  assignee: <Users className="h-3.5 w-3.5 text-custom-text-200" />,
+  assignee: <MembersPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   attachment: <Paperclip className="h-3.5 w-3.5 text-custom-text-200" />,
   name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
-  state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
-  estimate: <Triangle size={14} className="text-custom-text-200" />,
+  state: <StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  estimate: <EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
   module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
   page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
diff --git a/apps/web/core/components/core/modals/user-image-upload-modal.tsx b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
index cade5209668..e12ca566e0a 100644
--- a/apps/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -3,11 +3,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
-import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@@ -146,7 +146,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
                           </>
                         ) : (
                           <div>
-                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
diff --git a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
index 496319f7528..decf8047000 100644
--- a/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/apps/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -3,11 +3,11 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
-import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
 // plane imports
 import { ACCEPTED_AVATAR_IMAGE_MIME_TYPES_FOR_REACT_DROPZONE, MAX_FILE_SIZE } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { UserCirclePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EFileAssetType } from "@plane/types";
 import { getAssetIdFromUrl, getFileURL, checkURLValidity } from "@plane/utils";
@@ -158,7 +158,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
                           </>
                         ) : (
                           <div>
-                            <UserCircle2 className="mx-auto h-16 w-16 text-custom-text-200" />
+                            <UserCirclePropertyIcon className="mx-auto h-16 w-16 text-custom-text-200" />
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
                               {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index e3e83216a1a..7c6e6b4edb3 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -3,11 +3,11 @@ import type { FC } from "react";
 import React from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
-import { SquareUser, Users } from "lucide-react";
+import { SquareUser } from "lucide-react";
 // plane types
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { WorkItemsIcon } from "@plane/propel/icons";
+import { MembersPropertyIcon, WorkItemsIcon } from "@plane/propel/icons";
 import type { ICycle } from "@plane/types";
 // plane ui
 import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@@ -87,7 +87,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
 
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-            <Users className="h-4 w-4" />
+            <MembersPropertyIcon className="h-4 w-4" />
             <span className="text-base">{t("members")}</span>
           </div>
           <div className="flex w-3/5 items-center rounded-sm">
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 9a3e256b0a1..efcc22583d2 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -5,7 +5,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
-import { Eye, Users, ArrowRight, CalendarDays } from "lucide-react";
+import { Eye, ArrowRight, CalendarDays } from "lucide-react";
 // plane imports
 import {
   CYCLE_TRACKER_EVENTS,
@@ -16,7 +16,7 @@ import {
 } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { TransferIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { TransferIcon, WorkItemsIcon, MembersPropertyIcon } from "@plane/propel/icons";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICycle, TCycleGroups } from "@plane/types";
@@ -314,7 +314,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
                 })}
               </AvatarGroup>
             ) : (
-              <Users className="h-4 w-4 text-custom-text-300" />
+              <MembersPropertyIcon className="h-4 w-4 text-custom-text-300" />
             )}
           </div>
         </Tooltip>
diff --git a/apps/web/core/components/dropdowns/date-range.tsx b/apps/web/core/components/dropdowns/date-range.tsx
index 83f0c904ee8..69e74c05c43 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -5,13 +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, CalendarCheck2, CalendarDays, X } from "lucide-react";
+import { ArrowRight, CalendarDays, X } 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 { ComboDropDown } from "@plane/ui";
 import { cn, renderFormattedDate } from "@plane/utils";
 // helpers
@@ -236,7 +237,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
                 buttonToDateClassName
               )}
             >
-              {!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+              {!hideIcon.to && <DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
               {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
             </span>
             {isClearable && !disabled && hasDisplayedDates && (
diff --git a/apps/web/core/components/dropdowns/estimate.tsx b/apps/web/core/components/dropdowns/estimate.tsx
index 3a8ec917407..2888183ebf1 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -3,10 +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, Triangle } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { EstimatePropertyIcon } from "@plane/propel/icons";
 import { EEstimateSystem } from "@plane/types";
 import { ComboDropDown } from "@plane/ui";
 import { convertMinutesToHoursMinutesString, cn } from "@plane/utils";
@@ -104,7 +105,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
           query: `${currentEstimatePoint?.value}`,
           content: (
             <div className="flex items-center gap-2">
-              <Triangle className="h-3 w-3 flex-shrink-0" />
+              <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
               <span className="flex-grow truncate">
                 {currentActiveEstimate?.type === EEstimateSystem.TIME
                   ? convertMinutesToHoursMinutesString(Number(currentEstimatePoint.value))
@@ -121,7 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
     query: t("project_settings.estimates.no_estimate"),
     content: (
       <div className="flex items-center gap-2">
-        <Triangle className="h-3 w-3 flex-shrink-0" />
+        <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
         <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
       </div>
     ),
@@ -189,7 +190,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
             variant={buttonVariant}
             renderToolTipByDefault={renderByDefault}
           >
-            {!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
+            {!hideIcon && <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             {(selectedEstimate || placeholder) && BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
               <span className="flex-grow truncate">
                 {selectedEstimate
@@ -249,7 +250,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                 >
                   {/* NOTE: This condition renders when estimates are not enabled for the project */}
                   <div className="flex-grow flex items-center gap-2">
-                    <Triangle className="h-3 w-3 flex-shrink-0" />
+                    <EstimatePropertyIcon className="h-3 w-3 flex-shrink-0" />
                     <span className="flex-grow truncate">{t("project_settings.estimates.no_estimate")}</span>
                   </div>
                 </div>
diff --git a/apps/web/core/components/dropdowns/member/avatar.tsx b/apps/web/core/components/dropdowns/member/avatar.tsx
index 5dc01268a66..826369abb7d 100644
--- a/apps/web/core/components/dropdowns/member/avatar.tsx
+++ b/apps/web/core/components/dropdowns/member/avatar.tsx
@@ -2,7 +2,7 @@
 
 import { observer } from "mobx-react";
 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";
 import { cn, getFileURL } from "@plane/utils";
@@ -49,5 +49,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
     }
   }
 
-  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <MembersPropertyIcon className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />
+  );
 });
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index 41a1677d51b..c1df42157c6 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -2,8 +2,14 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
-import { DoubleCircleIcon } from "@plane/propel/icons";
+import {
+  StatePropertyIcon,
+  MembersPropertyIcon,
+  PriorityPropertyIcon,
+  DueDatePropertyIcon,
+  LabelPropertyIcon,
+  DuplicatePropertyIcon,
+} from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
 import { ControlLink } from "@plane/ui";
@@ -56,7 +62,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* State */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+                <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>State</span>
               </div>
               {issue?.state_id && (
@@ -79,7 +85,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Assignee */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <Users className="h-4 w-4 flex-shrink-0" />
+                <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
               <MemberDropdown
@@ -107,7 +113,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Priority */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <Signal className="h-4 w-4 flex-shrink-0" />
+                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Priority</span>
               </div>
               <PriorityDropdown
@@ -129,7 +135,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Due Date */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
+                <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Due date</span>
               </div>
               <DateDropdown
@@ -154,7 +160,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Labels */}
             <div className="flex min-h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <Tag className="h-4 w-4 flex-shrink-0" />
+                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>Labels</span>
               </div>
               <div className="w-3/5 flex-grow min-h-8 h-full pt-1">
@@ -177,7 +183,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {duplicateIssueDetails && (
               <div className="flex min-h-8 gap-2">
                 <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
-                  <CopyPlus className="h-4 w-4 flex-shrink-0" />
+                  <DuplicatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>Duplicate of</span>
                 </div>
 
diff --git a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index 92b823d3a6f..3d7c5abba44 100644
--- a/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -1,9 +1,8 @@
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { LayoutPanelTop } from "lucide-react";
-// plane imports
 import { ETabIndices } from "@plane/constants";
+import { ParentPropertyIcon } from "@plane/propel/icons";
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
@@ -177,7 +176,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
                   type="button"
                   className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
                 >
-                  <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+                  <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
                   <span className="whitespace-nowrap">
                     {selectedParentIssue
                       ? `${selectedParentIssue.project__identifier}-${selectedParentIssue.sequence_id}`
@@ -211,7 +210,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
               className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
               onClick={() => setParentIssueModalOpen(true)}
             >
-              <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+              <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
               <span className="whitespace-nowrap">Add parent</span>
             </button>
           )}
diff --git a/apps/web/core/components/integration/github/root.tsx b/apps/web/core/components/integration/github/root.tsx
index 1a8fbb47263..cccef5da4ce 100644
--- a/apps/web/core/components/integration/github/root.tsx
+++ b/apps/web/core/components/integration/github/root.tsx
@@ -6,7 +6,8 @@ import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 import useSWR, { mutate } from "swr";
-import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
+import { MembersPropertyIcon } from "@plane/propel/icons";
 // types
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
@@ -68,7 +69,7 @@ const integrationWorkflowData = [
   {
     title: "Users",
     key: "import-users",
-    icon: Users,
+    icon: MembersPropertyIcon,
   },
   {
     title: "Confirm",
diff --git a/apps/web/core/components/integration/jira/root.tsx b/apps/web/core/components/integration/jira/root.tsx
index ed9fa09ba2d..f2d5c99553d 100644
--- a/apps/web/core/components/integration/jira/root.tsx
+++ b/apps/web/core/components/integration/jira/root.tsx
@@ -7,9 +7,10 @@ import { useParams } from "next/navigation";
 import { FormProvider, useForm } from "react-hook-form";
 import { mutate } from "swr";
 // icons
-import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
-// types
+import { ArrowLeft, Check, List, Settings } from "lucide-react";
 import { Button } from "@plane/propel/button";
+import { MembersPropertyIcon } from "@plane/propel/icons";
+// types
 import type { IJiraImporterForm } from "@plane/types";
 // ui
 // fetch keys
@@ -42,7 +43,7 @@ const integrationWorkflowData: Array<{
   {
     title: "Users",
     key: "import-users",
-    icon: Users,
+    icon: MembersPropertyIcon,
   },
   {
     title: "Confirm",
diff --git a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index ae8387efc45..ec4cba9aa98 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -2,9 +2,9 @@
 
 import type { FC } from "react";
 import React from "react";
-import { Link, Paperclip, Waypoints } from "lucide-react";
+import { Link, Paperclip } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { ViewsIcon } from "@plane/propel/icons";
+import { ViewsIcon, RelationPropertyIcon } from "@plane/propel/icons";
 // plane imports
 import type { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // plane web imports
@@ -52,7 +52,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
           customButton={
             <IssueDetailWidgetButton
               title={t("issue.add.relation")}
-              icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+              icon={<RelationPropertyIcon className="h-3.5 w-3.5 flex-shrink-0" />}
               disabled={disabled}
             />
           }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
index 6295c853839..35097a29863 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/issues-list/properties.tsx
@@ -2,8 +2,8 @@
 import type { SyntheticEvent } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2, CalendarClock } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { StartDatePropertyIcon, DueDatePropertyIcon } from "@plane/propel/icons";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
 // components
@@ -165,7 +165,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
             onChange={handleStartDate}
             maxDate={maxDate}
             placeholder={t("common.order_by.start_date")}
-            icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
+            icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             optionsClassName="z-30"
             disabled={!canEdit}
@@ -186,7 +186,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
             onChange={handleTargetDate}
             minDate={minDate}
             placeholder={t("common.order_by.due_date")}
-            icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+            icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             buttonClassName={shouldHighlight ? "text-red-500" : ""}
             clearIconClassName="text-custom-text-100"
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
index 97294839fbc..5c4466f8a83 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // icons
-import { Users } from "lucide-react";
+import { MembersPropertyIcon } from "@plane/propel/icons";
 // hooks;
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
@@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Users className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
+      icon={<MembersPropertyIcon className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
index 8c43a2171e0..ada9b523794 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/estimate.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Triangle } from "lucide-react";
+import { EstimatePropertyIcon } from "@plane/propel/icons";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
@@ -21,7 +21,7 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
 
   return (
     <IssueActivityBlockComponent
-      icon={<Triangle size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<EstimatePropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index 46dc609dabc..8b39428d33e 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Tag } from "lucide-react";
+import { LabelPropertyIcon } from "@plane/propel/icons";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useLabel } from "@/hooks/store/use-label";
@@ -24,7 +24,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Tag size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<LabelPropertyIcon height={14} width={14} className="text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
index 3ce56af96cf..935cffcae1c 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/parent.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { LayoutPanelTop } from "lucide-react";
+import { ParentPropertyIcon } from "@plane/propel/icons";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
@@ -20,7 +20,7 @@ export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) =>
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<LayoutPanelTop size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<ParentPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
index d6f5aba442e..fc48091c4a5 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/priority.tsx
@@ -1,6 +1,6 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Signal } from "lucide-react";
+import { PriorityPropertyIcon } from "@plane/propel/icons";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
@@ -20,7 +20,7 @@ export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Signal size={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<PriorityPropertyIcon className="h-3.5 w-3.5 text-custom-text-200" aria-hidden="true" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
index 9614296422b..de1037e3861 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/state.tsx
@@ -3,7 +3,7 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { DoubleCircleIcon } from "@plane/propel/icons";
+import { StatePropertyIcon } from "@plane/propel/icons";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
@@ -23,7 +23,7 @@ export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<StatePropertyIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 9277e54f9ab..e115e0dd38e 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -1,11 +1,12 @@
 import { Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Loader, Search, Tag } from "lucide-react";
+import { Check, Loader, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { EUserPermissionsLevel, getRandomLabelColor } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { LabelPropertyIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // helpers
@@ -89,7 +90,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
       className={`relative flex flex-shrink-0 cursor-pointer items-center gap-1 rounded-full border border-custom-border-100 p-0.5 px-2 py-0.5 text-xs text-custom-text-300 transition-all hover:bg-custom-background-90 hover:text-custom-text-200`}
     >
       <div className="flex-shrink-0">
-        <Tag className="h-2.5 w-2.5" />
+        <LabelPropertyIcon className="h-2.5 w-2.5" />
       </div>
       <div className="flex-shrink-0">{t("label.select")}</div>
     </div>
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index f93fb67e160..4c6fc38378a 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -2,11 +2,22 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, UserCircle2, Users } from "lucide-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui
-import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
+import {
+  CycleIcon,
+  StatePropertyIcon,
+  ModuleIcon,
+  MembersPropertyIcon,
+  PriorityPropertyIcon,
+  StartDatePropertyIcon,
+  DueDatePropertyIcon,
+  LabelPropertyIcon,
+  UserCirclePropertyIcon,
+  EstimatePropertyIcon,
+  ParentPropertyIcon,
+} from "@plane/propel/icons";
 import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -74,7 +85,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
           <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+                <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.state")}</span>
               </div>
               <StateDropdown
@@ -93,7 +104,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <Users className="h-4 w-4 flex-shrink-0" />
+                <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.assignees")}</span>
               </div>
               <MemberDropdown
@@ -117,7 +128,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <Signal className="h-4 w-4 flex-shrink-0" />
+                <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.priority")}</span>
               </div>
               <PriorityDropdown
@@ -134,7 +145,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             {createdByDetails && (
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+                  <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.created_by")}</span>
                 </div>
                 <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@@ -146,7 +157,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <CalendarClock className="h-4 w-4 flex-shrink-0" />
+                <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.order_by.start_date")}</span>
               </div>
               <DateDropdown
@@ -172,7 +183,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
+                <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.order_by.due_date")}</span>
               </div>
               <DateDropdown
@@ -202,7 +213,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             {projectId && areEstimateEnabledByProjectId(projectId) && (
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <Triangle className="h-4 w-4 flex-shrink-0" />
+                  <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.estimate")}</span>
                 </div>
                 <EstimateDropdown
@@ -260,7 +271,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+                <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.parent")}</span>
               </div>
               <IssueParentSelectRoot
@@ -275,7 +286,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex min-h-8 gap-2">
               <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
-                <Tag className="h-4 w-4 flex-shrink-0" />
+                <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
                 <span>{t("common.labels")}</span>
               </div>
               <div className="h-full min-h-8 w-3/5 flex-grow">
diff --git a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
index e4f7f000440..c55669c68dd 100644
--- a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
+++ b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -1,19 +1,34 @@
-import type { LucideProps } from "lucide-react";
-import { List, Kanban, Calendar, Sheet, GanttChartSquare } from "lucide-react";
+import {
+  ListLayoutIcon,
+  BoardLayoutIcon,
+  CalendarLayoutIcon,
+  SheetLayoutIcon,
+  TimelineLayoutIcon,
+} from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
 
-export const IssueLayoutIcon = ({ layout, ...props }: { layout: EIssueLayoutTypes } & LucideProps) => {
+export const IssueLayoutIcon = ({
+  layout,
+  size,
+  ...props
+}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
+  const iconProps = {
+    ...props,
+    ...(size && { width: size, height: size }),
+  };
+
   switch (layout) {
     case EIssueLayoutTypes.LIST:
-      return <List {...props} />;
+      return <ListLayoutIcon {...iconProps} />;
     case EIssueLayoutTypes.KANBAN:
-      return <Kanban {...props} />;
+      return <BoardLayoutIcon {...iconProps} />;
     case EIssueLayoutTypes.CALENDAR:
-      return <Calendar {...props} />;
+      return <CalendarLayoutIcon {...iconProps} />;
     case EIssueLayoutTypes.SPREADSHEET:
-      return <Sheet {...props} />;
+      return <SheetLayoutIcon {...iconProps} />;
     case EIssueLayoutTypes.GANTT:
-      return <GanttChartSquare {...props} />;
+      return <TimelineLayoutIcon {...iconProps} />;
     default:
       return null;
   }
diff --git a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 0a5f0a392fb..a61d6ccf421 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -6,12 +6,12 @@ import { xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { CalendarCheck2, CalendarClock, Link, Paperclip } from "lucide-react";
+import { Link, Paperclip } from "lucide-react";
 // types
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 // i18n
 import { useTranslation } from "@plane/i18n";
-import { ViewsIcon } from "@plane/propel/icons";
+import { StartDatePropertyIcon, ViewsIcon, DueDatePropertyIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // ui
@@ -324,7 +324,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             onChange={handleStartDate}
             maxDate={maxDate}
             placeholder={t("common.order_by.start_date")}
-            icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
+            icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             optionsClassName="z-10"
             disabled={isReadOnly}
@@ -346,7 +346,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             onChange={handleTargetDate}
             minDate={minDate}
             placeholder={t("common.order_by.due_date")}
-            icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+            icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
             clearIconClassName="!text-custom-text-100"
diff --git a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
index eb02435e096..ecb856a0cd8 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -3,11 +3,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
-import { Tags } from "lucide-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // i18n
 import { useTranslation } from "@plane/i18n";
+import { LabelPropertyIcon } from "@plane/propel/icons";
 // types
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueLabel } from "@plane/types";
@@ -101,7 +101,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             fullWidth && "w-full"
           )}
         >
-          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelPropertyIcon className="h-3.5 w-3.5" />
           {placeholderText}
         </div>
       </Tooltip>
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
index 1d793c3209f..087e349b6bc 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/due-date-column.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2 } from "lucide-react";
+import { DueDatePropertyIcon } from "@plane/propel/icons";
 // types
 import type { TIssue } from "@plane/types";
 import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@@ -42,7 +42,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
         }}
         disabled={disabled}
         placeholder="Due date"
-        icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+        icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
         buttonContainerClassName="w-full"
         buttonClassName={cn(
diff --git a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
index f1c35a4b576..bcdc01a1dfc 100644
--- a/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
+++ b/apps/web/core/components/issues/issue-layouts/spreadsheet/columns/start-date-column.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { observer } from "mobx-react";
-import { CalendarClock } from "lucide-react";
+import { StartDatePropertyIcon } from "@plane/propel/icons";
 // types
 import type { TIssue } from "@plane/types";
 // components
@@ -36,7 +36,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         }}
         disabled={disabled}
         placeholder="Start date"
-        icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
+        icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
         buttonVariant="transparent-with-text"
         buttonClassName="text-left rounded-none group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10 px-page-x"
         buttonContainerClassName="w-full"
diff --git a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index f7bba82d309..e9def41c6ff 100644
--- a/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -4,10 +4,9 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
-import { LayoutPanelTop } from "lucide-react";
-// plane imports
 import { ETabIndices, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { ParentPropertyIcon } from "@plane/propel/icons";
 // types
 import type { ISearchIssueResponse, TIssue } from "@plane/types";
 // ui
@@ -313,7 +312,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             className="flex cursor-pointer items-center justify-between gap-1 h-full rounded border-[0.5px] border-custom-border-300 px-2 py-0.5 text-xs hover:bg-custom-background-80"
             onClick={() => setParentIssueListModalOpen(true)}
           >
-            <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
+            <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
             <span className="whitespace-nowrap">{t("add_parent")}</span>
           </button>
         )}
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index bd6a727ea03..34f5265dc24 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -2,11 +2,22 @@
 
 import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, Users, UserCircle2 } from "lucide-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui icons
-import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
+import {
+  CycleIcon,
+  StatePropertyIcon,
+  ModuleIcon,
+  MembersPropertyIcon,
+  PriorityPropertyIcon,
+  StartDatePropertyIcon,
+  DueDatePropertyIcon,
+  LabelPropertyIcon,
+  UserCirclePropertyIcon,
+  EstimatePropertyIcon,
+  ParentPropertyIcon,
+} from "@plane/propel/icons";
 import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -69,7 +80,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* state */}
         <div className="flex w-full 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="h-4 w-4 flex-shrink-0" />
+            <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.state")}</span>
           </div>
           <StateDropdown
@@ -89,7 +100,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* assignee */}
         <div className="flex w-full 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">
-            <Users className="h-4 w-4 flex-shrink-0" />
+            <MembersPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.assignees")}</span>
           </div>
           <MemberDropdown
@@ -112,7 +123,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* priority */}
         <div className="flex w-full 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="h-4 w-4 flex-shrink-0" />
+            <PriorityPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.priority")}</span>
           </div>
           <PriorityDropdown
@@ -130,7 +141,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {createdByDetails && (
           <div className="flex w-full 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">
-              <UserCircle2 className="h-4 w-4 flex-shrink-0" />
+              <UserCirclePropertyIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.created_by")}</span>
             </div>
             <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
@@ -148,7 +159,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* start date */}
         <div className="flex w-full 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">
-            <CalendarClock className="h-4 w-4 flex-shrink-0" />
+            <StartDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.order_by.start_date")}</span>
           </div>
           <DateDropdown
@@ -175,7 +186,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* due date */}
         <div className="flex w-full 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="h-4 w-4 flex-shrink-0" />
+            <DueDatePropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.order_by.due_date")}</span>
           </div>
           <DateDropdown
@@ -206,7 +217,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {isEstimateEnabled && (
           <div className="flex w-full 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">
-              <Triangle className="h-4 w-4 flex-shrink-0" />
+              <EstimatePropertyIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.estimate")}</span>
             </div>
             <EstimateDropdown
@@ -263,7 +274,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* parent */}
         <div className="flex w-full 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">
-            <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
+            <ParentPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <p>{t("common.parent")}</p>
           </div>
           <IssueParentSelectRoot
@@ -279,7 +290,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* label */}
         <div className="flex w-full items-center gap-3 min-h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <Tag className="h-4 w-4 flex-shrink-0" />
+            <LabelPropertyIcon className="h-4 w-4 flex-shrink-0" />
             <span>{t("common.labels")}</span>
           </div>
           <div className="flex w-full flex-col gap-3 truncate">
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index eb0bb02c782..a81eebcd918 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -2,12 +2,13 @@ import React, { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Component, Loader, Search, Tag } from "lucide-react";
+import { Check, Component, Loader, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 import { getRandomLabelColor } from "@plane/constants";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { LabelPropertyIcon } from "@plane/propel/icons";
 import type { IIssueLabel } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -181,7 +182,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
               buttonClassName
             )}
           >
-            <Tag className="h-3 w-3 flex-shrink-0" />
+            <LabelPropertyIcon className="h-3 w-3 flex-shrink-0" />
             <span>{t("labels")}</span>
           </div>
         )}
diff --git a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
index 04ca1b82d41..e931bd25c66 100644
--- a/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
+++ b/apps/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
@@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { CalendarCheck2, CalendarClock } from "lucide-react";
+import { DueDatePropertyIcon, StartDatePropertyIcon } from "@plane/propel/icons";
 // types
 import type { TIssuePriorities, TWorkspaceDraftIssue } from "@plane/types";
 import { getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
@@ -177,7 +177,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
           onChange={handleStartDate}
           maxDate={maxDate}
           placeholder="Start date"
-          icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
+          icon={<StartDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
           buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
           optionsClassName="z-10"
           renderByDefault={isMobile}
@@ -192,7 +192,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
           onChange={handleTargetDate}
           minDate={minDate}
           placeholder="Due date"
-          icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+          icon={<DueDatePropertyIcon className="h-3 w-3 flex-shrink-0" />}
           buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
           buttonClassName={
             shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index fa47aa146c5..5e33b6e438c 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-import { CalendarClock, ChevronDown, ChevronRight, Info, Plus, SquareUser, Users } from "lucide-react";
+import { ChevronDown, ChevronRight, Info, Plus, SquareUser } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import {
   MODULE_STATUS,
@@ -16,7 +16,7 @@ import {
 } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { MembersPropertyIcon, ModuleStatusIcon, WorkItemsIcon, StartDatePropertyIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
@@ -303,7 +303,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <CalendarClock className="h-4 w-4" />
+              <StartDatePropertyIcon className="h-4 w-4" />
               <span className="text-base">{t("date_range")}</span>
             </div>
             <div className="h-7">
@@ -371,7 +371,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <Users className="h-4 w-4" />
+              <MembersPropertyIcon className="h-4 w-4" />
               <span className="text-base">{t("members")}</span>
             </div>
             <Controller
diff --git a/apps/web/core/components/modules/module-layout-icon.tsx b/apps/web/core/components/modules/module-layout-icon.tsx
index ac81f5245d7..f07d5638b69 100644
--- a/apps/web/core/components/modules/module-layout-icon.tsx
+++ b/apps/web/core/components/modules/module-layout-icon.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+import { TimelineLayoutIcon, GridLayoutIcon, ListLayoutIcon } from "@plane/propel/icons";
 import type { TModuleLayoutOptions } from "@plane/types";
 import { cn } from "@plane/utils";
 
@@ -16,9 +16,9 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
 
   // get Layout icon
   const icons = {
-    list: List,
-    board: LayoutGrid,
-    gantt: GanttChartSquare,
+    list: ListLayoutIcon,
+    board: GridLayoutIcon,
+    gantt: TimelineLayoutIcon,
   };
   const Icon = icons[layoutType ?? "list"];
 
@@ -28,10 +28,10 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
     <>
       {withContainer ? (
         <div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
-          <Icon size={size} className={cn(className)} />
+          <Icon width={size} height={size} className={cn(className)} />
         </div>
       ) : (
-        <Icon size={size} className={cn("flex-shrink-0", className)} />
+        <Icon width={size} height={size} className={cn("flex-shrink-0", className)} />
       )}
     </>
   );
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index e93f557b7a8..e89fe2f7be8 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -7,7 +7,7 @@ import type { FieldError, Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/propel/icons";
+import { StatePropertyIcon, ModuleStatusIcon } from "@plane/propel/icons";
 import type { IModule } from "@plane/types";
 // ui
 import { CustomSelect } from "@plane/ui";
@@ -37,7 +37,7 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
                 {value ? (
                   <ModuleStatusIcon status={value} />
                 ) : (
-                  <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
+                  <StatePropertyIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
                 )}
                 {(selectedValue && t(selectedValue?.i18n_label)) ?? (
                   <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
diff --git a/apps/web/core/components/modules/sidebar-select/select-status.tsx b/apps/web/core/components/modules/sidebar-select/select-status.tsx
index 90d18409b6a..83e6cf6dd83 100644
--- a/apps/web/core/components/modules/sidebar-select/select-status.tsx
+++ b/apps/web/core/components/modules/sidebar-select/select-status.tsx
@@ -7,7 +7,7 @@ import type { Control, UseFormWatch } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import { MODULE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { DoubleCircleIcon } from "@plane/propel/icons";
+import { StatePropertyIcon } from "@plane/propel/icons";
 import type { IModule } from "@plane/types";
 // ui
 import { CustomSelect } from "@plane/ui";
@@ -26,7 +26,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
   return (
     <div className="flex flex-wrap items-center py-2">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
+        <StatePropertyIcon className="h-4 w-4 flex-shrink-0" />
         <p>Status</p>
       </div>
       <div className="sm:basis-1/2">
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 5998b9a7a41..13bb3c8d850 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -4,9 +4,8 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 
 // ui
-import { UserCircle2 } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { CreateIcon, LayerStackIcon } from "@plane/propel/icons";
+import { UserCirclePropertyIcon, CreateIcon, LayerStackIcon } from "@plane/propel/icons";
 import type { IUserProfileData } from "@plane/types";
 import { Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
 // types
@@ -28,7 +27,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
       value: userProfile?.created_issues ?? "...",
     },
     {
-      icon: UserCircle2,
+      icon: UserCirclePropertyIcon,
       route: "assigned",
       i18n_title: "profile.stats.assigned",
       value: userProfile?.assigned_issues ?? "...",
diff --git a/apps/web/core/components/readonly/estimate.tsx b/apps/web/core/components/readonly/estimate.tsx
index ea71ce3d59f..e67ee740881 100644
--- a/apps/web/core/components/readonly/estimate.tsx
+++ b/apps/web/core/components/readonly/estimate.tsx
@@ -2,9 +2,8 @@
 
 import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { Triangle } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { EstimatePropertyIcon } from "@plane/propel/icons";
 import { EEstimateSystem } from "@plane/types";
 import { cn, convertMinutesToHoursMinutesString } from "@plane/utils";
 // hooks
@@ -46,7 +45,7 @@ export const ReadonlyEstimate: React.FC<TReadonlyEstimateProps> = observer((prop
 
   return (
     <div className={cn("flex items-center gap-1 text-sm", className)}>
-      {!hideIcon && <Triangle className="size-4 flex-shrink-0" />}
+      {!hideIcon && <EstimatePropertyIcon className="size-4 flex-shrink-0" />}
       <span className="flex-grow truncate">{displayValue ?? placeholder ?? t("common.none")}</span>
     </div>
   );
diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts
index 665fa930ad9..e19a752b2ff 100644
--- a/packages/constants/src/issue/common.ts
+++ b/packages/constants/src/issue/common.ts
@@ -241,7 +241,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-assignees__first_name",
     descendingOrderTitle: "Z",
-    icon: "Users",
+    icon: "MembersPropertyIcon",
   },
   created_on: {
     i18n_title: "common.sort.created_on",
@@ -257,7 +257,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "target_date",
     descendingOrderTitle: "Old",
-    icon: "CalendarCheck2",
+    icon: "DueDatePropertyIcon",
   },
   estimate: {
     i18n_title: "common.estimate",
@@ -265,7 +265,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "Low",
     descendingOrderKey: "-estimate_point__key",
     descendingOrderTitle: "High",
-    icon: "Triangle",
+    icon: "EstimatePropertyIcon",
   },
   labels: {
     i18n_title: "common.labels",
@@ -273,7 +273,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-labels__name",
     descendingOrderTitle: "Z",
-    icon: "Tag",
+    icon: "LabelPropertyIcon",
   },
   modules: {
     i18n_title: "common.modules",
@@ -297,7 +297,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "None",
     descendingOrderKey: "-priority",
     descendingOrderTitle: "Urgent",
-    icon: "Signal",
+    icon: "PriorityPropertyIcon",
   },
   start_date: {
     i18n_title: "common.order_by.start_date",
@@ -305,7 +305,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "New",
     descendingOrderKey: "start_date",
     descendingOrderTitle: "Old",
-    icon: "CalendarClock",
+    icon: "StartDatePropertyIcon",
   },
   state: {
     i18n_title: "common.state",
@@ -313,7 +313,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-state__name",
     descendingOrderTitle: "Z",
-    icon: "DoubleCircleIcon",
+    icon: "StatePropertyIcon",
   },
   updated_on: {
     i18n_title: "common.sort.updated_on",
diff --git a/packages/propel/src/icons/add-icon.tsx b/packages/propel/src/icons/actions/add-icon.tsx
similarity index 62%
rename from packages/propel/src/icons/add-icon.tsx
rename to packages/propel/src/icons/actions/add-icon.tsx
index 13d87f3d389..c7e0a1c0fb6 100644
--- a/packages/propel/src/icons/add-icon.tsx
+++ b/packages/propel/src/icons/actions/add-icon.tsx
@@ -1,33 +1,17 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const AddIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <g clipPath="url(#clip0_2890_23)">
+export const AddIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_2890_23">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
new file mode 100644
index 00000000000..0ef51f7211c
--- /dev/null
+++ b/packages/propel/src/icons/actions/index.ts
@@ -0,0 +1 @@
+export * from "./add-icon";
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
new file mode 100644
index 00000000000..4dc86d08d0d
--- /dev/null
+++ b/packages/propel/src/icons/constants.tsx
@@ -0,0 +1,62 @@
+import { Icon } from "./icon";
+export const ActionsIconsMap = [{ icon: <Icon name="action.add" />, title: "AddIcon" }];
+
+export const WorkspaceIconsMap = [
+  { icon: <Icon name="workspace.analytics" />, title: "AnalyticsIcon" },
+  { icon: <Icon name="workspace.archive" />, title: "ArchiveIcon" },
+  { icon: <Icon name="workspace.dashboard" />, title: "DashboardIcon" },
+  { icon: <Icon name="workspace.draft" />, title: "DraftIcon" },
+  { icon: <Icon name="workspace.home" />, title: "HomeIcon" },
+  { icon: <Icon name="workspace.inbox" />, title: "InboxIcon" },
+  { icon: <Icon name="workspace.project" />, title: "ProjectIcon" },
+  { icon: <Icon name="workspace.your-work" />, title: "YourWorkIcon" },
+];
+
+export const ProjectIconsMap = [
+  { icon: <Icon name="project.cycle" />, title: "CycleIcon" },
+  { icon: <Icon name="project.epic" />, title: "EpicIcon" },
+  { icon: <Icon name="project.intake" />, title: "IntakeIcon" },
+  { icon: <Icon name="project.module" />, title: "ModuleIcon" },
+  { icon: <Icon name="project.page" />, title: "PageIcon" },
+  { icon: <Icon name="project.view" />, title: "ViewIcon" },
+  { icon: <Icon name="project.work-items" />, title: "WorkItemsIcon" },
+];
+
+export const SubBrandIconsMap = [
+  { icon: <Icon name="sub-brand.pi-chat" />, title: "PiChatLogo" },
+  { icon: <Icon name="sub-brand.plane" />, title: "PlaneIcon" },
+  { icon: <Icon name="sub-brand.wiki" />, title: "WikiIcon" },
+];
+
+export const LayoutIconsMap = [
+  { icon: <Icon name="layout.calendar" />, title: "CalendarLayoutIcon" },
+  { icon: <Icon name="layout.card" />, title: "CardLayoutIcon" },
+  { icon: <Icon name="layout.timeline" />, title: "TimelineLayoutIcon" },
+  { icon: <Icon name="layout.grid" />, title: "GridLayoutIcon" },
+  { icon: <Icon name="layout.board" />, title: "BoardLayoutIcon" },
+  { icon: <Icon name="layout.list" />, title: "ListLayoutIcon" },
+  { icon: <Icon name="layout.sheet" />, title: "SheetLayoutIcon" },
+];
+
+export const PropertyIconsMap = [
+  { icon: <Icon name="property.boolean" />, title: "BooleanPropertyIcon" },
+  { icon: <Icon name="property.dropdown" />, title: "DropdownPropertyIcon" },
+  { icon: <Icon name="property.due-date" />, title: "DueDatePropertyIcon" },
+  { icon: <Icon name="property.duplicate" />, title: "DuplicatePropertyIcon" },
+  { icon: <Icon name="property.estimate" />, title: "EstimatePropertyIcon" },
+  { icon: <Icon name="property.hash" />, title: "HashPropertyIcon" },
+  { icon: <Icon name="property.label" />, title: "LabelPropertyIcon" },
+  { icon: <Icon name="property.members" />, title: "MembersPropertyIcon" },
+  { icon: <Icon name="property.overdue-date" />, title: "OverdueDatePropertyIcon" },
+  { icon: <Icon name="property.parent" />, title: "ParentPropertyIcon" },
+  { icon: <Icon name="property.priority" />, title: "PriorityPropertyIcon" },
+  { icon: <Icon name="property.relates-to" />, title: "RelatesToPropertyIcon" },
+  { icon: <Icon name="property.relation" />, title: "RelationPropertyIcon" },
+  { icon: <Icon name="property.scope" />, title: "ScopePropertyIcon" },
+  { icon: <Icon name="property.start-date" />, title: "StartDatePropertyIcon" },
+  { icon: <Icon name="property.state" />, title: "StatePropertyIcon" },
+  { icon: <Icon name="property.user-circle" />, title: "UserCirclePropertyIcon" },
+  { icon: <Icon name="property.user" />, title: "UserPropertyIcon" },
+  { icon: <Icon name="property.user-square" />, title: "UserSquarePropertyIcon" },
+  { icon: <Icon name="property.workflows" />, title: "WorkflowsPropertyIcon" },
+];
diff --git a/packages/propel/src/icons/cycle/cycle-group-icon.tsx b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
index 6062ac36ea9..6e095d6f0a6 100644
--- a/packages/propel/src/icons/cycle/cycle-group-icon.tsx
+++ b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CircleDotDashed, Circle } from "lucide-react";
 
-import { CycleIcon } from "../cycle-icon";
+import { CycleIcon } from "../project/cycle-icon";
 import { CircleDotFullIcon } from "./circle-dot-full-icon";
 import { CYCLE_GROUP_COLORS, ICycleGroupIcon } from "./helper";
 
diff --git a/packages/propel/src/icons/default-icon.tsx b/packages/propel/src/icons/default-icon.tsx
new file mode 100644
index 00000000000..cf1fbed943c
--- /dev/null
+++ b/packages/propel/src/icons/default-icon.tsx
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+import { IconWrapper } from "./icon-wrapper";
+import { ISvgIcons } from "./type";
+
+export const DefaultIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/epic-icon.tsx b/packages/propel/src/icons/epic-icon.tsx
deleted file mode 100644
index c78a98261ba..00000000000
--- a/packages/propel/src/icons/epic-icon.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from "react";
-
-export type Props = {
-  className?: string;
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-};
-
-export const EpicIcon: React.FC<Props> = ({ width = "16", height = "16", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M0.900146 9.33203V12.0142C0.900146 12.3736 1.17392 12.6654 1.51126 12.6654H14.9557C15.1178 12.6654 15.2732 12.5968 15.3878 12.4746C15.5024 12.3525 15.5668 12.1869 15.5668 12.0142V10.3299L13.375 7.99523C13.1458 7.75134 12.8351 7.61436 12.5113 7.61436C12.1874 7.61436 11.8767 7.75134 11.6476 7.99523L10.1257 9.35919L10.2534 9.56204L11.7209 9.60056C11.7809 9.66017 11.8291 9.73206 11.8625 9.81194C11.8959 9.89181 11.9138 9.97804 11.9153 10.0655C11.9167 10.1529 11.9017 10.2397 11.8709 10.3208C11.8402 10.4019 11.7944 10.4756 11.7364 10.5374C11.6784 10.5992 11.6092 10.648 11.5332 10.6807C11.4571 10.7135 11.3756 10.7296 11.2935 10.728C11.2114 10.7265 11.1305 10.7073 11.0556 10.6717C10.9806 10.6362 10.9131 10.5848 10.8572 10.5209L10.2534 9.56204L6.60385 3.76614C6.37468 3.52226 6.11293 3.33203 5.78904 3.33203C5.46515 3.33203 5.20339 3.52226 4.97422 3.76614L0.900146 9.33203Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.7209 9.60056L10.2534 9.56204L10.8572 10.5209C10.9131 10.5848 10.9806 10.6362 11.0556 10.6717C11.1305 10.7073 11.2114 10.7265 11.2935 10.728C11.3756 10.7296 11.4571 10.7135 11.5332 10.6807C11.6092 10.648 11.6784 10.5992 11.7364 10.5374C11.7944 10.4756 11.8402 10.4019 11.8709 10.3208C11.9017 10.2397 11.9167 10.1529 11.9153 10.0655C11.9138 9.97804 11.8959 9.89181 11.8625 9.81194C11.8291 9.73206 11.7809 9.66017 11.7209 9.60056Z"
-      fill="currentColor"
-    />
-  </svg>
-);
diff --git a/packages/propel/src/icons/helpers.ts b/packages/propel/src/icons/helpers.ts
new file mode 100644
index 00000000000..0cf0bf64b35
--- /dev/null
+++ b/packages/propel/src/icons/helpers.ts
@@ -0,0 +1,29 @@
+import { ICON_REGISTRY, IconName } from "./registry";
+
+/**
+ * Get the icon component by name
+ * @param name - The icon name from the registry
+ * @returns The icon component or default icon if not found
+ */
+export const getIconComponent = (name: IconName) => ICON_REGISTRY[name] || ICON_REGISTRY.default;
+
+/**
+ * Check if the icon name exists in the registry
+ * @param name - The icon name to check
+ * @returns True if the icon exists in the registry
+ */
+export const isValidIconName = (name: string): name is IconName => name in ICON_REGISTRY;
+
+/**
+ * Get all available icon names
+ * @returns Array of all icon names in the registry
+ */
+export const getIconNames = (): IconName[] => Object.keys(ICON_REGISTRY) as IconName[];
+
+/**
+ * Get icons by category
+ * @param category - The category prefix (e.g., 'workspace', 'project')
+ * @returns Array of icon names matching the category
+ */
+export const getIconsByCategory = (category: string): IconName[] =>
+  getIconNames().filter((name) => name.startsWith(`${category}.`));
diff --git a/packages/propel/src/icons/icon-wrapper.tsx b/packages/propel/src/icons/icon-wrapper.tsx
new file mode 100644
index 00000000000..fb6123353ba
--- /dev/null
+++ b/packages/propel/src/icons/icon-wrapper.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+interface IIconWrapper extends ISvgIcons {
+  children: React.ReactNode;
+  clipPathId?: string;
+  viewBox?: string;
+}
+
+export const IconWrapper: React.FC<IIconWrapper> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  children,
+  clipPathId,
+  viewBox = "0 0 16 16",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox={viewBox}
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    {clipPathId ? (
+      <>
+        <g clipPath={`url(#${clipPathId})`}>{children}</g>
+        <defs>
+          <clipPath id={clipPathId}>
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </>
+    ) : (
+      children
+    )}
+  </svg>
+);
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
new file mode 100644
index 00000000000..68bc0e3494c
--- /dev/null
+++ b/packages/propel/src/icons/icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { ICON_REGISTRY, IconName } from "./registry";
+import { ISvgIcons } from "./type";
+
+export interface IconProps extends Omit<ISvgIcons, "ref"> {
+  name: IconName;
+}
+
+export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
+  const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
+  return <IconComponent {...props} />;
+};
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
new file mode 100644
index 00000000000..4bab5581c78
--- /dev/null
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  ActionsIconsMap,
+  LayoutIconsMap,
+  ProjectIconsMap,
+  PropertyIconsMap,
+  SubBrandIconsMap,
+  WorkspaceIconsMap,
+} from "./constants";
+import { Icon } from "./icon";
+import { CycleIcon } from "./project/cycle-icon";
+import { HomeIcon } from "./workspace/home-icon";
+import { ProjectIcon } from "./workspace/project-icon";
+
+const meta: Meta = {
+  title: "Icons",
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A comprehensive collection of all icons used throughout the application. Supports both direct imports and registry-based usage.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const AllIcons: Story = {
+  render: () => (
+    <div className="space-y-12">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Sub-Brand Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {SubBrandIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Workspace Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {WorkspaceIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Project Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {ProjectIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Layout Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {LayoutIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Property Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {PropertyIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Actions Icons</h3>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          {ActionsIconsMap.map((item) => (
+            <div key={item.title} className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+              <div className="text-custom-text-200">{item.icon}</div>
+              <p className="text-xs text-custom-text-300 text-center">{item.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const RegistryUsage: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Registry-Based Usage</h3>
+        <p className="text-sm text-custom-text-300">
+          Use the <code className="px-1 py-0.5 bg-custom-background-80 rounded">Icon</code> component with{" "}
+          <code className="px-1 py-0.5 bg-custom-background-80 rounded">name</code> prop for dynamic icon selection.
+        </p>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <Icon name="workspace.home" className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">workspace.home</p>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <Icon name="project.cycle" className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">project.cycle</p>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <Icon name="layout.board" className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">layout.board</p>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <Icon name="property.priority" className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">property.priority</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Direct Import Usage</h3>
+        <p className="text-sm text-custom-text-300">
+          Import icon components directly for better tree-shaking and type safety.
+        </p>
+        <div className="grid grid-cols-12 gap-6 w-full">
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <HomeIcon className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">HomeIcon</p>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <CycleIcon className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">CycleIcon</p>
+          </div>
+          <div className="flex flex-col items-center justify-center gap-3 p-4 col-span-2">
+            <ProjectIcon className="text-custom-text-200" />
+            <p className="text-xs text-custom-text-300 text-center">ProjectIcon</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const IconSizes: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold text-custom-text-100">Icon Sizes</h3>
+        <p className="text-sm text-custom-text-300">
+          Icons can be rendered in different sizes using width and height props.
+        </p>
+      </div>
+
+      <div className="flex items-end gap-8">
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="12" height="12" className="text-custom-text-200" />
+          <p className="text-xs text-custom-text-300">12x12</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="16" height="16" className="text-custom-text-200" />
+          <p className="text-xs text-custom-text-300">16x16 (default)</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="24" height="24" className="text-custom-text-200" />
+          <p className="text-xs text-custom-text-300">24x24</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="32" height="32" className="text-custom-text-200" />
+          <p className="text-xs text-custom-text-300">32x32</p>
+        </div>
+        <div className="flex flex-col items-center gap-2">
+          <Icon name="workspace.home" width="48" height="48" className="text-custom-text-200" />
+          <p className="text-xs text-custom-text-300">48x48</p>
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
index 0c0529a2243..ace2a42257c 100644
--- a/packages/propel/src/icons/index.ts
+++ b/packages/propel/src/icons/index.ts
@@ -1,9 +1,10 @@
 export type { ISvgIcons } from "./type";
+export type { IconName } from "./registry";
+export type { IconProps } from "./icon";
+export { ICON_REGISTRY } from "./registry";
+export * from "./actions";
 export * from "./activity-icon";
-export * from "./add-icon";
 export * from "./ai-icon";
-export * from "./analytics-icon";
-export * from "./archive-icon";
 export * from "./at-risk-icon";
 export * from "./bar-icon";
 export * from "./blocked-icon";
@@ -15,58 +16,51 @@ export * from "./center-panel-icon";
 export * from "./comment-fill-icon";
 export * from "./create-icon";
 export * from "./cycle";
-export * from "./cycle-icon";
-export * from "./dashboard-icon";
+export * from "./default-icon";
 export * from "./dice-icon";
 export * from "./discord-icon";
 export * from "./display-properties";
 export * from "./done-icon";
-export * from "./draft-icon";
 export * from "./dropdown-icon";
-export * from "./epic-icon";
 export * from "./favorite-folder-icon";
 export * from "./full-screen-panel-icon";
 export * from "./github-icon";
 export * from "./gitlab-icon";
-export * from "./home-icon";
-export * from "./inbox-icon";
+export * from "./helpers";
+export * from "./icon";
+export * from "./icon-wrapper";
 export * from "./info-fill-icon";
 export * from "./info-icon";
 export * from "./in-progress-icon";
 export * from "./intake";
-export * from "./intake-icon";
 export * from "./layer-stack";
 export * from "./layers-icon";
+export * from "./layouts";
 export * from "./lead-icon";
 export * from "./module";
-export * from "./module-icon";
 export * from "./monospace-icon";
 export * from "./multiple-sticky";
 export * from "./off-track-icon";
 export * from "./on-track-icon";
 export * from "./overview-icon";
-export * from "./page-icon";
 export * from "./pending-icon";
 export * from "./photo-filter-icon";
-export * from "./pi-chat";
 export * from "./planned-icon";
-export * from "./plane-icon";
 export * from "./priority-icon";
-export * from "./project-icon";
+export * from "./project";
+export * from "./properties";
 export * from "./related-icon";
 export * from "./sans-serif-icon";
 export * from "./serif-icon";
 export * from "./side-panel-icon";
 export * from "./state";
 export * from "./sticky-note-icon";
+export * from "./sub-brand";
 export * from "./suspended-user";
 export * from "./teams";
 export * from "./transfer-icon";
 export * from "./tree-map-icon";
 export * from "./updates-icon";
 export * from "./user-activity-icon";
-export * from "./view-icon";
-export * from "./wiki-icon";
-export * from "./work-items-icon";
+export * from "./workspace";
 export * from "./workspace-icon";
-export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/layouts/board-icon.tsx b/packages/propel/src/icons/layouts/board-icon.tsx
new file mode 100644
index 00000000000..aac682c632d
--- /dev/null
+++ b/packages/propel/src/icons/layouts/board-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const BoardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/calendar-icon.tsx b/packages/propel/src/icons/layouts/calendar-icon.tsx
new file mode 100644
index 00000000000..803d4a60a47
--- /dev/null
+++ b/packages/propel/src/icons/layouts/calendar-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const CalendarLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/card-icon.tsx b/packages/propel/src/icons/layouts/card-icon.tsx
new file mode 100644
index 00000000000..64be0629cd3
--- /dev/null
+++ b/packages/propel/src/icons/layouts/card-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const CardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/grid-icon.tsx b/packages/propel/src/icons/layouts/grid-icon.tsx
new file mode 100644
index 00000000000..91cb6b71710
--- /dev/null
+++ b/packages/propel/src/icons/layouts/grid-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const GridLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M6.0342 10.0127C6.0327 9.99439 6.02964 9.98153 6.02834 9.97267C6.02717 9.97146 6.02672 9.96984 6.02541 9.96877C6.01667 9.96752 6.0042 9.96624 5.98732 9.96486C5.90751 9.95834 5.79662 9.95802 5.59963 9.95802H3.06642C2.86959 9.95802 2.75948 9.95834 2.6797 9.96486C2.66216 9.96629 2.64947 9.96847 2.64064 9.96974C2.63917 9.97102 2.638 9.97219 2.63673 9.97365C2.63546 9.98248 2.63328 9.99518 2.63185 10.0127C2.62534 10.0925 2.62502 10.2026 2.62502 10.3994V12.9326C2.62502 13.1296 2.62533 13.2405 2.63185 13.3203C2.63324 13.3372 2.63451 13.3497 2.63576 13.3584C2.63683 13.3597 2.63844 13.3602 2.63966 13.3613C2.64851 13.3627 2.66138 13.3657 2.6797 13.3672C2.75948 13.3737 2.86959 13.375 3.06642 13.375H5.59963C5.79662 13.375 5.90751 13.3737 5.98732 13.3672C6.00495 13.3658 6.0176 13.3636 6.02638 13.3623C6.02747 13.3613 6.02834 13.3605 6.02931 13.3594C6.03059 13.3506 6.03275 13.338 6.0342 13.3203C6.04072 13.2405 6.04201 13.1296 6.04201 12.9326V10.3994C6.04201 10.2026 6.04071 10.0925 6.0342 10.0127ZM13.3682 10.0127C13.3667 9.99442 13.3636 9.98153 13.3623 9.97267C13.3613 9.97161 13.3605 9.9707 13.3594 9.96974C13.3506 9.96847 13.3378 9.96628 13.3203 9.96486C13.2405 9.95835 13.1304 9.95802 12.9336 9.95802H10.4004C10.2034 9.95802 10.0925 9.95834 10.0127 9.96486C9.99519 9.9663 9.98241 9.96749 9.97365 9.96877C9.97239 9.96985 9.97184 9.97145 9.97072 9.97267C9.96942 9.98152 9.96733 9.99449 9.96584 10.0127C9.95932 10.0925 9.959 10.2026 9.959 10.3994V12.9326C9.959 13.1296 9.95932 13.2405 9.96584 13.3203C9.96728 13.3379 9.96944 13.3506 9.97072 13.3594C9.97169 13.3605 9.97257 13.3613 9.97365 13.3623C9.98241 13.3636 9.99506 13.3658 10.0127 13.3672C10.0925 13.3737 10.2034 13.375 10.4004 13.375H12.9336C13.1305 13.375 13.2405 13.3737 13.3203 13.3672C13.3386 13.3657 13.3515 13.3626 13.3604 13.3613C13.3612 13.3605 13.3625 13.3603 13.3633 13.3594C13.3646 13.3506 13.3667 13.3379 13.3682 13.3203C13.3747 13.2405 13.375 13.1296 13.375 12.9326V10.3994C13.375 10.2026 13.3747 10.0925 13.3682 10.0127ZM6.0342 2.6797C6.0327 2.66138 6.02964 2.64852 6.02834 2.63966C6.02717 2.63844 6.02671 2.63683 6.02541 2.63576C6.01666 2.63451 6.00419 2.63324 5.98732 2.63185C5.90751 2.62533 5.79662 2.62502 5.59963 2.62502H3.06642C2.8696 2.62502 2.75948 2.62533 2.6797 2.63185C2.66216 2.63329 2.64947 2.63546 2.64064 2.63673C2.63918 2.63801 2.63801 2.63918 2.63673 2.64064C2.63546 2.64947 2.63329 2.66216 2.63185 2.6797C2.62533 2.75948 2.62502 2.8696 2.62502 3.06642V5.59963C2.62502 5.79662 2.62533 5.90751 2.63185 5.98732C2.63324 6.00419 2.63451 6.01666 2.63576 6.02541C2.63683 6.02671 2.63844 6.02717 2.63966 6.02834C2.64852 6.02964 2.66138 6.0327 2.6797 6.0342C2.75948 6.04071 2.86959 6.04201 3.06642 6.04201H5.59963C5.79662 6.04201 5.90751 6.04072 5.98732 6.0342C6.00494 6.03275 6.0176 6.03059 6.02638 6.02931C6.02747 6.02834 6.02834 6.02747 6.02931 6.02638C6.03059 6.0176 6.03275 6.00494 6.0342 5.98732C6.04072 5.90751 6.04201 5.79662 6.04201 5.59963V3.06642C6.04201 2.86959 6.04071 2.75948 6.0342 2.6797ZM13.3682 2.6797C13.3667 2.66217 13.3646 2.64947 13.3633 2.64064C13.362 2.63917 13.3608 2.638 13.3594 2.63673C13.3506 2.63546 13.3379 2.63329 13.3203 2.63185C13.2406 2.62534 13.1304 2.62502 12.9336 2.62502H10.4004C10.2034 2.62502 10.0925 2.62533 10.0127 2.63185C9.99523 2.63328 9.98244 2.63449 9.97365 2.63576C9.97221 2.63698 9.97101 2.63825 9.96974 2.63966C9.96844 2.64852 9.96634 2.66154 9.96486 2.6797C9.95834 2.75948 9.95802 2.86961 9.95802 3.06642V5.59963C9.95802 5.79662 9.95834 5.90751 9.96486 5.98732C9.96625 6.00427 9.96849 6.01666 9.96974 6.02541C9.971 6.02691 9.97221 6.02801 9.97365 6.02931C9.98244 6.03059 9.9951 6.03275 10.0127 6.0342C10.0925 6.04072 10.2034 6.04201 10.4004 6.04201H12.9336C13.1304 6.04201 13.2406 6.04071 13.3203 6.0342C13.338 6.03275 13.3506 6.02962 13.3594 6.02834C13.3607 6.02717 13.3622 6.02673 13.3633 6.02541C13.3645 6.01666 13.3668 6.00428 13.3682 5.98732C13.3747 5.90751 13.375 5.79662 13.375 5.59963V3.06642C13.375 2.8696 13.3747 2.75948 13.3682 2.6797ZM7.29201 12.9326C7.29201 13.109 7.29193 13.2794 7.28029 13.4219C7.26806 13.5715 7.23984 13.7451 7.15138 13.919C7.02758 14.162 6.82957 14.3596 6.58693 14.4834C6.41294 14.572 6.23862 14.6011 6.08888 14.6133C5.94636 14.6249 5.77599 14.625 5.59963 14.625H3.06642C2.89023 14.625 2.72055 14.6249 2.57814 14.6133C2.42832 14.6011 2.2542 14.5721 2.08009 14.4834C1.83733 14.3596 1.63949 14.1621 1.51564 13.919C1.42712 13.745 1.39799 13.5716 1.38576 13.4219C1.37411 13.2794 1.37502 13.109 1.37502 12.9326V10.3994C1.37502 10.2232 1.37414 10.0535 1.38576 9.91115C1.398 9.76133 1.42693 9.5872 1.51564 9.4131L1.56545 9.32423C1.6896 9.12181 1.86756 8.95697 2.08009 8.84865C2.25419 8.75993 2.42832 8.73101 2.57814 8.71877C2.72054 8.70715 2.89025 8.70802 3.06642 8.70802H5.59963C5.776 8.70802 5.94636 8.70712 6.08888 8.71877C6.23856 8.731 6.41203 8.76013 6.58595 8.84865C6.82872 8.97245 7.02753 9.17 7.15138 9.4131C7.24007 9.58718 7.26805 9.76135 7.28029 9.91115C7.29191 10.0536 7.29201 10.2232 7.29201 10.3994V12.9326ZM14.625 12.9326C14.625 13.109 14.6259 13.2794 14.6143 13.4219C14.602 13.5717 14.5731 13.7459 14.4844 13.9199C14.3606 14.1628 14.1628 14.3596 13.9199 14.4834C13.7458 14.5721 13.5717 14.6011 13.4219 14.6133C13.2795 14.6249 13.1098 14.625 12.9336 14.625H10.4004C10.224 14.625 10.0537 14.6249 9.91115 14.6133C9.76141 14.601 9.58805 14.5721 9.41408 14.4834C9.1712 14.3597 8.97349 14.1628 8.84963 13.9199C8.76093 13.7459 8.73199 13.5717 8.71974 13.4219C8.7081 13.2794 8.709 13.109 8.709 12.9326V10.3994C8.709 10.2232 8.70812 10.0536 8.71974 9.91115C8.73198 9.76132 8.76091 9.5872 8.84963 9.4131L8.89943 9.32423C9.02353 9.12198 9.20147 8.95699 9.41408 8.84865L9.54396 8.79298C9.6732 8.74695 9.79884 8.72795 9.91115 8.71877C10.0537 8.70712 10.224 8.70802 10.4004 8.70802H12.9336C13.1098 8.70802 13.2795 8.70716 13.4219 8.71877C13.5717 8.73101 13.7459 8.75996 13.9199 8.84865C14.163 8.97248 14.3605 9.1701 14.4844 9.4131C14.5731 9.5872 14.602 9.76132 14.6143 9.91115C14.6259 10.0535 14.625 10.2232 14.625 10.3994V12.9326ZM7.29201 5.59963C7.29201 5.776 7.29193 5.94636 7.28029 6.08888C7.26806 6.23851 7.23984 6.4121 7.15138 6.58595C7.02754 6.82898 6.82898 7.02657 6.58595 7.15041C6.4121 7.23886 6.23851 7.26806 6.08888 7.28029C5.94636 7.29193 5.776 7.29201 5.59963 7.29201H3.06642C2.89023 7.29201 2.72055 7.29191 2.57814 7.28029C2.42834 7.26805 2.25418 7.24007 2.08009 7.15138C1.83722 7.02753 1.63942 6.82887 1.51564 6.58595C1.42712 6.41203 1.39799 6.23856 1.38576 6.08888C1.37411 5.94636 1.37502 5.776 1.37502 5.59963V3.06642C1.37502 2.89025 1.37414 2.72054 1.38576 2.57814C1.398 2.42832 1.42694 2.25419 1.51564 2.08009L1.56545 1.99123C1.68954 1.78891 1.86746 1.62401 2.08009 1.51564L2.20998 1.45998C2.33946 1.4138 2.46565 1.39495 2.57814 1.38576C2.72054 1.37414 2.89025 1.37502 3.06642 1.37502H5.59963C5.776 1.37502 5.94636 1.37411 6.08888 1.38576C6.20119 1.39494 6.32682 1.41396 6.45607 1.45998L6.58595 1.51564L6.6758 1.56545C6.87792 1.68948 7.04208 1.86766 7.15041 2.08009C7.23909 2.25418 7.26805 2.42834 7.28029 2.57814C7.29191 2.72055 7.29201 2.89023 7.29201 3.06642V5.59963ZM14.625 5.59963C14.625 5.77599 14.6249 5.94636 14.6133 6.08888C14.6011 6.23853 14.5729 6.41207 14.4844 6.58595C14.3606 6.82872 14.163 7.02753 13.9199 7.15138C13.7458 7.24009 13.5717 7.26805 13.4219 7.28029C13.2795 7.29191 13.1098 7.29201 12.9336 7.29201H10.4004C10.224 7.29201 10.0537 7.29193 9.91115 7.28029C9.76134 7.26805 9.58718 7.24009 9.4131 7.15138C9.17005 7.02751 8.97242 6.82968 8.84865 6.58693C8.76018 6.41306 8.73198 6.23852 8.71974 6.08888C8.7081 5.94636 8.70802 5.776 8.70802 5.59963V3.06642C8.70802 2.89023 8.70812 2.72056 8.71974 2.57814C8.73198 2.42833 8.75995 2.25418 8.84865 2.08009C8.97239 1.83731 9.17005 1.63955 9.4131 1.51564L9.54396 1.45998C9.67321 1.41398 9.79885 1.39493 9.91115 1.38576C10.0537 1.37412 10.224 1.37502 10.4004 1.37502H12.9336C13.1098 1.37502 13.2795 1.37414 13.4219 1.38576C13.5341 1.39493 13.6599 1.41401 13.7891 1.45998L13.9199 1.51564L14.0088 1.56545C14.2112 1.6896 14.3761 1.86758 14.4844 2.08009C14.5731 2.2542 14.6011 2.42832 14.6133 2.57814C14.6249 2.72056 14.625 2.89022 14.625 3.06642V5.59963Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/index.ts b/packages/propel/src/icons/layouts/index.ts
new file mode 100644
index 00000000000..649d93d3b08
--- /dev/null
+++ b/packages/propel/src/icons/layouts/index.ts
@@ -0,0 +1,7 @@
+export * from "./calendar-icon";
+export * from "./card-icon";
+export * from "./timeline-icon";
+export * from "./grid-icon";
+export * from "./board-icon";
+export * from "./list-icon";
+export * from "./sheet-icon";
diff --git a/packages/propel/src/icons/layouts/list-icon.tsx b/packages/propel/src/icons/layouts/list-icon.tsx
new file mode 100644
index 00000000000..7d993c218f5
--- /dev/null
+++ b/packages/propel/src/icons/layouts/list-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ListLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/sheet-icon.tsx b/packages/propel/src/icons/layouts/sheet-icon.tsx
new file mode 100644
index 00000000000..eea1b9fe1c7
--- /dev/null
+++ b/packages/propel/src/icons/layouts/sheet-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const SheetLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5002 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/layouts/timeline-icon.tsx b/packages/propel/src/icons/layouts/timeline-icon.tsx
new file mode 100644
index 00000000000..36950de1c30
--- /dev/null
+++ b/packages/propel/src/icons/layouts/timeline-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const TimelineLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/cycle-icon.tsx b/packages/propel/src/icons/project/cycle-icon.tsx
similarity index 52%
rename from packages/propel/src/icons/cycle-icon.tsx
rename to packages/propel/src/icons/project/cycle-icon.tsx
index 181a7dd7439..7eee10ca48a 100644
--- a/packages/propel/src/icons/cycle-icon.tsx
+++ b/packages/propel/src/icons/project/cycle-icon.tsx
@@ -1,24 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const CycleIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <g clipPath="url(#clip0_1612_7015)">
+export const CycleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
         fill={color}
@@ -27,11 +16,6 @@ export const CycleIcon: React.FC<ISvgIcons> = ({
         d="M7.99951 12.3337C10.3928 12.3337 12.3328 10.3936 12.3328 8.00033C12.3328 5.60709 10.3928 3.66699 7.99951 3.66699V12.3337Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_1612_7015">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/project/epic-icon.tsx b/packages/propel/src/icons/project/epic-icon.tsx
new file mode 100644
index 00000000000..35bebaafcb8
--- /dev/null
+++ b/packages/propel/src/icons/project/epic-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const EpicIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/project/index.ts b/packages/propel/src/icons/project/index.ts
new file mode 100644
index 00000000000..0ace8ff7405
--- /dev/null
+++ b/packages/propel/src/icons/project/index.ts
@@ -0,0 +1,7 @@
+export * from "./cycle-icon";
+export * from "./epic-icon";
+export * from "./intake-icon";
+export * from "./module-icon";
+export * from "./page-icon";
+export * from "./view-icon";
+export * from "./work-items-icon";
diff --git a/packages/propel/src/icons/intake-icon.tsx b/packages/propel/src/icons/project/intake-icon.tsx
similarity index 72%
rename from packages/propel/src/icons/intake-icon.tsx
rename to packages/propel/src/icons/project/intake-icon.tsx
index 38daabf48eb..6bee44333ab 100644
--- a/packages/propel/src/icons/intake-icon.tsx
+++ b/packages/propel/src/icons/project/intake-icon.tsx
@@ -1,33 +1,17 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const IntakeIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <g clipPath="url(#clip0_2310_10)">
+export const IntakeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_2310_10">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/module-icon.tsx b/packages/propel/src/icons/project/module-icon.tsx
similarity index 91%
rename from packages/propel/src/icons/module-icon.tsx
rename to packages/propel/src/icons/project/module-icon.tsx
index 188b570fac5..6c4341a8da5 100644
--- a/packages/propel/src/icons/module-icon.tsx
+++ b/packages/propel/src/icons/project/module-icon.tsx
@@ -1,23 +1,10 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const ModuleIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const ModuleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
       fill={color}
@@ -38,5 +25,5 @@ export const ModuleIcon: React.FC<ISvgIcons> = ({
       d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/page-icon.tsx b/packages/propel/src/icons/project/page-icon.tsx
similarity index 89%
rename from packages/propel/src/icons/page-icon.tsx
rename to packages/propel/src/icons/project/page-icon.tsx
index c9eeb486e27..a98a740d82b 100644
--- a/packages/propel/src/icons/page-icon.tsx
+++ b/packages/propel/src/icons/project/page-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const PageIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const PageIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/view-icon.tsx b/packages/propel/src/icons/project/view-icon.tsx
similarity index 74%
rename from packages/propel/src/icons/view-icon.tsx
rename to packages/propel/src/icons/project/view-icon.tsx
index e51a7044f9f..1b6f6a38bf5 100644
--- a/packages/propel/src/icons/view-icon.tsx
+++ b/packages/propel/src/icons/project/view-icon.tsx
@@ -1,33 +1,17 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const ViewsIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <g clipPath="url(#clip0_1612_7029)">
+export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_1612_7029">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/project/work-items-icon.tsx b/packages/propel/src/icons/project/work-items-icon.tsx
new file mode 100644
index 00000000000..d48c8e58c51
--- /dev/null
+++ b/packages/propel/src/icons/project/work-items-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const WorkItemsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/boolean-icon.tsx b/packages/propel/src/icons/properties/boolean-icon.tsx
new file mode 100644
index 00000000000..5c9588c90d6
--- /dev/null
+++ b/packages/propel/src/icons/properties/boolean-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const BooleanPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/dropdown-icon.tsx b/packages/propel/src/icons/properties/dropdown-icon.tsx
new file mode 100644
index 00000000000..b0215524db6
--- /dev/null
+++ b/packages/propel/src/icons/properties/dropdown-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const DropdownPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8.00098C14.041 4.66436 11.3365 1.95916 8 1.95898C4.66328 1.95898 1.95801 4.66425 1.95801 8.00098C1.95818 11.3375 4.66339 14.042 8 14.042C11.3364 14.0418 14.0408 11.3374 14.041 8.00098ZM10.2246 6.55859C10.4687 6.31468 10.8644 6.31457 11.1084 6.55859C11.3524 6.80262 11.3523 7.19829 11.1084 7.44238L8.44141 10.1094C8.32429 10.2264 8.16557 10.2919 8 10.292C7.83424 10.292 7.67483 10.2266 7.55762 10.1094L4.89062 7.44238C4.64693 7.19833 4.64682 6.80258 4.89062 6.55859C5.1347 6.31452 5.53131 6.31452 5.77539 6.55859L7.99902 8.7832L10.2246 6.55859ZM15.291 8.00098C15.2908 12.0278 12.0268 15.2918 8 15.292C3.97303 15.292 0.708184 12.0279 0.708008 8.00098C0.708008 3.9739 3.97292 0.708984 8 0.708984C12.0269 0.70916 15.291 3.974 15.291 8.00098Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/due-date-icon.tsx b/packages/propel/src/icons/properties/due-date-icon.tsx
new file mode 100644
index 00000000000..d8f73c04a0e
--- /dev/null
+++ b/packages/propel/src/icons/properties/due-date-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const DueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/duplicate-icon.tsx b/packages/propel/src/icons/properties/duplicate-icon.tsx
new file mode 100644
index 00000000000..8384fc8c13e
--- /dev/null
+++ b/packages/propel/src/icons/properties/duplicate-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const DuplicatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8.13282C14.041 7.74954 14.041 7.4995 14.0254 7.3086C14.0104 7.12507 13.9841 7.05154 13.9639 7.01173C13.896 6.87852 13.7876 6.77008 13.6543 6.70216C13.6145 6.68189 13.541 6.65563 13.3574 6.64063C13.1665 6.62507 12.9165 6.62501 12.5332 6.62501H8.13282C7.74955 6.62501 7.4995 6.62507 7.3086 6.64063C7.12508 6.65563 7.05155 6.68189 7.01173 6.70216C6.87845 6.77006 6.77006 6.87845 6.70216 7.01173C6.68189 7.05155 6.65563 7.12508 6.64063 7.3086C6.62507 7.4995 6.62501 7.74955 6.62501 8.13282V12.5332C6.62501 12.9165 6.62507 13.1665 6.64063 13.3574C6.65563 13.541 6.68189 13.6145 6.70216 13.6543C6.77008 13.7876 6.87852 13.896 7.01173 13.9639C7.05154 13.9841 7.12507 14.0104 7.3086 14.0254C7.4995 14.041 7.74954 14.041 8.13282 14.041H12.5332C12.9165 14.041 13.1665 14.041 13.3574 14.0254C13.541 14.0104 13.6145 13.9841 13.6543 13.9639C13.7875 13.896 13.896 13.7875 13.9639 13.6543C13.9841 13.6145 14.0104 13.541 14.0254 13.3574C14.041 13.1665 14.041 12.9165 14.041 12.5332V8.13282ZM9.70802 12V10.959H8.667C8.32193 10.959 8.04218 10.679 8.042 10.334C8.042 9.98881 8.32182 9.70899 8.667 9.70899H9.70802V8.667C9.70802 8.32188 9.98791 8.04209 10.333 8.042C10.6782 8.042 10.958 8.32182 10.958 8.667V9.70899H12C12.3451 9.70908 12.625 9.98887 12.625 10.334C12.6248 10.679 12.345 10.9589 12 10.959H10.958V12C10.958 12.3452 10.6782 12.625 10.333 12.625C9.98791 12.6249 9.70802 12.3451 9.70802 12ZM9.37501 3.33302C9.37501 3.01415 9.37415 2.80617 9.36329 2.64649C9.35279 2.49251 9.33426 2.42923 9.32032 2.39552C9.24843 2.22197 9.11107 2.08363 8.93751 2.01173C8.90379 1.99777 8.84057 1.98024 8.68653 1.96973C8.52687 1.95885 8.31893 1.95802 8.00001 1.95802H3.4668C3.08321 1.95802 2.83257 1.95805 2.64161 1.97364C2.45792 1.98865 2.38455 2.01488 2.34473 2.03516C2.21146 2.10307 2.10307 2.21146 2.03516 2.34473C2.01488 2.38455 1.98865 2.45792 1.97364 2.64161C1.95805 2.83257 1.95802 3.08321 1.95802 3.4668V8.00001C1.95802 8.31893 1.95885 8.52687 1.96973 8.68653C1.98024 8.84057 1.99777 8.90379 2.01173 8.93751C2.08363 9.11107 2.22197 9.24843 2.39552 9.32032C2.42923 9.33426 2.49251 9.35279 2.64649 9.36329C2.80617 9.37415 3.01415 9.37501 3.33302 9.37501C3.67819 9.37501 3.95802 9.65483 3.95802 10C3.95784 10.345 3.67808 10.625 3.33302 10.625C3.03094 10.625 2.7727 10.6248 2.56055 10.6104C2.34294 10.5955 2.12822 10.5631 1.917 10.4756C1.43725 10.2769 1.05621 9.89565 0.857429 9.41602C0.769896 9.20466 0.736546 8.98926 0.721687 8.77149C0.707239 8.55948 0.708015 8.3018 0.708015 8.00001V3.4668C0.708015 3.10389 0.70782 2.79368 0.728523 2.54005C0.749847 2.27906 0.796841 2.02275 0.921882 1.77735C1.10961 1.40896 1.40896 1.10961 1.77735 0.921882C2.02275 0.796841 2.27906 0.749847 2.54005 0.728523C2.79368 0.70782 3.10389 0.708015 3.4668 0.708015H8.00001C8.3018 0.708015 8.55948 0.707239 8.77149 0.721687C8.98926 0.736546 9.20466 0.769896 9.41602 0.857429C9.89565 1.05621 10.2769 1.43725 10.4756 1.917C10.5631 2.12822 10.5955 2.34294 10.6104 2.56055C10.6248 2.7727 10.625 3.03094 10.625 3.33302C10.625 3.67808 10.345 3.95784 10 3.95802C9.65483 3.95802 9.37501 3.67819 9.37501 3.33302ZM15.291 12.5332C15.291 12.8962 15.2922 13.2063 15.2715 13.46C15.2502 13.7207 15.203 13.9765 15.0781 14.2217C14.8904 14.5902 14.5902 14.8904 14.2217 15.0781C13.9765 15.203 13.7207 15.2502 13.46 15.2715C13.2063 15.2922 12.8962 15.291 12.5332 15.291H8.13282C7.76985 15.291 7.45971 15.2922 7.20606 15.2715C6.94533 15.2502 6.68953 15.203 6.44434 15.0781C6.0758 14.8904 5.77563 14.5901 5.5879 14.2217C5.46306 13.9765 5.41586 13.7207 5.39454 13.46C5.37381 13.2063 5.37501 12.8962 5.37501 12.5332V8.13282C5.37501 7.76985 5.37381 7.45971 5.39454 7.20606C5.41586 6.94533 5.46306 6.68953 5.5879 6.44434C5.77565 6.07587 6.07587 5.77565 6.44434 5.5879C6.68953 5.46306 6.94533 5.41586 7.20606 5.39454C7.45971 5.37381 7.76985 5.37501 8.13282 5.37501H12.5332C12.8962 5.37501 13.2063 5.37381 13.46 5.39454C13.7207 5.41586 13.9765 5.46306 14.2217 5.5879C14.5901 5.77563 14.8904 6.0758 15.0781 6.44434C15.203 6.68953 15.2502 6.94533 15.2715 7.20606C15.2922 7.45971 15.291 7.76985 15.291 8.13282V12.5332Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/estimate-icon.tsx b/packages/propel/src/icons/properties/estimate-icon.tsx
new file mode 100644
index 00000000000..ad59eb02bd4
--- /dev/null
+++ b/packages/propel/src/icons/properties/estimate-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const EstimatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/hash-icon.tsx b/packages/propel/src/icons/properties/hash-icon.tsx
new file mode 100644
index 00000000000..c218a797182
--- /dev/null
+++ b/packages/propel/src/icons/properties/hash-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const HashPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/index.ts b/packages/propel/src/icons/properties/index.ts
new file mode 100644
index 00000000000..52e36a7f478
--- /dev/null
+++ b/packages/propel/src/icons/properties/index.ts
@@ -0,0 +1,20 @@
+export * from "./boolean-icon";
+export * from "./dropdown-icon";
+export * from "./due-date-icon";
+export * from "./duplicate-icon";
+export * from "./estimate-icon";
+export * from "./hash-icon";
+export * from "./label-icon";
+export * from "./members-icon";
+export * from "./overdue-date-icon";
+export * from "./parent-icon";
+export * from "./priority-icon";
+export * from "./relates-to-icon";
+export * from "./relation-icon";
+export * from "./scope-icon";
+export * from "./start-date-icon";
+export * from "./state-icon";
+export * from "./user-circle-icon";
+export * from "./user-icon";
+export * from "./user-square-icon";
+export * from "./workflows-icon";
diff --git a/packages/propel/src/icons/properties/label-icon.tsx b/packages/propel/src/icons/properties/label-icon.tsx
new file mode 100644
index 00000000000..97bd7f5b735
--- /dev/null
+++ b/packages/propel/src/icons/properties/label-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const LabelPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M5.00008 5.33366C5.18418 5.33366 5.33341 5.18442 5.33341 5.00033C5.33341 4.81623 5.18418 4.66699 5.00008 4.66699C4.81599 4.66699 4.66675 4.81623 4.66675 5.00033C4.66675 5.18442 4.81599 5.33366 5.00008 5.33366Z"
+        fill={color}
+      />
+      <path
+        d="M6.52889 0.787186C6.82526 0.787186 7.07583 0.782776 7.31795 0.840897C7.4677 0.876877 7.61266 0.930325 7.74959 1.00008L7.88338 1.07527V1.07625C8.0955 1.20626 8.26961 1.38532 8.47908 1.5948L13.5924 6.70711C13.9811 7.0958 14.2988 7.41437 14.5357 7.69344C14.7772 7.97795 14.9708 8.2628 15.0806 8.60066C15.252 9.12791 15.252 9.69649 15.0806 10.2237C14.9708 10.5616 14.7772 10.8464 14.5357 11.1309C14.2988 11.41 13.9811 11.7286 13.5924 12.1173L12.1178 13.5919C11.7291 13.9806 11.4105 14.2983 11.1314 14.5352C10.8469 14.7768 10.5621 14.9703 10.2242 15.0802C9.69697 15.2515 9.1284 15.2515 8.60115 15.0802C8.26329 14.9703 7.97844 14.7768 7.69392 14.5352C7.41486 14.2983 7.09629 13.9806 6.7076 13.5919L1.59529 8.47859C1.38581 8.26913 1.20675 8.09502 1.07674 7.88289H1.07576C0.968573 7.70785 0.889331 7.51701 0.841385 7.31746C0.783264 7.07534 0.787674 6.82478 0.787674 6.5284V3.54597C0.787674 3.18306 0.787479 2.87285 0.808182 2.61922C0.829506 2.35823 0.876501 2.10192 1.00154 1.85652C1.18928 1.48812 1.48863 1.18878 1.85701 1.00105C2.10241 0.876012 2.35872 0.829017 2.61971 0.807694C2.87334 0.786991 3.18355 0.787186 3.54646 0.787186H6.52889ZM5.51033 4.45906C5.99372 4.508 6.37068 4.91589 6.37068 5.41219C6.37068 5.94146 5.94195 6.37019 5.41267 6.37019C4.91638 6.37019 4.50849 5.99323 4.45955 5.50984L4.45467 5.41219L4.45955 5.31453C4.50849 4.83114 4.91638 4.45418 5.41267 4.45418L5.51033 4.45906ZM2.03767 6.5284C2.03767 6.88427 2.04165 6.96065 2.05721 7.02547C2.07449 7.09734 2.10259 7.16638 2.14119 7.22957H2.14217C2.17698 7.28637 2.22778 7.34351 2.47908 7.5948L7.59236 12.7071C7.99549 13.1102 8.27146 13.3859 8.50252 13.5821C8.72806 13.7736 8.86932 13.8532 8.98787 13.8917C9.264 13.9814 9.56145 13.9814 9.83748 13.8917C9.95606 13.8532 10.0973 13.7736 10.3228 13.5821C10.5539 13.3859 10.8299 13.1102 11.233 12.7071L12.7076 11.2325C13.1107 10.8294 13.3864 10.5534 13.5826 10.3223C13.7741 10.0968 13.8536 9.95557 13.8922 9.83699C13.9818 9.56097 13.9818 9.26351 13.8922 8.98738C13.8537 8.86883 13.7741 8.72757 13.5826 8.50203C13.3864 8.27097 13.1107 7.99501 12.7076 7.59187L7.59529 2.47859C7.344 2.2273 7.28686 2.17649 7.23006 2.14168V2.1407C7.16687 2.1021 7.09783 2.074 7.02596 2.05672C6.96114 2.04116 6.88475 2.03719 6.52889 2.03719H3.54646C3.16287 2.03719 2.91223 2.03722 2.72127 2.05281C2.53758 2.06782 2.4642 2.09405 2.42439 2.11433C2.29111 2.18224 2.18272 2.29063 2.11482 2.4239C2.09454 2.46372 2.06831 2.5371 2.0533 2.72078C2.03771 2.91174 2.03767 3.16238 2.03767 3.54597V6.5284Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/members-icon.tsx b/packages/propel/src/icons/properties/members-icon.tsx
new file mode 100644
index 00000000000..3627ec3a18e
--- /dev/null
+++ b/packages/propel/src/icons/properties/members-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const MembersPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/overdue-date-icon.tsx b/packages/propel/src/icons/properties/overdue-date-icon.tsx
new file mode 100644
index 00000000000..1c4152c63e3
--- /dev/null
+++ b/packages/propel/src/icons/properties/overdue-date-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const OverdueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/parent-icon.tsx b/packages/propel/src/icons/properties/parent-icon.tsx
new file mode 100644
index 00000000000..1104f248172
--- /dev/null
+++ b/packages/propel/src/icons/properties/parent-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ParentPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
+      fill={color}
+    />
+    <path
+      d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
+      fill={color}
+    />
+    <path
+      d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/priority-icon.tsx b/packages/propel/src/icons/properties/priority-icon.tsx
new file mode 100644
index 00000000000..904235557d9
--- /dev/null
+++ b/packages/propel/src/icons/properties/priority-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const PriorityPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/relates-to-icon.tsx b/packages/propel/src/icons/properties/relates-to-icon.tsx
new file mode 100644
index 00000000000..625999e6da6
--- /dev/null
+++ b/packages/propel/src/icons/properties/relates-to-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const RelatesToPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/relation-icon.tsx b/packages/propel/src/icons/properties/relation-icon.tsx
new file mode 100644
index 00000000000..82326b2d04c
--- /dev/null
+++ b/packages/propel/src/icons/properties/relation-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const RelationPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/scope-icon.tsx b/packages/propel/src/icons/properties/scope-icon.tsx
new file mode 100644
index 00000000000..0f66ee10a58
--- /dev/null
+++ b/packages/propel/src/icons/properties/scope-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const ScopePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M8.00049 0.708008C12.0274 0.708184 15.2915 3.97303 15.2915 8C15.2913 12.0268 12.0273 15.2908 8.00049 15.291C3.97352 15.291 0.708672 12.0269 0.708496 8C0.708496 3.97292 3.97341 0.708008 8.00049 0.708008ZM7.37549 4V1.98926C4.53761 2.28073 2.28224 4.53713 1.99072 7.375H4.00049C4.34552 7.37518 4.62549 7.65493 4.62549 8C4.62531 8.34492 4.34541 8.62482 4.00049 8.625H1.99072C2.28252 11.4625 4.53789 13.7173 7.37549 14.0088V12C7.37549 11.6548 7.65531 11.375 8.00049 11.375C8.34552 11.3752 8.62549 11.6549 8.62549 12V14.0078C11.4627 13.716 13.7175 11.4622 14.0093 8.625H12.0005C11.6554 8.625 11.3757 8.34503 11.3755 8C11.3755 7.65482 11.6553 7.375 12.0005 7.375H14.0093C13.7178 4.5374 11.463 2.28203 8.62549 1.99023V4C8.62531 4.34492 8.34541 4.62482 8.00049 4.625C7.65542 4.625 7.37566 4.34503 7.37549 4Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/start-date-icon.tsx b/packages/propel/src/icons/properties/start-date-icon.tsx
new file mode 100644
index 00000000000..28741aecf15
--- /dev/null
+++ b/packages/propel/src/icons/properties/start-date-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const StartDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/state-icon.tsx b/packages/propel/src/icons/properties/state-icon.tsx
new file mode 100644
index 00000000000..fc69eace629
--- /dev/null
+++ b/packages/propel/src/icons/properties/state-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const StatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM11.375 8C11.375 6.13612 9.86383 4.62513 8 4.625C6.13604 4.625 4.625 6.13604 4.625 8C4.625 9.86394 6.13604 11.375 8 11.375C9.86383 11.3749 11.375 9.86386 11.375 8ZM12.625 8C12.625 10.5542 10.5542 12.6249 8 12.625C5.44568 12.625 3.375 10.5543 3.375 8C3.375 5.44568 5.44568 3.375 8 3.375C10.5542 3.37513 12.625 5.44576 12.625 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/user-circle-icon.tsx b/packages/propel/src/icons/properties/user-circle-icon.tsx
new file mode 100644
index 00000000000..06fd6f3eb18
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-circle-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const UserCirclePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95809 9.50928 2.51265 10.8884 3.42773 11.9473C4.03051 11.1928 4.958 10.708 6 10.708H10C11.0413 10.7081 11.9676 11.1926 12.5703 11.9463C13.4854 10.8874 14.0409 9.50932 14.041 8ZM6 11.958C5.31831 11.958 4.71294 12.2919 4.3418 12.8066C5.35728 13.5806 6.62467 14.041 8 14.041C9.37482 14.0409 10.641 13.5801 11.6562 12.8066C11.2851 12.2923 10.6813 11.9581 10 11.958H6ZM10.041 6.33301C10.041 5.20554 9.12741 4.29119 8 4.29102C6.87242 4.29102 5.95801 5.20543 5.95801 6.33301C5.95801 7.46057 6.87242 8.375 8 8.375C9.12741 8.37482 10.041 7.46045 10.041 6.33301ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8ZM11.291 6.33301C11.291 8.15081 9.81776 9.62482 8 9.625C6.18206 9.625 4.70801 8.15091 4.70801 6.33301C4.70801 4.51507 6.18206 3.04102 8 3.04102C9.81776 3.04119 11.291 4.51517 11.291 6.33301Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/user-icon.tsx b/packages/propel/src/icons/properties/user-icon.tsx
new file mode 100644
index 00000000000..d1dd3ca83c0
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-icon.tsx
@@ -0,0 +1,13 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const UserPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/properties/user-square-icon.tsx b/packages/propel/src/icons/properties/user-square-icon.tsx
new file mode 100644
index 00000000000..3e7521f2811
--- /dev/null
+++ b/packages/propel/src/icons/properties/user-square-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M10.0002 10.708C10.5896 10.708 10.9757 10.7052 11.3088 10.7715C12.5974 11.0278 13.6061 12.0256 13.8821 13.3066C13.8849 13.3012 13.8891 13.2965 13.8918 13.291C13.9484 13.1799 13.9927 13.0241 14.0168 12.7295C14.0415 12.4274 14.0413 12.0369 14.0413 11.4668V4.5332C14.0413 3.96299 14.0415 3.57263 14.0168 3.27051C13.9928 2.97585 13.9484 2.82009 13.8918 2.70898C13.76 2.45032 13.5499 2.23925 13.2913 2.10742C13.1802 2.05083 13.0243 2.0075 12.7297 1.9834C12.4277 1.95872 12.0372 1.95801 11.467 1.95801H4.53345C3.9632 1.95801 3.57288 1.95873 3.27075 1.9834C2.97621 2.00746 2.82032 2.05089 2.70923 2.10742C2.45051 2.23925 2.23949 2.45026 2.10767 2.70898C2.05113 2.82008 2.00771 2.97597 1.98364 3.27051C1.95897 3.57263 1.95825 3.96295 1.95825 4.5332V11.4668C1.95825 12.0369 1.95896 12.4274 1.98364 12.7295C2.00774 13.024 2.05108 13.18 2.10767 13.291C2.11038 13.2963 2.11368 13.3014 2.11646 13.3066C2.39233 12.0255 3.40219 11.028 4.69067 10.7715C5.02386 10.7052 5.41066 10.708 6.00024 10.708H10.0002ZM6.00024 11.958C5.35075 11.958 5.11682 11.9609 4.93481 11.9971C4.12495 12.1582 3.49239 12.7917 3.3313 13.6016C3.31156 13.7009 3.30207 13.8175 3.29712 14.0146C3.57489 14.035 3.95859 14.041 4.53345 14.041H11.467C12.0414 14.041 12.4247 14.035 12.7024 14.0146C12.6974 13.8176 12.6889 13.7008 12.6692 13.6016C12.5081 12.7917 11.8746 12.1582 11.0647 11.9971C10.8828 11.9609 10.6492 11.958 10.0002 11.958H6.00024ZM10.0413 6.33301C10.0413 5.20554 9.12768 4.29119 8.00024 4.29102C6.87266 4.29102 5.95825 5.20543 5.95825 6.33301C5.95825 7.46059 6.87266 8.375 8.00024 8.375C9.12768 8.37482 10.0413 7.46048 10.0413 6.33301ZM11.2913 6.33301C11.2913 8.15084 9.81803 9.62482 8.00024 9.625C6.18231 9.625 4.70825 8.15095 4.70825 6.33301C4.70825 4.51507 6.18231 3.04102 8.00024 3.04102C9.81803 3.04119 11.2913 4.51518 11.2913 6.33301ZM15.2913 11.4668C15.2913 12.0163 15.2918 12.4663 15.262 12.8311C15.2315 13.2031 15.1665 13.5418 15.0051 13.8584C14.7535 14.352 14.3522 14.7533 13.8586 15.0049C13.7479 15.0613 13.6335 15.1066 13.5149 15.1426C13.0021 15.2979 12.3428 15.291 11.467 15.291H4.53345C3.65757 15.291 2.99845 15.2979 2.4856 15.1426C2.36691 15.1066 2.25269 15.0614 2.14185 15.0049C1.64801 14.7533 1.24606 14.3522 0.994385 13.8584C0.833048 13.5418 0.767963 13.2031 0.737549 12.8311C0.707748 12.4663 0.708252 12.0163 0.708253 11.4668V4.5332C0.708253 3.98368 0.707775 3.53373 0.737549 3.16895C0.767948 2.79689 0.833107 2.45824 0.994385 2.1416C1.24605 1.64768 1.64792 1.24581 2.14185 0.994141C2.45848 0.832863 2.79713 0.767704 3.16919 0.737305C3.53397 0.70753 3.98392 0.708008 4.53345 0.708008H11.467C12.0166 0.708008 12.4665 0.707503 12.8313 0.737305C13.2034 0.767719 13.542 0.832804 13.8586 0.994141C14.3524 1.24582 14.7535 1.64777 15.0051 2.1416C15.1665 2.45827 15.2316 2.79683 15.262 3.16895C15.2917 3.53373 15.2913 3.98367 15.2913 4.5332V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/properties/workflows-icon.tsx b/packages/propel/src/icons/properties/workflows-icon.tsx
new file mode 100644
index 00000000000..ed3a2b6bdb5
--- /dev/null
+++ b/packages/propel/src/icons/properties/workflows-icon.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
+
+export const WorkflowsPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
+    <path
+      d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
+      fill={color}
+    />
+    <path
+      d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
+      fill={color}
+    />
+    <path
+      d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
+      fill={color}
+    />
+  </IconWrapper>
+);
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
new file mode 100644
index 00000000000..5bff8585058
--- /dev/null
+++ b/packages/propel/src/icons/registry.ts
@@ -0,0 +1,115 @@
+import { AddIcon } from "./actions/add-icon";
+import { DefaultIcon } from "./default-icon";
+import { BoardLayoutIcon } from "./layouts/board-icon";
+import { CalendarLayoutIcon } from "./layouts/calendar-icon";
+import { CardLayoutIcon } from "./layouts/card-icon";
+import { GridLayoutIcon } from "./layouts/grid-icon";
+import { ListLayoutIcon } from "./layouts/list-icon";
+import { SheetLayoutIcon } from "./layouts/sheet-icon";
+import { TimelineLayoutIcon } from "./layouts/timeline-icon";
+import { CycleIcon } from "./project/cycle-icon";
+import { EpicIcon } from "./project/epic-icon";
+import { IntakeIcon } from "./project/intake-icon";
+import { ModuleIcon } from "./project/module-icon";
+import { PageIcon } from "./project/page-icon";
+import { ViewsIcon } from "./project/view-icon";
+import { WorkItemsIcon } from "./project/work-items-icon";
+import { BooleanPropertyIcon } from "./properties/boolean-icon";
+import { DropdownPropertyIcon } from "./properties/dropdown-icon";
+import { DueDatePropertyIcon } from "./properties/due-date-icon";
+import { DuplicatePropertyIcon } from "./properties/duplicate-icon";
+import { EstimatePropertyIcon } from "./properties/estimate-icon";
+import { HashPropertyIcon } from "./properties/hash-icon";
+import { LabelPropertyIcon } from "./properties/label-icon";
+import { MembersPropertyIcon } from "./properties/members-icon";
+import { OverdueDatePropertyIcon } from "./properties/overdue-date-icon";
+import { ParentPropertyIcon } from "./properties/parent-icon";
+import { PriorityPropertyIcon } from "./properties/priority-icon";
+import { RelatesToPropertyIcon } from "./properties/relates-to-icon";
+import { RelationPropertyIcon } from "./properties/relation-icon";
+import { ScopePropertyIcon } from "./properties/scope-icon";
+import { StartDatePropertyIcon } from "./properties/start-date-icon";
+import { StatePropertyIcon } from "./properties/state-icon";
+import { UserCirclePropertyIcon } from "./properties/user-circle-icon";
+import { UserPropertyIcon } from "./properties/user-icon";
+import { UserSquarePropertyIcon } from "./properties/user-square-icon";
+import { WorkflowsPropertyIcon } from "./properties/workflows-icon";
+import { PiChatLogo } from "./sub-brand/pi-chat";
+import { PlaneNewIcon } from "./sub-brand/plane-icon";
+import { WikiIcon } from "./sub-brand/wiki-icon";
+import { AnalyticsIcon } from "./workspace/analytics-icon";
+import { ArchiveIcon } from "./workspace/archive-icon";
+import { DashboardIcon } from "./workspace/dashboard-icon";
+import { DraftIcon } from "./workspace/draft-icon";
+import { HomeIcon } from "./workspace/home-icon";
+import { InboxIcon } from "./workspace/inbox-icon";
+import { ProjectIcon } from "./workspace/project-icon";
+import { YourWorkIcon } from "./workspace/your-work-icon";
+
+export const ICON_REGISTRY = {
+  // Sub-brand icons
+  "sub-brand.plane": PlaneNewIcon,
+  "sub-brand.wiki": WikiIcon,
+  "sub-brand.pi-chat": PiChatLogo,
+
+  // Workspace icons
+  "workspace.analytics": AnalyticsIcon,
+  "workspace.archive": ArchiveIcon,
+  "workspace.cycle": CycleIcon,
+  "workspace.dashboard": DashboardIcon,
+  "workspace.draft": DraftIcon,
+  "workspace.home": HomeIcon,
+  "workspace.inbox": InboxIcon,
+  "workspace.page": PageIcon,
+  "workspace.project": ProjectIcon,
+  "workspace.views": ViewsIcon,
+  "workspace.your-work": YourWorkIcon,
+
+  // Project icons
+  "project.cycle": CycleIcon,
+  "project.epic": EpicIcon,
+  "project.intake": IntakeIcon,
+  "project.module": ModuleIcon,
+  "project.page": PageIcon,
+  "project.view": ViewsIcon,
+  "project.work-items": WorkItemsIcon,
+
+  // Layout icons
+  "layout.calendar": CalendarLayoutIcon,
+  "layout.card": CardLayoutIcon,
+  "layout.timeline": TimelineLayoutIcon,
+  "layout.grid": GridLayoutIcon,
+  "layout.board": BoardLayoutIcon,
+  "layout.list": ListLayoutIcon,
+  "layout.sheet": SheetLayoutIcon,
+
+  // Property icons
+  "property.boolean": BooleanPropertyIcon,
+  "property.dropdown": DropdownPropertyIcon,
+  "property.due-date": DueDatePropertyIcon,
+  "property.duplicate": DuplicatePropertyIcon,
+  "property.estimate": EstimatePropertyIcon,
+  "property.hash": HashPropertyIcon,
+  "property.label": LabelPropertyIcon,
+  "property.members": MembersPropertyIcon,
+  "property.overdue-date": OverdueDatePropertyIcon,
+  "property.parent": ParentPropertyIcon,
+  "property.priority": PriorityPropertyIcon,
+  "property.relates-to": RelatesToPropertyIcon,
+  "property.relation": RelationPropertyIcon,
+  "property.scope": ScopePropertyIcon,
+  "property.start-date": StartDatePropertyIcon,
+  "property.state": StatePropertyIcon,
+  "property.user-circle": UserCirclePropertyIcon,
+  "property.user": UserPropertyIcon,
+  "property.user-square": UserSquarePropertyIcon,
+  "property.workflows": WorkflowsPropertyIcon,
+
+  // Action icons
+  "action.add": AddIcon,
+
+  // Default fallback
+  default: DefaultIcon,
+} as const;
+
+export type IconName = keyof typeof ICON_REGISTRY;
diff --git a/packages/propel/src/icons/sub-brand/index.ts b/packages/propel/src/icons/sub-brand/index.ts
new file mode 100644
index 00000000000..7a0d0cefb08
--- /dev/null
+++ b/packages/propel/src/icons/sub-brand/index.ts
@@ -0,0 +1,3 @@
+export * from "./pi-chat";
+export * from "./plane-icon";
+export * from "./wiki-icon";
diff --git a/packages/propel/src/icons/pi-chat.tsx b/packages/propel/src/icons/sub-brand/pi-chat.tsx
similarity index 82%
rename from packages/propel/src/icons/pi-chat.tsx
rename to packages/propel/src/icons/sub-brand/pi-chat.tsx
index e2e49a28f38..1f947706649 100644
--- a/packages/propel/src/icons/pi-chat.tsx
+++ b/packages/propel/src/icons/sub-brand/pi-chat.tsx
@@ -1,21 +1,15 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const PiChatLogo: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
+export const PiChatLogo: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} viewBox="0 0 24 24" {...rest}>
     <path d="M5.25 4.5C5.25 3.67157 5.92157 3 6.75 3H11.25V21H5.25V4.5Z" fill={color} />
     <path d="M12 3H16.5C17.3284 3 18 3.67157 18 4.5V13.5H12V3Z" fill={color} />
     <path
       d="M14.6782 18.8062C14.648 18.6894 14.5871 18.5828 14.5019 18.4975C14.4166 18.4123 14.31 18.3514 14.1932 18.3212L12.1227 17.7873C12.0873 17.7773 12.0563 17.756 12.0341 17.7267C12.012 17.6974 12 17.6617 12 17.625C12 17.5883 12.012 17.5526 12.0341 17.5233C12.0563 17.494 12.0873 17.4727 12.1227 17.4627L14.1932 16.9284C14.3099 16.8983 14.4165 16.8375 14.5018 16.7523C14.5871 16.667 14.648 16.5605 14.6782 16.4438L15.2121 14.3733C15.222 14.3378 15.2432 14.3066 15.2726 14.2843C15.3019 14.262 15.3377 14.25 15.3746 14.25C15.4114 14.25 15.4472 14.262 15.4765 14.2843C15.5059 14.3066 15.5271 14.3378 15.5371 14.3733L16.0706 16.4438C16.1008 16.5606 16.1616 16.6672 16.2469 16.7525C16.3322 16.8377 16.4388 16.8986 16.5556 16.9288L18.6261 17.4623C18.6617 17.4721 18.6931 17.4934 18.7155 17.5228C18.7379 17.5522 18.75 17.5881 18.75 17.625C18.75 17.6619 18.7379 17.6978 18.7155 17.7272C18.6931 17.7566 18.6617 17.7778 18.6261 17.7877L16.5556 18.3212C16.4388 18.3514 16.3322 18.4123 16.2469 18.4975C16.1616 18.5828 16.1008 18.6894 16.0706 18.8062L15.5367 20.8767C15.5268 20.9122 15.5056 20.9434 15.4762 20.9657C15.4469 20.988 15.4111 21 15.3742 21C15.3374 21 15.3016 20.988 15.2722 20.9657C15.2429 20.9434 15.2217 20.9122 15.2117 20.8767L14.6782 18.8062Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/plane-icon.tsx b/packages/propel/src/icons/sub-brand/plane-icon.tsx
similarity index 54%
rename from packages/propel/src/icons/plane-icon.tsx
rename to packages/propel/src/icons/sub-brand/plane-icon.tsx
index 113d2dfd041..e645dedf7a0 100644
--- a/packages/propel/src/icons/plane-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/plane-icon.tsx
@@ -1,22 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const PlaneNewIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className,
-  color = "currentColor",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_888_35560)">
+export const PlaneNewIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z"
         fill={color}
@@ -25,11 +16,6 @@ export const PlaneNewIcon: React.FC<ISvgIcons> = ({
         d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_888_35560">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/wiki-icon.tsx b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
similarity index 54%
rename from packages/propel/src/icons/wiki-icon.tsx
rename to packages/propel/src/icons/sub-brand/wiki-icon.tsx
index 5a3b992c7f6..8d534dc0d80 100644
--- a/packages/propel/src/icons/wiki-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
@@ -1,26 +1,17 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const WikiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_888_35566)">
+export const WikiIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
       <path
         d="M15.558 6.93332L9.06623 0.441504C8.47755 -0.147168 7.5229 -0.147168 6.93332 0.441504L0.441504 6.93332C-0.147168 7.52199 -0.147168 8.47664 0.441504 9.06623L6.93332 15.558C7.52199 16.1467 8.47664 16.1467 9.06623 15.558L15.558 9.06623C16.1467 8.47755 16.1467 7.5229 15.558 6.93332ZM10.7629 9.65855C10.7629 10.2682 10.2691 10.762 9.65946 10.762H6.341C5.73133 10.762 5.23758 10.2682 5.23758 9.65855V6.34008C5.23758 5.73042 5.73133 5.23667 6.341 5.23667H9.65946C10.2691 5.23667 10.7629 5.73042 10.7629 6.34008V9.65855Z"
         fill={color}
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_888_35566">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+    </IconWrapper>
+  );
+};
diff --git a/packages/propel/src/icons/work-items-icon.tsx b/packages/propel/src/icons/work-items-icon.tsx
deleted file mode 100644
index f07145b3350..00000000000
--- a/packages/propel/src/icons/work-items-icon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const WorkItemsIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <path
-      d="M13.0098 6.04785C13.2265 5.96229 13.4708 5.99175 13.6621 6.12695C13.8534 6.26216 13.9678 6.48597 13.9678 6.72461L13.9639 11.7979C13.9637 12.0975 13.7837 12.366 13.5117 12.4736L8.93457 14.2852C8.7181 14.3706 8.47444 14.3409 8.2832 14.2061C8.09177 14.0709 7.97754 13.8472 7.97754 13.6084V8.53613C7.97754 8.23632 8.15654 7.96701 8.42871 7.85938L13.0098 6.04785ZM9.38672 9.03418V12.5527L12.5547 11.2998L12.5566 7.78027L9.38672 9.03418ZM9.88672 3.89062C10.1043 3.80456 10.3493 3.83523 10.541 3.97168C10.7327 4.10817 10.8465 4.33351 10.8447 4.57324L10.8389 5.30859C10.8357 5.70864 10.518 6.03044 10.1289 6.02734C9.84472 6.02507 9.60081 5.8496 9.49121 5.59961L6.26367 6.87695V10.377C6.49946 10.3943 6.72145 10.5334 6.83887 10.7646C7.01886 11.1194 6.88504 11.557 6.54004 11.7422L5.88574 12.0938C5.66742 12.2109 5.40503 12.2024 5.19434 12.0713C4.98357 11.94 4.85449 11.7046 4.85449 11.4512V6.37891C4.85449 6.07909 5.03447 5.80979 5.30664 5.70215L9.88672 3.89062ZM7.06738 1.71582C7.28499 1.62976 7.52999 1.66042 7.72168 1.79688C7.91338 1.93337 8.02721 2.1587 8.02539 2.39844L8.01953 3.13379C8.01635 3.53383 7.69869 3.85564 7.30957 3.85254C7.02539 3.85026 6.78148 3.67479 6.67188 3.4248L3.44434 4.70215V8.20215C3.68013 8.21954 3.90211 8.35857 4.01953 8.58984C4.19952 8.94458 4.06571 9.38222 3.7207 9.56738L3.06641 9.91895C2.84808 10.0361 2.58569 10.0276 2.375 9.89648C2.16423 9.76516 2.03516 9.52975 2.03516 9.27637V4.2041C2.03516 3.90428 2.21513 3.63498 2.4873 3.52734L7.06738 1.71582Z"
-      fill={color}
-    />
-  </svg>
-);
diff --git a/packages/propel/src/icons/analytics-icon.tsx b/packages/propel/src/icons/workspace/analytics-icon.tsx
similarity index 87%
rename from packages/propel/src/icons/analytics-icon.tsx
rename to packages/propel/src/icons/workspace/analytics-icon.tsx
index 4e1f6502328..d0be0ebb3de 100644
--- a/packages/propel/src/icons/analytics-icon.tsx
+++ b/packages/propel/src/icons/workspace/analytics-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const AnalyticsIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const AnalyticsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/archive-icon.tsx b/packages/propel/src/icons/workspace/archive-icon.tsx
similarity index 89%
rename from packages/propel/src/icons/archive-icon.tsx
rename to packages/propel/src/icons/workspace/archive-icon.tsx
index b83ce69a85c..1d359d3601e 100644
--- a/packages/propel/src/icons/archive-icon.tsx
+++ b/packages/propel/src/icons/workspace/archive-icon.tsx
@@ -1,12 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", color = "currentColor", ...rest }) => (
-  <svg viewBox="0 0 16 16" className={`${className} stroke-2`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+export const ArchiveIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/dashboard-icon.tsx b/packages/propel/src/icons/workspace/dashboard-icon.tsx
similarity index 86%
rename from packages/propel/src/icons/dashboard-icon.tsx
rename to packages/propel/src/icons/workspace/dashboard-icon.tsx
index a451d798405..fab6d145b33 100644
--- a/packages/propel/src/icons/dashboard-icon.tsx
+++ b/packages/propel/src/icons/workspace/dashboard-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const DashboardIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const DashboardIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/draft-icon.tsx b/packages/propel/src/icons/workspace/draft-icon.tsx
similarity index 82%
rename from packages/propel/src/icons/draft-icon.tsx
rename to packages/propel/src/icons/workspace/draft-icon.tsx
index d821fa358c8..bec049e6baa 100644
--- a/packages/propel/src/icons/draft-icon.tsx
+++ b/packages/propel/src/icons/workspace/draft-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const DraftIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const DraftIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/home-icon.tsx b/packages/propel/src/icons/workspace/home-icon.tsx
similarity index 91%
rename from packages/propel/src/icons/home-icon.tsx
rename to packages/propel/src/icons/workspace/home-icon.tsx
index dfcd1a18212..cfc3c06f57f 100644
--- a/packages/propel/src/icons/home-icon.tsx
+++ b/packages/propel/src/icons/workspace/home-icon.tsx
@@ -1,19 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const HomeIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
+export const HomeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/inbox-icon.tsx b/packages/propel/src/icons/workspace/inbox-icon.tsx
similarity index 88%
rename from packages/propel/src/icons/inbox-icon.tsx
rename to packages/propel/src/icons/workspace/inbox-icon.tsx
index e6a1c20eb94..c4a6151b43c 100644
--- a/packages/propel/src/icons/inbox-icon.tsx
+++ b/packages/propel/src/icons/workspace/inbox-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const InboxIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className,
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const InboxIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/workspace/index.ts b/packages/propel/src/icons/workspace/index.ts
new file mode 100644
index 00000000000..dd1b8a05991
--- /dev/null
+++ b/packages/propel/src/icons/workspace/index.ts
@@ -0,0 +1,8 @@
+export * from "./analytics-icon";
+export * from "./archive-icon";
+export * from "./dashboard-icon";
+export * from "./draft-icon";
+export * from "./home-icon";
+export * from "./inbox-icon";
+export * from "./project-icon";
+export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/project-icon.tsx b/packages/propel/src/icons/workspace/project-icon.tsx
similarity index 91%
rename from packages/propel/src/icons/project-icon.tsx
rename to packages/propel/src/icons/workspace/project-icon.tsx
index 8a9ad6280d3..357f0333933 100644
--- a/packages/propel/src/icons/project-icon.tsx
+++ b/packages/propel/src/icons/workspace/project-icon.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const ProjectIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const ProjectIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );
diff --git a/packages/propel/src/icons/your-work-icon.tsx b/packages/propel/src/icons/workspace/your-work-icon.tsx
similarity index 81%
rename from packages/propel/src/icons/your-work-icon.tsx
rename to packages/propel/src/icons/workspace/your-work-icon.tsx
index 2f003a2396d..75a2ea79ec0 100644
--- a/packages/propel/src/icons/your-work-icon.tsx
+++ b/packages/propel/src/icons/workspace/your-work-icon.tsx
@@ -1,23 +1,10 @@
 import * as React from "react";
 
-import { ISvgIcons } from "./type";
+import { IconWrapper } from "../icon-wrapper";
+import { ISvgIcons } from "../type";
 
-export const YourWorkIcon: React.FC<ISvgIcons> = ({
-  width = "16",
-  height = "16",
-  className = "text-current",
-  color = "currentColor",
-  ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
+export const YourWorkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
+  <IconWrapper color={color} {...rest}>
     <path
       d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
       fill={color}
@@ -26,5 +13,5 @@ export const YourWorkIcon: React.FC<ISvgIcons> = ({
       d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
       fill={color}
     />
-  </svg>
+  </IconWrapper>
 );