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

@@ -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:*",

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>

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>
             </>
           )}

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),

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:

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",

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,
               })}

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>

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>

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>[] => {

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")!;

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">

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>

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 && (

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>
   );

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>

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>
     </>

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>
       )}

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}`;

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 }),

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,
               })}

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 && (

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} />

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 && (

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} />

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:*",

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,

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" },

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">

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>
           ))}

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}

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>

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>
   );

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>

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">

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>
             }
           />

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}

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>

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>
           )}
         </>

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>

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 (

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 (

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">

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>

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

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:*",

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
       />,
     ],

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>
   );

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)}>

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>
   );
 });

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}

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" />}
                           </>
                         )}
                       </>

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>

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>

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

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>

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
         )}

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,

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"

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> = {

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>
 

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:",

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;
 };

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