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.

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: {
@@ -98,32 +98,32 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
   {
     itemKey: "bold",
     renderKey: "bold",
-    name: "Bold",
-    icon: Bold,
+    name: "BoldOutline",
+    icon: BoldOutline,
     shortcut: ["Cmd", "B"],
     editors: ["lite", "document"],
   },
   {
     itemKey: "italic",
     renderKey: "italic",
-    name: "Italic",
-    icon: Italic,
+    name: "ItalicOutline",
+    icon: ItalicOutline,
     shortcut: ["Cmd", "I"],
     editors: ["lite", "document"],
   },
   {
     itemKey: "underline",
     renderKey: "underline",
-    name: "Underline",
-    icon: Underline,
+    name: "UnderlineOutline",
+    icon: UnderlineOutline,
     shortcut: ["Cmd", "U"],
     editors: ["lite", "document"],
   },
   {
     itemKey: "strikethrough",
     renderKey: "strikethrough",
-    name: "Strikethrough",
-    icon: Strikethrough,
+    name: "StrikethroughOutline",
+    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: "TableEditorOutline", icon: TableEditorOutline, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "ImageOutline", 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" strokeWidth={3} />
           ) : (
-            <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";
 
@@ -16,14 +16,14 @@ export function ImageDownloadAction(props: Props) {
   const { src } = props;
 
   return (
-    <Tooltip tooltipContent="Download">
+    <Tooltip tooltipContent="DownloadOutline">
       <button
         type="button"
         onClick={() => window.open(src, "_blank")}
         className="grid h-full flex-shrink-0 place-items-center text-white/60 transition-colors hover:text-white"
-        aria-label="Download image"
+        aria-label="DownloadOutline 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 && (
@@ -276,9 +275,9 @@ function ImageFullScreenModalWithoutPortal(props: Props) {
               type="button"
               onClick={() => window.open(downloadSrc, "_blank")}
               className="grid size-8 flex-shrink-0 place-items-center text-white/60 transition-colors duration-200 hover:text-white"
-              aria-label="Download image"
+              aria-label="DownloadOutline 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,16 +149,16 @@ 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),
           },
           {
             commandKey: "table",
             key: "table",
-            title: "Table",
+            title: "TableEditorOutline",
             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>
@@ -83,24 +83,24 @@ export const WithCategories: Story = {
           className="h-9 w-full bg-transparent py-3 text-13 outline-none"
         />
         <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>
+          <div className="text-gray-500 px-2 py-1.5 text-11 font-semibold">UserOutline</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" />
-            <span>Settings</span>
+            <SettingsOutline className="h-4 w-4" />
+            <span>SettingsOutline</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" />
-            <span>Open Folder</span>
+            <FolderOutline className="h-4 w-4" />
+            <span>Open FolderOutline</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" />
-            <span>New File</span>
+            <FileOutline className="h-4 w-4" />
+            <span>New FileOutline</span>
           </Command.Item>
         </Command.List>
         <Command.Empty className="text-gray-500 py-6 text-center text-13">No commands found.</Command.Empty>
@@ -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" />
-            <span>Settings</span>
+            <SettingsOutline className="h-4 w-4" />
+            <span>SettingsOutline</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" strokeWidth={1.5} />
       <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" />
-              Edit
+              <EditOutline className="mr-2 h-4 w-4" />
+              EditOutline
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
-              Download
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              DownloadOutline
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>
-              <Share className="mr-2 h-4 w-4" />
-              Share
+              <ShareOutline className="mr-2 h-4 w-4" />
+              ShareOutline
             </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" />
-              Edit
+              <EditOutline className="mr-2 h-4 w-4" />
+              EditOutline
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Submenu>
               <ContextMenu.SubmenuTrigger>
-                <Share className="mr-2 h-4 w-4" />
-                Share
-                <ChevronRightIcon className="ml-auto h-4 w-4" />
+                <ShareOutline className="mr-2 h-4 w-4" />
+                ShareOutline
+                <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" />
-              Edit (Disabled)
+              <EditOutline className="mr-2 h-4 w-4" />
+              EditOutline (Disabled)
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
-              Download
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              DownloadOutline
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item disabled>
-              <Share className="mr-2 h-4 w-4" />
-              Share (Disabled)
+              <ShareOutline className="mr-2 h-4 w-4" />
+              ShareOutline (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" />
-              Download
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              DownloadOutline
             </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" />
-              Archive
+              <ArchiveOutline className="mr-2 h-4 w-4" />
+              ArchiveOutline
             </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,12 +284,12 @@ 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" />
-              Edit
+              <EditOutline className="mr-2 h-4 w-4" />
+              EditOutline
             </ContextMenu.Item>
             <ContextMenu.Separator />
             <ContextMenu.Item>Select All</ContextMenu.Item>
@@ -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" />
-              Edit
+              <EditOutline className="mr-2 h-4 w-4" />
+              EditOutline
               <span className="ml-auto text-11 text-placeholder">⌘E</span>
             </ContextMenu.Item>
             <ContextMenu.Item>
-              <Download className="mr-2 h-4 w-4" />
-              Download
+              <DownloadOutline className="mr-2 h-4 w-4" />
+              DownloadOutline
               <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")}>
+        <Menu.MenuItem onClick={() => alert("SettingsOutline")}>
           <div className="flex items-center gap-2">
-            <Settings className="h-4 w-4" />
-            <span>Settings</span>
+            <SettingsOutline className="h-4 w-4" />
+            <span>SettingsOutline</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,29 +220,29 @@ 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>
         <Menu.SubMenu
-          trigger="Settings"
+          trigger="SettingsOutline"
           className="min-w-[12rem] rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200"
         >
-          <Menu.MenuItem onClick={() => alert("General Settings")}>General</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Privacy Settings")}>Privacy</Menu.MenuItem>
-          <Menu.MenuItem onClick={() => alert("Security Settings")}>Security</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("General SettingsOutline")}>General</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Privacy SettingsOutline")}>Privacy</Menu.MenuItem>
+          <Menu.MenuItem onClick={() => alert("Security SettingsOutline")}>Security</Menu.MenuItem>
         </Menu.SubMenu>
         <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: "SettingsOutline", 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 strokeWidth={1.5} 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 strokeWidth={1.5} 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="UndoOutline" />
+              <Toolbar.Item icon={RedoOutline} tooltip="RedoOutline" />
             </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="BoldOutline" />
+              <Toolbar.Item icon={ItalicOutline} tooltip="ItalicOutline" />
+              <Toolbar.Item icon={UnderlineOutline} tooltip="UnderlineOutline" />
+              <Toolbar.Item icon={StrikethroughOutline} tooltip="StrikethroughOutline" />
             </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 ListOutline" />
+              <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered ListOutline" />
+              <Toolbar.Item icon={QuoteOutline} tooltip="QuoteOutline" />
             </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="CodeOutline" />
             </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="BoldOutline" shortcut={["Cmd", "B"]} isActive />
+            <Toolbar.Item icon={ItalicOutline} tooltip="ItalicOutline" shortcut={["Cmd", "I"]} />
+            <Toolbar.Item icon={UnderlineOutline} tooltip="UnderlineOutline" 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 ListOutline" />
+            <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered ListOutline" isActive />
+            <Toolbar.Item icon={QuoteOutline} tooltip="QuoteOutline" />
           </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="BoldOutline" shortcut={["Cmd", "B"]} />
+                  <Toolbar.Item icon={ItalicOutline} tooltip="ItalicOutline" shortcut={["Cmd", "I"]} />
+                  <Toolbar.Item icon={CodeOutline} tooltip="CodeOutline" 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 ListOutline" />
+                  <Toolbar.Item icon={NumberedListOutline} tooltip="Numbered ListOutline" />
                 </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";
 
@@ -42,7 +42,7 @@ type Story = StoryObj<typeof Breadcrumbs>;
 export const Default: Story = {
   args: {
     children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="HomeOutline" />} />,
       <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
       <Breadcrumbs.Item
         key="current"
@@ -56,7 +56,7 @@ export const WithLoading: Story = {
   args: {
     isLoading: true,
     children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="HomeOutline" />} />,
       <Breadcrumbs.Item key="projects" component={<BreadcrumbBlock href="/projects" label="Projects" />} />,
     ],
   },
@@ -65,7 +65,7 @@ export const WithLoading: Story = {
 export const WithCustomComponent: Story = {
   args: {
     children: [
-      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />,
+      <Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="HomeOutline" />} />,
       <Breadcrumbs.Item
         key="custom"
         component={
@@ -81,7 +81,7 @@ export const WithCustomComponent: Story = {
 
 export const SingleItem: Story = {
   args: {
-    children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="Home" />} />],
+    children: [<Breadcrumbs.Item key="home" component={<BreadcrumbBlock href="/" label="HomeOutline" />} />],
   },
 };
 
@@ -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="HomeOutline" 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="SettingsOutline" 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" strokeWidth={1.5} />
                       <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 { StarOutline } from "@makeplane/propel/icons";
 import React from "react";
 // helpers
 import { cn } from "./utils";
@@ -21,7 +21,7 @@ export function FavoriteStar(props: Props) {
 
   return (
     <button type="button" className={cn("grid h-4 w-4 place-items-center", buttonClassName)} onClick={onClick}>
-      <Star
+      <StarOutline
         className={cn(
           "h-4 w-4 text-tertiary transition-all",
           {

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

@@ -1290,6 +1290,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.2.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
@@ -1549,6 +1552,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.2.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
@@ -1757,6 +1763,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.2.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
@@ -1872,6 +1881,9 @@ importers:
 
   packages/utils:
     dependencies:
+      '@makeplane/propel':
+        specifier: 'catalog:'
+        version: 0.2.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