From 9f73d08c237f3fb605ac577c3ef6bc8e5d628ee9 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 2 Sep 2026 23:24:15 +0530
Subject: [PATCH] refactor: migrate package icons to @makeplane/propel (#9732)

* refactor: migrate package icons to @makeplane/propel

Replace confirmed icon symbols in packages/editor, packages/propel,
packages/ui and packages/utils with their audited
@makeplane/propel/icons targets, including the relative legacy icon
imports inside packages/propel/src. Add the dependency to all four
workspaces.

Widen the icon component types that were pinned to LucideIcon so both
Lucide and Propel icons satisfy them: the editor menu items, editor
constants, custom image utils, alignment selector, the ui alert modal
variants, and the link icon matchers in utils. Each only renders the
icon as a component, and the matcher list still mixes both sources.

Two files are deliberately left alone. The emoji-icon-picker directory
is out of scope, and icons/priority-icon.tsx dispatches one shared size
prop across four still-unresolved Lucide icons, so migrating only its
urgent glyph would break that prop and mix fill with stroke.

* fix: address icon migration review on packages

Restore the 49 user-facing strings the identifier rename overwrote. The
migration replaced every occurrence of a source symbol name, including
ones inside string literals and JSX text, so editor toolbar labels,
slash-command titles, image download tooltips and aria-labels, and the
Storybook example labels all displayed icon component names.

Drop strokeWidth from Propel icons; the generated glyphs paint with
fill="currentColor" so the prop never changed weight.

Pick StarFilled for the selected FavoriteStar. Lucide's Star with a fill
utility was a solid star, and StarOutline is a ring path, so filling it
does not reproduce that shape.

Also correct six toolbar story tooltips that already read "Bullet
ListLayoutIcon" on preview, from an earlier migration with the same
over-broad rename.

* fix: restore context-menu story labels after icon rename

The mechanical icon rename also replaced JSX text children that matched
old lucide identifiers (Edit, Download, Share, Archive). Restore the 13
user-facing labels in the context-menu stories.

* chore: align lockfile @makeplane/propel importers to 0.3.0

The preview merge left editor, propel, ui, and utils resolved to 0.2.0
while catalog is 0.3.0. Re-resolve those importers so the lockfile matches.
---
 packages/editor/package.json                  |  1 +
 .../src/components/links/link-edit-view.tsx   |  4 +-
 .../src/components/links/link-preview.tsx     | 11 +--
 .../components/menus/block-menu-options.tsx   |  4 +-
 .../src/components/menus/block-menu.tsx       |  6 +-
 .../menus/bubble-menu/alignment-selector.tsx  | 12 +--
 .../menus/bubble-menu/color-selector.tsx      |  5 +-
 .../menus/bubble-menu/link-selector.tsx       |  8 +-
 .../menus/bubble-menu/node-selector.tsx       |  6 +-
 .../editor/src/components/menus/menu-items.ts | 99 +++++++++----------
 packages/editor/src/constants/common.ts       | 90 ++++++++---------
 .../src/extensions/callout/color-selector.tsx |  4 +-
 .../extensions/code/code-block-node-view.tsx  |  7 +-
 .../components/toolbar/alignment.tsx          |  4 +-
 .../components/toolbar/download.tsx           |  4 +-
 .../components/toolbar/full-screen/modal.tsx  | 13 ++-
 .../components/toolbar/full-screen/root.tsx   |  4 +-
 .../custom-image/components/uploader.tsx      |  6 +-
 .../src/extensions/custom-image/utils.ts      | 12 +--
 .../slash-commands/command-items-list.tsx     | 77 +++++++--------
 .../plugins/drag-handles/color-selector.tsx   |  8 +-
 .../drag-handles/column/drag-handle.tsx       |  4 +-
 .../plugins/drag-handles/column/dropdown.tsx  | 22 +++--
 .../plugins/drag-handles/row/drag-handle.tsx  |  4 +-
 .../plugins/drag-handles/row/dropdown.tsx     | 22 +++--
 packages/propel/package.json                  |  1 +
 packages/propel/src/accordion/accordion.tsx   |  4 +-
 packages/propel/src/calendar/root.tsx         |  4 +-
 .../src/collapsible/collapsible.stories.tsx   | 16 +--
 .../propel/src/combobox/combobox.stories.tsx  | 35 ++++---
 packages/propel/src/combobox/combobox.tsx     |  4 +-
 .../propel/src/command/command.stories.tsx    | 24 ++---
 packages/propel/src/command/command.tsx       |  4 +-
 .../src/context-menu/context-menu.stories.tsx | 77 ++++++++-------
 packages/propel/src/dialog/dialog.stories.tsx |  4 +-
 .../emoji-reaction-picker.stories.tsx         | 18 ++--
 .../src/emoji-reaction/emoji-reaction.tsx     |  4 +-
 packages/propel/src/menu/menu.stories.tsx     | 23 +++--
 packages/propel/src/menu/menu.tsx             |  9 +-
 .../propel/src/popover/popover.stories.tsx    |  4 +-
 .../tab-navigation/tab-navigation.stories.tsx | 30 +++---
 packages/propel/src/tabs/tabs.stories.tsx     | 19 ++--
 packages/propel/src/toast/toast.tsx           | 15 ++-
 .../propel/src/toolbar/toolbar.stories.tsx    | 92 ++++++++---------
 .../propel/src/tooltip/tooltip.stories.tsx    |  6 +-
 packages/ui/package.json                      |  1 +
 .../src/breadcrumbs/breadcrumbs.stories.tsx   |  8 +-
 packages/ui/src/breadcrumbs/breadcrumbs.tsx   |  6 +-
 .../ui/src/collapsible/collapsible-button.tsx |  4 +-
 packages/ui/src/drag-handle.tsx               |  6 +-
 .../ui/src/dropdown/common/input-search.tsx   |  4 +-
 packages/ui/src/dropdown/common/options.tsx   |  4 +-
 .../ui/src/dropdowns/context-menu/item.tsx    |  4 +-
 packages/ui/src/dropdowns/custom-menu.tsx     | 11 +--
 .../ui/src/dropdowns/custom-search-select.tsx | 11 +--
 packages/ui/src/dropdowns/custom-select.tsx   |  6 +-
 packages/ui/src/favorite-star.tsx             |  8 +-
 .../ui/src/form-fields/password/indicator.tsx |  4 +-
 .../form-fields/password/password-input.tsx   |  6 +-
 packages/ui/src/modals/alert-modal.tsx        |  9 +-
 packages/ui/src/popovers/popover.tsx          |  4 +-
 packages/utils/package.json                   |  1 +
 packages/utils/src/get-icon-for-link.ts       | 56 +++++------
 pnpm-lock.yaml                                | 12 +++
 64 files changed, 517 insertions(+), 478 deletions(-)

diff --git a/packages/editor/package.json b/packages/editor/package.json
index 20e4a41be4..8f71154da7 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -37,6 +37,7 @@
     "@floating-ui/react": "catalog:",
     "@headlessui/react": "catalog:",
     "@hocuspocus/provider": "catalog:",
+    "@makeplane/propel": "catalog:",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/propel": "workspace:*",
diff --git a/packages/editor/src/components/links/link-edit-view.tsx b/packages/editor/src/components/links/link-edit-view.tsx
index 3adbefa27c..cc4b2b990d 100644
--- a/packages/editor/src/components/links/link-edit-view.tsx
+++ b/packages/editor/src/components/links/link-edit-view.tsx
@@ -5,7 +5,7 @@
  */
 
 import type { Node } from "@tiptap/pm/model";
-import { Link2Off } from "lucide-react";
+import { UnlinkOutline } from "@makeplane/propel/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";
@@ -148,7 +148,7 @@ export function LinkEditView({ viewProps }: LinkEditViewProps) {
       <InputView label="Text" placeholder="Enter Text to display" value={localText} onChange={handleTextChange} />
       <div className="bg-strong mb-1 h-[1px] w-full gap-2" />
       <div className="flex items-center gap-2 text-13 text-secondary">
-        <Link2Off size={14} className="inline-block" />
+        <UnlinkOutline width={14} height={14} className="inline-block" />
         <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-placeholder">
           Remove Link
         </button>
diff --git a/packages/editor/src/components/links/link-preview.tsx b/packages/editor/src/components/links/link-preview.tsx
index f47c97bd43..b689dcf830 100644
--- a/packages/editor/src/components/links/link-preview.tsx
+++ b/packages/editor/src/components/links/link-preview.tsx
@@ -4,8 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Link2Off } from "lucide-react";
-import { CopyIcon, GlobeIcon, EditIcon } from "@plane/propel/icons";
+import { CopyOutline, EditOutline, GlobeOutline, UnlinkOutline } from "@makeplane/propel/icons";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";
 
@@ -36,11 +35,11 @@ export function LinkPreview({
       }}
     >
       <div className="shadow-md flex items-center gap-3 rounded-sm border-2 border-subtle bg-layer-1 p-2 text-11 text-tertiary">
-        <GlobeIcon width={14} height={14} className="inline-block" />
+        <GlobeOutline width={14} height={14} className="inline-block" />
         <p>{url?.length > 40 ? url.slice(0, 40) + "..." : url}</p>
         <div className="flex gap-2">
           <button onClick={copyLinkToClipboard} className="cursor-pointer transition-colors hover:text-primary">
-            <CopyIcon width={14} height={14} className="inline-block" />
+            <CopyOutline width={14} height={14} className="inline-block" />
           </button>
           {editor.isEditable && (
             <>
@@ -48,10 +47,10 @@ export function LinkPreview({
                 onClick={() => switchView("LinkEditView")}
                 className="cursor-pointer transition-colors hover:text-primary"
               >
-                <EditIcon width={14} height={14} className="inline-block" />
+                <EditOutline width={14} height={14} className="inline-block" />
               </button>
               <button onClick={removeLink} className="cursor-pointer transition-colors hover:text-primary">
-                <Link2Off size={14} className="inline-block" />
+                <UnlinkOutline width={14} height={14} className="inline-block" />
               </button>
             </>
           )}
diff --git a/packages/editor/src/components/menus/block-menu-options.tsx b/packages/editor/src/components/menus/block-menu-options.tsx
index 9a8b42c7fb..6fe33c2ed7 100644
--- a/packages/editor/src/components/menus/block-menu-options.tsx
+++ b/packages/editor/src/components/menus/block-menu-options.tsx
@@ -7,7 +7,7 @@
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { TableMap } from "@tiptap/pm/tables";
 import type { Editor } from "@tiptap/react";
-import { MoveHorizontal } from "lucide-react";
+import { DragDropOutline } from "@makeplane/propel/icons";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // types
@@ -84,7 +84,7 @@ const setTableToFullWidth = (editor: Editor): void => {
 
 export const getNodeOptions = (editor: Editor): BlockMenuOption[] => [
   {
-    icon: MoveHorizontal,
+    icon: DragDropOutline,
     key: "table-full-width",
     label: "Fit to width",
     isDisabled: !editor.isActive(CORE_EXTENSIONS.TABLE),
diff --git a/packages/editor/src/components/menus/block-menu.tsx b/packages/editor/src/components/menus/block-menu.tsx
index c3dff0d20e..d50feae2b2 100644
--- a/packages/editor/src/components/menus/block-menu.tsx
+++ b/packages/editor/src/components/menus/block-menu.tsx
@@ -17,7 +17,7 @@ import {
 import type { Editor } from "@tiptap/react";
 import type { LucideIcon } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { CopyIcon, TrashIcon } from "@plane/propel/icons";
+import { CopyOutline, DeleteOutline } from "@makeplane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
@@ -150,7 +150,7 @@ export function BlockMenu(props: Props) {
 
   const MENU_ITEMS: BlockMenuOption[] = [
     {
-      icon: TrashIcon,
+      icon: DeleteOutline,
       key: "delete",
       label: "Delete",
       onClick: (_e) => {
@@ -159,7 +159,7 @@ export function BlockMenu(props: Props) {
       },
     },
     {
-      icon: CopyIcon,
+      icon: CopyOutline,
       key: "duplicate",
       label: "Duplicate",
       isDisabled:
diff --git a/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx
index 0bfad5a671..311eaa54ec 100644
--- a/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx
+++ b/packages/editor/src/components/menus/bubble-menu/alignment-selector.tsx
@@ -5,8 +5,8 @@
  */
 
 import type { Editor } from "@tiptap/core";
-import type { LucideIcon } from "lucide-react";
-import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
+import { AlignCenterOutline, AlignLeftOutline, AlignRightOutline } from "@makeplane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@@ -27,14 +27,14 @@ export function TextAlignmentSelector(props: Props) {
   const textAlignmentOptions: {
     itemKey: TEditorCommands;
     renderKey: string;
-    icon: LucideIcon;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
     command: () => void;
     isActive: () => boolean;
   }[] = [
     {
       itemKey: "text-align",
       renderKey: "text-align-left",
-      icon: AlignLeft,
+      icon: AlignLeftOutline,
       command: () =>
         menuItem.command({
           alignment: "left",
@@ -44,7 +44,7 @@ export function TextAlignmentSelector(props: Props) {
     {
       itemKey: "text-align",
       renderKey: "text-align-center",
-      icon: AlignCenter,
+      icon: AlignCenterOutline,
       command: () =>
         menuItem.command({
           alignment: "center",
@@ -54,7 +54,7 @@ export function TextAlignmentSelector(props: Props) {
     {
       itemKey: "text-align",
       renderKey: "text-align-right",
-      icon: AlignRight,
+      icon: AlignRightOutline,
       command: () =>
         menuItem.command({
           alignment: "right",
diff --git a/packages/editor/src/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/components/menus/bubble-menu/color-selector.tsx
index d8151b8b61..b2ad51e9ea 100644
--- a/packages/editor/src/components/menus/bubble-menu/color-selector.tsx
+++ b/packages/editor/src/components/menus/bubble-menu/color-selector.tsx
@@ -5,7 +5,8 @@
  */
 
 import type { Editor } from "@tiptap/react";
-import { ALargeSmall, Ban } from "lucide-react";
+import { Ban } from "lucide-react";
+import { TextOutline } from "@makeplane/propel/icons";
 import { useMemo } from "react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -48,7 +49,7 @@ export function BubbleMenuColorSelector(props: Props) {
               backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
             }}
           >
-            <ALargeSmall
+            <TextOutline
               className={cn("size-3.5", {
                 "text-primary": !activeTextColor,
               })}
diff --git a/packages/editor/src/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/components/menus/bubble-menu/link-selector.tsx
index 0745059389..8526122aee 100644
--- a/packages/editor/src/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/components/menus/bubble-menu/link-selector.tsx
@@ -7,7 +7,7 @@
 import type { Editor } from "@tiptap/core";
 
 import { useCallback, useRef, useState } from "react";
-import { LinkIcon, TrashIcon, CheckIcon } from "@plane/propel/icons";
+import { DeleteOutline, LinkOutline, TickOutline } from "@makeplane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 // constants
@@ -64,7 +64,7 @@ export function BubbleMenuLinkSelector(props: Props) {
       menuButton={
         <>
           Link
-          <LinkIcon className="size-3 shrink-0" />
+          <LinkOutline className="size-3 shrink-0" />
         </>
       }
       options={options}
@@ -102,7 +102,7 @@ export function BubbleMenuLinkSelector(props: Props) {
                 context.onOpenChange(false);
               }}
             >
-              <TrashIcon className="size-4" />
+              <DeleteOutline className="size-4" />
             </button>
           ) : (
             <button
@@ -113,7 +113,7 @@ export function BubbleMenuLinkSelector(props: Props) {
                 handleLinkSubmit();
               }}
             >
-              <CheckIcon className="size-4" />
+              <TickOutline className="size-4" />
             </button>
           )}
         </div>
diff --git a/packages/editor/src/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/components/menus/bubble-menu/node-selector.tsx
index e31fe56359..78663abc2c 100644
--- a/packages/editor/src/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/components/menus/bubble-menu/node-selector.tsx
@@ -6,7 +6,7 @@
 
 import type { Editor } from "@tiptap/react";
 
-import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // components
@@ -73,7 +73,7 @@ export function BubbleMenuNodeSelector(props: Props) {
       menuButton={
         <>
           <span>{activeItem?.name}</span>
-          <ChevronDownIcon className="size-3 shrink-0" />
+          <ChevronDownOutline className="size-3 shrink-0" />
         </>
       }
       options={options}
@@ -101,7 +101,7 @@ export function BubbleMenuNodeSelector(props: Props) {
               <item.icon className="size-3 flex-shrink-0" />
               <span>{item.name}</span>
             </div>
-            {activeItem.name === item.name && <CheckIcon className="size-3 flex-shrink-0 text-tertiary" />}
+            {activeItem.name === item.name && <TickOutline className="size-3 flex-shrink-0 text-tertiary" />}
           </button>
         ))}
       </section>
diff --git a/packages/editor/src/components/menus/menu-items.ts b/packages/editor/src/components/menus/menu-items.ts
index 74407c9a03..90f54d7807 100644
--- a/packages/editor/src/components/menus/menu-items.ts
+++ b/packages/editor/src/components/menus/menu-items.ts
@@ -6,30 +6,30 @@
 
 import type { Editor } from "@tiptap/react";
 import {
-  BoldIcon,
-  Heading1,
-  CheckSquare,
-  Heading2,
-  Heading3,
-  TextQuote,
-  ImageIcon,
-  TableIcon,
-  ListIcon,
-  ListOrderedIcon,
-  ItalicIcon,
-  UnderlineIcon,
-  StrikethroughIcon,
-  CodeIcon,
-  Heading4,
-  Heading5,
-  Heading6,
-  CaseSensitive,
-  MinusSquare,
-  Palette,
-  AlignCenter,
-} from "lucide-react";
-import type { LucideIcon } from "lucide-react";
-import { LinkIcon } from "@plane/propel/icons";
+  AlignCenterOutline,
+  BoldOutline,
+  CheckSquareOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ItalicOutline,
+  LinkOutline,
+  ListOutline,
+  MinusSquareOutline,
+  NumberedListOutline,
+  PaletteOutline,
+  QuoteOutline,
+  StrikethroughOutline,
+  TableOutline,
+  TextOutline,
+  UnderlineOutline,
+} from "@makeplane/propel/icons";
+import type { ComponentType, SVGProps } from "react";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
@@ -56,7 +56,6 @@ import {
 } from "@/helpers/editor-commands";
 // types
 import type { TCommandWithProps, TEditorCommands } from "@/types";
-import type { ISvgIcons } from "@plane/propel/icons";
 type isActiveFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => boolean;
 type commandFunction<T extends TEditorCommands> = (params?: TCommandWithProps<T>) => void;
 
@@ -64,7 +63,7 @@ export type EditorMenuItem<T extends TEditorCommands> = {
   key: T;
   name: string;
   command: commandFunction<T>;
-  icon: LucideIcon | React.FC<ISvgIcons>;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
   isActive: isActiveFunction<T>;
 };
 
@@ -73,7 +72,7 @@ export const TextItem = (editor: Editor): EditorMenuItem<"text"> => ({
   name: "Text",
   isActive: () => editor.isActive(CORE_EXTENSIONS.PARAGRAPH),
   command: () => setText(editor),
-  icon: CaseSensitive,
+  icon: TextOutline,
 });
 
 type SupportedHeadingLevels = Extract<TEditorCommands, "h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
@@ -83,7 +82,7 @@ const HeadingItem = <T extends SupportedHeadingLevels>(
   level: 1 | 2 | 3 | 4 | 5 | 6,
   key: T,
   name: string,
-  icon: LucideIcon
+  icon: ComponentType<SVGProps<SVGSVGElement>>
 ): EditorMenuItem<T> => ({
   key,
   name,
@@ -93,29 +92,29 @@ const HeadingItem = <T extends SupportedHeadingLevels>(
 });
 
 export const HeadingOneItem = (editor: Editor): EditorMenuItem<"h1"> =>
-  HeadingItem(editor, 1, "h1", "Heading 1", Heading1);
+  HeadingItem(editor, 1, "h1", "Heading 1", H1Outline);
 
 export const HeadingTwoItem = (editor: Editor): EditorMenuItem<"h2"> =>
-  HeadingItem(editor, 2, "h2", "Heading 2", Heading2);
+  HeadingItem(editor, 2, "h2", "Heading 2", H2Outline);
 
 export const HeadingThreeItem = (editor: Editor): EditorMenuItem<"h3"> =>
-  HeadingItem(editor, 3, "h3", "Heading 3", Heading3);
+  HeadingItem(editor, 3, "h3", "Heading 3", H3Outline);
 
 export const HeadingFourItem = (editor: Editor): EditorMenuItem<"h4"> =>
-  HeadingItem(editor, 4, "h4", "Heading 4", Heading4);
+  HeadingItem(editor, 4, "h4", "Heading 4", H4Outline);
 
 export const HeadingFiveItem = (editor: Editor): EditorMenuItem<"h5"> =>
-  HeadingItem(editor, 5, "h5", "Heading 5", Heading5);
+  HeadingItem(editor, 5, "h5", "Heading 5", H5Outline);
 
 export const HeadingSixItem = (editor: Editor): EditorMenuItem<"h6"> =>
-  HeadingItem(editor, 6, "h6", "Heading 6", Heading6);
+  HeadingItem(editor, 6, "h6", "Heading 6", H6Outline);
 
 export const BoldItem = (editor: Editor): EditorMenuItem<"bold"> => ({
   key: "bold",
   name: "Bold",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.BOLD),
   command: () => toggleBold(editor),
-  icon: BoldIcon,
+  icon: BoldOutline,
 });
 
 export const ItalicItem = (editor: Editor): EditorMenuItem<"italic"> => ({
@@ -123,7 +122,7 @@ export const ItalicItem = (editor: Editor): EditorMenuItem<"italic"> => ({
   name: "Italic",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.ITALIC),
   command: () => toggleItalic(editor),
-  icon: ItalicIcon,
+  icon: ItalicOutline,
 });
 
 export const UnderLineItem = (editor: Editor): EditorMenuItem<"underline"> => ({
@@ -131,7 +130,7 @@ export const UnderLineItem = (editor: Editor): EditorMenuItem<"underline"> => ({
   name: "Underline",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.UNDERLINE),
   command: () => toggleUnderline(editor),
-  icon: UnderlineIcon,
+  icon: UnderlineOutline,
 });
 
 export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough"> => ({
@@ -139,7 +138,7 @@ export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough
   name: "Strikethrough",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.STRIKETHROUGH),
   command: () => toggleStrike(editor),
-  icon: StrikethroughIcon,
+  icon: StrikethroughOutline,
 });
 
 export const BulletListItem = (editor: Editor): EditorMenuItem<"bulleted-list"> => ({
@@ -147,7 +146,7 @@ export const BulletListItem = (editor: Editor): EditorMenuItem<"bulleted-list">
   name: "Bulleted list",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.BULLET_LIST),
   command: () => toggleBulletList(editor),
-  icon: ListIcon,
+  icon: ListOutline,
 });
 
 export const NumberedListItem = (editor: Editor): EditorMenuItem<"numbered-list"> => ({
@@ -155,7 +154,7 @@ export const NumberedListItem = (editor: Editor): EditorMenuItem<"numbered-list"
   name: "Numbered list",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.ORDERED_LIST),
   command: () => toggleOrderedList(editor),
-  icon: ListOrderedIcon,
+  icon: NumberedListOutline,
 });
 
 export const TodoListItem = (editor: Editor): EditorMenuItem<"to-do-list"> => ({
@@ -163,7 +162,7 @@ export const TodoListItem = (editor: Editor): EditorMenuItem<"to-do-list"> => ({
   name: "To-do list",
   isActive: () => editor.isActive(CORE_EXTENSIONS.TASK_ITEM),
   command: () => toggleTaskList(editor),
-  icon: CheckSquare,
+  icon: CheckSquareOutline,
 });
 
 export const QuoteItem = (editor: Editor): EditorMenuItem<"quote"> => ({
@@ -171,7 +170,7 @@ export const QuoteItem = (editor: Editor): EditorMenuItem<"quote"> => ({
   name: "Quote",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.BLOCKQUOTE),
   command: () => toggleBlockquote(editor),
-  icon: TextQuote,
+  icon: QuoteOutline,
 });
 
 export const CodeItem = (editor: Editor): EditorMenuItem<"code"> => ({
@@ -179,7 +178,7 @@ export const CodeItem = (editor: Editor): EditorMenuItem<"code"> => ({
   name: "Code",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.CODE_INLINE) || editor?.isActive(CORE_EXTENSIONS.CODE_BLOCK),
   command: () => toggleCodeBlock(editor),
-  icon: CodeIcon,
+  icon: CodeOutline,
 });
 
 export const TableItem = (editor: Editor): EditorMenuItem<"table"> => ({
@@ -187,7 +186,7 @@ export const TableItem = (editor: Editor): EditorMenuItem<"table"> => ({
   name: "Table",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.TABLE),
   command: () => insertTableCommand(editor),
-  icon: TableIcon,
+  icon: TableOutline,
 });
 
 export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
@@ -195,7 +194,7 @@ export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
   name: "Image",
   isActive: () => editor?.isActive(CORE_EXTENSIONS.IMAGE) || editor?.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE),
   command: () => insertImage({ editor, event: "insert", pos: editor.state.selection.from }),
-  icon: ImageIcon,
+  icon: ImageOutline,
 });
 
 export const HorizontalRuleItem = (editor: Editor): EditorMenuItem<"divider"> =>
@@ -204,7 +203,7 @@ export const HorizontalRuleItem = (editor: Editor): EditorMenuItem<"divider"> =>
     name: "Divider",
     isActive: () => editor?.isActive(CORE_EXTENSIONS.HORIZONTAL_RULE),
     command: () => insertHorizontalRule(editor),
-    icon: MinusSquare,
+    icon: MinusSquareOutline,
   }) as const;
 
 export const LinkItem = (editor: Editor): EditorMenuItem<"link"> =>
@@ -219,7 +218,7 @@ export const LinkItem = (editor: Editor): EditorMenuItem<"link"> =>
       else unsetLinkEditor(editor);
     },
 
-    icon: LinkIcon,
+    icon: LinkOutline,
   }) as const;
 
 export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => ({
@@ -230,7 +229,7 @@ export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => (
     if (!props) return;
     toggleTextColor(props.color, editor);
   },
-  icon: Palette,
+  icon: PaletteOutline,
 });
 
 export const BackgroundColorItem = (editor: Editor): EditorMenuItem<"background-color"> => ({
@@ -241,7 +240,7 @@ export const BackgroundColorItem = (editor: Editor): EditorMenuItem<"background-
     if (!props) return;
     toggleBackgroundColor(props.color, editor);
   },
-  icon: Palette,
+  icon: PaletteOutline,
 });
 
 export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => ({
@@ -252,7 +251,7 @@ export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => (
     if (!props) return;
     setTextAlign(props.alignment, editor);
   },
-  icon: AlignCenter,
+  icon: AlignCenterOutline,
 });
 
 export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem<TEditorCommands>[] => {
diff --git a/packages/editor/src/constants/common.ts b/packages/editor/src/constants/common.ts
index b90069944c..a202ab5624 100644
--- a/packages/editor/src/constants/common.ts
+++ b/packages/editor/src/constants/common.ts
@@ -4,30 +4,30 @@
  * See the LICENSE file for details.
  */
 
-import type { LucideIcon } from "lucide-react";
+import type { ComponentType, SVGProps } from "react";
 import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  CaseSensitive,
-  Code2,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  Image,
-  Italic,
-  List,
-  ListOrdered,
-  ListTodo,
-  Strikethrough,
-  Table,
-  TextQuote,
-  Underline,
-} from "lucide-react";
+  AlignCenterOutline,
+  AlignLeftOutline,
+  AlignRightOutline,
+  BoldOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ItalicOutline,
+  ListOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  StrikethroughOutline,
+  TableEditorOutline,
+  TextOutline,
+  ToDoOutline,
+  UnderlineOutline,
+} from "@makeplane/propel/icons";
 import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/propel/icons";
 import type { TCommandExtraProps, TEditorCommands, TEditorFontStyle } from "@/types";
 
@@ -42,20 +42,20 @@ export type ToolbarMenuItem<T extends TEditorCommands = TEditorCommands> = {
   itemKey: T;
   renderKey: string;
   name: string;
-  icon: LucideIcon;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
   shortcut?: string[];
   editors: TEditorTypes[];
   extraProps?: ExtraPropsForCommand<T>;
 };
 
 export const TYPOGRAPHY_ITEMS: ToolbarMenuItem<"text" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6">[] = [
-  { itemKey: "text", renderKey: "text", name: "Text", icon: CaseSensitive, editors: ["document"] },
-  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
-  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
-  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
-  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
-  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
-  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
+  { itemKey: "text", renderKey: "text", name: "Text", icon: TextOutline, editors: ["document"] },
+  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: H1Outline, editors: ["document"] },
+  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: H2Outline, editors: ["document"] },
+  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: H3Outline, editors: ["document"] },
+  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: H4Outline, editors: ["document"] },
+  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: H5Outline, editors: ["document"] },
+  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: H6Outline, editors: ["document"] },
 ];
 
 export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
@@ -63,7 +63,7 @@ export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
     itemKey: "text-align",
     renderKey: "text-align-left",
     name: "Left align",
-    icon: AlignLeft,
+    icon: AlignLeftOutline,
     shortcut: ["Cmd", "Shift", "L"],
     editors: ["lite", "document"],
     extraProps: {
@@ -74,7 +74,7 @@ export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
     itemKey: "text-align",
     renderKey: "text-align-center",
     name: "Center align",
-    icon: AlignCenter,
+    icon: AlignCenterOutline,
     shortcut: ["Cmd", "Shift", "E"],
     editors: ["lite", "document"],
     extraProps: {
@@ -85,7 +85,7 @@ export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
     itemKey: "text-align",
     renderKey: "text-align-right",
     name: "Right align",
-    icon: AlignRight,
+    icon: AlignRightOutline,
     shortcut: ["Cmd", "Shift", "R"],
     editors: ["lite", "document"],
     extraProps: {
@@ -99,7 +99,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     itemKey: "bold",
     renderKey: "bold",
     name: "Bold",
-    icon: Bold,
+    icon: BoldOutline,
     shortcut: ["Cmd", "B"],
     editors: ["lite", "document"],
   },
@@ -107,7 +107,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     itemKey: "italic",
     renderKey: "italic",
     name: "Italic",
-    icon: Italic,
+    icon: ItalicOutline,
     shortcut: ["Cmd", "I"],
     editors: ["lite", "document"],
   },
@@ -115,7 +115,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     itemKey: "underline",
     renderKey: "underline",
     name: "Underline",
-    icon: Underline,
+    icon: UnderlineOutline,
     shortcut: ["Cmd", "U"],
     editors: ["lite", "document"],
   },
@@ -123,7 +123,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     itemKey: "strikethrough",
     renderKey: "strikethrough",
     name: "Strikethrough",
-    icon: Strikethrough,
+    icon: StrikethroughOutline,
     shortcut: ["Cmd", "Shift", "S"],
     editors: ["lite", "document"],
   },
