refactor: migrate space icons to @makeplane/propel

Replace confirmed icon symbols in apps/space with their audited @makeplane/propel/icons targets. Unresolved symbols (StateGroupIcon, PriorityIcon, PlaneLockup, PlaneLogo, Circle, CircleDashed, SignalHigh) stay on their existing imports. Propel icons paint with fill rather than stroke, so stroke-placeholder classes become text-placeholder to preserve the rendered color. Lucide size props become explicit width/height, and one chevron gains an explicit height because Propel defaults to 1em where the legacy IconWrapper defaulted to 16. CycleGroupIcon is deliberately not migrated: it dispatches a different glyph and color per cycle status, which CyclesOutline cannot express.
2026-09-02 03:59:00 +02:00 · 2026-09-01 18:13:15 +05:30
parent fd68e7d919
commit efb433ddfe
30 changed files with 111 additions and 100 deletions
--- a/apps/space/components/account/auth-forms/auth-banner.tsx
+++ b/apps/space/components/account/auth-forms/auth-banner.tsx
@@ -4,8 +4,7 @@
 * See the LICENSE file for details.
 */

-import { Info } from "lucide-react";
-import { CloseIcon } from "@plane/propel/icons";
+import { CloseOutline, InfoOutline } from "@makeplane/propel/icons";
 // helpers
 import type { TAuthErrorInfo } from "@/helpers/authentication.helper";

@@ -21,14 +20,14 @@ export function AuthBanner(props: TAuthBanner) {
  return (
    <div className="relative flex items-center gap-2 rounded-md border border-accent-strong/50 bg-accent-primary/10 p-2">
      <div className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center">
-        <Info size={16} className="text-accent-primary" />
+        <InfoOutline width={16} height={16} className="text-accent-primary" />
      </div>
      <div className="w-full text-13 font-medium text-accent-primary">{bannerData?.message}</div>
      <div
        className="relative ml-auto flex h-6 w-6 cursor-pointer items-center justify-center rounded-xs text-accent-primary/80 transition-all hover:bg-accent-primary/20"
        onClick={() => handleBannerData && handleBannerData(undefined)}
      >
-        <CloseIcon className="h-4 w-4 flex-shrink-0" />
+        <CloseOutline className="h-4 w-4 flex-shrink-0" />
      </div>
    </div>
  );
--- a/apps/space/components/account/auth-forms/email.tsx
+++ b/apps/space/components/account/auth-forms/email.tsx
@@ -8,7 +8,7 @@ import type { FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
-import { CircleAlert, XCircle } from "lucide-react";
+import { CloseCircleOutline, WarningCircleOutline } from "@makeplane/propel/icons";
 // types
 import { Button } from "@plane/propel/button";
 import type { IEmailCheckData } from "@plane/types";
@@ -89,13 +89,13 @@ export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailFo
              }}
              tabIndex={-1}
            >
-              <XCircle className="h-10 w-11 stroke-placeholder px-3 text-11 hover:cursor-pointer" />
+              <CloseCircleOutline className="h-10 w-11 px-3 text-11 text-placeholder hover:cursor-pointer" />
            </button>
          )}
        </div>
        {emailError?.email && !isFocused && (
          <p className="flex items-center gap-1 px-0.5 text-11 text-danger-primary">
-            <CircleAlert height={12} width={12} />
+            <WarningCircleOutline height={12} width={12} />
            {emailError.email}
          </p>
        )}
--- a/apps/space/components/account/auth-forms/password.tsx
+++ b/apps/space/components/account/auth-forms/password.tsx
@@ -6,7 +6,7 @@

 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { Eye, EyeOff, XCircle } from "lucide-react";
+import { CloseCircleOutline, HideOutline, ShowOutline } from "@makeplane/propel/icons";
 // plane imports
 import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -137,8 +137,8 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
            disabled
          />
          {passwordFormData.email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+            <CloseCircleOutline
+              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
              onClick={handleEmailClear}
            />
          )}
@@ -163,13 +163,13 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
            autoFocus
          />
          {showPassword?.password ? (
-            <EyeOff
-              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+            <HideOutline
+              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
              onClick={() => handleShowPassword("password")}
            />
          ) : (
-            <Eye
-              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+            <ShowOutline
+              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
              onClick={() => handleShowPassword("password")}
            />
          )}
