diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
index 4fe17e0bf2..49dca610fb 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+import { Image, BrainCog, Cog, Mail } from "lucide-react";
 // plane internal packages
-import { WorkspaceIcon } from "@plane/propel/icons";
+import { LockIcon, WorkspaceIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // hooks
@@ -29,7 +29,7 @@ const INSTANCE_ADMIN_LINKS = [
     href: `/email/`,
   },
   {
-    Icon: Lock,
+    Icon: LockIcon,
     name: "Authentication",
     description: "Configure authentication modes.",
     href: `/authentication/`,
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 14fabd0b13..b27a89a56f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Lock } from "lucide-react";
+
 // plane imports
 import {
   EIssueFilterType,
@@ -11,7 +11,7 @@ import {
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { Button } from "@plane/propel/button";
-import { ViewsIcon } from "@plane/propel/icons";
+import { LockIcon , ViewsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { ICustomSearchSelectOption, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssuesStoreType, EViewAccess, EIssueLayoutTypes } from "@plane/types";
@@ -151,7 +151,7 @@ export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader
         {viewDetails?.access === EViewAccess.PRIVATE ? (
           <div className="cursor-default text-custom-text-300">
             <Tooltip tooltipContent={"Private"}>
-              <Lock className="h-4 w-4" />
+              <LockIcon className="h-4 w-4" />
             </Tooltip>
           </div>
         ) : (
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
index 64234dc11c..c3ccaf05af 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
@@ -1,8 +1,9 @@
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
-import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks, Lock } from "lucide-react";
+import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks } from "lucide-react";
 // plane imports
 import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import { getFileURL } from "@plane/utils";
 // components
 import { SettingsSidebar } from "@/components/settings/sidebar";
@@ -11,7 +12,7 @@ import { useUser } from "@/hooks/store/user";
 
 const ICONS = {
   profile: CircleUser,
-  security: Lock,
+  security: LockIcon,
   activity: Activity,
   preferences: Settings2,
   notifications: Bell,
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index 1fc081bf65..11c45091be 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { Globe2, Lock } from "lucide-react";
+import { Globe2 } from "lucide-react";
 // plane imports
 import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
+import { LockIcon } from "@plane/propel/icons";
 import { EIssueCommentAccessSpecifier } from "@plane/types";
 import type { TCommentsOperations, TIssueComment } from "@plane/types";
 import { cn } from "@plane/utils";
@@ -62,7 +63,7 @@ export const CommentCardDisplay = observer(function CommentCardDisplay(props: Pr
       {showAccessSpecifier && (
         <div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
           {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
-            <Lock className="size-3" />
+            <LockIcon className="size-3" />
           ) : (
             <Globe2 className="size-3" />
           )}
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
index 0d7d8c54a7..cbe160faf5 100644
--- a/apps/web/core/components/comments/quick-actions.tsx
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -1,11 +1,11 @@
 import type { FC } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { Globe2, Link, Lock } from "lucide-react";
+import { Globe2, Link } from "lucide-react";
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { EditIcon , TrashIcon } from "@plane/propel/icons";
+import { LockIcon , EditIcon , TrashIcon } from "@plane/propel/icons";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
@@ -61,7 +61,7 @@ export const CommentQuickActions = observer(function CommentQuickActions(props:
           comment.access === EIssueCommentAccessSpecifier.INTERNAL
             ? t("issue.comments.switch.public")
             : t("issue.comments.switch.private"),
-        icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
+        icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : LockIcon,
         shouldRender: showAccessSpecifier,
       },
       {
diff --git a/apps/web/core/components/common/page-access-icon.tsx b/apps/web/core/components/common/page-access-icon.tsx
index 8569013221..58a7d17171 100644
--- a/apps/web/core/components/common/page-access-icon.tsx
+++ b/apps/web/core/components/common/page-access-icon.tsx
@@ -1,5 +1,6 @@
-import { ArchiveIcon, Earth, Lock } from "lucide-react";
+import { ArchiveIcon, Earth } from "lucide-react";
 import { EPageAccess } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 
 export function PageAccessIcon(page: TPage) {
@@ -10,7 +11,7 @@ export function PageAccessIcon(page: TPage) {
       ) : page.access === EPageAccess.PUBLIC ? (
         <Earth className="h-2.5 w-2.5 text-custom-text-300" />
       ) : (
-        <Lock className="h-2.5 w-2.5 text-custom-text-300" />
+        <LockIcon className="h-2.5 w-2.5 text-custom-text-300" />
       )}
     </div>
   );
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index a5b96b0db9..75c5aadb68 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
+import { Globe2 } from "lucide-react";
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 // editor
 import type { EditorRefApi } from "@plane/editor";
@@ -8,6 +8,8 @@ import type { EditorRefApi } from "@plane/editor";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
+import { LockIcon  } from "@plane/propel/icons";
+import type {ISvgIcons} from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 // constants
 import { cn } from "@plane/utils";
@@ -28,14 +30,14 @@ type Props = {
 };
 
 type TCommentAccessType = {
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   key: EIssueCommentAccessSpecifier;
   label: "Private" | "Public";
 };
 
 const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
   {
-    icon: Lock,
+    icon: LockIcon,
     key: EIssueCommentAccessSpecifier.INTERNAL,
     label: "Private",
   },
diff --git a/apps/web/core/components/icons/locked-component.tsx b/apps/web/core/components/icons/locked-component.tsx
index dc44e415d6..f7d320e634 100644
--- a/apps/web/core/components/icons/locked-component.tsx
+++ b/apps/web/core/components/icons/locked-component.tsx
@@ -1,11 +1,11 @@
-import { Lock } from "lucide-react";
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 
 export function LockedComponent(props: { toolTipContent?: string }) {
   const { toolTipContent } = props;
   const lockedComponent = (
     <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
-      <Lock className="h-3 w-3" />
+      <LockIcon className="h-3 w-3" />
       <span>Locked</span>
     </div>
   );
diff --git a/apps/web/core/components/onboarding/steps/profile/set-password.tsx b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
index f97d5d7161..df56a8b74d 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useMemo } from "react";
-import { Lock } from "lucide-react";
-import { ChevronDownIcon } from "@plane/propel/icons";
+import { LockIcon , ChevronDownIcon } from "@plane/propel/icons";
 import { PasswordInput, PasswordStrengthIndicator } from "@plane/ui";
 import { cn } from "@plane/utils";
 
@@ -83,7 +82,7 @@ export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, dis
         onClick={handleToggleExpand}
       >
         <div className="flex items-center gap-1 text-custom-text-300">
-          <Lock className="size-3" />
+          <LockIcon className="size-3" />
           <span className="font-medium">Set a password</span>
           <span>{`(Optional)`}</span>
         </div>
diff --git a/apps/web/core/components/pages/dropdowns/actions.tsx b/apps/web/core/components/pages/dropdowns/actions.tsx
index 6ef9327851..b2d44adcb1 100644
--- a/apps/web/core/components/pages/dropdowns/actions.tsx
+++ b/apps/web/core/components/pages/dropdowns/actions.tsx
@@ -7,7 +7,6 @@ import {
   FileOutput,
   Globe2,
   Link,
-  Lock,
   LockKeyhole,
   LockKeyholeOpen,
 } from "lucide-react";
@@ -15,7 +14,7 @@ import {
 import { EPageAccess, PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
-import { NewTabIcon , ArchiveIcon, TrashIcon } from "@plane/propel/icons";
+import { LockIcon , NewTabIcon , ArchiveIcon, TrashIcon } from "@plane/propel/icons";
 // plane ui
 import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
@@ -108,7 +107,7 @@ export const PageActions = observer(function PageActions(props: Props) {
           pageOperations.toggleAccess();
         },
         title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
-        icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+        icon: access === EPageAccess.PUBLIC ? LockIcon : Globe2,
         shouldRender: canCurrentUserChangeAccess && !archived_at,
       },
       {
diff --git a/apps/web/core/components/pages/list/block-item-action.tsx b/apps/web/core/components/pages/list/block-item-action.tsx
index e6e817c77f..5dc0858dc2 100644
--- a/apps/web/core/components/pages/list/block-item-action.tsx
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -1,7 +1,8 @@
 import { observer } from "mobx-react";
-import { Earth, Info, Lock, Minus } from "lucide-react";
+import { Earth, Info, Minus } from "lucide-react";
 // plane imports
 import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { Avatar, FavoriteStar } from "@plane/ui";
 import { renderFormattedDate, getFileURL } from "@plane/utils";
@@ -45,7 +46,7 @@ export const BlockItemAction = observer(function BlockItemAction(props: Props) {
       </div>
       <div className="cursor-default text-custom-text-300">
         <Tooltip tooltipContent={access === 0 ? "Public" : "Private"}>
-          {access === 0 ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+          {access === 0 ? <Earth className="h-4 w-4" /> : <LockIcon className="h-4 w-4" />}
         </Tooltip>
       </div>
       {/* vertical divider */}
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 55d7864be7..bbe1a7354c 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -1,13 +1,14 @@
 import type { FormEvent } from "react";
 import { useState } from "react";
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
+import { Globe2 } from "lucide-react";
 // plane imports
 import { ETabIndices, EPageAccess } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
-import { PageIcon } from "@plane/propel/icons";
+import { LockIcon, PageIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 import type { TPage } from "@plane/types";
 import { Input } from "@plane/ui";
 import { getTabIndex } from "@plane/utils";
@@ -26,10 +27,10 @@ type Props = {
 const PAGE_ACCESS_SPECIFIERS: {
   key: EPageAccess;
   i18n_label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
 }[] = [
   { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: Globe2 },
-  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: Lock },
+  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: LockIcon },
 ];
 
 export function PageForm(props: Props) {
diff --git a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
index c0f48ca1c9..e9b399b3a5 100644
--- a/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
+++ b/apps/web/core/components/power-k/ui/pages/context-based/page/commands.ts
@@ -5,7 +5,6 @@ import {
   ArchiveRestoreIcon,
   Globe2,
   LinkIcon,
-  Lock,
   LockKeyhole,
   LockKeyholeOpen,
   Star,
@@ -13,6 +12,7 @@ import {
 } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { LockIcon } from "@plane/propel/icons";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { EPageAccess } from "@plane/types";
 import { copyTextToClipboard } from "@plane/utils";
@@ -110,7 +110,7 @@ export const usePowerKPageContextBasedActions = (): TPowerKCommandConfig[] => {
         access === EPageAccess.PUBLIC
           ? "power_k.contextual_actions.page.make_private"
           : "power_k.contextual_actions.page.make_public",
-      icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+      icon: access === EPageAccess.PUBLIC ? LockIcon : Globe2,
       group: "contextual",
       contextType: "page",
       type: "action",
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index de69436485..e5ae7a5837 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -2,13 +2,13 @@ import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { ArchiveRestoreIcon, LinkIcon, Lock, Settings, UserPlus } from "lucide-react";
+import { ArchiveRestoreIcon, LinkIcon, Settings, UserPlus } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { Button } from "@plane/propel/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
-import { NewTabIcon , TrashIcon , CheckIcon } from "@plane/propel/icons";
+import { LockIcon , NewTabIcon , TrashIcon , CheckIcon } from "@plane/propel/icons";
 import { setPromiseToast, setToast, TOAST_TYPE } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject } from "@plane/types";
@@ -223,7 +223,7 @@ export const ProjectCard = observer(function ProjectCard(props: Props) {
                 <h3 className="truncate font-semibold text-white">{project.name}</h3>
                 <span className="flex items-center gap-1.5">
                   <p className="text-xs font-medium text-white">{project.identifier} </p>
-                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-white " />}
                 </span>
               </div>
             </div>
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index 1e4af65db6..38a8042e28 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -1,11 +1,12 @@
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { Info, Lock } from "lucide-react";
+import { Info } from "lucide-react";
 import { NETWORK_CHOICES, PROJECT_TRACKER_ELEMENTS, PROJECT_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // plane imports
 import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
+import { LockIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProject, IWorkspace } from "@plane/types";
@@ -230,7 +231,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
               <span className="flex items-center gap-2 text-sm">
                 <span>{watch("identifier")} .</span>
                 <span className="flex items-center gap-1.5">
-                  {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
+                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-white " />}
                   {currentNetwork && t(currentNetwork?.i18n_label)}
                 </span>
               </span>
diff --git a/apps/web/core/components/project/project-network-icon.tsx b/apps/web/core/components/project/project-network-icon.tsx
index 5d9f592d33..cbcdcbfe3f 100644
--- a/apps/web/core/components/project/project-network-icon.tsx
+++ b/apps/web/core/components/project/project-network-icon.tsx
@@ -1,6 +1,7 @@
-import { Lock, Globe2 } from "lucide-react";
+import { Globe2 } from "lucide-react";
 // plane imports
 import type { TNetworkChoiceIconKey } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -14,7 +15,7 @@ export function ProjectNetworkIcon(props: Props) {
   const getProjectNetworkIcon = () => {
     switch (iconKey) {
       case "Lock":
-        return Lock;
+        return LockIcon;
       case "Globe2":
         return Globe2;
       default:
diff --git a/apps/web/core/components/views/view-list-item-action.tsx b/apps/web/core/components/views/view-list-item-action.tsx
index c50c205218..f97ec571f8 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -2,10 +2,11 @@ import type { FC } from "react";
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { Earth, Lock } from "lucide-react";
+import { Earth } from "lucide-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, IS_FAVORITE_MENU_OPEN } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
+import { LockIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IProjectView } from "@plane/types";
 import { EViewAccess } from "@plane/types";
@@ -89,7 +90,7 @@ export const ViewListItemAction = observer(function ViewListItemAction(props: Pr
       <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
       <div className="cursor-default text-custom-text-300">
         <Tooltip tooltipContent={access === EViewAccess.PUBLIC ? "Public" : "Private"}>
-          {access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <Lock className="h-4 w-4" />}
+          {access === EViewAccess.PUBLIC ? <Earth className="h-4 w-4" /> : <LockIcon className="h-4 w-4" />}
         </Tooltip>
       </div>
 
diff --git a/apps/web/helpers/views.helper.ts b/apps/web/helpers/views.helper.ts
index ba1e14c30f..836ccbcfa6 100644
--- a/apps/web/helpers/views.helper.ts
+++ b/apps/web/helpers/views.helper.ts
@@ -1,16 +1,18 @@
 import type { LucideIcon } from "lucide-react";
-import { Globe2, Lock } from "lucide-react";
+import { Globe2 } from "lucide-react";
 import { VIEW_ACCESS_SPECIFIERS as VIEW_ACCESS_SPECIFIERS_CONSTANTS } from "@plane/constants";
+import { LockIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
 import { EViewAccess } from "@plane/types";
 
 const VIEW_ACCESS_ICONS = {
   [EViewAccess.PUBLIC]: Globe2,
-  [EViewAccess.PRIVATE]: Lock,
+  [EViewAccess.PRIVATE]: LockIcon,
 };
 export const VIEW_ACCESS_SPECIFIERS: {
   key: EViewAccess;
   i18n_label: string;
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
 }[] = VIEW_ACCESS_SPECIFIERS_CONSTANTS.map((option) => ({
   ...option,
   icon: VIEW_ACCESS_ICONS[option.key as keyof typeof VIEW_ACCESS_ICONS],
diff --git a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
index 5ca981b814..bf437175ae 100644
--- a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
+++ b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
@@ -124,7 +124,6 @@ import {
   Linkedin,
   List,
   Loader,
-  Lock,
   LogIn,
   LogOut,
   Mail,
@@ -148,7 +147,16 @@ import {
   ToggleLeft,
   User,
 } from "lucide-react";
-import { NewTabIcon , CheckIcon, SearchIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from "../icons";
+import {
+  LockIcon,
+  NewTabIcon,
+  CheckIcon,
+  SearchIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+} from "../icons";
 
 export const LUCIDE_ICONS_LIST = [
   { name: "Activity", element: Activity },
@@ -283,7 +291,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Linkedin", element: Linkedin },
   { name: "List", element: List },
   { name: "Loader", element: Loader },
-  { name: "Lock", element: Lock },
+  { name: "Lock", element: LockIcon },
   { name: "LogIn", element: LogIn },
   { name: "LogOut", element: LogOut },
   { name: "Mail", element: Mail },
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
index b663710633..151dd52633 100644
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -14,8 +14,8 @@ import {
   Undo,
   Redo,
   Globe2,
-  Lock,
 } from "lucide-react";
+import { LockIcon } from "../icons";
 import { ListLayoutIcon } from "../icons/layouts/list-icon";
 import { Toolbar } from "./toolbar";
 
@@ -106,7 +106,7 @@ export const CommentToolbar: Story = {
           <Toolbar>
             {/* Access Specifier */}
             <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded border-[0.5px] border-custom-border-200 p-1">
-              <Toolbar.Item icon={Lock} tooltip="Private" isActive />
+              <Toolbar.Item icon={LockIcon} tooltip="Private" isActive />
               <Toolbar.Item icon={Globe2} tooltip="Public" />
             </div>
 
diff --git a/packages/ui/src/constants/icons.ts b/packages/ui/src/constants/icons.ts
index a3e94b1c6f..fb9bb0236c 100644
--- a/packages/ui/src/constants/icons.ts
+++ b/packages/ui/src/constants/icons.ts
@@ -124,7 +124,6 @@ import {
   Linkedin,
   List,
   Loader,
-  Lock,
   LogIn,
   LogOut,
   Mail,
@@ -148,7 +147,9 @@ import {
   ToggleLeft,
   User,
 } from "lucide-react";
-import { NewTabIcon ,
+import {
+  LockIcon,
+  NewTabIcon,
   CheckIcon,
   SearchIcon,
   ChevronDownIcon,
@@ -896,7 +897,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "Linkedin", element: Linkedin },
   { name: "List", element: List },
   { name: "Loader", element: Loader },
-  { name: "Lock", element: Lock },
+  { name: "Lock", element: LockIcon },
   { name: "LogIn", element: LogIn },
   { name: "LogOut", element: LogOut },
   { name: "Mail", element: Mail },