chore: lock icon migration

2025-12-24 07:39:32 +01:00 · 2025-12-03 16:45:25 +05:30
parent 3260408d86
commit c7da9df21f
21 changed files with 73 additions and 54 deletions
--- 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/`,
--- 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>
        ) : (
--- 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,
--- 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" />
          )}
--- 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,
      },
      {
--- 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>
  );
--- 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",
  },
--- 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>
  );
--- 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>
--- 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,
      },
      {
--- 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 */}
--- 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) {
--- 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",
--- 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>
--- 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>
--- 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:
--- 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>

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

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