@@ -195,13 +195,13 @@ export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props)
              autoComplete="off"
            />
            {showPassword?.retypePassword ? (
-              <EyeOff
-                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              <HideOutline
+                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
                onClick={() => handleShowPassword("retypePassword")}
              />
            ) : (
-              <Eye
-                className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+              <ShowOutline
+                className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
                onClick={() => handleShowPassword("retypePassword")}
              />
            )}
--- a/apps/space/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/components/account/auth-forms/unique-code.tsx
@@ -5,7 +5,7 @@
 */

 import React, { useEffect, useState } from "react";
-import { CircleCheck, XCircle } from "lucide-react";
+import { CloseCircleOutline, TickCircleOutline } from "@makeplane/propel/icons";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -102,8 +102,8 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
            disabled
          />
          {uniqueCodeFormData.email.length > 0 && (
-            <XCircle
-              className="absolute right-3 h-5 w-5 stroke-placeholder hover:cursor-pointer"
+            <CloseCircleOutline
+              className="absolute right-3 h-5 w-5 text-placeholder hover:cursor-pointer"
              onClick={handleEmailClear}
            />
          )}
@@ -125,7 +125,7 @@ export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
        />
        <div className="flex w-full items-center justify-between px-1 pt-1 text-11">
          <p className="flex items-center gap-1 font-medium text-success-primary">
-            <CircleCheck height={12} width={12} />
+            <TickCircleOutline height={12} width={12} />
            Paste the code sent to your email
          </p>
          <button