@@ -134,7 +134,7 @@ const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-lis
     itemKey: "bulleted-list",
     renderKey: "bulleted-list",
     name: "Bulleted list",
-    icon: List,
+    icon: ListOutline,
     shortcut: ["Cmd", "Shift", "7"],
     editors: ["lite", "document"],
   },
@@ -142,7 +142,7 @@ const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-lis
     itemKey: "numbered-list",
     renderKey: "numbered-list",
     name: "Numbered list",
-    icon: ListOrdered,
+    icon: NumberedListOutline,
     shortcut: ["Cmd", "Shift", "8"],
     editors: ["lite", "document"],
   },
@@ -150,20 +150,20 @@ const LIST_ITEMS: ToolbarMenuItem<"bulleted-list" | "numbered-list" | "to-do-lis
     itemKey: "to-do-list",
     renderKey: "to-do-list",
     name: "To-do list",
-    icon: ListTodo,
+    icon: ToDoOutline,
     shortcut: ["Cmd", "Shift", "9"],
     editors: ["lite", "document"],
   },
 ];
 
 export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
-  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: TextQuote, editors: ["lite", "document"] },
-  { itemKey: "code", renderKey: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
+  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: QuoteOutline, editors: ["lite", "document"] },
+  { itemKey: "code", renderKey: "code", name: "Code", icon: CodeOutline, editors: ["lite", "document"] },
 ];
 
 export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
