Skip to content

refactor: migrate space icons to @makeplane/propel #9729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sriramveeraghanta merged 2 commits into from
Sep 2, 2026
Merged

refactor: migrate space icons to @makeplane/propel #9729

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
efb433d
refactor: migrate space icons to @makeplane/propel
anmolsinghbhatia Sep 1, 2026
2ff5df3
fix: address icon migration review on space
anmolsinghbhatia Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions apps/space/components/account/auth-forms/auth-banner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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>
);
Expand Down
6 changes: 3 additions & 3 deletions apps/space/components/account/auth-forms/email.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
)}
Expand Down
22 changes: 11 additions & 11 deletions apps/space/components/account/auth-forms/password.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}
/>
)}
Expand All @@ -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
Comment thread
codingwolf-at marked this conversation as resolved.
Outdated
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")}
/>
)}
Expand All @@ -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")}
/>
)}
Expand Down
8 changes: 4 additions & 4 deletions apps/space/components/account/auth-forms/unique-code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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}
/>
)}
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions apps/space/components/issues/filters/applied-filters/filters-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/filters/applied-filters/label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
);
Expand Down
5 changes: 3 additions & 2 deletions apps/space/components/issues/filters/applied-filters/priority.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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>
))}
Expand Down
5 changes: 3 additions & 2 deletions apps/space/components/issues/filters/applied-filters/state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/filters/helpers/filter-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/filters/helpers/filter-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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} />}
Comment thread
codingwolf-at marked this conversation as resolved.
Outdated
</div>
<div className="flex items-center gap-2 truncate">
{icon && <div className="grid w-5 shrink-0 place-items-center">{icon}</div>}
Expand Down
6 changes: 3 additions & 3 deletions apps/space/components/issues/filters/selection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -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>
Expand Down
8 changes: 6 additions & 2 deletions apps/space/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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">
Expand Down
9 changes: 4 additions & 5 deletions apps/space/components/issues/issue-layouts/properties/all-properties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/issue-layouts/properties/cycle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/issue-layouts/properties/due-date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions apps/space/components/issues/issue-layouts/properties/labels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
Loading
Loading