[WEB-5129] feat: icons revamp

apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx

@@ -3,11 +3,11 @@
 import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
+import { ExternalLink, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
 // plane internal packages
 import { WEB_BASE_URL } from "@plane/constants";
-import { DiscordIcon, GithubIcon } from "@plane/propel/icons";
+import { DiscordIcon, GithubIcon, PageIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
@@ -20,7 +20,7 @@ const helpOptions = [
   {
     name: "Documentation",
     href: "https://docs.plane.so/",
-    Icon: FileText,
+    Icon: PageIcon,
   },
   {
     name: "Join our Discord",
@@ -110,7 +110,7 @@ export const AdminSidebarHelpSection: FC = observer(() => {
                     <Link href={href} key={name} target="_blank">
                       <div className="flex items-center gap-x-2 rounded px-2 py-1 text-xs hover:bg-custom-background-80">
                         <div className="grid flex-shrink-0 place-items-center">
-                          <Icon className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                          <Icon className="h-3.5 w-3.5 text-custom-text-200" width={14} height={14} />
                         </div>
                         <span className="text-xs">{name}</span>
                       </div>

apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Layers, Link, Paperclip } from "lucide-react";
+import { Link, Paperclip } from "lucide-react";
+import { ViewsIcon } from "@plane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueDisplayProperties } from "@plane/types";
@@ -142,7 +143,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
               }
             )}
           >
-            <Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
+            <ViewsIcon className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
             <div className="text-xs">{issue.sub_issues_count}</div>
           </div>
         </Tooltip>

apps/space/core/components/issues/issue-layouts/properties/cycle.tsx

@@ -2,7 +2,7 @@
 
 import { observer } from "mobx-react";
 // plane ui
-import { ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -28,7 +28,7 @@ export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: P
         )}
       >
         <div className="flex w-full items-center text-xs gap-1.5">
-          <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+          <CycleIcon className="h-3 w-3 flex-shrink-0" />
           <div className="max-w-40 flex-grow truncate ">{cycle?.name ?? "No Cycle"}</div>
         </div>
       </div>

apps/space/core/components/issues/issue-layouts/properties/modules.tsx

@@ -2,7 +2,7 @@
 
 import { observer } from "mobx-react";
 // plane ui
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
@@ -32,7 +32,7 @@ export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true
             })}
           >
             <div className="flex items-center gap-1.5 text-custom-text-200">
-              <DiceIcon className="h-3 w-3 flex-shrink-0" />
+              <ModuleIcon className="h-3 w-3 flex-shrink-0" />
               <div className="text-xs">{modules?.[0]?.name ?? "No Modules"}</div>
             </div>
           </div>

apps/space/core/components/issues/issue-layouts/utils.tsx

@@ -4,7 +4,7 @@ import { isNil } from "lodash-es";
 import { ContrastIcon } from "lucide-react";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
-import { CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
 import {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -95,14 +95,14 @@ const getModuleColumns = (moduleStore: IIssueModuleStore): IGroupByColumn[] | un
       moduleGroups.push({
         id: moduleInfo.id,
         name: moduleInfo.name,
-        icon: <DiceIcon className="h-3.5 w-3.5" />,
+        icon: <ModuleIcon className="h-3.5 w-3.5" />,
         payload: { module_ids: [moduleInfo.id] },
       });
   }) as any;
   moduleGroups.push({
     id: "None",
     name: "None",
-    icon: <DiceIcon className="h-3.5 w-3.5" />,
+    icon: <ModuleIcon className="h-3.5 w-3.5" />,
     payload: { module_ids: [] },
   });
 

apps/space/core/components/issues/navbar/root.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Briefcase } from "lucide-react";
+import { ProjectIcon } from "@plane/propel/icons";
 // components
 import { ProjectLogo } from "@/components/common/project-logo";
 // store
@@ -29,7 +29,7 @@ export const IssuesNavbarRoot: FC<Props> = observer((props) => {
           </span>
         ) : (
           <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-            <Briefcase className="h-4 w-4" />
+            <ProjectIcon className="h-4 w-4" />
           </span>
         )}
         <div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">

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

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

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

@@ -1,9 +1,9 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { BarChart2 } from "lucide-react";
-// plane imports
 import { useTranslation } from "@plane/i18n";