-  { itemKey: "table", renderKey: "table", name: "Table", icon: Table, editors: ["document"] },
-  { itemKey: "image", renderKey: "image", name: "Image", icon: Image, editors: ["lite", "document"] },
+  { itemKey: "table", renderKey: "table", name: "Table", icon: TableEditorOutline, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "Image", icon: ImageOutline, editors: ["lite", "document"] },
 ];
 
 export const IMAGE_ITEM = COMPLEX_ITEMS.find((item): item is ToolbarMenuItem<"image"> => item.itemKey === "image")!;
diff --git a/packages/editor/src/extensions/callout/color-selector.tsx b/packages/editor/src/extensions/callout/color-selector.tsx
index a51e2f4eab..cb535b380c 100644
--- a/packages/editor/src/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/extensions/callout/color-selector.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Ban } from "lucide-react";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
@@ -50,7 +50,7 @@ export function CalloutBlockColorSelector(props: Props) {
           disabled={disabled}
         >
           <span className="text-12">Color</span>
-          <ChevronDownIcon className="size-3 flex-shrink-0" />
+          <ChevronDownOutline className="size-3 flex-shrink-0" />
         </button>
         {isOpen && (
           <section className="animate-in fade-in slide-in-from-top-1 absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200">
diff --git a/packages/editor/src/extensions/code/code-block-node-view.tsx b/packages/editor/src/extensions/code/code-block-node-view.tsx
index 6df877d44b..4a1acf3949 100644
--- a/packages/editor/src/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/extensions/code/code-block-node-view.tsx
@@ -8,9 +8,8 @@ import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
 import { common, createLowlight } from "lowlight";
-import { CheckIcon } from "lucide-react";
+import { CopyOutline, TickOutline } from "@makeplane/propel/icons";
 import { useState } from "react";
-import { CopyIcon } from "@plane/propel/icons";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
@@ -58,9 +57,9 @@ export function CodeBlockComponent({ node }: Props) {
           onClick={(e) => void copyToClipboard(e)}
         >
           {copied ? (
-            <CheckIcon className="h-3 w-3 text-success-primary" strokeWidth={3} />
+            <TickOutline className="h-3 w-3 text-success-primary" />
           ) : (
-            <CopyIcon className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
+            <CopyOutline className="h-3 w-3 text-tertiary group-hover/button:text-primary" />
           )}
         </button>
       </Tooltip>
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
index ecdcf0c6ea..2b8602b4ab 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/alignment.tsx
@@ -7,7 +7,7 @@
 import { useEffect, useRef, useState } from "react";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
@@ -44,7 +44,7 @@ export function ImageAlignmentAction(props: Props) {
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {activeAlignmentDetails && <activeAlignmentDetails.icon className="size-3 flex-shrink-0" />}
-          <ChevronDownIcon className="size-2 flex-shrink-0" />
+          <ChevronDownOutline className="size-2 flex-shrink-0" />
         </button>
       </Tooltip>
       {isDropdownOpen && (
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
index 772ddd0fb9..9230989ee3 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/download.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Download } from "lucide-react";
+import { DownloadOutline } from "@makeplane/propel/icons";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
 
@@ -23,7 +23,7 @@ export function ImageDownloadAction(props: Props) {
         className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
         aria-label="Download image"
       >
-        <Download className="size-3" />
+        <DownloadOutline className="size-3" />
       </button>
     </Tooltip>
   );
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 044607e9ec..b1da541dea 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -4,10 +4,9 @@
  * See the LICENSE file for details.
  */
 
-import { Download, Minus } from "lucide-react";
+import { AddOutline, CloseOutline, DownloadOutline, MinusOutline, NewTabOutline } from "@makeplane/propel/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { NewTabIcon, PlusIcon, CloseIcon } from "@plane/propel/icons";
 // plane imports
 import { cn } from "@plane/utils";
 
@@ -219,7 +218,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
           className="absolute top-10 right-10 grid size-8 place-items-center"
           aria-label="Close image viewer"
         >
-          <CloseIcon className="size-8 text-white/60 transition-colors hover:text-white" />
+          <CloseOutline className="size-8 text-white/60 transition-colors hover:text-white" />
         </button>
         <img
           ref={setImageRef}
@@ -252,7 +251,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
               disabled={magnification <= MIN_ZOOM}
               aria-label="Zoom out"
             >
-              <Minus className="size-4" />
+              <MinusOutline className="size-4" />
             </button>
             <span className="w-12 text-center text-13 text-white">{Math.round(100 * magnification)}%</span>
             <button
@@ -268,7 +267,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
-              <PlusIcon className="size-4" />
+              <AddOutline className="size-4" />
             </button>
           </div>
           {!isTouchDevice && (
@@ -278,7 +277,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
               className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Download image"
             >
-              <Download className="size-4" />
+              <DownloadOutline className="size-4" />
             </button>
           )}
           {!isTouchDevice && (
@@ -288,7 +287,7 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
               className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
               aria-label="Open image in new tab"
             >
-              <NewTabIcon className="size-4" />
+              <NewTabOutline className="size-4" />
             </button>
           )}
         </div>
diff --git a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 79e116a3b8..5baa86b4cc 100644
--- a/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Maximize } from "lucide-react";
+import { FullScreenOutline } from "@makeplane/propel/icons";
 import { useEffect, useState } from "react";
 // plane imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -56,7 +56,7 @@ export function ImageFullScreenActionRoot(props: Props) {
           className="grid h-full flex-shrink-0 place-items-center text-on-color/60 transition-colors hover:text-on-color"
           aria-label="View image in full screen"
         >
-          <Maximize className="size-3" />
+          <FullScreenOutline className="size-3" />
         </button>
       </Tooltip>
     </>
diff --git a/packages/editor/src/extensions/custom-image/components/uploader.tsx b/packages/editor/src/extensions/custom-image/components/uploader.tsx
index 13dd5a4ba5..4e13930dde 100644
--- a/packages/editor/src/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/extensions/custom-image/components/uploader.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { ImageIcon, RotateCcw } from "lucide-react";
+import { ImageOutline, RefreshOutline } from "@makeplane/propel/icons";
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 // plane imports
@@ -235,7 +235,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
         }
       }}
     >
-      <ImageIcon className="size-4" />
+      <ImageOutline className="size-4" />
       <div className="flex-1 text-14 font-medium">{getDisplayMessage()}</div>
       {hasDuplicationFailed && editor.isEditable && (
         <button
@@ -249,7 +249,7 @@ export function CustomImageUploader(props: CustomImageUploaderProps) {
           )}
           title="Retry duplication"
         >
-          <RotateCcw className="size-3" />
+          <RefreshOutline className="size-3" />
           <span className="text-11">Retry</span>
         </button>
       )}
diff --git a/packages/editor/src/extensions/custom-image/utils.ts b/packages/editor/src/extensions/custom-image/utils.ts
index 5e7ed2de72..fbeeb387c8 100644
--- a/packages/editor/src/extensions/custom-image/utils.ts
+++ b/packages/editor/src/extensions/custom-image/utils.ts
@@ -5,8 +5,8 @@
  */
 
 import type { Editor } from "@tiptap/core";
-import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
+import { AlignCenterOutline, AlignLeftOutline, AlignRightOutline } from "@makeplane/propel/icons";
+import type { ComponentType, SVGProps } from "react";
 // local imports
 import { ECustomImageAttributeNames, ECustomImageStatus } from "./types";
 import type { TCustomImageAlignment, Pixel, TCustomImageAttributes } from "./types";
@@ -41,22 +41,22 @@ export const ensurePixelString = <TDefault>(
 export const IMAGE_ALIGNMENT_OPTIONS: {
   label: string;
   value: TCustomImageAlignment;
-  icon: LucideIcon;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
 }[] = [
   {
     label: "Left",
     value: "left",
-    icon: AlignLeft,
+    icon: AlignLeftOutline,
   },
   {
     label: "Center",
     value: "center",
-    icon: AlignCenter,
+    icon: AlignCenterOutline,
   },
   {
     label: "Right",
     value: "right",
-    icon: AlignRight,
+    icon: AlignRightOutline,
   },
 ];
 export const getImageBlockId = (id: string) => `editor-image-block-${id}`;
diff --git a/packages/editor/src/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/extensions/slash-commands/command-items-list.tsx
index c1de43e5fe..699813202d 100644
--- a/packages/editor/src/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/extensions/slash-commands/command-items-list.tsx
@@ -4,26 +4,25 @@
  * See the LICENSE file for details.
  */
 
+import { Smile } from "lucide-react";
 import {
-  ALargeSmall,
-  CaseSensitive,
-  Code2,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  ImageIcon,
-  List,
-  ListOrdered,
-  ListTodo,
-  MessageSquareText,
-  MinusSquare,
-  Smile,
-  Table,
-  TextQuote,
-} from "lucide-react";
+  ChatOutline,
+  CodeOutline,
+  H1Outline,
+  H2Outline,
+  H3Outline,
+  H4Outline,
+  H5Outline,
+  H6Outline,
+  ImageOutline,
+  ListOutline,
+  MinusSquareOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  TableEditorOutline,
+  TextOutline,
+  ToDoOutline,
+} from "@makeplane/propel/icons";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // helpers
@@ -68,7 +67,7 @@ export const getSlashCommandFilteredSections =
             title: "Text",
             description: "Just start typing with plain text.",
             searchTerms: ["p", "paragraph"],
-            icon: <CaseSensitive className="size-3.5" />,
+            icon: <TextOutline className="size-3.5" />,
             command: ({ editor, range }) => setText(editor, range),
           },
           {
@@ -77,7 +76,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 1",
             description: "Big section heading.",
             searchTerms: ["title", "big", "large"],
-            icon: <Heading1 className="size-3.5" />,
+            icon: <H1Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 1, range),
           },
           {
@@ -86,7 +85,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 2",
             description: "Medium section heading.",
             searchTerms: ["subtitle", "medium"],
-            icon: <Heading2 className="size-3.5" />,
+            icon: <H2Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 2, range),
           },
           {
@@ -95,7 +94,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 3",
             description: "Small section heading.",
             searchTerms: ["subtitle", "small"],
-            icon: <Heading3 className="size-3.5" />,
+            icon: <H3Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 3, range),
           },
           {
@@ -104,7 +103,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 4",
             description: "Small section heading.",
             searchTerms: ["subtitle", "small"],
-            icon: <Heading4 className="size-3.5" />,
+            icon: <H4Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 4, range),
           },
           {
@@ -113,7 +112,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 5",
             description: "Small section heading.",
             searchTerms: ["subtitle", "small"],
-            icon: <Heading5 className="size-3.5" />,
+            icon: <H5Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 5, range),
           },
           {
@@ -122,7 +121,7 @@ export const getSlashCommandFilteredSections =
             title: "Heading 6",
             description: "Small section heading.",
             searchTerms: ["subtitle", "small"],
-            icon: <Heading6 className="size-3.5" />,
+            icon: <H6Outline className="size-3.5" />,
             command: ({ editor, range }) => toggleHeading(editor, 6, range),
           },
 
