refactor: migrate web icons to @makeplane/propel (#9731)

* refactor: migrate web icons to @makeplane/propel

Replace confirmed icon symbols across apps/web with their audited
@makeplane/propel/icons targets. Unresolved symbols and the State,
Priority and Brand icons stay on their existing imports.

Lucide size props become explicit width/height, including the two
relation icons and the inbox status icon that forward a size variable.
Two aliased imports resolve to targets the file already imported, so
the aliases are dropped rather than importing the same symbol twice.

Widen the member dropdown chain and the AI menu from LucideIcon to
ComponentType<SVGProps<SVGSVGElement>> so both Lucide and Propel icons
satisfy them; both only ever render the icon with a className.

CycleGroupIcon is deliberately not migrated: it dispatches a different
glyph and color per cycle status, which CyclesOutline cannot express.

apps/web already declared @makeplane/propel, so no dependency change
was needed.

* fix: address icon migration review on web

Restore the six user-facing strings the identifier rename overwrote.
The migration replaced every occurrence of a source symbol name,
including ones inside string literals and JSX text, so the GitHub
empty state read "StarOutline us on GitHub", the exporter column key,
header and button label became "DownloadOutline", the project card
action title became "SettingsOutline" and a tooltip became "PinOutline".

Drop 122 strokeWidth props and 10 text-2 classes. Propel glyphs paint
with fill="currentColor", so strokeWidth never changed weight, and
text-2 was a bad conversion of stroke-2, which is a stroke width rather
than a colour and has no meaning on a fill path.

Use StarFilled for the two favorited sidebar stars. Lucide's Star with
fill-yellow-500 was a solid star, and StarOutline is a ring path, so
filling it does not reproduce that shape.

Author: anmolsinghbhatia

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

@@ -7,7 +7,7 @@
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { CycleIcon } from "@plane/propel/icons";
+import { CyclesOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -24,7 +24,7 @@ export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycle
             component={
               <BreadcrumbLink
                 label={t("active_cycles")}
-                icon={<CycleIcon className="h-4 w-4 rotate-180 text-tertiary" />}
+                icon={<CyclesOutline className="h-4 w-4 rotate-180 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { AnalyticsIcon } from "@plane/propel/icons";
+import { AnalyticsOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -22,7 +22,7 @@ export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHead
             component={
               <BreadcrumbLink
                 label={t("workspace_analytics.label")}
-                icon={<AnalyticsIcon className="h-4 w-4 text-tertiary" />}
+                icon={<AnalyticsOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx

@@ -8,7 +8,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane ui
-import { WorkItemsIcon } from "@plane/propel/icons";
+import { WorkItemsOutline } from "@makeplane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -46,7 +46,7 @@ export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
               <BreadcrumbLink
                 label="Work Items"
                 href={`/${workspaceSlug}/projects/${projectId}/issues/`}
-                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
+                icon={<WorkItemsOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />

apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx

@@ -10,7 +10,7 @@ import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
-import { DraftIcon } from "@plane/propel/icons";
+import { DraftsOutline } from "@makeplane/propel/icons";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -52,7 +52,7 @@ export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-tertiary" />} />
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftsOutline className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>

apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx

@@ -11,7 +11,7 @@ import { useParams } from "next/navigation";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
-import { PlusIcon, SearchIcon } from "@plane/propel/icons";
+import { AddOutline, SearchOutline } from "@makeplane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@@ -123,13 +123,13 @@ export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar()
                     setIsProjectModalOpen(true);
                   }}
                 >
-                  <PlusIcon className="size-3" />
+                  <AddOutline className="size-3" />
                 </button>
               </Tooltip>
             )}
           </div>
           <div className="ml-auto flex w-full items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1">
-            <SearchIcon className="h-3.5 w-3.5 text-placeholder" />
+            <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-13 outline-none placeholder:text-placeholder"
               placeholder={t("search")}

apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx

@@ -5,11 +5,10 @@
  */
 
 import { observer } from "mobx-react";
-import { Shapes } from "lucide-react";
+import { HomeOutline, WidgetOutline } from "@makeplane/propel/icons";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { HomeIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -30,7 +29,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("home.title")} icon={<HomeIcon className="h-4 w-4 text-tertiary" />} />
+                  <BreadcrumbLink label={t("home.title")} icon={<HomeOutline className="h-4 w-4 text-tertiary" />} />
                 }
               />
             </Breadcrumbs>
@@ -42,7 +41,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
             size="lg"
             onClick={() => toggleWidgetSettings(true)}
             className="my-auto mb-0"
-            prependIcon={<Shapes />}
+            prependIcon={<WidgetOutline />}
           >
             <div className="hidden sm:hidden md:block">{t("home.manage_widgets")}</div>
           </Button>

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx

@@ -7,10 +7,9 @@
 // ui
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { PanelRight } from "lucide-react";
+import { ChevronDownOutline, RightSidePaneOutline, YourWorkOutline } from "@makeplane/propel/icons";
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { YourWorkIcon, ChevronDownIcon } from "@plane/propel/icons";
 import type { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
 // components
@@ -62,7 +61,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
               <BreadcrumbLink
                 label={breadcrumbLabel}
                 disableTooltip
-                icon={<YourWorkIcon className="h-4 w-4 text-tertiary" />}
+                icon={<YourWorkOutline className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -78,7 +77,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
             customButton={
               <div className="flex items-center gap-2 rounded-md border border-subtle px-2 py-1.5">
                 <span className="flex flex-grow justify-center text-13 text-secondary">{type}</span>
-                <ChevronDownIcon className="h-4 w-4 text-placeholder" />
+                <ChevronDownOutline className="h-4 w-4 text-placeholder" />
               </div>
             }
             customButtonClassName="flex flex-grow justify-center text-secondary text-13"
@@ -103,7 +102,7 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
                 toggleProfileSidebar();
               }}
               appendIcon={
-                <PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
+                <RightSidePaneOutline className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />
               }
             ></Button>
           </div>

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx

@@ -12,7 +12,7 @@ import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "
 // plane i18n
 import { useTranslation } from "@plane/i18n";
 // icons
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
 // types
 import type {
   IIssueDisplayFilterOptions,
@@ -92,7 +92,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
         customButton={
           <div className="flex-center flex text-13 text-secondary">
             {t("common.layout")}
-            <ChevronDownIcon className="my-auto ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
+            <ChevronDownOutline className="my-auto ml-2 h-4 w-4 text-secondary" />
           </div>
         }
         customButtonClassName="flex flex-center text-secondary text-13"
@@ -121,7 +121,7 @@ export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHe
           menuButton={
             <div className="flex-center flex text-13 text-secondary">
               {t("common.display")}
-              <ChevronDownIcon className="ml-2 h-4 w-4 text-secondary" strokeWidth={2} />
+              <ChevronDownOutline className="ml-2 h-4 w-4 text-secondary" />
             </div>
           }
         >

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

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
+import { ArchiveOutline, CyclesOutline, ModuleOutline, WorkItemsOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@makeplane/propel/components/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 // ui
@@ -35,17 +35,17 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
   issues: {
     label: "Work items",
     href: "/issues",
-    icon: WorkItemsIcon,
+    icon: WorkItemsOutline,
   },
   cycles: {
     label: "Cycles",
     href: "/cycles",
-    icon: CycleIcon,
+    icon: CyclesOutline,
   },
   modules: {
     label: "Modules",
     href: "/modules",
-    icon: ModuleIcon,
+    icon: ModuleOutline,
   },
 };
 
@@ -78,7 +78,7 @@ export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(pro
                 <BreadcrumbLink
                   href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                   label="Archives"
-                  icon={<ArchiveIcon className="h-4 w-4 text-tertiary" />}
+                  icon={<ArchiveOutline className="h-4 w-4 text-tertiary" />}
                 />
               }
             />

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx

@@ -10,7 +10,7 @@ import useSWR from "swr";
 // ui
 import { Banner } from "@plane/propel/banner";
 import { Button } from "@plane/propel/button";
-import { ArchiveIcon } from "@plane/propel/icons";
+import { ArchiveOutline } from "@makeplane/propel/icons";
 import { Loader } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core/page-title";
@@ -70,7 +70,7 @@ function ArchivedIssueDetailsPage({ params }: Route.ComponentProps) {
           <Banner
             variant="warning"
             title="This work item has been archived. Visit the Archives section to restore it."
-            icon={<ArchiveIcon className="size-4" />}
+            icon={<ArchiveOutline className="size-4" />}
             action={
               <Button
                 variant="secondary"