-
+
{t("common.labels")}
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 e4f7f00044..c55669c68d 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) => {
+ const iconProps = {
+ ...props,
+ ...(size && { width: size, height: size }),
+ };
+
switch (layout) {
case EIssueLayoutTypes.LIST:
- return
;
+ return ;
case EIssueLayoutTypes.KANBAN:
- return ;
+ return ;
case EIssueLayoutTypes.CALENDAR:
- return ;
+ return ;
case EIssueLayoutTypes.SPREADSHEET:
- return ;
+ return ;
case EIssueLayoutTypes.GANTT:
- return ;
+ return ;
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 0a5f0a392f..a61d6ccf42 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 = observer((props) => {
onChange={handleStartDate}
maxDate={maxDate}
placeholder={t("common.order_by.start_date")}
- icon={}
+ icon={}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
disabled={isReadOnly}
@@ -346,7 +346,7 @@ export const IssueProperties: React.FC = observer((props) => {
onChange={handleTargetDate}
minDate={minDate}
placeholder={t("common.order_by.due_date")}
- icon={}
+ icon={}
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 eb02435e09..ecb856a0cd 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 = observer((pro
fullWidth && "w-full"
)}
>
-
+
{placeholderText}
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 1d793c3209..087e349b6b 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
= observer((props: Props)
}}
disabled={disabled}
placeholder="Due date"
- icon={}
+ icon={}
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 f1c35a4b57..bcdc01a1df 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 = observer((props: Prop
}}
disabled={disabled}
placeholder="Start date"
- icon={}
+ icon={}
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 f7bba82d30..e9def41c6f 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 = 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)}
>
-
+
{t("add_parent")}
)}
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index bd6a727ea0..34f5265dc2 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 = observer((pro
{/* state */}
-
+
{t("common.state")}
= observer((pro
{/* assignee */}
-
+
{t("common.assignees")}
= observer((pro
{/* priority */}
-
+
{t("common.priority")}
-
+
{t("common.created_by")}
@@ -148,7 +159,7 @@ export const PeekOverviewProperties: FC
= observer((pro
{/* start date */}
-
+
{t("common.order_by.start_date")}
= observer((pro
{/* due date */}
-
+
{t("common.order_by.due_date")}
= observer((pro
{isEstimateEnabled && (
-
+
{t("common.estimate")}
= observer((pro
{/* parent */}
= observer((pro
{/* label */}
-
+
{t("common.labels")}
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index eb0bb02c78..a81eebcd91 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 =
buttonClassName
)}
>
-
+
{t("labels")}
)}
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 04ca1b82d4..e931bd25c6 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
= observer((props)
onChange={handleStartDate}
maxDate={maxDate}
placeholder="Start date"
- icon={}
+ icon={}
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
optionsClassName="z-10"
renderByDefault={isMobile}
@@ -192,7 +192,7 @@ export const DraftIssueProperties: React.FC = observer((props)
onChange={handleTargetDate}
minDate={minDate}
placeholder="Due date"
- icon={}
+ icon={}
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 fa47aa146c..5e33b6e438 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 = observer((props) => {
-
+
{t("date_range")}
@@ -371,7 +371,7 @@ export const ModuleAnalyticsSidebar: React.FC
= observer((props) => {
-
+
{t("members")}
= (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 = (props) => {
<>
{withContainer ? (
-
+
) : (
-
+
)}
);
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index e93f557b7a..e89fe2f7be 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 = ({ control, error, tabIndex }
{value ? (
) : (
-
+
)}
{(selectedValue && t(selectedValue?.i18n_label)) ?? (
Status
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 90d18409b6..83e6cf6dd8 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 = ({ control, submitChanges, w
return (
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 5998b9a7a4..13bb3c8d85 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
= ({ 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 ea71ce3d59..e67ee74088 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 = observer((prop
return (
- {!hideIcon && }
+ {!hideIcon && }
{displayValue ?? placeholder ?? t("common.none")}
);
diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts
index 665fa930ad..e19a752b2f 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 13d87f3d38..c7e0a1c0fb 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 = ({
- width = "16",
- height = "16",
- className = "text-current",
- color = "currentColor",
- ...rest
-}) => (
-
-);
+
+ );
+};
diff --git a/packages/propel/src/icons/actions/index.ts b/packages/propel/src/icons/actions/index.ts
new file mode 100644
index 0000000000..0ef51f7211
--- /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 0000000000..4dc86d08d0
--- /dev/null
+++ b/packages/propel/src/icons/constants.tsx
@@ -0,0 +1,62 @@
+import { Icon } from "./icon";
+export const ActionsIconsMap = [{ icon: , title: "AddIcon" }];
+
+export const WorkspaceIconsMap = [
+ { icon: , title: "AnalyticsIcon" },
+ { icon: , title: "ArchiveIcon" },
+ { icon: , title: "DashboardIcon" },
+ { icon: , title: "DraftIcon" },
+ { icon: , title: "HomeIcon" },
+ { icon: , title: "InboxIcon" },
+ { icon: , title: "ProjectIcon" },
+ { icon: , title: "YourWorkIcon" },
+];
+
+export const ProjectIconsMap = [
+ { icon: , title: "CycleIcon" },
+ { icon: , title: "EpicIcon" },
+ { icon: , title: "IntakeIcon" },
+ { icon: , title: "ModuleIcon" },
+ { icon: , title: "PageIcon" },
+ { icon: , title: "ViewIcon" },
+ { icon: , title: "WorkItemsIcon" },
+];
+
+export const SubBrandIconsMap = [
+ { icon: , title: "PiChatLogo" },
+ { icon: , title: "PlaneIcon" },
+ { icon: , title: "WikiIcon" },
+];
+
+export const LayoutIconsMap = [
+ { icon: , title: "CalendarLayoutIcon" },
+ { icon: , title: "CardLayoutIcon" },
+ { icon: , title: "TimelineLayoutIcon" },
+ { icon: , title: "GridLayoutIcon" },
+ { icon: , title: "BoardLayoutIcon" },
+ { icon: , title: "ListLayoutIcon" },
+ { icon: , title: "SheetLayoutIcon" },
+];
+
+export const PropertyIconsMap = [
+ { icon: , title: "BooleanPropertyIcon" },
+ { icon: , title: "DropdownPropertyIcon" },
+ { icon: , title: "DueDatePropertyIcon" },
+ { icon: , title: "DuplicatePropertyIcon" },
+ { icon: , title: "EstimatePropertyIcon" },
+ { icon: , title: "HashPropertyIcon" },
+ { icon: , title: "LabelPropertyIcon" },
+ { icon: , title: "MembersPropertyIcon" },
+ { icon: , title: "OverdueDatePropertyIcon" },
+ { icon: , title: "ParentPropertyIcon" },
+ { icon: , title: "PriorityPropertyIcon" },
+ { icon: , title: "RelatesToPropertyIcon" },
+ { icon: , title: "RelationPropertyIcon" },
+ { icon: , title: "ScopePropertyIcon" },
+ { icon: , title: "StartDatePropertyIcon" },
+ { icon: , title: "StatePropertyIcon" },
+ { icon: , title: "UserCirclePropertyIcon" },
+ { icon: , title: "UserPropertyIcon" },
+ { icon: , title: "UserSquarePropertyIcon" },
+ { icon: , 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 6062ac36ea..6e095d6f0a 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 0000000000..cf1fbed943
--- /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 = ({ color = "currentColor", ...rest }) => (
+
+
+
+);
diff --git a/packages/propel/src/icons/epic-icon.tsx b/packages/propel/src/icons/epic-icon.tsx
deleted file mode 100644
index c78a98261b..0000000000
--- 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 = ({ width = "16", height = "16", className }) => (
-
-);
diff --git a/packages/propel/src/icons/helpers.ts b/packages/propel/src/icons/helpers.ts
new file mode 100644
index 0000000000..0cf0bf64b3
--- /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 0000000000..fb6123353b
--- /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 = ({
+ width = "16",
+ height = "16",
+ className = "text-current",
+ children,
+ clipPathId,
+ viewBox = "0 0 16 16",
+ ...rest
+}) => (
+
+);
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
new file mode 100644
index 0000000000..68bc0e3494
--- /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 {
+ name: IconName;
+}
+
+export const Icon: React.FC = ({ name, ...props }) => {
+ const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
+ return ;
+};
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
new file mode 100644
index 0000000000..4bab5581c7
--- /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: () => (
+
+
+
Sub-Brand Icons
+
+ {SubBrandIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Workspace Icons
+
+ {WorkspaceIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Project Icons
+
+ {ProjectIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Layout Icons
+
+ {LayoutIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Property Icons
+
+ {PropertyIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Actions Icons
+
+ {ActionsIconsMap.map((item) => (
+
+
{item.icon}
+
{item.title}
+
+ ))}
+
+
+
+
+
Registry-Based Usage
+
+ Use the Icon component with{" "}
+ name prop for dynamic icon selection.
+
+
+
+
+
+
Direct Import Usage
+
+ Import icon components directly for better tree-shaking and type safety.
+
+
+
+
+
+
Icon Sizes
+
+ Icons can be rendered in different sizes using width and height props.
+
+
+
+
+