+import { AnalyticsIcon } from "@plane/propel/icons";
+// plane imports
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -18,7 +18,7 @@ export const WorkspaceAnalyticsHeader = observer(() => {
             component={
               <BreadcrumbLink
                 label={t("workspace_analytics.label")}
-                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
+                icon={<AnalyticsIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
           />

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

@@ -2,11 +2,11 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { PenSquare } from "lucide-react";
 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 { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -48,7 +48,7 @@ export const WorkspaceDraftHeader = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("drafts")} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink label={t("drafts")} icon={<DraftIcon className="h-4 w-4 text-custom-text-300" />} />
                 }
               />
             </Breadcrumbs>

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

@@ -1,10 +1,11 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Home, Shapes } from "lucide-react";
+import { Shapes } from "lucide-react";
 // 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";
@@ -27,7 +28,10 @@ export const WorkspaceDashboardHeader = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.Item
                 component={
-                  <BreadcrumbLink label={t("home.title")} icon={<Home className="h-4 w-4 text-custom-text-300" />} />
+                  <BreadcrumbLink
+                    label={t("home.title")}
+                    icon={<HomeIcon className="h-4 w-4 text-custom-text-300" />}
+                  />
                 }
               />
             </Breadcrumbs>

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

@@ -8,7 +8,7 @@ import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { UserActivityIcon } from "@plane/propel/icons";
+import { YourWorkIcon } from "@plane/propel/icons";
 import { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -59,7 +59,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
               <BreadcrumbLink
                 label={breadcrumbLabel}
                 disableTooltip
-                icon={<UserActivityIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
           />

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

@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ArchiveIcon, ContrastIcon, DiceIcon, LayersIcon } from "@plane/propel/icons";
+import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 // ui
@@ -32,17 +32,17 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
   issues: {
     label: "Work items",
     href: "/issues",
-    icon: LayersIcon,
+    icon: WorkItemsIcon,
   },
   cycles: {
     label: "Cycles",
     href: "/cycles",
-    icon: ContrastIcon,
+    icon: CycleIcon,
   },
   modules: {
     label: "Modules",
     href: "/modules",
-    icon: DiceIcon,
+    icon: ModuleIcon,
   },
 };
 

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

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { ArchiveIcon, LayersIcon } from "@plane/propel/icons";
+import { ArchiveIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -52,7 +52,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
                 label="Work items"
-                icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<WorkItemsIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
           />

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

@@ -17,7 +17,7 @@ import {
 import { usePlatformOS } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
-import { ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import {
   EIssuesStoreType,
@@ -123,7 +123,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
       return {
         value: _cycle.id,
         query: _cycle.name,
-        content: <SwitcherLabel name={_cycle.name} LabelIcon={ContrastIcon} />,
+        content: <SwitcherLabel name={_cycle.name} LabelIcon={CycleIcon} />,
       };
     })
     .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@@ -158,7 +158,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     title={cycleDetails?.name}
                     icon={
                       <Breadcrumbs.Icon>
-                        <ContrastIcon className="size-4 flex-shrink-0 text-custom-text-300" />
+                        <CycleIcon className="size-4 flex-shrink-0 text-custom-text-300" />
                       </Breadcrumbs.Icon>
                     }
                     isLast

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

@@ -15,7 +15,7 @@ import {
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import {
   EIssuesStoreType,
@@ -118,7 +118,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
       return {
         value: _module.id,
         query: _module.name,
-        content: <SwitcherLabel name={_module.name} LabelIcon={DiceIcon} />,
+        content: <SwitcherLabel name={_module.name} LabelIcon={ModuleIcon} />,
       };
     })
     .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@@ -149,7 +149,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                       router.push(`/${workspaceSlug}/projects/${projectId}/modules/${value}`);
                     }}
                     title={moduleDetails?.name}
-                    icon={<DiceIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
+                    icon={<ModuleIcon className="size-3.5 flex-shrink-0 text-custom-text-300" />}
                     isLast
                   />
                 }

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

@@ -1,8 +1,8 @@
 "use client";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { FileText } from "lucide-react";
 import { EProjectFeatureKey } from "@plane/constants";
+import { PageIcon } from "@plane/propel/icons";
 // types
 import { ICustomSearchSelectOption } from "@plane/types";
 // ui
@@ -51,7 +51,7 @@ export const PageDetailsHeader = observer(() => {
         query: _page.name,
         content: (
           <div className="flex gap-2 items-center justify-between">
-            <SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={FileText} />
+            <SwitcherLabel logo_props={_page.logo_props} name={getPageName(_page.name)} LabelIcon={PageIcon} />
             <PageAccessIcon {..._page} />
           </div>
         ),
@@ -83,7 +83,7 @@ export const PageDetailsHeader = observer(() => {
                   title={getPageName(page?.name)}
                   icon={
                     <Breadcrumbs.Icon>
-                      <SwitcherIcon logo_props={page.logo_props} LabelIcon={FileText} size={16} />
+                      <SwitcherIcon logo_props={page.logo_props} LabelIcon={PageIcon} size={16} />
                     </Breadcrumbs.Icon>
                   }
                   isLast

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

@@ -3,7 +3,7 @@
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Layers, Lock } from "lucide-react";
+import { Lock } from "lucide-react";
 // plane constants
 import {
   EIssueFilterType,
@@ -15,6 +15,7 @@ import {
 } from "@plane/constants";
 // types
 import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import {
   EIssuesStoreType,
@@ -119,7 +120,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
       return {
         value: _view.id,
         query: _view.name,
-        content: <SwitcherLabel logo_props={_view.logo_props} name={_view.name} LabelIcon={Layers} />,
+        content: <SwitcherLabel logo_props={_view.logo_props} name={_view.name} LabelIcon={ViewsIcon} />,
       };
     })
     .filter((option) => option !== undefined) as ICustomSearchSelectOption[];
@@ -145,7 +146,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                 title={viewDetails?.name}
                 icon={
                   <Breadcrumbs.Icon>
-                    <SwitcherIcon logo_props={viewDetails.logo_props} LabelIcon={Layers} size={16} />
+                    <SwitcherIcon logo_props={viewDetails.logo_props} LabelIcon={ViewsIcon} size={16} />
                   </Breadcrumbs.Icon>
                 }
                 isLast