diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
index c4421ae5fd9..a8c3ab82732 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
index e8a8ead1788..03c15f489ed 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
index c58badcf923..0df14f1ed08 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx b/apps/space/core/components/issues/issue-layouts/properties/modules.tsx
index c5e250f0829..29c7a4cee95 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx
+++ b/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>
diff --git a/apps/space/core/components/issues/issue-layouts/utils.tsx b/apps/space/core/components/issues/issue-layouts/utils.tsx
index 9beb230c8ea..44f97755408 100644
--- a/apps/space/core/components/issues/issue-layouts/utils.tsx
+++ b/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: [] },
   });
 
diff --git a/apps/space/core/components/issues/navbar/root.tsx b/apps/space/core/components/issues/navbar/root.tsx
index 4751047a38c..365c712c83b 100644
--- a/apps/space/core/components/issues/navbar/root.tsx
+++ b/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">
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
index d147d0ed123..8408a970661 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/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" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
index 8872b4ccabf..8171d55a842 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
+++ b/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" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index b54a782527c..9e847282296 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/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>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index 2d5786bb1cd..18629c1723b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/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>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 8e839c0eebb..37eab6a2212 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/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" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 0f6606ba3b4..1be30ae759b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/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,
   },
 };
 
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index fbfce0d00d2..3cfbdb8166f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/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" />}
               />
             }
           />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 848e0bfdbce..833e1f632cb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/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
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 98f6adb4b42..e2520b8a2fc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/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
                   />
                 }
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 99af7075b80..8f4eeadf06b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/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
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 355aadd76cf..6cbee5bd421 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/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
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
index 57a693376dc..7ecdd50c490 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Layers } from "lucide-react";
 // plane imports
 import {
   EIssueFilterType,
@@ -13,6 +12,7 @@ import {
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
 import {
   EIssuesStoreType,
   IIssueDisplayFilterOptions,
@@ -99,7 +99,7 @@ export const GlobalIssuesHeader = observer(() => {
   const defaultOptions = DEFAULT_GLOBAL_VIEWS_LIST.map((view) => ({
     value: view.key,
     query: view.key,
-    content: <SwitcherLabel name={t(view.i18n_label)} LabelIcon={Layers} />,
+    content: <SwitcherLabel name={t(view.i18n_label)} LabelIcon={ViewsIcon} />,
   }));
 
   const workspaceOptions = (currentWorkspaceViews || []).map((view) => {
@@ -108,7 +108,7 @@ export const GlobalIssuesHeader = observer(() => {
     return {
       value: _view.id,
       query: _view.name,
-      content: <SwitcherLabel name={_view.name} LabelIcon={Layers} />,
+      content: <SwitcherLabel name={_view.name} LabelIcon={ViewsIcon} />,
     };
   });
 
@@ -128,7 +128,7 @@ export const GlobalIssuesHeader = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.Item
               component={
-                <BreadcrumbLink label={t("views")} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink label={t("views")} icon={<ViewsIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
             <Breadcrumbs.Item
@@ -142,7 +142,7 @@ export const GlobalIssuesHeader = observer(() => {
                   title={viewDetails?.name ?? t(defaultViewDetails?.i18n_label ?? "")}
                   icon={
                     <Breadcrumbs.Icon>
-                      <Layers className="size-4 flex-shrink-0 text-custom-text-300" />
+                      <ViewsIcon className="size-4 flex-shrink-0 text-custom-text-300" />
                     </Breadcrumbs.Icon>
                   }
                   isLast
diff --git a/apps/web/ce/components/breadcrumbs/project.tsx b/apps/web/ce/components/breadcrumbs/project.tsx
index 18c4fea7627..1bf3594e31e 100644
--- a/apps/web/ce/components/breadcrumbs/project.tsx
+++ b/apps/web/ce/components/breadcrumbs/project.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Briefcase } from "lucide-react";
+import { ProjectIcon } from "@plane/propel/icons";
 // plane imports
 import { ICustomSearchSelectOption } from "@plane/types";
 import { BreadcrumbNavigationSearchDropdown, Breadcrumbs } from "@plane/ui";
@@ -39,7 +39,12 @@ export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
         value: projectId,
         query: project?.name,
         content: (
-          <SwitcherLabel name={project?.name} logo_props={project?.logo_props} LabelIcon={Briefcase} type="material" />
+          <SwitcherLabel
+            name={project?.name}
+            logo_props={project?.logo_props}
+            LabelIcon={ProjectIcon}
+            type="material"
+          />
         ),
       };
     })
diff --git a/apps/web/ce/components/command-palette/helpers.tsx b/apps/web/ce/components/command-palette/helpers.tsx
index d098b1a4800..2b49a87a57b 100644
--- a/apps/web/ce/components/command-palette/helpers.tsx
+++ b/apps/web/ce/components/command-palette/helpers.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 // types
-import { Briefcase, FileText, Layers, LayoutGrid } from "lucide-react";
-import { ContrastIcon, DiceIcon } from "@plane/propel/icons";
+import { LayoutGrid } from "lucide-react";
+import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
 import {
   IWorkspaceDefaultSearchResult,
   IWorkspaceIssueSearchResult,
@@ -27,7 +27,7 @@ export type TCommandGroups = {
 
 export const commandGroups: TCommandGroups = {
   cycle: {
-    icon: <ContrastIcon className="h-3 w-3" />,
+    icon: <CycleIcon className="h-3 w-3" />,
     itemName: (cycle: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-xs text-custom-text-300">{cycle.project__identifier}</span> {cycle.name}
@@ -62,7 +62,7 @@ export const commandGroups: TCommandGroups = {
     title: "Work items",
   },
   issue_view: {
-    icon: <Layers className="h-3 w-3" />,
+    icon: <ViewsIcon className="h-3 w-3" />,
     itemName: (view: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-xs text-custom-text-300">{view.project__identifier}</span> {view.name}
@@ -73,7 +73,7 @@ export const commandGroups: TCommandGroups = {
     title: "Views",
   },
   module: {
-    icon: <DiceIcon className="h-3 w-3" />,
+    icon: <ModuleIcon className="h-3 w-3" />,
     itemName: (module: IWorkspaceDefaultSearchResult) => (
       <h6>
         <span className="text-xs text-custom-text-300">{module.project__identifier}</span> {module.name}
@@ -84,7 +84,7 @@ export const commandGroups: TCommandGroups = {
     title: "Modules",
   },
   page: {
-    icon: <FileText className="h-3 w-3" />,
+    icon: <PageIcon className="h-3 w-3" />,
     itemName: (page: IWorkspacePageSearchResult) => (
       <h6>
         <span className="text-xs text-custom-text-300">{page.project__identifiers?.[0]}</span> {page.name}
@@ -100,7 +100,7 @@ export const commandGroups: TCommandGroups = {
     title: "Pages",
   },
   project: {
-    icon: <Briefcase className="h-3 w-3" />,
+    icon: <ProjectIcon className="h-3 w-3" />,
     itemName: (project: IWorkspaceProjectSearchResult) => project?.name,
     path: (project: IWorkspaceProjectSearchResult) => `/${project?.workspace__slug}/projects/${project?.id}/issues/`,
     title: "Projects",
diff --git a/apps/web/ce/components/issues/issue-layouts/utils.tsx b/apps/web/ce/components/issues/issue-layouts/utils.tsx
index fcf1cd91b95..dca7173e904 100644
--- a/apps/web/ce/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/utils.tsx
@@ -13,7 +13,7 @@ import {
   Users,
 } from "lucide-react";
 // types
-import { DiceIcon, DoubleCircleIcon, ISvgIcons } from "@plane/propel/icons";
+import { DoubleCircleIcon, ISvgIcons, ModuleIcon } from "@plane/propel/icons";
 import { IGroupByColumn, IIssueDisplayProperties, TGetColumns, TSpreadsheetColumn } from "@plane/types";
 // components
 import {
@@ -71,7 +71,7 @@ export const SpreadSheetPropertyIconMap: Record<string, FC<ISvgIcons>> = {
   CalenderCheck2: CalendarCheck2,
   Triangle: Triangle,
   Tag: Tag,
-  DiceIcon: DiceIcon,
+  ModuleIcon: ModuleIcon,
   ContrastIcon: ContrastIcon,
   Signal: Signal,
   CalendarClock: CalendarClock,
diff --git a/apps/web/ce/components/projects/navigation/helper.tsx b/apps/web/ce/components/projects/navigation/helper.tsx
index b4866841536..811eb9a17d6 100644
--- a/apps/web/ce/components/projects/navigation/helper.tsx
+++ b/apps/web/ce/components/projects/navigation/helper.tsx
@@ -1,7 +1,6 @@
-import { FileText, Layers } from "lucide-react";
 // plane imports
 import { EUserPermissions, EProjectFeatureKey } from "@plane/constants";
-import { ContrastIcon, DiceIcon, LayersIcon, Intake } from "@plane/propel/icons";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
 // components
 import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
 
@@ -21,7 +20,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.WORK_ITEMS,
     name: "Work items",
     href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    icon: LayersIcon,
+    icon: WorkItemsIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: true,
     sortOrder: 1,
@@ -31,7 +30,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.CYCLES,
     name: "Cycles",
     href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    icon: ContrastIcon,
+    icon: CycleIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     shouldRender: project.cycle_view,
     sortOrder: 2,
@@ -41,7 +40,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.MODULES,
     name: "Modules",
     href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    icon: DiceIcon,
+    icon: ModuleIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     shouldRender: project.module_view,
     sortOrder: 3,
@@ -51,7 +50,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.VIEWS,
     name: "Views",
     href: `/${workspaceSlug}/projects/${projectId}/views`,
-    icon: Layers,
+    icon: ViewsIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.issue_views_view,
     sortOrder: 4,
@@ -61,7 +60,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.PAGES,
     name: "Pages",
     href: `/${workspaceSlug}/projects/${projectId}/pages`,
-    icon: FileText,
+    icon: PageIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.page_view,
     sortOrder: 5,
@@ -71,7 +70,7 @@ export const getProjectFeatureNavigation = (
     key: EProjectFeatureKey.INTAKE,
     name: "Intake",
     href: `/${workspaceSlug}/projects/${projectId}/intake`,
-    icon: Intake,
+    icon: IntakeIcon,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     shouldRender: project.inbox_view,
     sortOrder: 6,
diff --git a/apps/web/ce/components/workspace/sidebar/helper.tsx b/apps/web/ce/components/workspace/sidebar/helper.tsx
index 0821a0ef4bb..316f77b5d72 100644
--- a/apps/web/ce/components/workspace/sidebar/helper.tsx
+++ b/apps/web/ce/components/workspace/sidebar/helper.tsx
@@ -1,25 +1,34 @@
-import { BarChart2, Briefcase, Home, Inbox, Layers, PenSquare } from "lucide-react";
-import { ArchiveIcon, ContrastIcon, UserActivityIcon } from "@plane/propel/icons";
+import {
+  AnalyticsIcon,
+  ArchiveIcon,
+  CycleIcon,
+  DraftIcon,
+  HomeIcon,
+  InboxIcon,
+  ProjectIcon,
+  ViewsIcon,
+  YourWorkIcon,
+} from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 export const getSidebarNavigationItemIcon = (key: string, className: string = "") => {
   switch (key) {
     case "home":
-      return <Home className={cn("size-4 flex-shrink-0", className)} />;
+      return <HomeIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "inbox":
-      return <Inbox className={cn("size-4 flex-shrink-0", className)} />;
+      return <InboxIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "projects":
-      return <Briefcase className={cn("size-4 flex-shrink-0", className)} />;
+      return <ProjectIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "views":
-      return <Layers className={cn("size-4 flex-shrink-0", className)} />;
+      return <ViewsIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "active_cycles":
-      return <ContrastIcon className={cn("size-4 flex-shrink-0", className)} />;
+      return <CycleIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "analytics":
-      return <BarChart2 className={cn("size-4 flex-shrink-0", className)} />;
+      return <AnalyticsIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "your_work":
-      return <UserActivityIcon className={cn("size-4 flex-shrink-0", className)} />;
+      return <YourWorkIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "drafts":
-      return <PenSquare className={cn("size-4 flex-shrink-0", className)} />;
+      return <DraftIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "archives":
       return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />;
   }
diff --git a/apps/web/ce/constants/project/settings/features.tsx b/apps/web/ce/constants/project/settings/features.tsx
index 3ad27ddbba6..923d2db8400 100644
--- a/apps/web/ce/constants/project/settings/features.tsx
+++ b/apps/web/ce/constants/project/settings/features.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
-import { FileText, Layers, Timer } from "lucide-react";
+import { Timer } from "lucide-react";
 // plane imports
-import { ContrastIcon, DiceIcon, Intake } from "@plane/propel/icons";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 import { IProject } from "@plane/types";
 
 export type TProperties = {
@@ -28,7 +28,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     property: "cycle_view",
     title: "Cycles",
     description: "Timebox work as you see fit per project and change frequency from one period to the next.",
-    icon: <ContrastIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
+    icon: <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
     isPro: false,
     isEnabled: true,
   },
@@ -37,7 +37,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     property: "module_view",
     title: "Modules",
     description: "Group work into sub-project-like set-ups with their own leads and assignees.",
-    icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
+    icon: <ModuleIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
     isPro: false,
     isEnabled: true,
   },
@@ -46,7 +46,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     property: "issue_views_view",
     title: "Views",
     description: "Save sorts, filters, and display options for later or share them.",
-    icon: <Layers className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+    icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
     isPro: false,
     isEnabled: true,
   },
@@ -55,7 +55,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     property: "page_view",
     title: "Pages",
     description: "Write anything like you write anything.",
-    icon: <FileText className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+    icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
     isPro: false,
     isEnabled: true,
   },
@@ -64,7 +64,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     property: "inbox_view",
     title: "Intake",
     description: "Consider and discuss work items before you add them to your project.",
-    icon: <Intake className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
+    icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
     isPro: false,
     isEnabled: true,
   },
diff --git a/apps/web/ce/constants/sidebar-favorites.ts b/apps/web/ce/constants/sidebar-favorites.ts
index 4ad0c0463a3..b93c9cf67fc 100644
--- a/apps/web/ce/constants/sidebar-favorites.ts
+++ b/apps/web/ce/constants/sidebar-favorites.ts
@@ -1,14 +1,22 @@
-import { Briefcase, FileText, Layers, LucideIcon } from "lucide-react";
+import { LucideIcon } from "lucide-react";
 // plane imports
-import { ContrastIcon, DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/propel/icons";
+import {
+  CycleIcon,
+  FavoriteFolderIcon,
+  ISvgIcons,
+  ModuleIcon,
+  PageIcon,
+  ProjectIcon,
+  ViewsIcon,
+} from "@plane/propel/icons";
 import { IFavorite } from "@plane/types";
 
 export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
-  page: FileText,
-  project: Briefcase,
-  view: Layers,
-  module: DiceIcon,
-  cycle: ContrastIcon,
+  page: PageIcon,
+  project: ProjectIcon,
+  view: ViewsIcon,
+  module: ModuleIcon,
+  cycle: CycleIcon,
   folder: FavoriteFolderIcon,
 };
 
diff --git a/apps/web/core/components/analytics/overview/active-project-item.tsx b/apps/web/core/components/analytics/overview/active-project-item.tsx
index b40d653591f..b551f494573 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -1,4 +1,4 @@
-import { Briefcase } from "lucide-react";
+import { ProjectIcon } from "@plane/propel/icons";
 // plane package imports
 import { cn } from "@plane/utils";
 import { Logo } from "@/components/common/logo";
@@ -40,7 +40,7 @@ const ActiveProjectItem = (props: Props) => {
               <Logo logo={projectDetails?.logo_props} size={16} />
             ) : (
               <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                <Briefcase className="h-4 w-4" />
+                <ProjectIcon className="h-4 w-4" />
               </span>
             )}
           </span>
diff --git a/apps/web/core/components/analytics/select/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index 1c97e8b94f7..aee3090268e 100644
--- a/apps/web/core/components/analytics/select/project.tsx
+++ b/apps/web/core/components/analytics/select/project.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { Briefcase } from "lucide-react";
+import { ProjectIcon } from "@plane/propel/icons";
 // plane package imports
 import { CustomSearchSelect } from "@plane/ui";
 // components
@@ -30,7 +30,7 @@ export const ProjectSelect: React.FC<Props> = observer((props) => {
           {projectDetails?.logo_props ? (
             <Logo logo={projectDetails?.logo_props} size={16} />
           ) : (
-            <Briefcase className="h-4 w-4" />
+            <ProjectIcon className="h-4 w-4" />
           )}
           <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
@@ -45,7 +45,7 @@ export const ProjectSelect: React.FC<Props> = observer((props) => {
       options={options}
       label={
         <div className="flex items-center gap-2 p-1 ">
-          <Briefcase className="h-4 w-4" />
+          <ProjectIcon className="h-4 w-4" />
           {value && value.length > 3
             ? `3+ projects`
             : value && value.length > 0
diff --git a/apps/web/core/components/analytics/select/select-y-axis.tsx b/apps/web/core/components/analytics/select/select-y-axis.tsx
index 0a3ef5742a9..5ed58311bd0 100644
--- a/apps/web/core/components/analytics/select/select-y-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-y-axis.tsx
@@ -2,8 +2,8 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Briefcase } from "lucide-react";
 import { EEstimateSystem } from "@plane/constants";
+import { ProjectIcon } from "@plane/propel/icons";
 import { ChartYAxisMetric } from "@plane/types";
 // plane package imports
 import { CustomSelect } from "@plane/ui";
@@ -44,7 +44,7 @@ export const SelectYAxis: React.FC<Props> = observer(({ value, onChange, hiddenO
       value={value}
       label={
         <div className="flex items-center gap-2">
-          <Briefcase className="h-3 w-3" />
+          <ProjectIcon className="h-3 w-3" />
           <span>{options.find((v) => v.value === value)?.label ?? "Add Metric"}</span>
         </div>
       }
diff --git a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
index d0b6262fdd3..f99fd22bcb2 100644
--- a/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
+++ b/apps/web/core/components/analytics/work-items/workitems-insight-table.tsx
@@ -3,9 +3,10 @@ import { ColumnDef, Row, RowData } from "@tanstack/react-table";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { Briefcase, UserRound } from "lucide-react";
-// plane package imports
+import { UserRound } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { ProjectIcon } from "@plane/propel/icons";
+// plane package imports
 import { AnalyticsTableDataMap, WorkItemInsightColumns } from "@plane/types";
 // plane web components
 import { Avatar } from "@plane/ui";
@@ -82,7 +83,7 @@ const WorkItemsInsightTable = observer(() => {
                   {project?.logo_props ? (
                     <Logo logo={project.logo_props} size={18} />
                   ) : (
-                    <Briefcase className="h-4 w-4" />
+                    <ProjectIcon className="h-4 w-4" />
                   )}
                   {project?.name}
                 </div>
diff --git a/apps/web/core/components/command-palette/actions/help-actions.tsx b/apps/web/core/components/command-palette/actions/help-actions.tsx
index 26eb13e2945..ba7c5b35365 100644
--- a/apps/web/core/components/command-palette/actions/help-actions.tsx
+++ b/apps/web/core/components/command-palette/actions/help-actions.tsx
@@ -1,9 +1,9 @@
 "use client";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
-import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
+import { GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // ui
-import { DiscordIcon } from "@plane/propel/icons";
+import { DiscordIcon, PageIcon } from "@plane/propel/icons";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useTransient } from "@/hooks/store/use-transient";
@@ -40,7 +40,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <FileText className="h-3.5 w-3.5" />
+          <PageIcon className="h-3.5 w-3.5" />
           Open Plane documentation
         </div>
       </Command.Item>
diff --git a/apps/web/core/components/command-palette/actions/project-actions.tsx b/apps/web/core/components/command-palette/actions/project-actions.tsx
index 9776db33d67..a64feadf23d 100644
--- a/apps/web/core/components/command-palette/actions/project-actions.tsx
+++ b/apps/web/core/components/command-palette/actions/project-actions.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Command } from "cmdk";
-import { ContrastIcon, FileText, Layers } from "lucide-react";
+import { ContrastIcon } from "lucide-react";
 // hooks
 import {
   CYCLE_TRACKER_ELEMENTS,
@@ -9,7 +9,7 @@ import {
   PROJECT_PAGE_TRACKER_ELEMENTS,
   PROJECT_VIEW_TRACKER_ELEMENTS,
 } from "@plane/constants";
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 // ui
@@ -52,7 +52,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           className="focus:outline-none"
         >
           <div className="flex items-center gap-2 text-custom-text-200">
-            <DiceIcon className="h-3.5 w-3.5" />
+            <ModuleIcon className="h-3.5 w-3.5" />
             Create new module
           </div>
           <kbd>M</kbd>
@@ -68,7 +68,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           className="focus:outline-none"
         >
           <div className="flex items-center gap-2 text-custom-text-200">
-            <Layers className="h-3.5 w-3.5" />
+            <ViewsIcon className="h-3.5 w-3.5" />
             Create new view
           </div>
           <kbd>V</kbd>
@@ -84,7 +84,7 @@ export const CommandPaletteProjectActions: React.FC<Props> = (props) => {
           className="focus:outline-none"
         >
           <div className="flex items-center gap-2 text-custom-text-200">
-            <FileText className="h-3.5 w-3.5" />
+            <PageIcon className="h-3.5 w-3.5" />
             Create new page
           </div>
           <kbd>D</kbd>
diff --git a/apps/web/core/components/command-palette/command-modal.tsx b/apps/web/core/components/command-palette/command-modal.tsx
index e482438f679..da375c337f0 100644
--- a/apps/web/core/components/command-palette/command-modal.tsx
+++ b/apps/web/core/components/command-palette/command-modal.tsx
@@ -16,7 +16,7 @@ import {
   WORKSPACE_DEFAULT_SEARCH_RESULT,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { LayersIcon } from "@plane/propel/icons";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { IWorkspaceSearchResults } from "@plane/types";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { cn, getTabIndex } from "@plane/utils";
@@ -357,7 +357,7 @@ export const CommandModal: React.FC = observer(() => {
                                   className="focus:bg-custom-background-80"
                                 >
                                   <div className="flex items-center gap-2 text-custom-text-200">
-                                    <LayersIcon className="h-3.5 w-3.5" />
+                                    <WorkItemsIcon className="h-3.5 w-3.5" />
                                     Create new work item
                                   </div>
                                   <kbd>C</kbd>
diff --git a/apps/web/core/components/common/activity/helper.tsx b/apps/web/core/components/common/activity/helper.tsx
index 8ce3075974a..812bdf4f73d 100644
--- a/apps/web/core/components/common/activity/helper.tsx
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -25,7 +25,7 @@ import {
 } from "lucide-react";
 
 // components
-import { ArchiveIcon, DoubleCircleIcon, ContrastIcon, DiceIcon, Intake } from "@plane/propel/icons";
+import { ArchiveIcon, CycleIcon, DoubleCircleIcon, IntakeIcon, ModuleIcon } from "@plane/propel/icons";
 import { store } from "@/lib/store-context";
 import { TProjectActivity } from "@/plane-web/types";
 
@@ -47,8 +47,8 @@ export const iconsMap: ActivityIconMap = {
   name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
   state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
   estimate: <Triangle size={14} className="text-custom-text-200" />,
-  cycle: <ContrastIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
-  module: <DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  cycle: <CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  module: <ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
   page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
   network: <Globe className="h-3.5 w-3.5 text-custom-text-200" />,
   identifier: <Hash className="h-3.5 w-3.5 text-custom-text-200" />,
@@ -59,11 +59,11 @@ export const iconsMap: ActivityIconMap = {
   is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-custom-text-200" />,
   is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-custom-text-200" />,
   default: <Network className="h-3.5 w-3.5 text-custom-text-200" />,
-  module_view: <DiceIcon className="h-3.5 w-3.5 text-custom-text-200" />,
-  cycle_view: <ContrastIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  module_view: <ModuleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  cycle_view: <CycleIcon className="h-3.5 w-3.5 text-custom-text-200" />,
   issue_views_view: <Layers className="h-3.5 w-3.5 text-custom-text-200" />,
   page_view: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
-  intake_view: <Intake className="h-3.5 w-3.5 text-custom-text-200" />,
+  intake_view: <IntakeIcon className="h-3.5 w-3.5 text-custom-text-200" />,
 };
 
 export const messages = (activity: TProjectActivity): { message: string | ReactNode; customUserName?: string } => {
diff --git a/apps/web/core/components/core/activity.tsx b/apps/web/core/components/core/activity.tsx
index 3c773899e68..a6ff0b40021 100644
--- a/apps/web/core/components/core/activity.tsx
+++ b/apps/web/core/components/core/activity.tsx
@@ -20,7 +20,15 @@ import {
   MessageSquareIcon,
   UsersIcon,
 } from "lucide-react";
-import { BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon, EpicIcon, Intake } from "@plane/propel/icons";
+import {
+  BlockedIcon,
+  BlockerIcon,
+  EpicIcon,
+  IntakeIcon,
+  ModuleIcon,
+  RelatedIcon,
+  WorkItemsIcon,
+} from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { IIssueActivity } from "@plane/types";
 import { renderFormattedDate, generateWorkItemLink, capitalizeFirstLetter } from "@plane/utils";
@@ -283,7 +291,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <LayersIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
+    icon: <WorkItemsIcon width={12} height={12} className="text-custom-text-200" aria-hidden="true" />,
   },
   epic: {
     message: (activity) => {
@@ -509,7 +517,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: <DiceIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
+    icon: <ModuleIcon className="h-3 w-3 !text-custom-text-200" aria-hidden="true" />,
   },
   name: {
     message: (activity, showIssue) => (
@@ -739,7 +747,7 @@ const activityDetails: {
         {activity.verb === "2" && ` from intake by marking a duplicate work item.`}
       </>
     ),
-    icon: <Intake className="size-3 text-custom-text-200" aria-hidden="true" />,
+    icon: <IntakeIcon className="size-3 text-custom-text-200" aria-hidden="true" />,
   },
 };
 
diff --git a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index f09ed83f593..d53e9da1a2a 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -2,10 +2,11 @@
 import React, { FC } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
-import { LayersIcon, SquareUser, Users } from "lucide-react";
+import { SquareUser, Users } from "lucide-react";
 // plane types
 import { EEstimateSystem } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { ICycle } from "@plane/types";
 // plane ui
 import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@@ -115,7 +116,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
 
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-            <LayersIcon className="h-4 w-4" />
+            <WorkItemsIcon className="h-4 w-4" />
             <span className="text-base">{t("work_items")}</span>
           </div>
           <div className="flex w-3/5 items-center">
@@ -129,7 +130,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
         {isEstimatePointValid && !isCompleted && (
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <LayersIcon className="h-4 w-4" />
+              <WorkItemsIcon className="h-4 w-4" />
               <span className="text-base">{t("points")}</span>
             </div>
             <div className="flex w-3/5 items-center">
diff --git a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
index 697e7dbd7d8..2c9930832ff 100644
--- a/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/apps/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -15,7 +15,7 @@ import {
 } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { LayersIcon, TransferIcon } from "@plane/propel/icons";
+import { TransferIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { setPromiseToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { ICycle, TCycleGroups } from "@plane/types";
@@ -217,7 +217,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
       </button>
       {showIssueCount && (
         <div className="flex items-center gap-1">
-          <LayersIcon className="h-4 w-4 text-custom-text-300" />
+          <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
           <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>
         </div>
       )}
diff --git a/apps/web/core/components/cycles/transfer-issues-modal.tsx b/apps/web/core/components/cycles/transfer-issues-modal.tsx
index e9fad38f2b1..7a1f60e55ff 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { AlertCircle, Search, X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-import { ContrastIcon, TransferIcon } from "@plane/propel/icons";
+import { CycleIcon, TransferIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EIssuesStoreType } from "@plane/types";
 import { useCycle } from "@/hooks/store/use-cycle";
@@ -147,7 +147,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                                 handleClose();
                               }}
                             >
-                              <ContrastIcon className="h-5 w-5" />
+                              <CycleIcon className="h-5 w-5" />
                               <div className="flex w-full justify-between truncate">
                                 <span className="truncate">{cycleDetails?.name}</span>
                                 {cycleDetails.status && (
diff --git a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index 4c3a0effd8e..2166869a49f 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -11,7 +11,7 @@ import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // icon
-import { ContrastIcon, CycleGroupIcon } from "@plane/propel/icons";
+import { CycleGroupIcon, CycleIcon } from "@plane/propel/icons";
 import { TCycleGroups } from "@plane/types";
 // ui
 // store hooks
@@ -110,7 +110,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
       query: t("cycle.no_cycle"),
       content: (
         <div className="flex items-center gap-2">
-          <ContrastIcon className="h-3 w-3 flex-shrink-0" />
+          <CycleIcon className="h-3 w-3 flex-shrink-0" />
           <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
         </div>
       ),
diff --git a/apps/web/core/components/dropdowns/cycle/index.tsx b/apps/web/core/components/dropdowns/cycle/index.tsx
index 4326064e6eb..dc58bca0ce7 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // ui
-import { ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 // helpers
 import { cn } from "@plane/utils";
@@ -120,7 +120,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
             variant={buttonVariant}
             renderToolTipByDefault={renderByDefault}
           >
-            {!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
+            {!hideIcon && <CycleIcon className="h-3 w-3 flex-shrink-0" />}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
               <span className="max-w-40 flex-grow truncate">{selectedName ?? placeholder}</span>
             )}
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index 6b8ecc1760a..c2dcabb3df9 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -2,7 +2,7 @@
 
 import { ChevronDown, X } from "lucide-react";
 // plane imports
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
@@ -46,7 +46,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
       <>
         {showCount ? (
           <div className="relative flex items-center max-w-full gap-1">
-            {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+            {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
             {(value.length > 0 || !!placeholder) && (
               <div className="max-w-40 flex-grow truncate">
                 {value.length > 0
@@ -69,7 +69,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
                     className
                   )}
                 >
-                  {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
+                  {!hideIcon && <ModuleIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
                     <Tooltip
                       tooltipHeading="Title"
@@ -106,7 +106,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
           </div>
         ) : (
           <>
-            {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+            {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
             <span className="flex-grow truncate text-left">{placeholder}</span>
           </>
         )}
@@ -118,7 +118,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
   else
     return (
       <>
-        {!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
+        {!hideIcon && <ModuleIcon className="h-3 w-3 flex-shrink-0" />}
         {!hideText && (
           <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
         )}
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
index aab6568a294..930004f5bdd 100644
--- a/apps/web/core/components/dropdowns/module/module-options.tsx
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -8,7 +8,7 @@ import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { IModule } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
@@ -85,7 +85,7 @@ export const ModuleOptions = observer((props: Props) => {
       query: `${moduleDetails?.name}`,
       content: (
         <div className="flex items-center gap-2">
-          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <ModuleIcon className="h-3 w-3 flex-shrink-0" />
           <span className="flex-grow truncate">{moduleDetails?.name}</span>
         </div>
       ),
@@ -97,7 +97,7 @@ export const ModuleOptions = observer((props: Props) => {
       query: t("module.no_module"),
       content: (
         <div className="flex items-center gap-2">
-          <DiceIcon className="h-3 w-3 flex-shrink-0" />
+          <ModuleIcon className="h-3 w-3 flex-shrink-0" />
           <span className="flex-grow truncate">{t("module.no_module")}</span>
         </div>
       ),
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index c06c217b792..f15d539633d 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -1,10 +1,11 @@
 import { ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Briefcase, Check, ChevronDown, Search } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { ProjectIcon } from "@plane/propel/icons";
 import { ComboDropDown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // components
@@ -154,7 +155,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
               return projectDetails?.logo_props ? renderIcon(projectDetails.logo_props) : null;
             })
           ) : (
-            <Briefcase className="size-3 text-custom-text-300" />
+            <ProjectIcon className="size-3 text-custom-text-300" />
           )}
         </div>
       );
diff --git a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
index a3e702ff158..1ea8a985f30 100644
--- a/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -3,11 +3,12 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Briefcase, Check, Hotel, Users, X } from "lucide-react";
+import { Check, Hotel, Users, X } from "lucide-react";
 // plane ui
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
+import { ProjectIcon } from "@plane/propel/icons";
 import { cn, getFileURL } from "@plane/utils";
 // helpers
 // hooks
@@ -47,7 +48,7 @@ export const NoProjectsEmptyState = observer(() => {
       id: "create-project",
       title: "home.empty.create_project.title",
       description: "home.empty.create_project.description",
-      icon: <Briefcase className="size-4" />,
+      icon: <ProjectIcon className="size-4" />,
       flag: "projects",
       cta: {
         text: "home.empty.create_project.cta",
diff --git a/apps/web/core/components/home/widgets/empty-states/recents.tsx b/apps/web/core/components/home/widgets/empty-states/recents.tsx
index c939cae61b5..4839e9bfa93 100644
--- a/apps/web/core/components/home/widgets/empty-states/recents.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -1,27 +1,27 @@
-import { Briefcase, FileText, History } from "lucide-react";
+import { History } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
-import { LayersIcon } from "@plane/propel/icons";
+import { PageIcon, ProjectIcon, WorkItemsIcon } from "@plane/propel/icons";
 
 const getDisplayContent = (type: string) => {
   switch (type) {
     case "project":
       return {
-        icon: <Briefcase size={30} className="text-custom-text-400/40" />,
+        icon: <ProjectIcon height={30} width={30} className="text-custom-text-400/40" />,
         text: "home.recents.empty.project",
       };
     case "page":
       return {
-        icon: <FileText size={30} className="text-custom-text-400/40" />,
+        icon: <PageIcon height={30} width={30} className="text-custom-text-400/40" />,
         text: "home.recents.empty.page",
       };
     case "issue":
       return {
-        icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
+        icon: <WorkItemsIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
         text: "home.recents.empty.issue",
       };
     default:
       return {
-        icon: <History size={30} className="text-custom-text-400/40" />,
+        icon: <History height={30} width={30} className="text-custom-text-400/40" />,
         text: "home.recents.empty.default",
       };
   }
diff --git a/apps/web/core/components/home/widgets/recents/index.tsx b/apps/web/core/components/home/widgets/recents/index.tsx
index f02317aa824..f46201e1281 100644
--- a/apps/web/core/components/home/widgets/recents/index.tsx
+++ b/apps/web/core/components/home/widgets/recents/index.tsx
@@ -3,10 +3,9 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
-import { Briefcase, FileText } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // plane types
-import { LayersIcon } from "@plane/propel/icons";
+import { PageIcon, ProjectIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys } from "@plane/types";
 // plane ui
 // components
@@ -24,9 +23,9 @@ const WIDGET_KEY = EWidgetKeys.RECENT_ACTIVITY;
 const workspaceService = new WorkspaceService();
 const filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[] = [
   { name: "all item", i18n_key: "home.recents.filters.all" },
-  { name: "issue", icon: <LayersIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
-  { name: "page", icon: <FileText size={16} />, i18n_key: "home.recents.filters.pages" },
-  { name: "project", icon: <Briefcase size={16} />, i18n_key: "home.recents.filters.projects" },
+  { name: "issue", icon: <WorkItemsIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
+  { name: "page", icon: <PageIcon height={16} width={16} />, i18n_key: "home.recents.filters.pages" },
+  { name: "project", icon: <ProjectIcon height={16} width={16} />, i18n_key: "home.recents.filters.projects" },
 ];
 
 type TRecentWidgetProps = THomeWidgetProps & {
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
index 8cad5878502..206f4369e54 100644
--- a/apps/web/core/components/home/widgets/recents/issue.tsx
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 // plane types
-import { LayersIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssueServiceType, TActivityEntityData, TIssueEntityData } from "@plane/types";
 // plane ui
@@ -77,7 +77,7 @@ export const RecentIssue = observer((props: BlockProps) => {
           ) : (
             <div className="flex gap-2 items-center justify-center">
               <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
-                <LayersIcon className="size-4 text-custom-text-350" />
+                <WorkItemsIcon className="size-4 text-custom-text-350" />
               </div>
               <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
                 {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
diff --git a/apps/web/core/components/home/widgets/recents/page.tsx b/apps/web/core/components/home/widgets/recents/page.tsx
index 0d21062e62b..14a9f0467e1 100644
--- a/apps/web/core/components/home/widgets/recents/page.tsx
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { FileText } from "lucide-react";
+import { PageIcon } from "@plane/propel/icons";
 // plane import
 import type { TActivityEntityData, TPageEntityData } from "@plane/types";
 import { Avatar } from "@plane/ui";
@@ -43,7 +43,7 @@ export const RecentPage = (props: BlockProps) => {
             {pageDetails?.logo_props?.in_use ? (
               <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
             ) : (
-              <FileText className="size-4 text-custom-text-350" />
+              <PageIcon className="size-4 text-custom-text-350" />
             )}
           </div>
           {pageDetails?.project_identifier && (
diff --git a/apps/web/core/components/inbox/root.tsx b/apps/web/core/components/inbox/root.tsx
index 2b7dbe4436b..51095aea698 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
-import { Intake } from "@plane/propel/icons";
+import { IntakeIcon } from "@plane/propel/icons";
 import { EInboxIssueCurrentTab } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -61,7 +61,7 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
   if (error && error?.status === "init-error")
     return (
       <div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
-        <Intake className="size-[60px]" strokeWidth={1.5} />
+        <IntakeIcon className="size-[60px]" strokeWidth={1.5} />
         <div className="text-custom-text-200">{error?.message}</div>
       </div>
     );
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index a3f536c3b59..97a041d28a5 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -5,8 +5,8 @@ import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
 import { GOD_MODE_URL } from "@plane/constants";
-import { PlaneLockup } from "@plane/propel/icons";
 import { Button } from "@plane/propel/button";
+import { PlaneLockup } from "@plane/propel/icons";
 // helpers
 // images
 // assets
diff --git a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index 090701f32f2..de5a4e3134f 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import React, { FC } from "react";
-import { Layers, Link, Paperclip, Waypoints } from "lucide-react";
-// plane imports
+import { Link, Paperclip, Waypoints } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { ViewsIcon } from "@plane/propel/icons";
+// plane imports
 import { TIssueServiceType, TWorkItemWidgets } from "@plane/types";
 // plane web imports
 import { WorkItemAdditionalWidgetActionButtons } from "@/plane-web/components/issues/issue-detail-widgets/action-buttons";
@@ -36,7 +37,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
           customButton={
             <IssueDetailWidgetButton
               title={t("issue.add.sub_issue")}
-              icon={<Layers className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
+              icon={<ViewsIcon className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
               disabled={disabled}
             />
           }
diff --git a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
index 4bc1d8c5b3c..46c227264ae 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -1,10 +1,11 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
-import { LayersIcon, Plus } from "lucide-react";
+import { Plus } from "lucide-react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { TIssue, TIssueServiceType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // hooks
@@ -73,7 +74,7 @@ export const SubIssuesActionButton: FC<Props> = observer((props) => {
     },
     {
       i18n_label: "common.add_existing",
-      icon: <LayersIcon className="h-3 w-3" />,
+      icon: <WorkItemsIcon className="h-3 w-3" />,
       onClick: handleAddExisting,
     },
   ];
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 2297ccccd34..53c3a4d68f1 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon } from "@plane/propel/icons";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { IssueActivityBlockComponent } from "./";
@@ -23,7 +23,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<ContrastIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<CycleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
index 39272c6cab0..a2f3d7fe9dd 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { LayersIcon } from "@plane/propel/icons";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { EInboxIssueSource } from "@plane/types";
 // hooks
 import { capitalizeFirstLetter } from "@plane/utils";
@@ -28,7 +28,7 @@ export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((props)
   return (
     <IssueActivityBlockComponent
       activityId={activityId}
-      icon={<LayersIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />}
+      icon={<WorkItemsIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />}
       ends={ends}
     >
       <>
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
index 86f54c00cb8..589ec0e8713 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { Intake } from "@plane/propel/icons";
+import { IntakeIcon } from "@plane/propel/icons";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { IssueActivityBlockComponent } from "./";
@@ -36,7 +36,7 @@ export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<Intake className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<IntakeIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index 63d748b3517..09981a1490d 100644
--- a/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -3,7 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // components
 import { IssueActivityBlockComponent } from "./";
@@ -23,7 +23,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
+      icon={<ModuleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />}
       activityId={activityId}
       ends={ends}
     >
diff --git a/apps/web/core/components/issues/issue-detail/sidebar.tsx b/apps/web/core/components/issues/issue-detail/sidebar.tsx
index 141f3ed1936..f93fb67e160 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -6,7 +6,7 @@ import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, U
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui
-import { ContrastIcon, DiceIcon, DoubleCircleIcon } from "@plane/propel/icons";
+import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
 import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -227,7 +227,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             {projectDetails?.module_view && (
               <div className="flex min-h-8 gap-2">
                 <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
-                  <DiceIcon className="h-4 w-4 flex-shrink-0" />
+                  <ModuleIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.modules")}</span>
                 </div>
                 <IssueModuleSelect
@@ -244,7 +244,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             {projectDetails?.cycle_view && (
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                  <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+                  <CycleIcon className="h-4 w-4 flex-shrink-0" />
                   <span>{t("common.cycle")}</span>
                 </div>
                 <IssueCycleSelect
diff --git a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
index 84e92d6336f..5d9a9979640 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/module.tsx
@@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // hooks
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { useModule } from "@/hooks/store/use-module";
 // ui
 
@@ -27,7 +27,7 @@ export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={moduleId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs truncate">
-            <DiceIcon className="h-3 w-3 flex-shrink-0" />
+            <ModuleIcon className="h-3 w-3 flex-shrink-0" />
             <span className="normal-case truncate">{moduleDetails.name}</span>
             {editable && (
               <button
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
index 6c36ee526d5..cc47a1e13b9 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/filters/module.tsx
@@ -5,7 +5,7 @@ import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
-import { DiceIcon } from "@plane/propel/icons";
+import { ModuleIcon } from "@plane/propel/icons";
 import { Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
 import { useModule } from "@/hooks/store/use-module";
@@ -66,7 +66,7 @@ export const FilterModule: React.FC<Props> = observer((props) => {
                     key={cycle.id}
                     isChecked={appliedFilters?.includes(cycle.id) ? true : false}
                     onClick={() => handleUpdate(cycle.id)}
-                    icon={<DiceIcon className="h-3 w-3 flex-shrink-0" />}
+                    icon={<ModuleIcon className="h-3 w-3 flex-shrink-0" />}
                     title={cycle.name}
                   />
                 ))}
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 86da5e38f53..eae95aaf774 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
@@ -5,11 +5,12 @@ import { xor } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
-import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
+import { CalendarCheck2, CalendarClock, 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 { Tooltip } from "@plane/propel/tooltip";
 import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // ui
@@ -465,7 +466,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">{subIssueCount}</div>
             </div>
           </Tooltip>
diff --git a/apps/web/core/components/issues/issue-layouts/utils.tsx b/apps/web/core/components/issues/issue-layouts/utils.tsx
index d17cdd8e4cc..cbf54fd8913 100644
--- a/apps/web/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -7,7 +7,7 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import { ContrastIcon } from "lucide-react";
 // plane types
 import { EIconSize, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
-import { CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon, ISvgIcons } from "@plane/propel/icons";
+import { CycleGroupIcon, ISvgIcons, ModuleIcon, PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
 import {
   EIssuesStoreType,
   GroupByColumnTypes,
@@ -192,14 +192,14 @@ const getModuleColumns = (): IGroupByColumn[] | undefined => {
     modules.push({
       id: module.id,
       name: module.name,
-      icon: <DiceIcon className="h-3.5 w-3.5" />,
+      icon: <ModuleIcon className="h-3.5 w-3.5" />,
       payload: { module_ids: [module.id] },
     });
   });
   modules.push({
     id: "None",
     name: "None",
-    icon: <DiceIcon className="h-3.5 w-3.5" />,
+    icon: <ModuleIcon className="h-3.5 w-3.5" />,
     payload: {},
   });
   return modules;
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index 2017de05979..d29a77f883b 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -6,7 +6,7 @@ import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, U
 // i18n
 import { useTranslation } from "@plane/i18n";
 // ui icons
-import { DiceIcon, DoubleCircleIcon, ContrastIcon } from "@plane/propel/icons";
+import { CycleIcon, DoubleCircleIcon, ModuleIcon } from "@plane/propel/icons";
 import { cn, getDate, renderFormattedPayloadDate, shouldHighlightIssueDueDate } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
@@ -229,7 +229,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {projectDetails?.module_view && (
           <div className="flex w-full items-center gap-3 min-h-8 h-full">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <DiceIcon className="h-4 w-4 flex-shrink-0" />
+              <ModuleIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.modules")}</span>
             </div>
             <IssueModuleSelect
@@ -246,7 +246,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {projectDetails?.cycle_view && (
           <div className="flex w-full items-center gap-3 h-8">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-              <ContrastIcon className="h-4 w-4 flex-shrink-0" />
+              <CycleIcon className="h-4 w-4 flex-shrink-0" />
               <span>{t("common.cycle")}</span>
             </div>
             <IssueCycleSelect
diff --git a/apps/web/core/components/modules/analytics-sidebar/root.tsx b/apps/web/core/components/modules/analytics-sidebar/root.tsx
index 9f12af9259c..36c5d876408 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -16,7 +16,7 @@ import {
 } from "@plane/constants";
 // plane types
 import { useTranslation } from "@plane/i18n";
-import { LayersIcon, ModuleStatusIcon } from "@plane/propel/icons";
+import { ModuleStatusIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
@@ -396,7 +396,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <LayersIcon className="h-4 w-4" />
+              <WorkItemsIcon className="h-4 w-4" />
               <span className="text-base">{t("issues")}</span>
             </div>
             <div className="flex h-7 w-3/5 items-center">
@@ -410,7 +410,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           {isEstimatePointValid && (
             <div className="flex items-center justify-start gap-1">
               <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-                <LayersIcon className="h-4 w-4" />
+                <WorkItemsIcon className="h-4 w-4" />
                 <span className="text-base">{t("points")}</span>
               </div>
               <div className="flex h-7 w-3/5 items-center">
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index 012ad089eb1..f9f3ec2beee 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -16,7 +16,7 @@ import {
   MODULE_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
-import { LayersIcon } from "@plane/propel/icons";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { IModule } from "@plane/types";
@@ -232,7 +232,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
           <div className="flex flex-col gap-3">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-1.5 text-custom-text-200">
-                <LayersIcon className="h-4 w-4 text-custom-text-300" />
+                <WorkItemsIcon className="h-4 w-4 text-custom-text-300" />
                 <span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
               </div>
               {moduleLeadDetails ? (
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 02242dc7b1e..e056b51efeb 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -3,10 +3,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Box, Check, PenTool, Rocket, Monitor, RefreshCw, Layers } from "lucide-react";
+import { Box, Check, PenTool, Rocket, Monitor, RefreshCw } from "lucide-react";
 // plane imports
 import { ONBOARDING_TRACKER_ELEMENTS, USER_TRACKER_EVENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { EOnboardingSteps, TUserProfile } from "@plane/types";
 // helpers
@@ -23,7 +24,7 @@ type Props = {
 
 const ROLES = [
   { id: "product-manager", label: "Product Manager", icon: Box },
-  { id: "engineering-manager", label: "Engineering Manager", icon: Layers },
+  { id: "engineering-manager", label: "Engineering Manager", icon: ViewsIcon },
   { id: "designer", label: "Designer", icon: PenTool },
   { id: "developer", label: "Developer", icon: Monitor },
   { id: "founder-executive", label: "Founder/Executive", icon: Rocket },
diff --git a/apps/web/core/components/onboarding/tour/sidebar.tsx b/apps/web/core/components/onboarding/tour/sidebar.tsx
index b416eacb10e..b1ca0d71b0e 100644
--- a/apps/web/core/components/onboarding/tour/sidebar.tsx
+++ b/apps/web/core/components/onboarding/tour/sidebar.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 // icons
-import { FileText, Layers } from "lucide-react";
-import { ContrastIcon, DiceIcon, LayersIcon } from "@plane/propel/icons";
+import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
 // types
 import { TTourSteps } from "./root";
 
@@ -14,27 +13,27 @@ const sidebarOptions: {
   {
     key: "work-items",
     label: "Work items",
-    Icon: LayersIcon,
+    Icon: WorkItemsIcon,
   },
   {
     key: "cycles",
     label: "Cycles",
-    Icon: ContrastIcon,
+    Icon: CycleIcon,
   },
   {
     key: "modules",
     label: "Modules",
-    Icon: DiceIcon,
+    Icon: ModuleIcon,
   },
   {
     key: "views",
     label: "Views",
-    Icon: Layers,
+    Icon: ViewsIcon,
   },
   {
     key: "pages",
     label: "Pages",
-    Icon: FileText,
+    Icon: PageIcon,
   },
 ];
 
diff --git a/apps/web/core/components/pages/list/block.tsx b/apps/web/core/components/pages/list/block.tsx
index 91981529c21..f6e8ff5ec68 100644
--- a/apps/web/core/components/pages/list/block.tsx
+++ b/apps/web/core/components/pages/list/block.tsx
@@ -2,7 +2,7 @@
 
 import { FC, useRef } from "react";
 import { observer } from "mobx-react";
-import { FileText } from "lucide-react";
+import { PageIcon } from "@plane/propel/icons";
 // plane imports
 import { getPageName } from "@plane/utils";
 // components
@@ -41,7 +41,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
           {logo_props?.in_use ? (
             <Logo logo={logo_props} size={16} type="lucide" />
           ) : (
-            <FileText className="h-4 w-4 text-custom-text-300" />
+            <PageIcon className="h-4 w-4 text-custom-text-300" />
           )}
         </>
       }
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 6748db5d08c..dd0f0b2baf7 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { FormEvent, useState } from "react";
-import { FileText, Globe2, Lock, LucideIcon } from "lucide-react";
+import { Globe2, Lock, LucideIcon } from "lucide-react";
 // plane imports
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { PageIcon } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 import { EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
 import { convertHexEmojiToDecimal, getTabIndex } from "@plane/utils";
@@ -73,7 +74,7 @@ export const PageForm: React.FC<Props> = (props) => {
                   {formData?.logo_props?.in_use ? (
                     <Logo logo={formData?.logo_props} size={18} type="lucide" />
                   ) : (
-                    <FileText className="h-4 w-4 text-custom-text-300" />
+                    <PageIcon className="h-4 w-4 text-custom-text-300" />
                   )}
                 </>
               </span>
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
index 1a9785023ef..3d48e4e5dfb 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -2,12 +2,12 @@
 
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { Briefcase } from "lucide-react";
 // i18n
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
+import { ProjectIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -42,7 +42,7 @@ export const ProjectsBaseHeader = observer(() => {
             component={
               <BreadcrumbLink
                 label={t("workspace_projects.label", { count: 2 })}
-                icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+                icon={<ProjectIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
           />
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index 49597f70437..40f7ab7f6ce 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -3,12 +3,12 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Layers } from "lucide-react";
 // plane imports
 import { ETabIndices, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes } from "@plane/propel/emoji-icon-picker";
+import { ViewsIcon } from "@plane/propel/icons";
 import {
   EViewAccess,
   IIssueDisplayFilterOptions,
@@ -123,7 +123,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                     {logoValue?.in_use ? (
                       <Logo logo={logoValue} size={18} type="lucide" />
                     ) : (
-                      <Layers className="h-4 w-4 text-custom-text-300" />
+                      <ViewsIcon className="h-4 w-4 text-custom-text-300" />
                     )}
                   </>
                 </span>
diff --git a/apps/web/core/components/views/view-list-item.tsx b/apps/web/core/components/views/view-list-item.tsx
index cda916c1651..63877adc670 100644
--- a/apps/web/core/components/views/view-list-item.tsx
+++ b/apps/web/core/components/views/view-list-item.tsx
@@ -3,7 +3,7 @@
 import { FC, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Layers } from "lucide-react";
+import { ViewsIcon } from "@plane/propel/icons";
 // types
 import { IProjectView } from "@plane/types";
 // components
@@ -35,7 +35,7 @@ export const ProjectViewListItem: FC<Props> = observer((props) => {
           {view?.logo_props?.in_use ? (
             <Logo logo={view?.logo_props} size={16} type="lucide" />
           ) : (
-            <Layers className="h-4 w-4 text-custom-text-300" />
+            <ViewsIcon className="h-4 w-4 text-custom-text-300" />
           )}
         </>
       }
diff --git a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
index fd3e8d28c4f..160f697e950 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -2,9 +2,9 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Inbox } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { InboxIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
@@ -34,7 +34,7 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
             component={
               <BreadcrumbLink
                 label={t("notification.label")}
-                icon={<Inbox className="h-4 w-4 text-custom-text-300" />}
+                icon={<InboxIcon className="h-4 w-4 text-custom-text-300" />}
                 disableTooltip
               />
             }
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index d358f1c2f23..a721ae93066 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -15,12 +15,12 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { orderBy } from "lodash-es";
 import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
+import { Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { FavoriteFolderIcon } from "@plane/propel/icons";
+import { DraftIcon, FavoriteFolderIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { IFavorite, InstructionType } from "@plane/types";
 import { CustomMenu, DropIndicator, DragHandle } from "@plane/ui";
@@ -232,7 +232,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                   </CustomMenu.MenuItem>
                   <CustomMenu.MenuItem onClick={() => setFolderToRename(favorite.id)}>
                     <div className="flex items-center justify-start gap-2">
-                      <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
+                      <DraftIcon className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
                       <span>Rename Folder</span>
                     </div>
                   </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
index 60606f7694f..d752a854ab8 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-items/common/helper.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FileText } from "lucide-react";
+import { PageIcon } from "@plane/propel/icons";
 // plane imports
 import { IFavorite, TLogoProps } from "@plane/types";
 // components
@@ -9,7 +9,7 @@ import { Logo } from "@/components/common/logo";
 import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants/sidebar-favorites";
 
 export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => {
-  const Icon = FAVORITE_ITEM_ICONS[type] || FileText;
+  const Icon = FAVORITE_ITEM_ICONS[type] || PageIcon;
 
   return (
     <>
diff --git a/apps/web/core/components/workspace/sidebar/help-menu.tsx b/apps/web/core/components/workspace/sidebar/help-menu.tsx
index 82f179caf1d..4a513aed76d 100644
--- a/apps/web/core/components/workspace/sidebar/help-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-menu.tsx
@@ -2,8 +2,9 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react";
+import { HelpCircle, MessagesSquare, User } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { PageIcon } from "@plane/propel/icons";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu } from "@plane/ui";
@@ -70,7 +71,7 @@ export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
               target="_blank"
               className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
             >
-              <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+              <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
               <span className="text-xs">{t("documentation")}</span>
             </a>
           </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/help-section.tsx b/apps/web/core/components/workspace/sidebar/help-section.tsx
index 4e5416f370f..be132c96397 100644
--- a/apps/web/core/components/workspace/sidebar/help-section.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section.tsx
@@ -2,9 +2,10 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
+import { HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { PageIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CustomMenu } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -73,7 +74,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 target="_blank"
                 className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
               >
-                <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+                <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
                 <span className="text-xs">{t("documentation")}</span>
               </a>
             </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/help-section/root.tsx b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
index f2d44854c10..b73ae35ee2d 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -2,8 +2,9 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { FileText, HelpCircle, MessagesSquare, User } from "lucide-react";
+import { HelpCircle, MessagesSquare, User } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { PageIcon } from "@plane/propel/icons";
 // ui
 import { CustomMenu } from "@plane/ui";
 // components
@@ -57,7 +58,7 @@ export const HelpMenuRoot = observer(() => {
             target="_blank"
             className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
           >
-            <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
+            <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
             <span className="text-xs">{t("documentation")}</span>
           </a>
         </CustomMenu.MenuItem>
diff --git a/apps/web/core/components/workspace/sidebar/project-navigation.tsx b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
index 59313763429..b271b9451f0 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -4,10 +4,9 @@ import React, { FC, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { FileText, Layers } from "lucide-react";
 import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/propel/icons";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
 import { EUserProjectRoles } from "@plane/types";
 // plane ui
 // components
@@ -70,7 +69,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "work_items",
         name: "Work items",
         href: `/${workspaceSlug}/projects/${projectId}/issues`,
-        icon: LayersIcon,
+        icon: WorkItemsIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
         shouldRender: true,
         sortOrder: 1,
@@ -80,7 +79,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "cycles",
         name: "Cycles",
         href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-        icon: ContrastIcon,
+        icon: CycleIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
         shouldRender: project.cycle_view,
         sortOrder: 2,
@@ -90,7 +89,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "modules",
         name: "Modules",
         href: `/${workspaceSlug}/projects/${projectId}/modules`,
-        icon: DiceIcon,
+        icon: ModuleIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
         shouldRender: project.module_view,
         sortOrder: 3,
@@ -100,7 +99,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "views",
         name: "Views",
         href: `/${workspaceSlug}/projects/${projectId}/views`,
-        icon: Layers,
+        icon: ViewsIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
         shouldRender: project.issue_views_view,
         sortOrder: 4,
@@ -110,7 +109,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "pages",
         name: "Pages",
         href: `/${workspaceSlug}/projects/${projectId}/pages`,
-        icon: FileText,
+        icon: PageIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
         shouldRender: project.page_view,
         sortOrder: 5,
@@ -120,7 +119,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         key: "intake",
         name: "Intake",
         href: `/${workspaceSlug}/projects/${projectId}/intake`,
-        icon: Intake,
+        icon: IntakeIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
         shouldRender: project.inbox_view,
         sortOrder: 6,
diff --git a/apps/web/core/components/workspace/sidebar/quick-actions.tsx b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
index 4ed6b7bb228..6ad3f43a989 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -1,10 +1,10 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { PenSquare } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { AddIcon } from "@plane/propel/icons";
 import { TIssue } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
@@ -90,7 +90,7 @@ export const SidebarQuickActions = observer(() => {
           onMouseLeave={handleMouseLeave}
           disabled={disabled}
         >
-          <PenSquare className="size-4" />
+          <AddIcon className="size-4" />
           <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
         </button>
         <AppSearch />
diff --git a/apps/web/core/components/workspace/sidebar/user-menu.tsx b/apps/web/core/components/workspace/sidebar/user-menu.tsx
index 17d2dbe616e..5d46f738ebe 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu.tsx
@@ -3,9 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Home, Inbox, PenSquare } from "lucide-react";
 // plane imports
-import { UserActivityIcon } from "@plane/propel/icons";
+import { DraftIcon, HomeIcon, InboxIcon, YourWorkIcon } from "@plane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 // hooks
 import { useUserPermissions, useUser } from "@/hooks/store/user";
@@ -23,28 +22,28 @@ export const SidebarUserMenu = observer(() => {
       labelTranslationKey: "sidebar.home",
       href: `/${workspaceSlug.toString()}/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-      Icon: Home,
+      Icon: HomeIcon,
     },
     {
       key: "your-work",
       labelTranslationKey: "sidebar.your_work",
       href: `/${workspaceSlug.toString()}/profile/${currentUser?.id}/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-      Icon: UserActivityIcon,
+      Icon: YourWorkIcon,
     },
     {
       key: "notifications",
       labelTranslationKey: "sidebar.inbox",
       href: `/${workspaceSlug.toString()}/notifications/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-      Icon: Inbox,
+      Icon: InboxIcon,
     },
     {
       key: "drafts",
       labelTranslationKey: "sidebar.drafts",
       href: `/${workspaceSlug.toString()}/drafts/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-      Icon: PenSquare,
+      Icon: DraftIcon,
     },
   ];
 
diff --git a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
index 81f595d9e95..dd2238a8b02 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -3,10 +3,9 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { BarChart2, Briefcase, Layers } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
-import { ContrastIcon } from "@plane/propel/icons";
+import { AnalyticsIcon, CycleIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 // hooks
 import useLocalStorage from "@/hooks/use-local-storage";
@@ -28,28 +27,28 @@ export const SidebarWorkspaceMenu = observer(() => {
       labelTranslationKey: "sidebar.projects",
       href: `/${workspaceSlug}/projects/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-      Icon: Briefcase,
+      Icon: ProjectIcon,
     },
     {
       key: "views",
       labelTranslationKey: "sidebar.views",
       href: `/${workspaceSlug}/workspace-views/all-issues/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-      Icon: Layers,
+      Icon: ViewsIcon,
     },
     {
       key: "active-cycles",
       labelTranslationKey: "sidebar.cycles",
       href: `/${workspaceSlug}/active-cycles/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-      Icon: ContrastIcon,
+      Icon: CycleIcon,
     },
     {
       key: "analytics",
       labelTranslationKey: "sidebar.analytics",
       href: `/${workspaceSlug}/analytics/`,
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-      Icon: BarChart2,
+      Icon: AnalyticsIcon,
     },
   ];
 
diff --git a/packages/propel/src/icons/add-icon.tsx b/packages/propel/src/icons/add-icon.tsx
new file mode 100644
index 00000000000..55b0388c09f
--- /dev/null
+++ b/packages/propel/src/icons/add-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AddIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <g clip-path="url(#clip0_2890_23)">
+      <path
+        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2890_23">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/propel/src/icons/analytics-icon.tsx b/packages/propel/src/icons/analytics-icon.tsx
new file mode 100644
index 00000000000..4e1f6502328
--- /dev/null
+++ b/packages/propel/src/icons/analytics-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AnalyticsIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/archive-icon.tsx b/packages/propel/src/icons/archive-icon.tsx
index ae29d99f743..b83ce69a85c 100644
--- a/packages/propel/src/icons/archive-icon.tsx
+++ b/packages/propel/src/icons/archive-icon.tsx
@@ -2,31 +2,11 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
+export const ArchiveIcon: React.FC<ISvgIcons> = ({ className = "text-current", color = "currentColor", ...rest }) => (
+  <svg viewBox="0 0 16 16" className={`${className} stroke-2`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
     <path
-      d="M21 3H3C2.44772 3 2 3.44772 2 4V7C2 7.55228 2.44772 8 3 8H21C21.5523 8 22 7.55228 22 7V4C22 3.44772 21.5523 3 21 3Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
+      fill={color}
     />
-    <path
-      d="M4 8V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H8"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M20 8V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21H16"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M15 18L12 21L9 18" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M12 21L12 12" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
diff --git a/packages/propel/src/icons/cycle-icon.tsx b/packages/propel/src/icons/cycle-icon.tsx
new file mode 100644
index 00000000000..2b71558b535
--- /dev/null
+++ b/packages/propel/src/icons/cycle-icon.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const CycleIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <g clip-path="url(#clip0_1612_7015)">
+      <path
+        d="M14.041 8C14.041 4.66339 11.3365 1.95818 8 1.95801C4.66328 1.95801 1.95801 4.66328 1.95801 8C1.95818 11.3365 4.66339 14.041 8 14.041C11.3364 14.0408 14.0408 11.3364 14.041 8ZM15.291 8C15.2908 12.0268 12.0268 15.2908 8 15.291C3.97303 15.291 0.708184 12.0269 0.708008 8C0.708008 3.97292 3.97292 0.708008 8 0.708008C12.0269 0.708184 15.291 3.97303 15.291 8Z"
+        fill={color}
+      />
+      <path
+        d="M7.99951 12.3337C10.3928 12.3337 12.3328 10.3936 12.3328 8.00033C12.3328 5.60709 10.3928 3.66699 7.99951 3.66699V12.3337Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1612_7015">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/propel/src/icons/dashboard-icon.tsx b/packages/propel/src/icons/dashboard-icon.tsx
new file mode 100644
index 00000000000..543926b5621
--- /dev/null
+++ b/packages/propel/src/icons/dashboard-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DashboardIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M6.04199 11.333C6.04182 11.3101 6.0229 11.292 6 11.292H2.66699C2.64409 11.292 2.62518 11.3101 2.625 11.333V13.333C2.625 13.356 2.64398 13.375 2.66699 13.375H6C6.02301 13.375 6.04199 13.356 6.04199 13.333V11.333ZM13.375 8.66699C13.375 8.64398 13.356 8.625 13.333 8.625H10C9.97699 8.625 9.95801 8.64398 9.95801 8.66699V13.333C9.95801 13.356 9.97699 13.375 10 13.375H13.333C13.356 13.375 13.375 13.356 13.375 13.333V8.66699ZM6.04199 2.66699C6.04199 2.64398 6.02301 2.625 6 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V7.33301C2.625 7.35602 2.64398 7.375 2.66699 7.375H6C6.02301 7.375 6.04199 7.35602 6.04199 7.33301V2.66699ZM13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H10C9.97699 2.625 9.95801 2.64398 9.95801 2.66699V4.66699C9.95818 4.68986 9.9771 4.70801 10 4.70801H13.333C13.3559 4.70801 13.3748 4.68985 13.375 4.66699V2.66699ZM7.29199 13.333C7.29199 14.0464 6.71337 14.625 6 14.625H2.66699C1.95362 14.625 1.375 14.0464 1.375 13.333V11.333C1.37518 10.6198 1.95373 10.042 2.66699 10.042H6C6.71326 10.042 7.29182 10.6198 7.29199 11.333V13.333ZM14.625 13.333C14.625 14.0464 14.0464 14.625 13.333 14.625H10C9.28663 14.625 8.70801 14.0464 8.70801 13.333V8.66699C8.70801 7.95362 9.28663 7.375 10 7.375H13.333C14.0464 7.375 14.625 7.95362 14.625 8.66699V13.333ZM7.29199 7.33301C7.29199 8.04638 6.71337 8.625 6 8.625H2.66699C1.95362 8.625 1.375 8.04638 1.375 7.33301V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H6C6.71337 1.375 7.29199 1.95362 7.29199 2.66699V7.33301ZM14.625 4.66699C14.6248 5.38021 14.0463 5.95801 13.333 5.95801H10C9.28674 5.95801 8.70818 5.38021 8.70801 4.66699V2.66699C8.70801 1.95362 9.28663 1.375 10 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V4.66699Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/draft-icon.tsx b/packages/propel/src/icons/draft-icon.tsx
new file mode 100644
index 00000000000..d821fa358c8
--- /dev/null
+++ b/packages/propel/src/icons/draft-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const DraftIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/home-icon.tsx b/packages/propel/src/icons/home-icon.tsx
new file mode 100644
index 00000000000..dfcd1a18212
--- /dev/null
+++ b/packages/propel/src/icons/home-icon.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const HomeIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill={color}
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/inbox-icon.tsx b/packages/propel/src/icons/inbox-icon.tsx
new file mode 100644
index 00000000000..e6a1c20eb94
--- /dev/null
+++ b/packages/propel/src/icons/inbox-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const InboxIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className,
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
index fc6e24f0ae0..0c0529a2243 100644
--- a/packages/propel/src/icons/index.ts
+++ b/packages/propel/src/icons/index.ts
@@ -1,59 +1,72 @@
 export type { ISvgIcons } from "./type";
-export * from "./cycle";
-export * from "./module";
-export * from "./state";
+export * from "./activity-icon";
+export * from "./add-icon";
+export * from "./ai-icon";
+export * from "./analytics-icon";
 export * from "./archive-icon";
+export * from "./at-risk-icon";
+export * from "./bar-icon";
 export * from "./blocked-icon";
 export * from "./blocker-icon";
+export * from "./brand";
 export * from "./calendar-after-icon";
 export * from "./calendar-before-icon";
 export * from "./center-panel-icon";
 export * from "./comment-fill-icon";
 export * from "./create-icon";
+export * from "./cycle";
+export * from "./cycle-icon";
+export * from "./dashboard-icon";
 export * from "./dice-icon";
 export * from "./discord-icon";
+export * from "./display-properties";
+export * from "./done-icon";
+export * from "./draft-icon";
+export * from "./dropdown-icon";
 export * from "./epic-icon";
+export * from "./favorite-folder-icon";
 export * from "./full-screen-panel-icon";
 export * from "./github-icon";
 export * from "./gitlab-icon";
+export * from "./home-icon";
+export * from "./inbox-icon";
 export * from "./info-fill-icon";
 export * from "./info-icon";
+export * from "./in-progress-icon";
+export * from "./intake";
+export * from "./intake-icon";
 export * from "./layer-stack";
 export * from "./layers-icon";
+export * from "./lead-icon";
+export * from "./module";
+export * from "./module-icon";
 export * from "./monospace-icon";
+export * from "./multiple-sticky";
+export * from "./off-track-icon";
+export * from "./on-track-icon";
+export * from "./overview-icon";
+export * from "./page-icon";
+export * from "./pending-icon";
 export * from "./photo-filter-icon";
+export * from "./pi-chat";
+export * from "./planned-icon";
+export * from "./plane-icon";
 export * from "./priority-icon";
+export * from "./project-icon";
 export * from "./related-icon";
 export * from "./sans-serif-icon";
 export * from "./serif-icon";
 export * from "./side-panel-icon";
-export * from "./transfer-icon";
-export * from "./info-icon";
-export * from "./dropdown-icon";
-export * from "./intake";
-export * from "./user-activity-icon";
-export * from "./favorite-folder-icon";
-export * from "./planned-icon";
-export * from "./in-progress-icon";
-export * from "./done-icon";
-export * from "./pending-icon";
-export * from "./pi-chat";
-export * from "./workspace-icon";
-export * from "./teams";
-export * from "./lead-icon";
-export * from "./activity-icon";
-export * from "./updates-icon";
-export * from "./overview-icon";
-export * from "./on-track-icon";
-export * from "./off-track-icon";
-export * from "./at-risk-icon";
-export * from "./multiple-sticky";
+export * from "./state";
 export * from "./sticky-note-icon";
-export * from "./bar-icon";
+export * from "./suspended-user";
+export * from "./teams";
+export * from "./transfer-icon";
 export * from "./tree-map-icon";
-export * from "./display-properties";
-export * from "./ai-icon";
-export * from "./plane-icon";
+export * from "./updates-icon";
+export * from "./user-activity-icon";
+export * from "./view-icon";
 export * from "./wiki-icon";
-export * from "./brand";
-export * from "./suspended-user";
+export * from "./work-items-icon";
+export * from "./workspace-icon";
+export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/intake-icon.tsx b/packages/propel/src/icons/intake-icon.tsx
new file mode 100644
index 00000000000..2f8ee1db124
--- /dev/null
+++ b/packages/propel/src/icons/intake-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const IntakeIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <g clip-path="url(#clip0_2310_10)">
+      <path
+        d="M7.37549 4.31474C7.37549 3.34976 7.35622 3.09637 7.12256 2.76591C7.07287 2.69574 6.92103 2.55664 6.69287 2.41826C6.46459 2.27986 6.2704 2.20923 6.18506 2.19755C5.92379 2.16215 5.79263 2.17621 5.6958 2.20146C5.57897 2.23193 5.46473 2.28854 5.21045 2.42119C3.2767 3.42993 1.9585 5.45229 1.9585 7.78154C1.95856 11.1182 4.66381 13.8235 8.00049 13.8235C11.337 13.8234 14.0414 11.1181 14.0415 7.78154C14.0415 5.54611 12.8284 3.59276 11.021 2.54716C10.7222 2.37432 10.6196 1.99243 10.7925 1.69365C10.9653 1.39492 11.3472 1.29338 11.646 1.46611C13.8238 2.72593 15.2915 5.0818 15.2915 7.78154C15.2914 11.8084 12.0273 15.0734 8.00049 15.0735C3.97345 15.0735 0.708561 11.8085 0.708496 7.78154C0.708496 4.96843 2.30195 2.52843 4.63232 1.31279C4.85634 1.19593 5.1006 1.06446 5.38037 0.991498C5.6802 0.913328 5.98443 0.908355 6.35303 0.958295C6.68627 1.00354 7.0524 1.17437 7.34033 1.34892C7.62835 1.52352 7.94882 1.76962 8.14307 2.04423C8.6434 2.75183 8.62549 3.42545 8.62549 4.31474V8.93876L10.2251 7.33915C10.4692 7.09538 10.8649 7.09527 11.1089 7.33915C11.3529 7.58314 11.3527 7.97884 11.1089 8.22294L8.44189 10.8899C8.32477 11.007 8.1661 11.0734 8.00049 11.0735C7.83473 11.0735 7.67532 11.0071 7.55811 10.8899L4.89111 8.22294C4.64748 7.97885 4.64724 7.58309 4.89111 7.33915C5.13519 7.09508 5.5318 7.09508 5.77588 7.33915L7.37549 8.93876V4.31474Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2310_10">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/propel/src/icons/module-icon.tsx b/packages/propel/src/icons/module-icon.tsx
new file mode 100644
index 00000000000..188b570fac5
--- /dev/null
+++ b/packages/propel/src/icons/module-icon.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ModuleIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+      fill={color}
+    />
+    <path
+      d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
+      fill={color}
+    />
+    <path
+      d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
+      fill={color}
+    />
+    <path
+      d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
+      fill={color}
+    />
+    <path
+      d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/page-icon.tsx b/packages/propel/src/icons/page-icon.tsx
new file mode 100644
index 00000000000..c9eeb486e27
--- /dev/null
+++ b/packages/propel/src/icons/page-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const PageIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/project-icon.tsx b/packages/propel/src/icons/project-icon.tsx
new file mode 100644
index 00000000000..8a9ad6280d3
--- /dev/null
+++ b/packages/propel/src/icons/project-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ProjectIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/view-icon.tsx b/packages/propel/src/icons/view-icon.tsx
new file mode 100644
index 00000000000..36b1fd2d551
--- /dev/null
+++ b/packages/propel/src/icons/view-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ViewsIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <g clip-path="url(#clip0_1612_7029)">
+      <path
+        d="M14.3926 10.7735C14.7013 10.6192 15.0771 10.7451 15.2314 11.0538C15.3854 11.3623 15.2604 11.7373 14.9521 11.8917L8.52344 15.1056C8.46846 15.1331 8.33457 15.2069 8.18262 15.2355H8.18164C8.06516 15.2572 7.94558 15.2573 7.8291 15.2355C7.67698 15.2069 7.54234 15.1331 7.4873 15.1056L1.05957 11.8917C0.750903 11.7374 0.626065 11.3625 0.780273 11.0538C0.934594 10.7452 1.30948 10.6194 1.61816 10.7735L8.00488 13.9669L14.3926 10.7735ZM14.3926 7.44054C14.7013 7.28618 15.0771 7.41114 15.2314 7.71983C15.3858 8.02847 15.2607 8.40424 14.9521 8.5587L8.52344 11.7726C8.46839 11.8001 8.33451 11.8739 8.18262 11.9025H8.18164C8.06519 11.9242 7.94554 11.9242 7.8291 11.9025C7.67698 11.8739 7.54234 11.8001 7.4873 11.7726L1.05957 8.5587C0.750834 8.40433 0.625905 8.02857 0.780273 7.71983C0.934713 7.41138 1.30956 7.28634 1.61816 7.44054L8.00488 10.6339L14.3926 7.44054ZM7.91699 0.751084C8.00545 0.742877 8.09504 0.747328 8.18262 0.763779C8.33432 0.79232 8.46833 0.865118 8.52344 0.892686L14.9521 4.10753C15.1636 4.21348 15.2969 4.42959 15.2969 4.66612C15.2969 4.90266 15.1636 5.11875 14.9521 5.22472L8.52344 8.43956C8.46831 8.46714 8.33434 8.53992 8.18262 8.56847H8.18164C8.06513 8.59024 7.94561 8.59028 7.8291 8.56847C7.67698 8.53994 7.54235 8.46708 7.4873 8.43956L1.05957 5.22472C0.84784 5.11884 0.713867 4.90285 0.713867 4.66612C0.713883 4.42941 0.847843 4.21339 1.05957 4.10753L7.4873 0.892686C7.54232 0.865181 7.67699 0.7923 7.8291 0.763779L7.91699 0.751084ZM2.73535 4.66612L8.00488 7.30089L13.2754 4.66612L8.00488 2.03038L2.73535 4.66612Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1612_7029">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/propel/src/icons/work-items-icon.tsx b/packages/propel/src/icons/work-items-icon.tsx
new file mode 100644
index 00000000000..f07145b3350
--- /dev/null
+++ b/packages/propel/src/icons/work-items-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const WorkItemsIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M13.0098 6.04785C13.2265 5.96229 13.4708 5.99175 13.6621 6.12695C13.8534 6.26216 13.9678 6.48597 13.9678 6.72461L13.9639 11.7979C13.9637 12.0975 13.7837 12.366 13.5117 12.4736L8.93457 14.2852C8.7181 14.3706 8.47444 14.3409 8.2832 14.2061C8.09177 14.0709 7.97754 13.8472 7.97754 13.6084V8.53613C7.97754 8.23632 8.15654 7.96701 8.42871 7.85938L13.0098 6.04785ZM9.38672 9.03418V12.5527L12.5547 11.2998L12.5566 7.78027L9.38672 9.03418ZM9.88672 3.89062C10.1043 3.80456 10.3493 3.83523 10.541 3.97168C10.7327 4.10817 10.8465 4.33351 10.8447 4.57324L10.8389 5.30859C10.8357 5.70864 10.518 6.03044 10.1289 6.02734C9.84472 6.02507 9.60081 5.8496 9.49121 5.59961L6.26367 6.87695V10.377C6.49946 10.3943 6.72145 10.5334 6.83887 10.7646C7.01886 11.1194 6.88504 11.557 6.54004 11.7422L5.88574 12.0938C5.66742 12.2109 5.40503 12.2024 5.19434 12.0713C4.98357 11.94 4.85449 11.7046 4.85449 11.4512V6.37891C4.85449 6.07909 5.03447 5.80979 5.30664 5.70215L9.88672 3.89062ZM7.06738 1.71582C7.28499 1.62976 7.52999 1.66042 7.72168 1.79688C7.91338 1.93337 8.02721 2.1587 8.02539 2.39844L8.01953 3.13379C8.01635 3.53383 7.69869 3.85564 7.30957 3.85254C7.02539 3.85026 6.78148 3.67479 6.67188 3.4248L3.44434 4.70215V8.20215C3.68013 8.21954 3.90211 8.35857 4.01953 8.58984C4.19952 8.94458 4.06571 9.38222 3.7207 9.56738L3.06641 9.91895C2.84808 10.0361 2.58569 10.0276 2.375 9.89648C2.16423 9.76516 2.03516 9.52975 2.03516 9.27637V4.2041C2.03516 3.90428 2.21513 3.63498 2.4873 3.52734L7.06738 1.71582Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/icons/your-work-icon.tsx b/packages/propel/src/icons/your-work-icon.tsx
new file mode 100644
index 00000000000..2f003a2396d
--- /dev/null
+++ b/packages/propel/src/icons/your-work-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const YourWorkIcon: React.FC<ISvgIcons> = ({
+  width = "16",
+  height = "16",
+  className = "text-current",
+  color = "currentColor",
+  ...rest
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
+      fill={color}
+    />
+    <path
+      d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
+      fill={color}
+    />
+  </svg>
+);
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index 7a05670752e..091f6a92c9d 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Home, Settings, User, Bell } from "lucide-react";
+import { Settings, User, Bell } from "lucide-react";
+import { HomeIcon } from "../icons";
 import { Tabs } from "./tabs";
 
 type TabOption = {
@@ -152,7 +153,7 @@ export const DisabledTab: Story = {
 export const WithIcons: Story = {
   render({ defaultValue }) {
     const tabsWithIcons = [
-      { label: "Home", value: "home", icon: Home },
+      { label: "Home", value: "home", icon: HomeIcon },
       { label: "Profile", value: "profile", icon: User },
       { label: "Settings", value: "settings", icon: Settings },
       { label: "Notifications", value: "notifications", icon: Bell },
@@ -184,7 +185,7 @@ export const WithIcons: Story = {
 export const IconsOnly: Story = {
   render({ defaultValue }) {
     const iconTabs = [
-      { value: "home", icon: Home },
+      { value: "home", icon: HomeIcon },
       { value: "profile", icon: User },
       { value: "settings", icon: Settings },
       { value: "notifications", icon: Bell },