--- a/apps/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -6,7 +6,7 @@

 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { CloseIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
 // types
 import type { TFilters } from "@/types/issue";
 // components
@@ -59,7 +59,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
                className="grid place-items-center text-tertiary hover:text-secondary"
                onClick={() => handleRemoveFilter(filterKey, null)}
              >
-                <CloseIcon height={12} width={12} strokeWidth={2} />
+                <CloseOutline height={12} width={12} strokeWidth={2} />
              </button>
            </div>
          </div>
@@ -71,7 +71,7 @@ export const AppliedFiltersList = observer(function AppliedFiltersList(props: Pr
        className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1 text-11 text-tertiary hover:text-secondary"
      >
        {t("common.clear_all")}
-        <CloseIcon height={12} width={12} strokeWidth={2} />
+        <CloseOutline height={12} width={12} strokeWidth={2} />
      </button>
    </div>
  );
--- a/apps/space/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/components/issues/filters/applied-filters/label.tsx
@@ -4,7 +4,7 @@
 * See the LICENSE file for details.
 */

-import { CloseIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
 // types
 import type { IIssueLabel } from "@/types/issue";

@@ -38,7 +38,7 @@ export function AppliedLabelsFilters(props: Props) {
              className="grid place-items-center text-tertiary hover:text-secondary"
              onClick={() => handleRemove(labelId)}
            >
-              <CloseIcon height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} strokeWidth={2} />
            </button>
          </div>
        );
--- a/apps/space/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/components/issues/filters/applied-filters/priority.tsx
@@ -4,7 +4,8 @@
 * See the LICENSE file for details.
 */

-import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
 import type { TIssuePriorities } from "@plane/propel/icons";

 type Props = {
@@ -26,7 +27,7 @@ export function AppliedPriorityFilters(props: Props) {
            className="grid place-items-center text-tertiary hover:text-secondary"
            onClick={() => handleRemove(priority)}
          >
-            <CloseIcon height={10} width={10} strokeWidth={2} />
+            <CloseOutline height={10} width={10} strokeWidth={2} />
          </button>
        </div>
      ))}
--- a/apps/space/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/components/issues/filters/applied-filters/state.tsx
@@ -7,7 +7,8 @@
 import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
-import { CloseIcon, StateGroupIcon } from "@plane/propel/icons";
+import { StateGroupIcon } from "@plane/propel/icons";
+import { CloseOutline } from "@makeplane/propel/icons";
 // hooks
 import { useStates } from "@/hooks/store/use-state";

@@ -37,7 +38,7 @@ export const AppliedStateFilters = observer(function AppliedStateFilters(props:
              className="grid place-items-center text-tertiary hover:text-secondary"
              onClick={() => handleRemove(stateId)}
            >
-              <CloseIcon height={10} width={10} strokeWidth={2} />
+              <CloseOutline height={10} width={10} strokeWidth={2} />
            </button>
          </div>
        );
--- a/apps/space/components/issues/filters/helpers/filter-header.tsx
+++ b/apps/space/components/issues/filters/helpers/filter-header.tsx
@@ -6,7 +6,7 @@

 import React from "react";
 // icons
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";

 interface IFilterHeader {
  title: string;
@@ -23,7 +23,7 @@ export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }
        className="grid h-5 w-5 shrink-0 place-items-center rounded-sm hover:bg-layer-transparent-hover"
        onClick={handleIsPreviewEnabled}
      >
-        {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
+        {isPreviewEnabled ? <ChevronUpOutline height={14} width={14} /> : <ChevronDownOutline height={14} width={14} />}
      </button>
    </div>
  );
--- a/apps/space/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/components/issues/filters/helpers/filter-option.tsx
@@ -6,7 +6,7 @@

 import React from "react";
 // plane imports
-import { CheckIcon } from "@plane/propel/icons";
+import { TickOutline } from "@makeplane/propel/icons";

 type Props = {
  icon?: React.ReactNode;
@@ -30,7 +30,7 @@ export function FilterOption(props: Props) {
          isChecked ? "border-accent-strong bg-accent-primary text-on-color" : "border-strong"
        } ${multiple ? "rounded-xs" : "rounded-full"}`}
      >
-        {isChecked && <CheckIcon width={10} height={10} strokeWidth={3} />}
+        {isChecked && <TickOutline width={10} height={10} strokeWidth={3} />}
      </div>
      <div className="flex items-center gap-2 truncate">
        {icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
--- a/apps/space/components/issues/filters/selection.tsx
+++ b/apps/space/components/issues/filters/selection.tsx
@@ -6,7 +6,7 @@

 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { SearchIcon, CloseIcon } from "@plane/propel/icons";
+import { CloseOutline, SearchOutline } from "@makeplane/propel/icons";
 // types
 import type { IIssueFilterOptions, TIssueFilterKeys } from "@/types/issue";
 // local imports
@@ -30,7 +30,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
    <div className="flex h-full w-full flex-col overflow-hidden">
      <div className="p-2.5 pb-0">
        <div className="flex items-center gap-1.5 rounded-sm border-[0.5px] border-subtle bg-surface-2 px-1.5 py-1 text-11">
-          <SearchIcon className="text-placeholder" width={12} height={12} strokeWidth={2} />
+          <SearchOutline className="text-placeholder" width={12} height={12} strokeWidth={2} />
          <input
            type="text"
            className="w-full bg-surface-2 outline-none placeholder:text-placeholder"
@@ -41,7 +41,7 @@ export const FilterSelection = observer(function FilterSelection(props: Props) {
          />
          {filtersSearchQuery !== "" && (
            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
-              <CloseIcon className="text-tertiary" height={12} width={12} strokeWidth={2} />
+              <CloseOutline className="text-tertiary" height={12} width={12} strokeWidth={2} />
            </button>
          )}
        </div>
--- a/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -6,7 +6,7 @@

 import { observer } from "mobx-react";
 import { Circle } from "lucide-react";
-import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, ChevronUpOutline } from "@makeplane/propel/icons";
 // mobx

 interface IHeaderSubGroupByCard {
@@ -25,7 +25,11 @@ export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props
      onClick={() => toggleExpanded()}
    >
      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs transition-all hover:bg-layer-1">
-        {isExpanded ? <ChevronUpIcon width={14} strokeWidth={2} /> : <ChevronDownIcon width={14} strokeWidth={2} />}
+        {isExpanded ? (
+          <ChevronUpOutline width={14} height={14} strokeWidth={2} />
+        ) : (
+          <ChevronDownOutline width={14} height={14} strokeWidth={2} />
+        )}
      </div>

      <div className="flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center overflow-hidden rounded-xs">
--- a/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/all-properties.tsx
@@ -5,8 +5,7 @@
 */

 import { observer } from "mobx-react";
-import { Paperclip } from "lucide-react";
-import { LinkIcon, ViewsIcon } from "@plane/propel/icons";
+import { AttachOutline, LinkOutline, ViewsOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
@@ -147,7 +146,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
              }
            )}
          >
-            <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <ViewsOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
            <div className="text-11">{issue.sub_issues_count}</div>
          </div>
        </Tooltip>
@@ -161,7 +160,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
      >
        <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <AttachOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
            <div className="text-11">{issue.attachment_count}</div>
          </div>
        </Tooltip>
@@ -175,7 +174,7 @@ export const IssueProperties = observer(function IssueProperties(props: IIssuePr
      >
        <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
          <div className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm border-[0.5px] border-strong px-2.5 py-1">
-            <LinkIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <LinkOutline className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
            <div className="text-11">{issue.link_count}</div>
          </div>
        </Tooltip>
--- a/apps/space/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/cycle.tsx
@@ -6,7 +6,7 @@

 import { observer } from "mobx-react";
 // plane ui
-import { CycleIcon } from "@plane/propel/icons";
+import { CyclesOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -32,7 +32,7 @@ export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shou
        )}
      >
        <div className="flex w-full items-center gap-1.5 text-11">
-          <CycleIcon className="h-3 w-3 flex-shrink-0" />
+          <CyclesOutline className="h-3 w-3 flex-shrink-0" />
          <div className="max-w-40 truncate">{cycle?.name ?? "No Cycle"}</div>
        </div>
      </div>
--- a/apps/space/components/issues/issue-layouts/properties/due-date.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/due-date.tsx
@@ -5,7 +5,7 @@
 */

 import { observer } from "mobx-react";
-import { DueDatePropertyIcon } from "@plane/propel/icons";
+import { DueDateOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // helpers
@@ -37,7 +37,7 @@ export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
          "border-[0.5px] border-strong": shouldShowBorder,
        })}
      >
-        <DueDatePropertyIcon className="size-3 flex-shrink-0" />
+        <DueDateOutline className="size-3 flex-shrink-0" />
        {formattedDate ? formattedDate : "No Date"}
      </div>
    </Tooltip>
--- a/apps/space/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/labels.tsx
@@ -5,7 +5,7 @@
 */

 import { observer } from "mobx-react";
-import { LabelPropertyIcon } from "@plane/propel/icons";
+import { LabelsOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 // hooks
@@ -29,7 +29,7 @@ export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, s
        <div
          className={`flex h-full items-center justify-center gap-2 rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11`}
        >
-          <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
+          <LabelsOutline className="h-3.5 w-3.5" strokeWidth={2} />
          {shouldShowLabel && <span>No Labels</span>}
        </div>
      </Tooltip>
--- a/apps/space/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/member.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 // icons
 import type { LucideIcon } from "lucide-react";
-import { MembersPropertyIcon } from "@plane/propel/icons";
+import { MembersOutline } from "@makeplane/propel/icons";
 // plane ui
 import { Avatar, AvatarGroup } from "@plane/ui";
 // plane utils
@@ -56,7 +56,7 @@ export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps)
  return Icon ? (
    <Icon className="h-3 w-3 flex-shrink-0" />
  ) : (
-    <MembersPropertyIcon className="mx-[4px] h-3 w-3 flex-shrink-0" />
+    <MembersOutline className="mx-[4px] h-3 w-3 flex-shrink-0" />
  );
 });

--- a/apps/space/components/issues/issue-layouts/properties/modules.tsx
+++ b/apps/space/components/issues/issue-layouts/properties/modules.tsx
@@ -6,7 +6,7 @@

 import { observer } from "mobx-react";
 // plane ui
-import { ModuleIcon } from "@plane/propel/icons";
+import { ModuleOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -36,7 +36,7 @@ export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds
            })}
          >
            <div className="flex items-center gap-1.5 text-secondary">
-              <ModuleIcon className="h-3 w-3 flex-shrink-0" />
+              <ModuleOutline className="h-3 w-3 flex-shrink-0" />
              <div className="text-11">{modules?.[0]?.name ?? "No Modules"}</div>
            </div>
          </div>
--- a/apps/space/components/issues/issue-layouts/utils.tsx
+++ b/apps/space/components/issues/issue-layouts/utils.tsx
@@ -7,7 +7,8 @@
 import { isNil } from "lodash-es";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
-import { CycleGroupIcon, CycleIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { CyclesOutline, ModuleOutline } from "@makeplane/propel/icons";
 import type {
  GroupByColumnTypes,
  IGroupByColumn,
@@ -79,7 +80,7 @@ const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined
  cycleGroups.push({
    id: "None",
    name: "None",
-    icon: <CycleIcon className="h-3.5 w-3.5" />,
+    icon: <CyclesOutline className="h-3.5 w-3.5" />,
    payload: { cycle_id: null },
  });

@@ -98,14 +99,14 @@ const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | un
      moduleGroups.push({
        id: moduleInfo.id,
        name: moduleInfo.name,
-        icon: <ModuleIcon className="h-3.5 w-3.5" />,
+        icon: <ModuleOutline className="h-3.5 w-3.5" />,
        payload: { module_ids: [moduleInfo.id] },
      });
  }) as any;
  moduleGroups.push({
    id: "None",
    name: "None",
-    icon: <ModuleIcon className="h-3.5 w-3.5" />,
+    icon: <ModuleOutline className="h-3.5 w-3.5" />,
    payload: { module_ids: [] },
  });

--- a/apps/space/components/issues/navbar/layout-icon.tsx
+++ b/apps/space/components/issues/navbar/layout-icon.tsx
@@ -5,7 +5,7 @@
 */

 import type { TIssueLayout } from "@plane/constants";
-import { ListLayoutIcon, BoardLayoutIcon } from "@plane/propel/icons";
+import { BoardOutline, ListOutline } from "@makeplane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";

 export function IssueLayoutIcon({
@@ -20,9 +20,9 @@ export function IssueLayoutIcon({

  switch (layout) {
    case "list":
-      return <ListLayoutIcon {...iconProps} />;
+      return <ListOutline {...iconProps} />;
    case "kanban":
-      return <BoardLayoutIcon {...iconProps} />;
+      return <BoardOutline {...iconProps} />;
    default:
      return null;
  }
--- a/apps/space/components/issues/navbar/root.tsx
+++ b/apps/space/components/issues/navbar/root.tsx
@@ -5,7 +5,7 @@
 */

 import { observer } from "mobx-react";
-import { ProjectIcon } from "@plane/propel/icons";
+import { ProjectsOutline } from "@makeplane/propel/icons";
 // components
 import { ProjectLogo } from "@/components/common/project-logo";
 // store
@@ -32,7 +32,7 @@ export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props)
          </span>
        ) : (
          <span className="grid size-7 shrink-0 place-items-center rounded-sm uppercase">
-            <ProjectIcon className="size-4" />
+            <ProjectsOutline className="size-4" />
          </span>
        )}
        <div className="line-clamp-1 max-w-[300px] overflow-hidden text-16 font-medium">
--- a/apps/space/components/issues/navbar/theme.tsx
+++ b/apps/space/components/issues/navbar/theme.tsx
@@ -7,7 +7,7 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
-import { Moon, Sun } from "lucide-react";
+import { AppearanceOutline, MoonOutline } from "@makeplane/propel/icons";

 export const NavbarTheme = observer(function NavbarTheme() {
  // states
@@ -30,7 +30,11 @@ export const NavbarTheme = observer(function NavbarTheme() {
      onClick={handleTheme}
      className="relative grid size-7 place-items-center rounded-sm bg-layer-transparent text-primary hover:bg-layer-transparent-hover"
    >
-      {appTheme === "light" ? <Moon className="size-3.5 shrink-0" /> : <Sun className="size-3.5 shrink-0" />}
+      {appTheme === "light" ? (
+        <MoonOutline className="size-3.5 shrink-0" />
+      ) : (
+        <AppearanceOutline className="size-3.5 shrink-0" />
+      )}
    </button>
  );
 });
--- a/apps/space/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/components/issues/navbar/user-avatar.tsx
@@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { usePathname, useSearchParams } from "next/navigation";
 import { usePopper } from "react-popper";
-import { LogOut } from "lucide-react";
+import { LogOutOutline } from "@makeplane/propel/icons";
 import { Popover, Transition } from "@headlessui/react";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
@@ -106,7 +106,7 @@ export const UserAvatar = observer(function UserAvatar() {
                        type="submit"
                        className="flex min-w-36 cursor-pointer items-center gap-2 rounded-sm p-2 text-13 whitespace-nowrap hover:bg-layer-transparent-hover"
                      >
-                        <LogOut size={12} className="shrink-0 text-danger-primary" />
+                        <LogOutOutline width={12} height={12} className="shrink-0 text-danger-primary" />
                        <div>Sign out</div>
                      </button>
                    </form>
--- a/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -7,11 +7,10 @@
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { MessageSquare, MoreVertical } from "lucide-react";
+import { ChatOutline, CloseOutline, MoreVerticalOutline, TickOutline } from "@makeplane/propel/icons";
 import { Menu, Transition } from "@headlessui/react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
-import { CheckIcon, CloseIcon } from "@plane/propel/icons";
 import type { TIssuePublicComment } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 // components
@@ -89,7 +88,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
        )}

        <span className="absolute -right-1 -bottom-0.5 rounded-tl-sm bg-layer-1 px-0.5 py-px">
-          <MessageSquare className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
+          <ChatOutline className="size-3 text-secondary" aria-hidden="true" strokeWidth={2} />
        </span>
      </div>
      <div className="min-w-0 flex-1">
@@ -140,14 +139,14 @@ export const CommentCard = observer(function CommentCard(props: Props) {
                disabled={isSubmitting}
                className="group shadow-md rounded-sm border border-success-strong bg-success-primary p-2 duration-300 hover:bg-success-primary"
              >
-                <CheckIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <TickOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
              </button>
              <button
                type="button"
                className="group shadow-md rounded-sm border border-danger-strong bg-danger-primary p-2 duration-300 hover:bg-danger-primary-hover"
                onClick={() => setIsEditing(false)}
              >
-                <CloseIcon className="h-3 w-3 text-on-color" strokeWidth={2} />
+                <CloseOutline className="h-3 w-3 text-on-color" strokeWidth={2} />
              </button>
            </div>
          </form>
@@ -174,7 +173,7 @@ export const CommentCard = observer(function CommentCard(props: Props) {
            onClick={() => {}}
            className="relative grid cursor-pointer place-items-center rounded-sm p-1 text-tertiary outline-none hover:bg-layer-transparent-hover"
          >
-            <MoreVertical className="size-4" strokeWidth={2} />
+            <MoreVerticalOutline className="size-4" strokeWidth={2} />
          </Menu.Button>

          <Transition
--- a/apps/space/components/issues/peek-overview/header.tsx
+++ b/apps/space/components/issues/peek-overview/header.tsx
@@ -6,10 +6,15 @@

 import React from "react";
 import { observer } from "mobx-react";
-import { MoveRight } from "lucide-react";
+import {
+  ArrowNarrowRightOutline,
+  FullScreenPeekOutline,
+  LinkOutline,
+  ModalPeekOutline,
+  SidePeekOutline,
+} from "@makeplane/propel/icons";
 import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { LinkIcon, CenterPanelIcon, FullScreenPanelIcon, SidePanelIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
@@ -29,15 +34,15 @@ const PEEK_MODES: {
  icon: any;
  label: string;
 }[] = [
-  { key: "side", icon: SidePanelIcon, label: "Side Peek" },
+  { key: "side", icon: SidePeekOutline, label: "Side Peek" },
  {
    key: "modal",
-    icon: CenterPanelIcon,
+    icon: ModalPeekOutline,
    label: "Modal",
  },
  {
    key: "full",
-    icon: FullScreenPanelIcon,
+    icon: FullScreenPeekOutline,
    label: "Full Screen",
  },
 ];
@@ -60,7 +65,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
    });
  };

-  const Icon = PEEK_MODES.find((m) => m.key === peekMode)?.icon ?? SidePanelIcon;
+  const Icon = PEEK_MODES.find((m) => m.key === peekMode)?.icon ?? SidePeekOutline;

  return (
    <>
@@ -68,7 +73,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
        <div className="flex items-center gap-4">
          {peekMode === "side" && (
            <button type="button" onClick={handleClose} className="text-tertiary hover:text-secondary">
-              <MoveRight className="size-4" />
+              <ArrowNarrowRightOutline className="size-4" />
            </button>
          )}
          <Listbox
@@ -126,7 +131,7 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
            className="shrink-0 text-tertiary hover:text-secondary focus:outline-none"
            tabIndex={1}
          >
-            <LinkIcon className="h-4 w-4 -rotate-45" />
+            <LinkOutline className="h-4 w-4 -rotate-45" />
          </button>
        )}
      </div>
--- a/apps/space/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/components/issues/peek-overview/issue-activity.tsx
@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { Link } from "react-router";
 import { usePathname } from "next/navigation";
-import { Lock } from "lucide-react";
+import { LockOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Button } from "@plane/propel/button";
 // components
@@ -59,7 +59,7 @@ export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActi
          ) : (
            <div className="mt-4 flex items-center justify-between gap-2 rounded-sm border border-strong bg-layer-2 px-2 py-2.5">
              <p className="flex items-center gap-2 overflow-hidden text-13 break-words text-secondary">
-                <Lock className="size-3 shrink-0" />
+                <LockOutline className="size-3 shrink-0" />
                Sign in to add your comment
              </p>
              <Link to={`/?next_path=${pathname}`}>
--- a/apps/space/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/components/issues/peek-overview/issue-properties.tsx
@@ -6,16 +6,10 @@

 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { LinkIcon } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import {
-  StatePropertyIcon,
-  StateGroupIcon,
-  PriorityPropertyIcon,
-  DueDatePropertyIcon,
-  PriorityIcon,
-} from "@plane/propel/icons";
+import { StateGroupIcon, PriorityIcon } from "@plane/propel/icons";
+import { DueDateOutline, LinkOutline, PriorityOutline, StateOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { cn, getIssuePriorityFilters } from "@plane/utils";
 // helpers
@@ -69,7 +63,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
          </h6>
          <div className="flex items-center gap-2">
            <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <LinkIcon className="size-3.5 shrink-0" />
+              <LinkOutline className="size-3.5 shrink-0" />
            </button>
          </div>
        </div>
@@ -77,7 +71,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
      <div className={`space-y-2 ${mode === "full" ? "pt-3" : ""}`}>
        <div className="flex h-8 items-center gap-3">
          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
-            <StatePropertyIcon className="size-4 flex-shrink-0" />
+            <StateOutline className="size-4 flex-shrink-0" />
            <span>State</span>
          </div>
          <div className="flex w-3/4 items-center gap-1.5 py-0.5 text-13">
@@ -88,7 +82,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr

        <div className="flex h-8 items-center gap-3">
          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
-            <PriorityPropertyIcon className="size-4 flex-shrink-0" />
+            <PriorityOutline className="size-4 flex-shrink-0" />
            <span>Priority</span>
          </div>
          <div className="w-3/4">
@@ -113,7 +107,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr

        <div className="flex h-8 items-center gap-3">
          <div className="flex w-1/4 flex-shrink-0 items-center gap-1 text-13 text-tertiary">
-            <DueDatePropertyIcon className="size-4 flex-shrink-0" />
+            <DueDateOutline className="size-4 flex-shrink-0" />
            <span>Due date</span>
          </div>
          <div>
@@ -123,7 +117,7 @@ export const PeekOverviewIssueProperties = observer(function PeekOverviewIssuePr
                  "text-danger-primary": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
                })}
              >
-                <DueDatePropertyIcon className="size-3" />
+                <DueDateOutline className="size-3" />
                {renderFormattedDate(issueDetails.target_date)}
              </div>
            ) : (
--- a/apps/space/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/components/issues/reactions/issue-vote-reactions.tsx
@@ -5,7 +5,7 @@
 */

 import { useState } from "react";
-import { ArrowDown, ArrowUp } from "lucide-react";
+import { ArrowDownOutline, TopArrowOutline } from "@makeplane/propel/icons";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
@@ -115,7 +115,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
            }
          )}
        >
-          <ArrowUp className="size-3.5 shrink-0" />
+          <TopArrowOutline className="size-3.5 shrink-0" />
          <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
        </button>
      </Tooltip>
@@ -156,7 +156,7 @@ export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
            }
          )}
        >
-          <ArrowDown className="size-3.5 shrink-0" />
+          <ArrowDownOutline className="size-3.5 shrink-0" />
          <span className="text-13 font-regular transition-opacity ease-in-out">{allDownVotes.length}</span>
        </button>
      </Tooltip>
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -22,6 +22,7 @@
    "@fontsource/ibm-plex-mono": "catalog:",
    "@fontsource/material-symbols-rounded": "catalog:",
    "@headlessui/react": "catalog:",
+    "@makeplane/propel": "catalog:",
    "@plane/constants": "workspace:*",
    "@plane/editor": "workspace:*",
    "@plane/i18n": "workspace:*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -873,6 +873,9 @@ importers:
      '@headlessui/react':
        specifier: 'catalog:'
        version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.2.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
      '@plane/constants':
        specifier: workspace:*
        version: link:../../packages/constants