@@ -132,7 +131,7 @@ export const getSlashCommandFilteredSections =
             title: "Numbered list",
             description: "Create a numbered list.",
             searchTerms: ["ordered"],
-            icon: <ListOrdered className="size-3.5" />,
+            icon: <NumberedListOutline className="size-3.5" />,
             command: ({ editor, range }) => toggleOrderedList(editor, range),
           },
           {
@@ -141,7 +140,7 @@ export const getSlashCommandFilteredSections =
             title: "Bulleted list",
             description: "Create a bulleted list.",
             searchTerms: ["unordered", "point"],
-            icon: <List className="size-3.5" />,
+            icon: <ListOutline className="size-3.5" />,
             command: ({ editor, range }) => toggleBulletList(editor, range),
           },
           {
@@ -150,7 +149,7 @@ export const getSlashCommandFilteredSections =
             title: "To-do list",
             description: "Create a to-do list.",
             searchTerms: ["todo", "task", "list", "check", "checkbox"],
-            icon: <ListTodo className="size-3.5" />,
+            icon: <ToDoOutline className="size-3.5" />,
             command: ({ editor, range }) => toggleTaskList(editor, range),
           },
           {
@@ -159,7 +158,7 @@ export const getSlashCommandFilteredSections =
             title: "Table",
             description: "Create a table",
             searchTerms: ["table", "cell", "db", "data", "tabular"],
-            icon: <Table className="size-3.5" />,
+            icon: <TableEditorOutline className="size-3.5" />,
             command: ({ editor, range }) => insertTableCommand(editor, range),
           },
           {
@@ -168,7 +167,7 @@ export const getSlashCommandFilteredSections =
             title: "Quote",
             description: "Capture a quote.",
             searchTerms: ["blockquote"],
-            icon: <TextQuote className="size-3.5" />,
+            icon: <QuoteOutline className="size-3.5" />,
             command: ({ editor, range }) => toggleBlockquote(editor, range),
           },
           {
@@ -177,14 +176,14 @@ export const getSlashCommandFilteredSections =
             title: "Code",
             description: "Capture a code snippet.",
             searchTerms: ["codeblock"],
-            icon: <Code2 className="size-3.5" />,
+            icon: <CodeOutline className="size-3.5" />,
             command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
           },
           {
             commandKey: "callout",
             key: "callout",
             title: "Callout",
-            icon: <MessageSquareText className="size-3.5" />,
+            icon: <ChatOutline className="size-3.5" />,
             description: "Insert callout",
             searchTerms: ["callout", "comment", "message", "info", "alert"],
             command: ({ editor, range }: CommandProps) => insertCallout(editor, range),
@@ -195,7 +194,7 @@ export const getSlashCommandFilteredSections =
             title: "Divider",
             description: "Visually divide blocks.",
             searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
-            icon: <MinusSquare className="size-3.5" />,
+            icon: <MinusSquareOutline className="size-3.5" />,
             command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
           },
           {
@@ -221,7 +220,7 @@ export const getSlashCommandFilteredSections =
             title: "Default",
             description: "Change text color",
             searchTerms: ["color", "text", "default"],
-            icon: <ALargeSmall className="size-3.5 text-primary" />,
+            icon: <TextOutline className="size-3.5 text-primary" />,
             command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
           },
           ...COLORS_LIST.map(
@@ -234,7 +233,7 @@ export const getSlashCommandFilteredSections =
                 searchTerms: ["color", "text", color.label],
 
                 icon: (
-                  <ALargeSmall
+                  <TextOutline
                     className="size-3.5"
                     style={{
                       color: color.textColor,
@@ -257,7 +256,7 @@ export const getSlashCommandFilteredSections =
             title: "Default background",
             description: "Change background color",
             searchTerms: ["color", "bg", "background", "default"],
-            icon: <ALargeSmall className="size-3.5" />,
+            icon: <TextOutline className="size-3.5" />,
             iconContainerStyle: {
               borderRadius: "4px",
               backgroundColor: "var(--background-color-surface-1)",
@@ -273,7 +272,7 @@ export const getSlashCommandFilteredSections =
                 title: color.label,
                 description: "Change background color",
                 searchTerms: ["color", "bg", "background", color.label],
-                icon: <ALargeSmall className="size-3.5" />,
+                icon: <TextOutline className="size-3.5" />,
 
                 iconContainerStyle: {
                   borderRadius: "4px",
@@ -293,7 +292,7 @@ export const getSlashCommandFilteredSections =
         commandKey: "image",
         key: "image",
         title: "Image",
-        icon: <ImageIcon className="size-3.5" />,
+        icon: <ImageOutline className="size-3.5" />,
         description: "Insert an image",
         searchTerms: ["img", "photo", "picture", "media", "upload"],
         command: ({ editor, range }: CommandProps) => insertImage({ editor, event: "insert", range }),
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx
index ae555bba82..881129bcb5 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/color-selector.tsx
@@ -6,9 +6,9 @@
 
 import { Disclosure } from "@headlessui/react";
 import type { Editor } from "@tiptap/core";
-import { Ban, Palette } from "lucide-react";
+import { Ban } from "lucide-react";
+import { ChevronRightOutline, PaletteOutline } from "@makeplane/propel/icons";
 // plane imports
-import { ChevronRightIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
@@ -54,10 +54,10 @@ export function TableDragHandleDropdownColorSelector(props: Props) {
         {({ open }) => (
           <>
             <span className="flex items-center gap-2">
-              <Palette className="size-3 shrink-0" />
+              <PaletteOutline className="size-3 shrink-0" />
               Color
             </span>
-            <ChevronRightIcon
+            <ChevronRightOutline
               className={cn("size-3 shrink-0 transition-transform duration-200", {
                 "rotate-90": open,
               })}
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx
index 676d371921..9d5edde3fd 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/drag-handle.tsx
@@ -17,7 +17,7 @@ import {
   FloatingPortal,
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
-import { Ellipsis } from "lucide-react";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -235,7 +235,7 @@ export function ColumnDragHandle(props: ColumnDragHandleProps) {
             "hover:bg-layer-1-hover": !isDropdownOpen,
           })}
         >
-          <Ellipsis className="size-4 text-primary" />
+          <MoreHorizontalOutline className="size-4 text-primary" />
         </button>
       </div>
       {isDropdownOpen && (
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
index f1c0ee3e7f..2dc43bc840 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/column/dropdown.tsx
@@ -6,11 +6,17 @@
 
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowLeft, ArrowRight, ToggleRight } from "lucide-react";
+import {
+  ArrowNarrowLeftOutline,
+  ArrowNarrowRightOutline,
+  CloseOutline,
+  CopyOutline,
+  DeleteOutline,
+  ToggleFilled,
+} from "@makeplane/propel/icons";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedColumns } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateColumns } from "../actions";
@@ -25,19 +31,19 @@ const DROPDOWN_ITEMS: {
   {
     key: "insert-left",
     label: "Insert left",
-    icon: ArrowLeft,
+    icon: ArrowNarrowLeftOutline,
     action: (editor) => editor.chain().focus().addColumnBefore().run(),
   },
   {
     key: "insert-right",
     label: "Insert right",
-    icon: ArrowRight,
+    icon: ArrowNarrowRightOutline,
     action: (editor) => editor.chain().focus().addColumnAfter().run(),
   },
   {
     key: "duplicate",
     label: "Duplicate",
-    icon: CopyIcon,
+    icon: CopyOutline,
     action: (editor) => {
       const table = findTable(editor.state.selection);
       if (!table) return;
@@ -52,13 +58,13 @@ const DROPDOWN_ITEMS: {
   {
     key: "clear-contents",
     label: "Clear contents",
-    icon: CloseIcon,
+    icon: CloseOutline,
     action: (editor) => editor.chain().focus().clearSelectedCells().run(),
   },
   {
     key: "delete",
     label: "Delete",
-    icon: TrashIcon,
+    icon: DeleteOutline,
     action: (editor) => editor.chain().focus().deleteColumn().run(),
   },
 ];
@@ -84,7 +90,7 @@ export function ColumnOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header column</div>
-        <ToggleRight className="size-3 shrink-0" />
+        <ToggleFilled className="size-3 shrink-0" />
       </button>
       <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index ef038f9951..d970b016f5 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/drag-handle.tsx
@@ -17,7 +17,7 @@ import {
   useRole,
 } from "@floating-ui/react";
 import type { Editor } from "@tiptap/core";
-import { Ellipsis } from "lucide-react";
+import { MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -234,7 +234,7 @@ export function RowDragHandle(props: RowDragHandleProps) {
             "hover:bg-layer-1-hover": !isDropdownOpen,
           })}
         >
-          <Ellipsis className="size-4 rotate-90 text-primary" />
+          <MoreHorizontalOutline className="size-4 rotate-90 text-primary" />
         </button>
       </div>
       {isDropdownOpen && (
diff --git a/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
index 6359adffac..1ad0b76203 100644
--- a/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
+++ b/packages/editor/src/extensions/table/plugins/drag-handles/row/dropdown.tsx
@@ -6,11 +6,17 @@
 
 import type { Editor } from "@tiptap/core";
 import { TableMap } from "@tiptap/pm/tables";
-import { ArrowDown, ArrowUp, ToggleRight } from "lucide-react";
+import {
+  ArrowDownOutline,
+  CloseOutline,
+  CopyOutline,
+  DeleteOutline,
+  ToggleFilled,
+  TopArrowOutline,
+} from "@makeplane/propel/icons";
 import type { LucideIcon } from "lucide-react";
 // extensions
 import type { ISvgIcons } from "@plane/propel/icons";
-import { CopyIcon, TrashIcon, CloseIcon } from "@plane/propel/icons";
 import { findTable, getSelectedRows } from "@/extensions/table/table/utilities/helpers";
 // local imports
 import { duplicateRows } from "../actions";
@@ -25,19 +31,19 @@ const DROPDOWN_ITEMS: {
   {
     key: "insert-above",
     label: "Insert above",
-    icon: ArrowUp,
+    icon: TopArrowOutline,
     action: (editor) => editor.chain().focus().addRowBefore().run(),
   },
   {
     key: "insert-below",
     label: "Insert below",
-    icon: ArrowDown,
+    icon: ArrowDownOutline,
     action: (editor) => editor.chain().focus().addRowAfter().run(),
   },
   {
     key: "duplicate",
     label: "Duplicate",
-    icon: CopyIcon,
+    icon: CopyOutline,
     action: (editor) => {
       const table = findTable(editor.state.selection);
       if (!table) return;
@@ -52,13 +58,13 @@ const DROPDOWN_ITEMS: {
   {
     key: "clear-contents",
     label: "Clear contents",
-    icon: CloseIcon,
+    icon: CloseOutline,
     action: (editor) => editor.chain().focus().clearSelectedCells().run(),
   },
   {
     key: "delete",
     label: "Delete",
-    icon: TrashIcon,
+    icon: DeleteOutline,
     action: (editor) => editor.chain().focus().deleteRow().run(),
   },
 ];
@@ -84,7 +90,7 @@ export function RowOptionsDropdown(props: Props) {
         }}
       >
         <div className="flex-grow truncate">Header row</div>
-        <ToggleRight className="size-3 shrink-0" />
+        <ToggleFilled className="size-3 shrink-0" />
       </button>
       <hr className="my-2 border-subtle" />
       <TableDragHandleDropdownColorSelector editor={editor} onSelect={onClose} />
diff --git a/packages/propel/package.json b/packages/propel/package.json
index f98add2773..6226ec3ea9 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -64,6 +64,7 @@
   },
   "dependencies": {
     "@base-ui-components/react": "catalog:",
+    "@makeplane/propel": "catalog:",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/types": "workspace:*",
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 1eebc748d5..ac5071cf6d 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -7,7 +7,7 @@
 import * as React from "react";
 import { Accordion as BaseAccordion } from "@base-ui-components/react";
 
-import { PlusIcon } from "../icons";
+import { AddOutline } from "@makeplane/propel/icons";
 
 export interface AccordionRootProps {
   defaultValue?: string[];
@@ -55,7 +55,7 @@ function AccordionItem({ value, disabled, className = "", children }: AccordionI
 
 function AccordionTrigger({
   className = "",
-  icon = <PlusIcon aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
+  icon = <AddOutline aria-hidden="true" className="transition-all ease-out group-data-[panel-open]:rotate-45" />,
   iconClassName = "",
   children,
   asChild = false,
diff --git a/packages/propel/src/calendar/root.tsx b/packages/propel/src/calendar/root.tsx
index eb962064be..13f18b3f9f 100644
--- a/packages/propel/src/calendar/root.tsx
+++ b/packages/propel/src/calendar/root.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
-import { ChevronLeftIcon } from "../icons/arrows/chevron-left";
+import { ChevronLeftOutline } from "@makeplane/propel/icons";
 
 import { cn } from "../utils";
 
@@ -24,7 +24,7 @@ export function Calendar({ className, showOutsideDays = true, ...props }: Calend
       weekStartsOn={props.weekStartsOn}
       components={{
         Chevron: ({ className, ...props }) => (
-          <ChevronLeftIcon
+          <ChevronLeftOutline
             className={cn(
               "size-4",
               { "rotate-180": props.orientation === "right", "-rotate-90": props.orientation === "down" },
diff --git a/packages/propel/src/collapsible/collapsible.stories.tsx b/packages/propel/src/collapsible/collapsible.stories.tsx
index 5669ffac50..bc6b4e7ec9 100644
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { ChevronDownIcon } from "../icons/arrows/chevron-down";
+import { ChevronDownOutline } from "@makeplane/propel/icons";
 import { Collapsible } from "./collapsible";
 
 const meta = {
@@ -34,7 +34,7 @@ const meta = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={toggleOpen} className="w-96">
         <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Click to toggle</span>
-          <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
           <div className="border-gray-200 rounded-md border p-4">
@@ -78,7 +78,7 @@ export const Controlled: Story = {
         <Collapsible.CollapsibleRoot isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
           <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Controlled Collapsible</span>
-            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="border-gray-200 rounded-md border p-4">
@@ -99,7 +99,7 @@ export const NestedContent: Story = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
         <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
           <span className="font-semibold">Collapsible with Nested Content</span>
-          <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-2">
           <div className="border-gray-200 space-y-2 rounded-md border p-4">
@@ -126,7 +126,7 @@ export const CustomStyling: Story = {
       <Collapsible.CollapsibleRoot {...args} isOpen={isOpen} onToggle={() => setIsOpen(!isOpen)} className="w-96">
         <Collapsible.CollapsibleTrigger className="from-purple-500 to-pink-500 shadow-lg hover:shadow-xl flex w-full items-center justify-between rounded-lg bg-gradient-to-r px-6 py-3 text-on-color transition-all">
           <span className="text-16 font-bold">Custom Styled Trigger</span>
-          <ChevronDownIcon className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
+          <ChevronDownOutline className="h-5 w-5 transition-transform group-data-[panel-open]:rotate-180" />
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className="mt-4">
           <div className="from-purple-100 to-pink-100 shadow-md rounded-lg bg-gradient-to-br p-6">
@@ -145,7 +145,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">First Item</span>
-            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="border-gray-200 rounded-md border p-4">
@@ -157,7 +157,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Second Item</span>
-            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="border-gray-200 rounded-md border p-4">
@@ -169,7 +169,7 @@ export const MultipleCollapsibles: Story = {
         <Collapsible.CollapsibleRoot>
           <Collapsible.CollapsibleTrigger className="bg-gray-100 hover:bg-gray-200 flex w-full items-center justify-between rounded-md px-4 py-2">
             <span className="font-semibold">Third Item</span>
-            <ChevronDownIcon className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
+            <ChevronDownOutline className="h-4 w-4 transition-transform group-data-[panel-open]:rotate-180" />
           </Collapsible.CollapsibleTrigger>
           <Collapsible.CollapsibleContent className="mt-2">
             <div className="border-gray-200 rounded-md border p-4">
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
index 86d898154a..2db76f698d 100644
--- a/packages/propel/src/combobox/combobox.stories.tsx
+++ b/packages/propel/src/combobox/combobox.stories.tsx
@@ -6,9 +6,8 @@
 
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronsUpDown } from "lucide-react";
+import { ChevronExpandOutline, TickOutline } from "@makeplane/propel/icons";
 import { useArgs } from "storybook/preview-api";
-import { CheckIcon } from "../icons";
 import { Combobox } from "./combobox";
 
 const frameworks = [
@@ -46,7 +45,7 @@ const meta = {
       <Combobox {...args} value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
@@ -55,7 +54,7 @@ const meta = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -77,7 +76,7 @@ export const WithoutSearch: Story = {
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options className="w-72">
           {frameworks.map((framework) => (
@@ -86,7 +85,7 @@ export const WithoutSearch: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -104,7 +103,7 @@ export const MultiSelect: Story = {
       <Combobox multiSelect value={value} onValueChange={(v) => setValue(v as string[])}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span className="truncate">{value.length > 0 ? `${value.length} selected` : "Select frameworks..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
@@ -113,7 +112,7 @@ export const MultiSelect: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
+              {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -134,7 +133,7 @@ export const MultiSelectWithLimit: Story = {
             <span className="truncate">
               {value.length > 0 ? `${value.length}/3 selected` : "Select up to 3 frameworks..."}
             </span>
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Combobox.Button>
           <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
             {frameworks.map((framework) => (
@@ -143,7 +142,7 @@ export const MultiSelectWithLimit: Story = {
                 value={framework.value}
                 className="flex items-center gap-2 px-4 py-2"
               >
-                {value.includes(framework.value) && <CheckIcon className="h-4 w-4" />}
+                {value.includes(framework.value) && <TickOutline className="h-4 w-4" />}
                 <span>{framework.label}</span>
               </Combobox.Option>
             ))}
@@ -163,7 +162,7 @@ export const Disabled: Story = {
       <Combobox disabled value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 bg-gray-100 flex w-72 items-center justify-between rounded-md border px-4 py-2 opacity-50">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
@@ -172,7 +171,7 @@ export const Disabled: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -189,7 +188,7 @@ export const DisabledOptions: Story = {
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options showSearch searchPlaceholder="Search framework..." className="w-72">
           {frameworks.map((framework) => (
@@ -199,7 +198,7 @@ export const DisabledOptions: Story = {
               disabled={framework.value === "angular" || framework.value === "svelte"}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -216,7 +215,7 @@ export const CustomMaxHeight: Story = {
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options showSearch searchPlaceholder="Search framework..." maxHeight="sm" className="w-72">
           {frameworks.map((framework) => (
@@ -225,7 +224,7 @@ export const CustomMaxHeight: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
@@ -242,7 +241,7 @@ export const CustomEmptyMessage: Story = {
       <Combobox value={value} onValueChange={(v) => setValue(v as string)}>
         <Combobox.Button className="border-gray-300 hover:bg-gray-50 flex w-72 items-center justify-between rounded-md border bg-white px-4 py-2">
           <span>{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}</span>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronExpandOutline className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Combobox.Button>
         <Combobox.Options
           showSearch
@@ -256,7 +255,7 @@ export const CustomEmptyMessage: Story = {
               value={framework.value}
               className="flex items-center gap-2 px-4 py-2"
             >
-              {value === framework.value && <CheckIcon className="h-4 w-4" />}
+              {value === framework.value && <TickOutline className="h-4 w-4" />}
               <span>{framework.label}</span>
             </Combobox.Option>
           ))}
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
index 4f680078aa..c4e83c0568 100644
--- a/packages/propel/src/combobox/combobox.tsx
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import { Combobox as BaseCombobox } from "@base-ui-components/react/combobox";
-import { SearchIcon } from "../icons";
+import { SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils/classname";
 
 // Type definitions
@@ -181,7 +181,7 @@ function ComboboxOptions({
           <div className="flex flex-col gap-1">
             {showSearch && (
               <div className="relative">
-                <SearchIcon className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
+                <SearchOutline className="absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2 text-placeholder" />
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
index dbdaf2e308..ab440d8b14 100644
--- a/packages/propel/src/command/command.stories.tsx
+++ b/packages/propel/src/command/command.stories.tsx
@@ -5,7 +5,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { File, Folder, Settings, User } from "lucide-react";
+import { FileOutline, FolderOutline, SettingsOutline, UserOutline } from "@makeplane/propel/icons";
 import { Command } from "./command";
 
 const meta = {
@@ -52,19 +52,19 @@ export const WithIcons: Story = {
         />
         <Command.List className="max-h-80 overflow-auto py-2">
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Folder className="h-4 w-4" />
+            <FolderOutline className="h-4 w-4" />
             <span>Documents</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Folder className="h-4 w-4" />
+            <FolderOutline className="h-4 w-4" />
             <span>Downloads</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <File className="h-4 w-4" />
+            <FileOutline className="h-4 w-4" />
             <span>README.md</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <File className="h-4 w-4" />
+            <FileOutline className="h-4 w-4" />
             <span>package.json</span>
           </Command.Item>
         </Command.List>
@@ -85,21 +85,21 @@ export const WithCategories: Story = {
         <Command.List className="max-h-80 overflow-auto py-2">
           <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">User</div>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <User className="h-4 w-4" />
+            <UserOutline className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Settings className="h-4 w-4" />
+            <SettingsOutline className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
 
           <div className="text-gray-500 mt-2 px-2 py-1.5 text-11 font-semibold">Files</div>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Folder className="h-4 w-4" />
+            <FolderOutline className="h-4 w-4" />
             <span>Open Folder</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <File className="h-4 w-4" />
+            <FileOutline className="h-4 w-4" />
             <span>New File</span>
           </Command.Item>
         </Command.List>
@@ -148,15 +148,15 @@ export const WithoutSearch: Story = {
       <Command className="border-gray-200 w-96 rounded-lg border p-2">
         <Command.List className="max-h-80 overflow-auto py-2">
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <User className="h-4 w-4" />
+            <UserOutline className="h-4 w-4" />
             <span>Profile</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Settings className="h-4 w-4" />
+            <SettingsOutline className="h-4 w-4" />
             <span>Settings</span>
           </Command.Item>
           <Command.Item className="hover:bg-gray-100 flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2">
-            <Folder className="h-4 w-4" />
+            <FolderOutline className="h-4 w-4" />
             <span>Files</span>
           </Command.Item>
         </Command.List>
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
index d87b332a0f..3d9496930c 100644
--- a/packages/propel/src/command/command.tsx
+++ b/packages/propel/src/command/command.tsx
@@ -6,7 +6,7 @@
 
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { SearchIcon } from "../icons";
+import { SearchOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils/classname";
 
 function CommandComponent({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
@@ -19,7 +19,7 @@ function CommandInput({ className, ...props }: React.ComponentProps<typeof Comma
       data-slot="command-input-wrapper"
       className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2"
     >
-      <SearchIcon className="size-3.5 flex-shrink-0 text-placeholder" strokeWidth={1.5} />
+      <SearchOutline className="size-3.5 flex-shrink-0 text-placeholder" />
       <CommandPrimitive.Input data-slot="command-input" className={cn(className)} {...props} />
     </div>
   );
diff --git a/packages/propel/src/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index 7ce5f3ece6..c7069a0dcc 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -5,9 +5,16 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Download, Edit, Share, Star, Archive } from "lucide-react";
-import { CopyIcon, TrashIcon } from "../icons";
-import { ChevronRightIcon } from "../icons/arrows/chevron-right";
+import {
+  ArchiveOutline,
+  ChevronRightOutline,
+  CopyOutline,
+  DeleteOutline,
+  DownloadOutline,
+  EditOutline,
+  ShareOutline,
+  StarOutline,
+} from "@makeplane/propel/icons";
 import { ContextMenu } from "./context-menu";
 
 // cannot use satisfies here because base-ui does not have portable types.
@@ -70,24 +77,24 @@ export const WithIcons: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Edit className="mr-2 h-4 w-4" />
+              <EditOutline className="mr-2 h-4 w-4" />
               Edit
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
+              <DownloadOutline className="mr-2 h-4 w-4" />
               Download
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Share className="mr-2 h-4 w-4" />
+              <ShareOutline className="mr-2 h-4 w-4" />
               Share
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
@@ -109,19 +116,19 @@ export const WithSubmenus: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Edit className="mr-2 h-4 w-4" />
+              <EditOutline className="mr-2 h-4 w-4" />
               Edit
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Submenu>
               <ContextMenu.SubmenuTrigger>
-                <Share className="mr-2 h-4 w-4" />
+                <ShareOutline className="mr-2 h-4 w-4" />
                 Share
-                <ChevronRightIcon className="ml-auto h-4 w-4" />
+                <ChevronRightOutline className="ml-auto h-4 w-4" />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Content>
@@ -133,7 +140,7 @@ export const WithSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
@@ -155,24 +162,24 @@ export const DisabledItems: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item disabled>
-              <Edit className="mr-2 h-4 w-4" />
+              <EditOutline className="mr-2 h-4 w-4" />
               Edit (Disabled)
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
+              <DownloadOutline className="mr-2 h-4 w-4" />
               Download
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item disabled>
-              <Share className="mr-2 h-4 w-4" />
+              <ShareOutline className="mr-2 h-4 w-4" />
               Share (Disabled)
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
@@ -202,24 +209,24 @@ export const OnFileCard: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
+              <DownloadOutline className="mr-2 h-4 w-4" />
               Download
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy Link
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Star className="mr-2 h-4 w-4" />
+              <StarOutline className="mr-2 h-4 w-4" />
               Add to Favorites
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Archive className="mr-2 h-4 w-4" />
+              <ArchiveOutline className="mr-2 h-4 w-4" />
               Archive
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
@@ -241,15 +248,15 @@ export const OnImage: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
+              <DownloadOutline className="mr-2 h-4 w-4" />
               Save Image
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy Image
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy Image URL
             </ContextMenu.Item>
             <ContextMenu.Separator />
@@ -277,11 +284,11 @@ export const OnText: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Edit className="mr-2 h-4 w-4" />
+              <EditOutline className="mr-2 h-4 w-4" />
               Edit
             </ContextMenu.Item>
             <ContextMenu.Separator />
@@ -310,7 +317,7 @@ export const NestedSubmenus: Story = {
             <ContextMenu.Submenu>
               <ContextMenu.SubmenuTrigger>
                 Import
-                <ChevronRightIcon className="ml-auto h-4 w-4" />
+                <ChevronRightOutline className="ml-auto h-4 w-4" />
               </ContextMenu.SubmenuTrigger>
               <ContextMenu.Portal>
                 <ContextMenu.Content>
@@ -319,7 +326,7 @@ export const NestedSubmenus: Story = {
                   <ContextMenu.Submenu>
                     <ContextMenu.SubmenuTrigger>
                       From Cloud
-                      <ChevronRightIcon className="ml-auto h-4 w-4" />
+                      <ChevronRightOutline className="ml-auto h-4 w-4" />
                     </ContextMenu.SubmenuTrigger>
                     <ContextMenu.Portal>
                       <ContextMenu.Content>
@@ -334,7 +341,7 @@ export const NestedSubmenus: Story = {
             </ContextMenu.Submenu>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
             </ContextMenu.Item>
           </ContextMenu.Content>
@@ -356,23 +363,23 @@ export const WithKeyboardShortcuts: Story = {
         <ContextMenu.Portal>
           <ContextMenu.Content>
             <ContextMenu.Item>
-              <CopyIcon className="mr-2 h-4 w-4" />
+              <CopyOutline className="mr-2 h-4 w-4" />
               Copy
               <span className="ml-auto text-11 text-placeholder">⌘C</span>
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Edit className="mr-2 h-4 w-4" />
+              <EditOutline className="mr-2 h-4 w-4" />
               Edit
               <span className="ml-auto text-11 text-placeholder">⌘E</span>
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
+              <DownloadOutline className="mr-2 h-4 w-4" />
               Download
               <span className="ml-auto text-11 text-placeholder">⌘D</span>
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <TrashIcon className="mr-2 h-4 w-4 text-danger-primary" />
+              <DeleteOutline className="mr-2 h-4 w-4 text-danger-primary" />
               <span className="text-danger-primary">Delete</span>
               <span className="ml-auto text-11 text-placeholder">⌘⌫</span>
             </ContextMenu.Item>
diff --git a/packages/propel/src/dialog/dialog.stories.tsx b/packages/propel/src/dialog/dialog.stories.tsx
index fb9b17bcab..36281bf5d8 100644
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { CloseIcon } from "../icons/actions/close-icon";
+import { CloseOutline } from "@makeplane/propel/icons";
 import { Dialog, EDialogWidth } from "./root";
 
 const meta = {
@@ -208,7 +208,7 @@ export const WithCloseButton: Story = {
                 <div className="flex items-start justify-between">
                   <Dialog.Title>Dialog with Close Button</Dialog.Title>
                   <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
-                    <CloseIcon className="h-4 w-4" />
+                    <CloseOutline className="h-4 w-4" />
                   </button>
                 </div>
                 <div className="mt-4">
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
index 9da6079755..537473966f 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -6,7 +6,7 @@
 
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { SmilePlus } from "lucide-react";
+import { ReactionOutline } from "@makeplane/propel/icons";
 import { stringToEmoji } from "../emoji-icon-picker";
 import type { EmojiReactionType } from "./emoji-reaction";
 import { EmojiReactionGroup } from "./emoji-reaction";
@@ -44,7 +44,7 @@ export const Default: Story = {
           closeOnSelect
           label={
             <span className="flex size-8 items-center justify-center rounded-md px-2 text-18">
-              {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-6 text-primary" />}
+              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-6 text-primary" />}
             </span>
           }
         />
@@ -76,7 +76,7 @@ export const WithCustomLabel: Story = {
           closeOnSelect
           label={
             <button className="flex items-center gap-2 rounded-sm border border-subtle bg-layer-1 px-4 py-2 hover:bg-surface-2">
-              {selectedEmoji ? stringToEmoji(selectedEmoji) : <SmilePlus className="h-4 w-4" />}
+              {selectedEmoji ? stringToEmoji(selectedEmoji) : <ReactionOutline className="h-4 w-4" />}
               <span className="text-13">Add Reaction</span>
             </button>
           }
@@ -141,7 +141,7 @@ export const InlineReactions: Story = {
           closeOnSelect
           label={
             <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
-              <SmilePlus className="h-3.5 w-3.5" />
+              <ReactionOutline className="h-3.5 w-3.5" />
             </button>
           }
         />
@@ -172,7 +172,7 @@ export const DifferentPlacements: Story = {
             handleToggle={setIsOpen1}
             onChange={() => {}}
             placement="bottom-start"
-            label={<SmilePlus className="h-6 w-6" />}
+            label={<ReactionOutline className="h-6 w-6" />}
           />
         </div>
         <div className="flex items-center gap-4">
@@ -182,7 +182,7 @@ export const DifferentPlacements: Story = {
             handleToggle={setIsOpen2}
             onChange={() => {}}
             placement="bottom-end"
-            label={<SmilePlus className="h-6 w-6" />}
+            label={<ReactionOutline className="h-6 w-6" />}
           />
         </div>
         <div className="flex items-center gap-4">
@@ -192,7 +192,7 @@ export const DifferentPlacements: Story = {
             handleToggle={setIsOpen3}
             onChange={() => {}}
             placement="top-start"
-            label={<SmilePlus className="h-6 w-6" />}
+            label={<ReactionOutline className="h-6 w-6" />}
           />
         </div>
         <div className="flex items-center gap-4">
@@ -202,7 +202,7 @@ export const DifferentPlacements: Story = {
             handleToggle={setIsOpen4}
             onChange={() => {}}
             placement="top-end"
-            label={<SmilePlus className="h-6 w-6" />}
+            label={<ReactionOutline className="h-6 w-6" />}
           />
         </div>
       </div>
@@ -385,7 +385,7 @@ export const InMessageContext: Story = {
             closeOnSelect
             label={
               <button className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-dashed border-strong bg-surface-1 text-placeholder transition-all duration-200 hover:border-accent-strong hover:bg-accent-primary/5 hover:text-accent-primary">
-                <SmilePlus className="h-3.5 w-3.5" />
+                <ReactionOutline className="h-3.5 w-3.5" />
               </button>
             }
           />
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
index b71b623040..c5898285e7 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -7,7 +7,7 @@
 import * as React from "react";
 import { AnimatedCounter } from "../animated-counter";
 import { stringToEmoji } from "../emoji-icon-picker";
-import { AddReactionIcon } from "../icons";
+import { ReactionOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "../tooltip";
 import { cn } from "../utils";
 import { IconButton } from "../icon-button";
@@ -110,7 +110,7 @@ const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
     <Tooltip tooltipContent="Add reaction">
       <IconButton
         ref={ref}
-        icon={AddReactionIcon}
+        icon={ReactionOutline}
         variant="ghost"
         size="sm"
         onClick={onAddReaction}
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index 1bd39d03b8..bd843fabf6 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -5,7 +5,14 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Settings, User, LogOut, Mail, Bell, HelpCircle } from "lucide-react";
+import {
+  HelpOutline,
+  LogOutOutline,
+  MailOutline,
+  SettingsOutline,
+  SubscribeOutline,
+  UserOutline,
+} from "@makeplane/propel/icons";
 import { Menu } from "./menu";
 
 const meta = {
@@ -45,25 +52,25 @@ export const WithIcons: Story = {
       <Menu label="Account">
         <Menu.MenuItem onClick={() => alert("Profile")}>
           <div className="flex items-center gap-2">
-            <User className="h-4 w-4" />
+            <UserOutline className="h-4 w-4" />
             <span>Profile</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Settings")}>
           <div className="flex items-center gap-2">
-            <Settings className="h-4 w-4" />
+            <SettingsOutline className="h-4 w-4" />
             <span>Settings</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Messages")}>
           <div className="flex items-center gap-2">
-            <Mail className="h-4 w-4" />
+            <MailOutline className="h-4 w-4" />
             <span>Messages</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Logout")}>
           <div className="flex items-center gap-2">
-            <LogOut className="h-4 w-4" />
+            <LogOutOutline className="h-4 w-4" />
             <span>Logout</span>
           </div>
         </Menu.MenuItem>
@@ -213,14 +220,14 @@ export const ComplexMenu: Story = {
       <Menu label="More Actions" buttonClassName="bg-gray-100">
         <Menu.MenuItem onClick={() => alert("Notifications")}>
           <div className="flex items-center gap-2">
-            <Bell className="h-4 w-4" />
+            <SubscribeOutline className="h-4 w-4" />
             <span>Notifications</span>
             <span className="bg-red-500 ml-auto rounded-sm px-2 py-0.5 text-11 text-on-color">3</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Help")}>
           <div className="flex items-center gap-2">
-            <HelpCircle className="h-4 w-4" />
+            <HelpOutline className="h-4 w-4" />
             <span>Help Center</span>
           </div>
         </Menu.MenuItem>
@@ -235,7 +242,7 @@ export const ComplexMenu: Story = {
         <div className="border-gray-200 my-1 border-t" />
         <Menu.MenuItem onClick={() => alert("Logout")}>
           <div className="flex items-center gap-2 text-danger-primary">
-            <LogOut className="h-4 w-4" />
+            <LogOutOutline className="h-4 w-4" />
             <span>Logout</span>
           </div>
         </Menu.MenuItem>
diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx
index edf43acf68..a7446ded87 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -6,8 +6,7 @@
 
 import * as React from "react";
 import { Menu as BaseMenu } from "@base-ui-components/react/menu";
-import { MoreHorizontal } from "lucide-react";
-import { ChevronDownIcon, ChevronRightIcon } from "../icons";
+import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils/classname";
 import type { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types";
 
@@ -31,7 +30,7 @@ function SubMenu(props: TSubMenuProps) {
     <BaseMenu.SubmenuRoot disabled={disabled}>
       <BaseMenu.SubmenuTrigger className={""}>
         <span className="flex-1">{trigger}</span>
-        <ChevronRightIcon />
+        <ChevronRightOutline />
       </BaseMenu.SubmenuTrigger>
       <BaseMenu.Portal>
         <BaseMenu.Positioner className={""} alignOffset={-4} sideOffset={-4}>
@@ -154,7 +153,7 @@ function Menu(props: TMenuProps) {
               tabIndex={customButtonTabIndex}
               aria-label={ariaLabel}
             >
-              <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+              <MoreHorizontalOutline className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
             </BaseMenu.Trigger>
           ) : (
             <BaseMenu.Trigger
@@ -170,7 +169,7 @@ function Menu(props: TMenuProps) {
               aria-label={ariaLabel}
             >
               {label}
-              {!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
+              {!noChevron && <ChevronDownOutline className="h-3.5 w-3.5" />}
             </BaseMenu.Trigger>
           )}
         </>
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
index c5f37f794f..d1d782b31d 100644
--- a/packages/propel/src/popover/popover.stories.tsx
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -7,7 +7,7 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useArgs } from "storybook/preview-api";
-import { CloseIcon } from "../icons/actions/close-icon";
+import { CloseOutline } from "@makeplane/propel/icons";
 import { Popover } from "./root";
 
 // cannot use satifies here because base-ui does not have portable types.
@@ -76,7 +76,7 @@ export const Controlled: Story = {
             <div className="flex items-start justify-between">
               <h3 className="text-13 font-semibold">Controlled State</h3>
               <button onClick={() => setOpen(false)} className="hover:bg-gray-100 rounded-full p-1">
-                <CloseIcon className="h-4 w-4" />
+                <CloseOutline className="h-4 w-4" />
               </button>
             </div>
             <p className="text-gray-600 mt-2 text-13">Current state: {open ? "Open" : "Closed"}</p>
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
index 076e341dfe..7a7da4fdd5 100644
--- a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
+++ b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
@@ -7,13 +7,15 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 // icons import
-import { OverviewIcon } from "../icons/overview-icon";
-import { CycleIcon } from "../icons/project/cycle-icon";
-import { IntakeIcon } from "../icons/project/intake-icon";
-import { ModuleIcon } from "../icons/project/module-icon";
-import { PageIcon } from "../icons/project/page-icon";
-import { ViewsIcon } from "../icons/project/view-icon";
-import { WorkItemsIcon } from "../icons/project/work-items-icon";
+import {
+  CyclesOutline,
+  IntakeOutline,
+  ModuleOutline,
+  OverviewOutline,
+  PagesOutline,
+  ViewsOutline,
+  WorkItemsOutline,
+} from "@makeplane/propel/icons";
 // tab navigation import
 import { TabNavigationItem } from "./tab-navigation-item";
 import { TabNavigationList } from "./tab-navigation-list";
@@ -42,13 +44,13 @@ export const Default: Story = {
 
     // Example navigation items (matching actual Plane project navigation)
     const navItems = [
-      { key: "overview", name: "Overview", href: "#overview", icon: OverviewIcon },
-      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsIcon },
-      { key: "cycles", name: "Cycles", href: "#cycles", icon: CycleIcon },
-      { key: "modules", name: "Modules", href: "#modules", icon: ModuleIcon },
-      { key: "views", name: "Views", href: "#views", icon: ViewsIcon },
-      { key: "pages", name: "Pages", href: "#pages", icon: PageIcon },
-      { key: "intake", name: "Intake", href: "#intake", icon: IntakeIcon },
+      { key: "overview", name: "Overview", href: "#overview", icon: OverviewOutline },
+      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsOutline },
+      { key: "cycles", name: "Cycles", href: "#cycles", icon: CyclesOutline },
+      { key: "modules", name: "Modules", href: "#modules", icon: ModuleOutline },
+      { key: "views", name: "Views", href: "#views", icon: ViewsOutline },
+      { key: "pages", name: "Pages", href: "#pages", icon: PagesOutline },
+      { key: "intake", name: "Intake", href: "#intake", icon: IntakeOutline },
     ];
 
     return (
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index 434221b9e8..c158909b1a 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -6,8 +6,7 @@
 
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Settings, User, Bell } from "lucide-react";
-import { HomeIcon } from "../icons/workspace/home-icon";
+import { HomeOutline, SettingsOutline, SubscribeOutline, UserOutline } from "@makeplane/propel/icons";
 import { Tabs } from "./tabs";
 
 type TabOption = {
@@ -159,10 +158,10 @@ export const DisabledTab: Story = {
 export const WithIcons: Story = {
   render({ defaultValue }) {
     const tabsWithIcons = [
-      { label: "Home", value: "home", icon: HomeIcon },
-      { label: "Profile", value: "profile", icon: User },
-      { label: "Settings", value: "settings", icon: Settings },
-      { label: "Notifications", value: "notifications", icon: Bell },
+      { label: "Home", value: "home", icon: HomeOutline },
+      { label: "Profile", value: "profile", icon: UserOutline },
+      { label: "Settings", value: "settings", icon: SettingsOutline },
+      { label: "Notifications", value: "notifications", icon: SubscribeOutline },
     ];
 
     return (
@@ -191,10 +190,10 @@ export const WithIcons: Story = {
 export const IconsOnly: Story = {
   render({ defaultValue }) {
     const iconTabs = [
-      { value: "home", icon: HomeIcon },
-      { value: "profile", icon: User },
-      { value: "settings", icon: Settings },
-      { value: "notifications", icon: Bell },
+      { value: "home", icon: HomeOutline },
+      { value: "profile", icon: UserOutline },
+      { value: "settings", icon: SettingsOutline },
+      { value: "notifications", icon: SubscribeOutline },
     ];
 
     return (
diff --git a/packages/propel/src/toast/toast.tsx b/packages/propel/src/toast/toast.tsx
index c4c8fad447..9985261f20 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -6,8 +6,7 @@
 
 import * as React from "react";
 import { Toast as BaseToast } from "@base-ui-components/react/toast";
-import { AlertTriangle, CheckIcon, InfoIcon, XIcon } from "lucide-react";
-import { CloseIcon } from "../icons/actions/close-icon";
+import { CloseOutline, InfoOutline, TickOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 // spinner
 import { CircularBarSpinner } from "../spinners/circular-bar-spinner";
 import { cn } from "../utils/classname";
@@ -69,25 +68,25 @@ export function Toast(props: ToastProps) {
 
 const TOAST_DATA = {
   [TOAST_TYPE.SUCCESS]: {
-    icon: <CheckIcon width={12} height={12} className="text-on-color" />,
+    icon: <TickOutline width={12} height={12} className="text-on-color" />,
     iconBgClassName: "bg-success-primary",
     backgroundColorClassName: "!bg-surface-1",
     borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.ERROR]: {
-    icon: <XIcon width={12} height={12} className="text-on-color" />,
+    icon: <CloseOutline width={12} height={12} className="text-on-color" />,
     iconBgClassName: "bg-danger-primary",
     backgroundColorClassName: "bg-surface-1",
     borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.WARNING]: {
-    icon: <AlertTriangle width={12} height={12} className="text-on-color" />,
+    icon: <WarningTriangleOutline width={12} height={12} className="text-on-color" />,
     iconBgClassName: "bg-warning-primary",
     backgroundColorClassName: "bg-surface-1",
     borderColorClassName: "border-subtle",
   },
   [TOAST_TYPE.INFO]: {
-    icon: <InfoIcon width={12} height={12} className="text-on-color" />,
+    icon: <InfoOutline width={12} height={12} className="text-on-color" />,
     iconBgClassName: "bg-accent-primary",
     backgroundColorClassName: "bg-surface-1",
     borderColorClassName: "border-subtle",
@@ -164,7 +163,7 @@ function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.Toast
       }}
     >
       <BaseToast.Close className="absolute top-3 right-3 cursor-pointer text-icon-secondary hover:text-icon-tertiary">
-        <CloseIcon strokeWidth={1.5} width={16} height={16} />
+        <CloseOutline width={16} height={16} />
       </BaseToast.Close>
       <div className="flex w-full items-start gap-2 p-4">
         <div className="py-1">
@@ -218,7 +217,7 @@ export function ToastStatic({ type, title, message, actionItems, theme = "light"
         )}
       >
         <div className="absolute top-1 right-1 cursor-default text-icon-tertiary">
-          <CloseIcon strokeWidth={1.5} width={14} height={14} />
+          <CloseOutline width={14} height={14} />
         </div>
         <div className="flex w-full items-start gap-3 p-4">
           <div className="py-1">
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
index 42ed52185a..b212e50a51 100644
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -6,21 +6,23 @@
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
-  Bold,
-  Italic,
-  Underline,
-  Strikethrough,
-  Code,
-  ListOrdered,
-  Quote,
-  AlignLeft,
-  AlignCenter,
-  AlignRight,
-  Undo,
-  Redo,
-} from "lucide-react";
-import { LinkIcon, GlobeIcon, LockIcon } from "../icons";
-import { ListLayoutIcon } from "../icons/layouts/list-icon";
+  AlignCenterOutline,
+  AlignLeftOutline,
+  AlignRightOutline,
+  BoldOutline,
+  CodeOutline,
+  GlobeOutline,
+  ItalicOutline,
+  LinkOutline,
+  ListOutline,
+  LockOutline,
+  NumberedListOutline,
+  QuoteOutline,
+  RedoOutline,
+  StrikethroughOutline,
+  UnderlineOutline,
+  UndoOutline,
+} from "@makeplane/propel/icons";
 import { Toolbar } from "./toolbar";
 
 const meta = {
@@ -45,28 +47,28 @@ export const Default: Story = {
         <div className="w-96 rounded-sm border">
           <Toolbar>
             <Toolbar.Group isFirst>
-              <Toolbar.Item icon={Undo} tooltip="Undo" />
-              <Toolbar.Item icon={Redo} tooltip="Redo" />
+              <Toolbar.Item icon={UndoOutline} tooltip="Undo" />
+              <Toolbar.Item icon={RedoOutline} tooltip="Redo" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={Bold} tooltip="Bold" />
-              <Toolbar.Item icon={Italic} tooltip="Italic" />
-              <Toolbar.Item icon={Underline} tooltip="Underline" />
-              <Toolbar.Item icon={Strikethrough} tooltip="Strikethrough" />
+              <Toolbar.Item icon={BoldOutline} tooltip="Bold" />
+              <Toolbar.Item icon={ItalicOutline} tooltip="Italic" />
+              <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" />
+              <Toolbar.Item icon={StrikethroughOutline} tooltip="Strikethrough" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-              <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
-              <Toolbar.Item icon={Quote} tooltip="Quote" />
+              <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+              <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
+              <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
-              <Toolbar.Item icon={AlignCenter} tooltip="Align Center" />
-              <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
+              <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
+              <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" />
+              <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
             </Toolbar.Group>
             <Toolbar.Group>
-              <Toolbar.Item icon={LinkIcon} tooltip="Link" />
-              <Toolbar.Item icon={Code} tooltip="Code" />
+              <Toolbar.Item icon={LinkOutline} tooltip="Link" />
+              <Toolbar.Item icon={CodeOutline} tooltip="Code" />
             </Toolbar.Group>
           </Toolbar>
         </div>
@@ -81,19 +83,19 @@ export const WithActiveStates: Story = {
       <div className="p-4">
         <Toolbar>
           <Toolbar.Group isFirst>
-            <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
-            <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
-            <Toolbar.Item icon={Underline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
+            <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} isActive />
+            <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
+            <Toolbar.Item icon={UnderlineOutline} tooltip="Underline" shortcut={["Cmd", "U"]} isActive />
           </Toolbar.Group>
           <Toolbar.Group>
-            <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-            <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" isActive />
-            <Toolbar.Item icon={Quote} tooltip="Quote" />
+            <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+            <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" isActive />
+            <Toolbar.Item icon={QuoteOutline} tooltip="Quote" />
           </Toolbar.Group>
           <Toolbar.Group>
-            <Toolbar.Item icon={AlignLeft} tooltip="Align Left" />
-            <Toolbar.Item icon={AlignCenter} tooltip="Align Center" isActive />
-            <Toolbar.Item icon={AlignRight} tooltip="Align Right" />
+            <Toolbar.Item icon={AlignLeftOutline} tooltip="Align Left" />
+            <Toolbar.Item icon={AlignCenterOutline} tooltip="Align Center" isActive />
+            <Toolbar.Item icon={AlignRightOutline} tooltip="Align Right" />
           </Toolbar.Group>
         </Toolbar>
       </div>
@@ -110,20 +112,20 @@ export const CommentToolbar: Story = {
           <Toolbar>
             {/* Access Specifier */}
             <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
-              <Toolbar.Item icon={LockIcon} tooltip="Private" isActive />
-              <Toolbar.Item icon={GlobeIcon} tooltip="Public" />
+              <Toolbar.Item icon={LockOutline} tooltip="Private" isActive />
+              <Toolbar.Item icon={GlobeOutline} tooltip="Public" />
             </div>
 
             <div className="flex w-full items-stretch justify-between gap-2 rounded-sm border-[0.5px] border-subtle p-1">
               <div className="flex items-stretch">
                 <Toolbar.Group isFirst>
-                  <Toolbar.Item icon={Bold} tooltip="Bold" shortcut={["Cmd", "B"]} />
-                  <Toolbar.Item icon={Italic} tooltip="Italic" shortcut={["Cmd", "I"]} />
-                  <Toolbar.Item icon={Code} tooltip="Code" shortcut={["Cmd", "`"]} />
+                  <Toolbar.Item icon={BoldOutline} tooltip="Bold" shortcut={["Cmd", "B"]} />
+                  <Toolbar.Item icon={ItalicOutline} tooltip="Italic" shortcut={["Cmd", "I"]} />
+                  <Toolbar.Item icon={CodeOutline} tooltip="Code" shortcut={["Cmd", "`"]} />
                 </Toolbar.Group>
                 <Toolbar.Group>
-                  <Toolbar.Item icon={ListLayoutIcon} tooltip="Bullet ListLayoutIcon" />
-                  <Toolbar.Item icon={ListOrdered} tooltip="Numbered ListLayoutIcon" />
+                  <Toolbar.Item icon={ListOutline} tooltip="Bullet List" />
+                  <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered List" />
                 </Toolbar.Group>
               </div>
               <Toolbar.SubmitButton>Comment</Toolbar.SubmitButton>
diff --git a/packages/propel/src/tooltip/tooltip.stories.tsx b/packages/propel/src/tooltip/tooltip.stories.tsx
index 8560481c33..8bb9005e42 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -5,7 +5,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { HelpCircle } from "lucide-react";
+import { HelpOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "./root";
 
 const meta = {
@@ -72,7 +72,7 @@ export const WithIcon: Story = {
     tooltipContent: "Click here for help",
     children: (
       <button className="hover:bg-gray-100 rounded-full p-2">
-        <HelpCircle className="text-gray-600 h-5 w-5" />
+        <HelpOutline className="text-gray-600 h-5 w-5" />
       </button>
     ),
   },
@@ -295,7 +295,7 @@ export const InFormField: Story = {
             tooltipContent="Enter a valid email address that you have access to. We'll send a verification link."
             position="right"
           >
-            <HelpCircle className="text-gray-400 h-4 w-4 cursor-help" />
+            <HelpOutline className="text-gray-400 h-4 w-4 cursor-help" />
           </Tooltip>
         </label>
         <input
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4e2cfe0f40..176590122c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,6 +30,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "catalog:",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "catalog:",
     "@headlessui/react": "catalog:",
+    "@makeplane/propel": "catalog:",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
     "@plane/propel": "workspace:*",
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
index 92b31e7bf9..a66ac1ef8b 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -5,7 +5,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { Home, Settings } from "lucide-react";
+import { HomeOutline, SettingsOutline } from "@makeplane/propel/icons";
 import * as React from "react";
 import { Breadcrumbs } from "./breadcrumbs";
 
@@ -90,11 +90,13 @@ export const WithIcons: Story = {
     children: [
       <Breadcrumbs.Item
         key="home"
-        component={<BreadcrumbBlock href="/" label="Home" icon={<Home className="size-3.5" />} />}
+        component={<BreadcrumbBlock href="/" label="Home" icon={<HomeOutline className="size-3.5" />} />}
       />,
       <Breadcrumbs.Item
         key="settings"
-        component={<BreadcrumbBlock href="/settings" label="Settings" icon={<Settings className="size-3.5" />} />}
+        component={
+          <BreadcrumbBlock href="/settings" label="Settings" icon={<SettingsOutline className="size-3.5" />} />
+        }
         isLast
       />,
     ],
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 984bb168a8..5ef2b50d11 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -5,7 +5,7 @@
  */
 
 import * as React from "react";
-import { ChevronRightIcon } from "@plane/propel/icons";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "../utils";
 
@@ -72,7 +72,7 @@ function Breadcrumbs({ className, children, onBack, isLoading = false }: Breadcr
                 ...
               </span>
             )}
-            <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0 text-placeholder" aria-hidden="true" />
+            <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0 text-placeholder" aria-hidden="true" />
           </div>
           <div className="flex items-center gap-2.5 p-1">
             {isLoading ? (
@@ -154,7 +154,7 @@ function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
           containerClassName
         )}
       >
-        <ChevronRightIcon className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
+        <ChevronRightOutline className={cn("h-3.5 w-3.5 flex-shrink-0", iconClassName)} />
       </div>
     </div>
   );
diff --git a/packages/ui/src/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
index c2bb54c86e..b2b1c4404b 100644
--- a/packages/ui/src/collapsible/collapsible-button.tsx
+++ b/packages/ui/src/collapsible/collapsible-button.tsx
@@ -6,7 +6,7 @@
 
 import React from "react";
 import type { ISvgIcons } from "@plane/propel/icons";
-import { DropdownIcon } from "@plane/propel/icons";
+import { DropdownOutline } from "@makeplane/propel/icons";
 import { cn } from "../utils";
 
 type Props = {
@@ -29,7 +29,7 @@ export function CollapsibleButton(props: Props) {
     actionItemElement,
     className = "",
     titleClassName = "",
-    ChevronIcon = DropdownIcon,
+    ChevronIcon = DropdownOutline,
   } = props;
   return (
     <div className={cn("flex h-12 items-center justify-between gap-3 border-b border-subtle px-2.5 py-3", className)}>
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index 58e1e43d48..dc67d087b3 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { MoreVertical } from "lucide-react";
+import { MoreVerticalOutline } from "@makeplane/propel/icons";
 import React, { forwardRef } from "react";
 // helpers
 import { cn } from "./utils";
@@ -34,8 +34,8 @@ export const DragHandle = forwardRef(function DragHandle(
       }}
       ref={ref}
     >
-      <MoreVertical className="h-3.5 w-3.5 stroke-placeholder" />
-      <MoreVertical className="-ml-5 h-3.5 w-3.5 stroke-placeholder" />
+      <MoreVerticalOutline className="h-3.5 w-3.5 text-placeholder" />
+      <MoreVerticalOutline className="-ml-5 h-3.5 w-3.5 text-placeholder" />
     </button>
   );
 });
diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/ui/src/dropdown/common/input-search.tsx
index 9b96a23c2e..c52602473d 100644
--- a/packages/ui/src/dropdown/common/input-search.tsx
+++ b/packages/ui/src/dropdown/common/input-search.tsx
@@ -6,7 +6,7 @@
 
 import { Combobox } from "@headlessui/react";
 import React, { useEffect, useRef } from "react";
-import { SearchIcon } from "@plane/propel/icons";
+import { SearchOutline } from "@makeplane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 
@@ -48,7 +48,7 @@ export function InputSearch(props: IInputSearch) {
         inputContainerClassName
       )}
     >
-      {inputIcon ? <>{inputIcon}</> : <SearchIcon className="h-4 w-4 text-tertiary" aria-hidden="true" />}
+      {inputIcon ? <>{inputIcon}</> : <SearchOutline className="h-4 w-4 text-tertiary" aria-hidden="true" />}
       <Combobox.Input
         as="input"
         ref={inputRef}
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/ui/src/dropdown/common/options.tsx
index da52645911..d161e25752 100644
--- a/packages/ui/src/dropdown/common/options.tsx
+++ b/packages/ui/src/dropdown/common/options.tsx
@@ -7,7 +7,7 @@
 import { Combobox } from "@headlessui/react";
 
 import React from "react";
-import { CheckIcon } from "@plane/propel/icons";
+import { TickOutline } from "@makeplane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
@@ -77,7 +77,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                         ) : (
                           <>
                             <span className="flex-grow truncate">{option.value}</span>
-                            {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+                            {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
                           </>
                         )}
                       </>
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 27031f9f78..2c50fd59e2 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -6,7 +6,7 @@
 
 import React, { useState, useRef, useContext } from "react";
 import { usePopper } from "react-popper";
-import { ChevronRightIcon } from "@plane/propel/icons";
+import { ChevronRightOutline } from "@makeplane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
@@ -184,7 +184,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
                 </p>
               )}
             </div>
-            {hasNestedItems && <ChevronRightIcon className="h-3 w-3 flex-shrink-0" />}
+            {hasNestedItems && <ChevronRightOutline className="h-3 w-3 flex-shrink-0" />}
           </>
         )}
       </button>
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index ad980342c0..7b202a3c74 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -5,12 +5,11 @@
  */
 
 import { Menu } from "@headlessui/react";
-import { MoreHorizontal } from "lucide-react";
+import { ChevronDownOutline, ChevronRightOutline, MoreHorizontalOutline } from "@makeplane/propel/icons";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { ChevronDownIcon, ChevronRightIcon } from "@plane/propel/icons";
 // plane helpers
 // helpers
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
@@ -275,7 +274,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
                     tabIndex={customButtonTabIndex}
                     aria-label={ariaLabel}
                   >
-                    <MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
+                    <MoreHorizontalOutline className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
                   </button>
                 </Menu.Button>
               ) : (
@@ -294,7 +293,7 @@ function CustomMenu(props: ICustomMenuDropdownProps) {
                     aria-label={ariaLabel}
                   >
                     {label}
-                    {!noChevron && <ChevronDownIcon className="h-3.5 w-3.5" />}
+                    {!noChevron && <ChevronDownOutline className="h-3.5 w-3.5" />}
                   </button>
                 </Menu.Button>
               )}
@@ -420,7 +419,7 @@ function SubMenu(props: ICustomSubMenuProps) {
               disabled={disabled}
             >
               <span className="flex-1">{trigger}</span>
-              <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
+              <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0" />
             </button>
           )}
         </Menu.Item>
@@ -513,7 +512,7 @@ function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
           )}
         >
           <span className="flex-1">{children}</span>
-          <ChevronRightIcon className="h-3.5 w-3.5 flex-shrink-0" />
+          <ChevronRightOutline className="h-3.5 w-3.5 flex-shrink-0" />
         </div>
       )}
     </Menu.Item>
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index dd9577d757..78eed100b4 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -5,12 +5,11 @@
  */
 
 import { Combobox } from "@headlessui/react";
-import { Info } from "lucide-react";
+import { ChevronDownOutline, InfoOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
 import React, { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CheckIcon, SearchIcon, ChevronDownIcon } from "@plane/propel/icons";
 // plane imports
 // local imports
 import { Tooltip } from "@plane/propel/tooltip";
@@ -136,7 +135,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                 >
                   {label}
                   {!noChevron && !disabled && (
-                    <ChevronDownIcon className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
+                    <ChevronDownOutline className={cn("h-3 w-3 flex-shrink-0", chevronClassName)} aria-hidden="true" />
                   )}
                 </button>
               </Combobox.Button>
@@ -154,7 +153,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                     {...attributes.popper}
                   >
                     <div className="mx-2 flex items-center gap-1.5 rounded-sm border border-subtle px-2">
-                      <SearchIcon className="h-3.5 w-3.5 text-placeholder" strokeWidth={1.5} />
+                      <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
                       <Combobox.Input
                         className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
                         value={query}
@@ -197,12 +196,12 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
                               {({ selected }) => (
                                 <>
                                   <span className="flex-grow truncate">{option.content}</span>
-                                  {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+                                  {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
                                   {option.tooltip && (
                                     <>
                                       {typeof option.tooltip === "string" ? (
                                         <Tooltip tooltipContent={option.tooltip}>
-                                          <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-secondary" />
+                                          <InfoOutline className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-secondary" />
                                         </Tooltip>
                                       ) : (
                                         option.tooltip
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 2ba80f5ca5..ef0724d675 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -10,7 +10,7 @@ import React, { createContext, useCallback, useContext, useRef, useState } from
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { useOutsideClickDetector } from "@plane/hooks";
-import { CheckIcon, ChevronDownIcon } from "@plane/propel/icons";
+import { ChevronDownOutline, TickOutline } from "@makeplane/propel/icons";
 // plane helpers
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
@@ -112,7 +112,7 @@ function CustomSelect(props: ICustomSelectProps) {
                 onClick={toggleDropdown}
               >
                 {label}
-                {!noChevron && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+                {!noChevron && !disabled && <ChevronDownOutline className="h-3 w-3" aria-hidden="true" />}
               </button>
             </Combobox.Button>
           )}
@@ -179,7 +179,7 @@ function Option(props: ICustomSelectItemProps) {
       {({ selected }) => (
         <div className="flex w-full items-center justify-between gap-2">
           {children}
-          {selected && <CheckIcon className="h-3.5 w-3.5 flex-shrink-0" />}
+          {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
         </div>
       )}
     </Combobox.Option>
diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx
index f79e1dec0f..e6bb3c1c63 100644
--- a/packages/ui/src/favorite-star.tsx
+++ b/packages/ui/src/favorite-star.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Star } from "lucide-react";
+import { StarFilled, StarOutline } from "@makeplane/propel/icons";
 import React from "react";
 // helpers
 import { cn } from "./utils";
@@ -18,14 +18,16 @@ type Props = {
 
 export function FavoriteStar(props: Props) {
   const { buttonClassName, iconClassName, onClick, selected } = props;
+  // Propel splits the star into two glyphs; the filled one matches the old solid Lucide star.
+  const Icon = selected ? StarFilled : StarOutline;
 
   return (
     <button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
-      <Star
+      <Icon
         className={cn(
           "h-4 w-4 text-tertiary transition-all",
           {
-            "fill-(--color-label-yellow-icon) stroke-(--color-label-yellow-icon)": selected,
+            "text-(--color-label-yellow-icon)": selected,
           },
           iconClassName
         )}
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index 21e2dc80d1..8270ba3214 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { CircleCheck } from "lucide-react";
+import { TickCircleOutline } from "@makeplane/propel/icons";
 import React from "react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { cn, getPasswordStrength, getPasswordCriteria } from "@plane/utils";
@@ -57,7 +57,7 @@ export function PasswordStrengthIndicator({
           {criteria.map((criterion) => (
             <div key={criterion.key} className="flex items-center gap-1.5">
               <div className="flex items-center justify-center p-0.5">
-                <CircleCheck
+                <TickCircleOutline
                   className={cn("h-3 w-3 flex-shrink-0", {
                     "text-success-primary": criterion.isValid,
                     "text-primary": !criterion.isValid,
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index 3127122fa2..248d885272 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import { Eye, EyeClosed } from "lucide-react";
+import { HideOutline, ShowOutline } from "@makeplane/propel/icons";
 import { useState } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
@@ -57,13 +57,13 @@ export function PasswordInput({
             className="absolute inset-y-0 right-0 flex items-center pr-3 text-secondary transition-colors duration-200 hover:text-primary"
           >
             <div className="relative h-4 w-4">
-              <Eye
+              <ShowOutline
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
                   showPassword ? "scale-75 rotate-12 opacity-0" : "scale-100 rotate-0 opacity-100"
                 )}
               />
-              <EyeClosed
+              <HideOutline
                 className={cn(
                   "absolute inset-0 h-4 w-4 transition-all duration-300 ease-in-out",
                   showPassword ? "scale-100 rotate-0 opacity-100" : "scale-75 -rotate-12 opacity-0"
diff --git a/packages/ui/src/modals/alert-modal.tsx b/packages/ui/src/modals/alert-modal.tsx
index 5565ab02c1..b994193413 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -4,8 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import type { LucideIcon } from "lucide-react";
-import { AlertTriangle, Info } from "lucide-react";
+import { InfoOutline, WarningTriangleOutline } from "@makeplane/propel/icons";
 import React from "react";
 // components
 import type { TButtonVariant } from "@plane/propel/button";
@@ -37,9 +36,9 @@ type Props = {
   customIcon?: React.ReactNode;
 };
 
-const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
-  danger: AlertTriangle,
-  primary: Info,
+const VARIANT_ICONS: Record<TModalVariant, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
+  danger: WarningTriangleOutline,
+  primary: InfoOutline,
 };
 
 const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
diff --git a/packages/ui/src/popovers/popover.tsx b/packages/ui/src/popovers/popover.tsx
index 51a2e1a707..15ebd021df 100644
--- a/packages/ui/src/popovers/popover.tsx
+++ b/packages/ui/src/popovers/popover.tsx
@@ -5,7 +5,7 @@
  */
 
 import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
-import { EllipsisVertical } from "lucide-react";
+import { MoreVerticalOutline } from "@makeplane/propel/icons";
 import type { Ref } from "react";
 import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
@@ -59,7 +59,7 @@ export function Popover(props: TPopover) {
           )}
           disabled={disabled}
         >
-          {button ? button : <EllipsisVertical className="h-3 w-3" />}
+          {button ? button : <MoreVerticalOutline className="h-3 w-3" />}
         </HeadlessReactPopover.Button>
       </div>
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 2dc85cda7f..99d8133330 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -23,6 +23,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
+    "@makeplane/propel": "catalog:",
     "@plane/constants": "workspace:*",
     "@plane/types": "workspace:*",
     "chroma-js": "catalog:",
diff --git a/packages/utils/src/get-icon-for-link.ts b/packages/utils/src/get-icon-for-link.ts
index d6420dcdc0..00250b04c6 100644
--- a/packages/utils/src/get-icon-for-link.ts
+++ b/packages/utils/src/get-icon-for-link.ts
@@ -4,36 +4,36 @@
  * See the LICENSE file for details.
  */
 
+import type { ComponentType, SVGProps } from "react";
+import { FileArchive, FileSpreadsheet } from "lucide-react";
 import {
-  Github,
-  Linkedin,
-  Twitter,
-  Facebook,
-  Instagram,
-  Youtube,
-  Dribbble,
-  Figma,
-  FileText,
-  FileImage,
-  FileVideo,
-  FileAudio,
-  FileArchive,
-  FileSpreadsheet,
-  FileCode,
-  Mail,
   Chrome,
-  Link2,
-} from "lucide-react";
+  CodeOutline,
+  DocumentationOutline,
+  Dribbble,
+  Facebook,
+  Figma,
+  Github,
+  ImageOutline,
+  Instagram,
+  LinkOutline,
+  Linkedin,
+  MailOutline,
+  MusicOutline,
+  VideoOutline,
+  X,
+  Youtube,
+} from "@makeplane/propel/icons";
 
 type IconMatcher = {
   pattern: RegExp;
-  icon: typeof Github;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
 };
 
 const SOCIAL_MEDIA_MATCHERS: IconMatcher[] = [
   { pattern: /github\.com/, icon: Github },
   { pattern: /linkedin\.com/, icon: Linkedin },
-  { pattern: /(twitter\.com|x\.com)/, icon: Twitter },
+  { pattern: /(twitter\.com|x\.com)/, icon: X },
   { pattern: /facebook\.com/, icon: Facebook },
   { pattern: /instagram\.com/, icon: Instagram },
   { pattern: /youtube\.com/, icon: Youtube },
@@ -42,21 +42,21 @@ const SOCIAL_MEDIA_MATCHERS: IconMatcher[] = [
 
 const PRODUCTIVITY_MATCHERS: IconMatcher[] = [
   { pattern: /figma\.com/, icon: Figma },
-  { pattern: /(google\.com|docs\.|doc\.)/, icon: FileText },
+  { pattern: /(google\.com|docs\.|doc\.)/, icon: DocumentationOutline },
 ];
 
 const FILE_TYPE_MATCHERS: IconMatcher[] = [
-  { pattern: /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/, icon: FileImage },
-  { pattern: /\.(mp4|mov|avi|wmv|flv|mkv)$/, icon: FileVideo },
-  { pattern: /\.(mp3|wav|ogg)$/, icon: FileAudio },
+  { pattern: /\.(jpg|jpeg|png|gif|bmp|svg|webp)$/, icon: ImageOutline },
+  { pattern: /\.(mp4|mov|avi|wmv|flv|mkv)$/, icon: VideoOutline },
+  { pattern: /\.(mp3|wav|ogg)$/, icon: MusicOutline },
   { pattern: /\.(zip|rar|7z|tar|gz)$/, icon: FileArchive },
   { pattern: /\.(xls|xlsx|csv)$/, icon: FileSpreadsheet },
-  { pattern: /\.(pdf|doc|docx|txt)$/, icon: FileText },
-  { pattern: /\.(html|js|ts|jsx|tsx|css|scss)$/, icon: FileCode },
+  { pattern: /\.(pdf|doc|docx|txt)$/, icon: DocumentationOutline },
+  { pattern: /\.(html|js|ts|jsx|tsx|css|scss)$/, icon: CodeOutline },
 ];
 
 const OTHER_MATCHERS: IconMatcher[] = [
-  { pattern: /^mailto:/, icon: Mail },
+  { pattern: /^mailto:/, icon: MailOutline },
   { pattern: /^http/, icon: Chrome },
 ];
 
@@ -66,5 +66,5 @@ export const getIconForLink = (url: string) => {
   const allMatchers = [...SOCIAL_MEDIA_MATCHERS, ...PRODUCTIVITY_MATCHERS, ...FILE_TYPE_MATCHERS, ...OTHER_MATCHERS];
 
   const matchedIcon = allMatchers.find(({ pattern }) => pattern.test(lowerUrl));
-  return matchedIcon?.icon ?? Link2;
+  return matchedIcon?.icon ?? LinkOutline;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 82bf25681a..b7e8251a91 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1294,6 +1294,9 @@ importers:
       '@hocuspocus/provider':
         specifier: 'catalog:'
         version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants
@@ -1553,6 +1556,9 @@ importers:
       '@base-ui-components/react':
         specifier: 'catalog:'
         version: 1.0.0-beta.3(@types/react@19.2.17)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants
@@ -1761,6 +1767,9 @@ importers:
       '@headlessui/react':
         specifier: 'catalog:'
         version: 2.2.10(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants
@@ -1876,6 +1885,9 @@ importers:
 
   packages/utils:
     dependencies:
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.3.0(@date-fns/tz@1.4.1)(@types/react@19.2.17)(date-fns@4.1.0)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)(tailwindcss@4.1.17)
       '@plane/constants':
         specifier: workspace:*
         version: link:../constants