ui: updating lucid icons

2025-12-10 20:37:47 +00:00 · 2023-08-04 16:26:00 +05:30
parent 4888b38512
commit d98c2af681
37 changed files with 108 additions and 145 deletions
--- a/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx
+++ b/platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx
@@ -1,9 +1,4 @@
-import { VscNewFile } from '@react-icons/all-files/vsc/VscNewFile';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
-import { VscSettingsGear } from '@react-icons/all-files/vsc/VscSettingsGear';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
+import { FilePlus2, FolderPlus, MoreHorizontal, Pencil, Settings, Trash2 } from 'lucide-react';
 import { DropdownMenu } from '@firecamp/ui';
 import { Regex } from '../../../../constants';
 import platformContext from '../../../../services/platform-context';
@@ -33,7 +28,7 @@ const CollectionMenu = ({

  const renameMenu = {
    prefix: () => (
-      <VscEdit size={14} />
+      <Pencil size={14} />
    ),
    name: 'Rename',
    onClick: (e) => {
@@ -43,7 +38,7 @@ const CollectionMenu = ({

  const addFolderMenu = {
    prefix: () => (
-      <VscNewFolder size={14} />
+      <FolderPlus size={14} />
    ),
    name: 'Add Folder',
    onClick: () => {
@@ -95,7 +90,7 @@ const CollectionMenu = ({

  const addRequestMenu = {
    prefix: () => (
-      <VscNewFile size={14} />
+      <FilePlus2 size={14} />
    ),
    name: 'Add Request',
    onClick: () => { },
@@ -105,7 +100,7 @@ const CollectionMenu = ({

  const viewDetailMenu = {
    prefix: () => (
-      <VscSettingsGear size={14} />
+      <Settings size={14} />
    ),
    name: 'View Details',
    onClick: () => {
@@ -119,7 +114,7 @@ const CollectionMenu = ({

  const deleteMenu = {
    prefix: () => (
-      <VscTrash size={14} />
+      <Trash2 size={14} />
    ),
    name: 'Delete',
    onClick: () => {
@@ -154,7 +149,7 @@ const CollectionMenu = ({
  return (
    <div>
      <DropdownMenu
-        handler={() => <VscEllipsis className='cursor-pointer' />}
+        handler={() => <MoreHorizontal className='cursor-pointer' />}
        options={menuType == EMenuType.Request ? requestMenu : commonMenu}
        width={144}
        onSelect={(value) => value.onClick()}
--- a/platform/firecamp-platform/src/components/activity-bar/explorer/treeItemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/activity-bar/explorer/treeItemRenderer.tsx
@@ -1,10 +1,7 @@
 import cx from 'classnames';
-// import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
-// import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
+import { FolderOpen, FolderClosed } from 'lucide-react';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { AiTwotoneFolder } from '@react-icons/all-files/ai/AiTwotoneFolder';
 import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import CollectionMenu from './menus/CollectionMenu';
@@ -24,9 +21,7 @@ export default {
        case ERequestTypes.Rest:
          const text = method.toUpperCase();
          return (
-            <div className={cx(text, 'collection_leaf-node-type')}>
-              {text}
-            </div>
+            <div className={cx(text, 'collection_leaf-node-type')}>{text}</div>
          );
        case ERequestTypes.GraphQL:
          return <FcIconGraphQL className="text-graphql" size={24} />;
@@ -40,7 +35,6 @@ export default {
    } else if (item.data?.__ref?.isCollection) {
      return context.isExpanded ? (
        <>
-          {/* <VscChevronDown className="mr-1" size={20}/> */}
          <VscTriangleDown
            className="mr-1 flex-none"
            size={12}
@@ -54,7 +48,6 @@ export default {
        </>
      ) : (
        <>
-          {/* <VscChevronRight className="mr-1" size={20}/> */}
          <VscTriangleRight
            className="mr-1 flex-none"
            size={12}
@@ -70,27 +63,21 @@ export default {
    } else if (item.data?.__ref?.isFolder) {
      return context.isExpanded ? (
        <>
-          {/* <VscChevronDown className="mr-1" size={20} opacity={'0.8'}/> */}
          <VscTriangleDown
            className="mr-1 flex-none"
            size={12}
            opacity={'0.6'}
          />
-          <VscFolderOpened
-            className="mr-1 flex-none"
-            size={16}
-            opacity={'0.8'}
-          />
+          <FolderOpen className="mr-1 flex-none" size={16} opacity={'0.8'} />
        </>
      ) : (
        <>
-          {/* <VscChevronRight className="mr-1" size={20} opacity={'0.8'}/> */}
          <VscTriangleRight
            className="mr-1 flex-none"
            size={12}
            opacity={'0.6'}
          />
-          <VscFolder
+          <FolderClosed
            className="mr-1 opacity-80 flex-none"
            size={16}
            opacity={'0.8'}
--- a/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentSelector.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/selector/EnvironmentSelector.tsx
@@ -1,6 +1,6 @@
 import shallow from 'zustand/shallow';
 import { Column } from '@firecamp/ui';
-import { VscEye } from '@react-icons/all-files/vsc/VscEye';
+import { Eye } from 'lucide-react';
 import EnvironmentDD from './EnvironmentDD';
 import { IEnvironmentStore, useEnvStore } from '../../../../store/environment';
 import { IUserStore, useUserStore } from '../../../../store/user';
@@ -38,7 +38,7 @@ const EnvironmentSelector = () => {
          className="cursor-pointer ml-1 text-base !text-info"
          onClick={() => toggleEnvSidebar()}
        >
-          <VscEye size={14} />
+          <Eye size={14} />
        </span>
      </div>
    </Column>
--- a/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Notes, Button } from '@firecamp/ui';
 import { EEnvironmentScope } from '@firecamp/types';
@@ -71,7 +71,7 @@ const EnvironmentCollection = () => {
        return (
          <ToolBar>
            <div>
-              <VscAdd
+              <Plus
                className="cursor-pointer"
                size={16}
                onClick={() => createEnvironmentPrompt()}
--- a/platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx
@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
@@ -9,7 +10,6 @@ import { AiTwotoneFolder } from '@react-icons/all-files/ai/AiTwotoneFolder';
 import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { Button } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';

 export default {
  renderItemArrow: ({ item, context }) => {
@@ -220,7 +220,7 @@ export default {
            )}

            {/* {item.data.__ref.isEnvironment ? (
-              <VscTrash
+              <Trash2
                className="ml-1 cursor-pointer"
                size={14}
                onClick={() => {
--- a/platform/firecamp-platform/src/components/common/environment/sidebar/tree_/itemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/sidebar/tree_/itemRenderer.tsx
@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
@@ -9,7 +10,6 @@ import cx from 'classnames';
 // import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { Button } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';

 export default {
  renderItemArrow: ({ item, context }) => {
@@ -179,7 +179,7 @@ export default {
            />

            {item.data.__ref.isEnvironment ? (
-              <VscTrash
+              <Trash2
                className="ml-1 cursor-pointer"
                size={14}
                onClick={() => {
--- a/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx
+++ b/platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx
@@ -2,7 +2,8 @@ import { memo, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import _cloneDeep from 'lodash/cloneDeep';
 import _cleanDeep from 'clean-deep';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react'; 
+
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import {
  RootContainer,
@@ -175,7 +176,7 @@ const EnvironmentTab = ({ tab, platformContext: context }) => {
              <div className="fc-urlbar-path flex text-base">
                {runtimeEnv.name}
              </div>
-              <VscEdit size={12} onClick={rename} className="pointer" />
+              <Pencil size={12} onClick={rename} className="pointer" />
            </TabHeader.Left>
            <TabHeader.Right>
              {/* <Button text="Save" primary xs /> */}
--- a/platform/firecamp-platform/src/components/common/save/collection/treeItemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/common/save/collection/treeItemRenderer.tsx
@@ -1,8 +1,7 @@
 import cx from 'classnames';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
+import { FolderOpen, FolderClosed } from 'lucide-react';

 export default {
  renderItemArrow: ({ item, context }) => {
@@ -17,11 +16,11 @@ export default {
      return context.isExpanded ? (
        <>
          <VscChevronDown size={20} />
-          <VscFolderOpened size={20} />
+          <FolderOpen size={20} />
        </>
      ) : (
        <>
-          <VscChevronRight size={20} /> <VscFolder size={20} />
+          <VscChevronRight size={20} /> <FolderClosed size={20} />
        </>
      );
    } else {
--- a/platform/firecamp-platform/src/components/modals/workspace/invite-members/InviteUsersForm.tsx
+++ b/platform/firecamp-platform/src/components/modals/workspace/invite-members/InviteUsersForm.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import { FormField, Input } from '@firecamp/ui';
 import { _array } from '@firecamp/utils';
@@ -69,7 +69,7 @@ const InviteUsersForm = ({ usersList, onChange, error }) => {
            onClick={() => _handleAction(index === 0, index)}
          >
            {index === 0 ? (
-              <VscAdd size={20} />
+              <Plus size={20} />
            ) : (
              <VscClose size={20} className="text-error" />
            )}
--- a/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx
+++ b/platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 import {
  Button,
  Container,
@@ -137,7 +137,7 @@ const MembersTab = ({ members = [], isFetchingMembers = false }) => {
      case 'action':
        return (
          <div className="px-2">
-            <VscTrash
+            <Trash2
              size={14}
              className="text-error cursor-pointer"
              onClick={() => onRemoveMember(row)}
--- a/platform/firecamp-platform/src/components/modals/workspace/tabs/PendingInviteMembersTab.tsx
+++ b/platform/firecamp-platform/src/components/modals/workspace/tabs/PendingInviteMembersTab.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 import {
  Button,
  Container,
@@ -138,7 +138,7 @@ const PendingInviteMembersTab = ({ members = [], isFetchingMembers = false }) =>
      // case 'action':
      //   return (
      //     <div className="px-2">
-      //       <VscTrash
+      //       <Trash2
      //         size={14}
      //         className="text-error cursor-pointer"
      //         onClick={() => onRemoveMember(row)}
--- a/platform/firecamp-platform/src/components/prompt/tree/itemRenderer.tsx
+++ b/platform/firecamp-platform/src/components/prompt/tree/itemRenderer.tsx
@@ -1,10 +1,7 @@
 import cx from 'classnames';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-// import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-// import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
 import { Button } from '@firecamp/ui';

 export default {
@@ -12,7 +9,7 @@ export default {
    return context.isExpanded ? (
      <>
        <VscTriangleDown className="mr-1 flex-none" size={12} opacity={'0.6'} />
-        <VscFolderOpened className="mr-1 flex-none" size={16} opacity={'0.8'} />
+        <FolderOpen className="mr-1 flex-none" size={16} opacity={'0.8'} />
      </>
    ) : (
      <>
@@ -21,7 +18,7 @@ export default {
          size={12}
          opacity={'0.6'}
        />
-        <VscFolder
+        <FolderClosed
          className="mr-1 opacity-80 flex-none"
          size={16}
          opacity={'0.8'}
@@ -172,14 +169,14 @@ export default {
              <></>
            )}

-            {/* <VscAdd
+            {/* <Plus
              className="ml-1 cursor-pointer"
              size={14}
              onClick={() => {
                createFolder(item.index);
              }}
            />
-            <VscTrash
+            <Trash2
              className="ml-1 cursor-pointer"
              size={14}
              onClick={() => {
--- a/platform/firecamp-platform/src/components/sidebar/EnvSidebar.tsx
+++ b/platform/firecamp-platform/src/components/sidebar/EnvSidebar.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import classnames from 'classnames';
 import shallow from 'zustand/shallow';
+import { Pencil } from 'lucide-react';
 import {
  Resizable,
  Container,
@@ -11,7 +12,6 @@ import {
  PlainTable,
 } from '@firecamp/ui';
 import { useEnvStore, IEnvironmentStore } from '../../store/environment';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
 import { useTabStore } from '../../store/tab';
 import { ETabEntityTypes } from '../tabs/types';

@@ -118,7 +118,7 @@ const EnvPreviewTable: FC<any> = ({
        )}
        <div className="flex items-center ml-auto">
          {envId ? <Button text="Open" onClick={onOpen} secondary compact xs /> : <></>}
-          {/* <VscEdit className="table-action ml-2 cursor-pointer" /> */}
+          {/* <Pencil className="table-action ml-2 cursor-pointer" /> */}
        </div>
      </div>
      <div className="flex-1 overflow-auto visible-scrollbar">
--- a/platform/firecamp-platform/src/components/status-bar/items/DDMenuContainer.tsx
+++ b/platform/firecamp-platform/src/components/status-bar/items/DDMenuContainer.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import shallow from 'zustand/shallow';
+import { Plus } from 'lucide-react';
 import { DropdownMenu } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscSignIn } from '@react-icons/all-files/vsc/VscSignIn';
 import { VscSignOut } from '@react-icons/all-files/vsc/VscSignOut';
 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
@@ -101,7 +101,7 @@ const UserDDMenus: FC<{ title: string; isGuest: boolean }> = ({
      name: 'Create new organization',
      postfix: () => (
        <div className={'ml-2'}>
-          <VscAdd size={14} />
+          <Plus size={14} />
        </div>
      ),
      onClick: () => {
@@ -181,7 +181,7 @@ const WorkspaceDDMenus: FC<{ title: string; disabled?: boolean }> = ({
      disabled,
      postfix: () => (
        <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
        </div>
      ),
      onClick: () => {
@@ -193,7 +193,7 @@ const WorkspaceDDMenus: FC<{ title: string; disabled?: boolean }> = ({
      disabled,
      postfix: () => (
        <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
        </div>
      ),
      onClick: () => {
@@ -264,7 +264,7 @@ const OrgDDMenus: FC<{ title: string; disabled?: boolean }> = ({
      disabled,
      postfix: () => (
        <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
        </div>
      ),
      onClick: () => {
@@ -276,7 +276,7 @@ const OrgDDMenus: FC<{ title: string; disabled?: boolean }> = ({
      disabled,
      postfix: () => (
        <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
        </div>
      ),
      onClick: () => {
--- a/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx
+++ b/platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx
@@ -1,7 +1,7 @@
 import { useEffect, memo, useRef } from 'react';
 import classnames from 'classnames';
 import shallow from 'zustand/shallow';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { VscHome } from '@react-icons/all-files/vsc/VscHome';
 import { Column, Row, TabsV3 as Tabs } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
@@ -121,7 +121,7 @@ const TabHeaderContainer = () => {
                    onClick={(e) => openNewTab()}
                  >
                    <a>
-                      <VscAdd size={16} />
+                      <Plus size={16} />
                    </a>
                  </div>
                  <Menu />
--- a/platform/firecamp-platform/src/components/tabs/header/Menu.tsx
+++ b/platform/firecamp-platform/src/components/tabs/header/Menu.tsx
@@ -1,8 +1,8 @@
 import { FC } from 'react';
+import { MoreHorizontal } from 'lucide-react';
 import { ERequestTypes } from '@firecamp/types';
 import { DropdownMenu } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
 import {
  FcIconGetSquare,
  FcIconGraphQL,
@@ -74,7 +74,7 @@ const Menu: FC = () => {
    <DropdownMenu
      handler={() => (
        <span className="w-9 h-full border-r border-tab-border bg-tab-background-activeColor flex items-center justify-center cursor-pointer">
-          <VscEllipsis size={20} strokeWidth={1} />
+          <MoreHorizontal size={20} strokeWidth={1} />
        </span>
      )}
      options={tabMenus}
--- a/platform/firecamp-platform/src/components/tabs/header/PreComp.tsx
+++ b/platform/firecamp-platform/src/components/tabs/header/PreComp.tsx
@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import classNames from 'classnames';
+import { FolderOpen, FolderClosed } from 'lucide-react';
+
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { EHttpMethod, ERequestTypes } from '@firecamp/types';
 import {
@@ -8,8 +10,6 @@ import {
  FcIconWebSocket,
 } from '@firecamp/ui';
 import { ETabEntityTypes } from '../types';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';

 const PreComp: FC<{ entity: any; entityType: string }> = ({
@@ -57,13 +57,13 @@ const PreComp: FC<{ entity: any; entityType: string }> = ({
    case ETabEntityTypes.Collection:
      return (
        <div className="collection text-xs font-bold w-5 tab-icon">
-          <VscFolder size={16} />
+          <FolderClosed size={16} />
        </div>
      );
    case ETabEntityTypes.Folder:
      return (
        <div className="folder text-xs font-bold w-5 tab-icon">
-          <VscFolderOpened size={16} />
+          <FolderOpen size={16} />
        </div>
      );
    case ETabEntityTypes.Import:
--- a/platform/firecamp-ui/src/components/activity-bar/ActivityBar.stories.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActivityBar.stories.tsx
@@ -1,7 +1,7 @@
+import { Settings } from 'lucide-react';
 import { VscFiles } from "@react-icons/all-files/vsc/VscFiles";
 import { VscHistory } from "@react-icons/all-files/vsc/VscHistory";
 import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
-import { VscSettingsGear } from "@react-icons/all-files/vsc/VscSettingsGear";
 import ActivityBar from './ActivityBar';

 export default {
@@ -25,7 +25,7 @@ const compositeBar = [

 const actionBar = [
  { id: '4', icon: <VscAccount data-tip={'User (⇧⌘U)'} data-for={'4'} />, text: 'User (⇧⌘U)', active: false },
-  { id: '5', icon: <VscSettingsGear data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
+  { id: '5', icon: <Settings data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
 ];

 const TemplateContainer = (args: any) => {
--- a/platform/firecamp-ui/src/components/activity-bar/ActivityBar.test.tsx
+++ b/platform/firecamp-ui/src/components/activity-bar/ActivityBar.test.tsx
@@ -1,10 +1,10 @@
 import {useState} from 'react';
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
+import { Settings } from 'lucide-react';
 import { VscFiles } from "@react-icons/all-files/vsc/VscFiles";
 import { VscHistory } from "@react-icons/all-files/vsc/VscHistory";
 import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
-import { VscSettingsGear } from "@react-icons/all-files/vsc/VscSettingsGear";

 import ActivityBar from './ActivityBar';
 import { click } from '../../../__mocks__/eventMock';
@@ -17,7 +17,7 @@ const compositeBarList = [

 const actionBarList = [
    { id: '4', icon: <VscAccount data-tip={'User (⇧⌘U)'} data-for={'4'} />, text: 'User (⇧⌘U)', active: false },
-    { id: '5', icon: <VscSettingsGear data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
+    { id: '5', icon: <Settings data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
 ];

 const Template = (args: any = {}) => {
--- a/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx
+++ b/platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx
@@ -1,24 +1,19 @@
 import { useState } from 'react';
 import cx from 'classnames';
-
+import { FolderClosed, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
 import { AiOutlineUserAdd } from '@react-icons/all-files/ai/AiOutlineUserAdd';
 import { AiOutlineUserSwitch } from '@react-icons/all-files/ai/AiOutlineUserSwitch';
 import { IoSendSharp } from '@react-icons/all-files/io5/IoSendSharp';
 import { RiBracesLine } from '@react-icons/all-files/ri/RiBracesLine';
 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
 import { VscFile } from '@react-icons/all-files/vsc/VscFile';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
 import { VscMultipleWindows } from '@react-icons/all-files/vsc/VscMultipleWindows';
 import { VscOrganization } from '@react-icons/all-files/vsc/VscOrganization';
 import { VscRemote } from '@react-icons/all-files/vsc/VscRemote';
 import { VscSignIn } from '@react-icons/all-files/vsc/VscSignIn';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import { VscTwitter } from '@react-icons/all-files/vsc/VscTwitter';
 import { VscWindow } from '@react-icons/all-files/vsc/VscWindow';
@@ -57,7 +52,7 @@ Example.args = {
    {
      id: EMenuOptions.Collection,
      name: 'Collection',
-      prefix: () => <VscFolder size={18} />,
+      prefix: () => <FolderClosed size={18} />,
    },
    {
      id: EMenuOptions.Environment,
@@ -148,7 +143,7 @@ export const GlobalCreate = () => {
        {
          id: EMenuOptions.Collection,
          name: 'Collection',
-          prefix: () => <VscFolder size={18} />,
+          prefix: () => <FolderClosed size={18} />,
        },
        {
          id: EMenuOptions.Environment,
@@ -571,7 +566,7 @@ export const FooterStatusBar = () => {
                name: 'Workspace Management',
                postfix: () => (
                  <div className={'ml-2 leading-3'}>
-                    <VscAdd size={14} strokeWidth={1.5} />
+                    <Plus size={14} strokeWidth={1.5} />
                  </div>
                ),
              },
@@ -580,7 +575,7 @@ export const FooterStatusBar = () => {
                name: 'Invite Members',
                postfix: () => (
                  <div className={'ml-2 leading-3'}>
-                    <VscAdd size={14} strokeWidth={1.5} />
+                    <Plus size={14} strokeWidth={1.5} />
                  </div>
                ),
              },
@@ -647,14 +642,14 @@ export const SidebarCollectionOption = () => {
  const [selected, setSelected] = useState('MyQuery');
  return (
    <DropdownMenu
-      handler={() => <VscEllipsis className="cursor-pointer" />}
+      handler={() => <MoreHorizontal className="cursor-pointer" />}
      options={[
        {
-          prefix: () => <VscEdit size={14} />,
+          prefix: () => <Pencil size={14} />,
          name: 'Rename',
        },
        {
-          prefix: () => <VscTrash size={14} />,
+          prefix: () => <Trash2 size={14} />,
          name: 'Delete',
        },
      ]}
--- a/platform/firecamp-ui/src/components/dropdown/DropdownV2.stories.tsx
+++ b/platform/firecamp-ui/src/components/dropdown/DropdownV2.stories.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { FolderClosed, Plus } from 'lucide-react';

 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
@@ -13,7 +13,6 @@ import { FcIconGetSquare } from '@firecamp/ui';

 import { RiBracesLine } from '@react-icons/all-files/ri/RiBracesLine';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { VscOrganization } from '@react-icons/all-files/vsc/VscOrganization';
 import { AiOutlineUserAdd } from '@react-icons/all-files/ai/AiOutlineUserAdd';
 import { AiOutlineUserSwitch } from '@react-icons/all-files/ai/AiOutlineUserSwitch';
@@ -57,7 +56,7 @@ export const DropDownv2Example = () => {
          name: 'GraphQL',
          disabled: false,
          showSeparator: true,
-          prefix: () => <VscAdd className="mr-2" size={10} />,
+          prefix: () => <Plus className="mr-2" size={10} />,
          postfix: () => <VscChevronRight size={10} className={'ml-auto'} />,
          list: [
            {
@@ -282,7 +281,7 @@ export const CreateMenuExample = () => {
              {
                id: 'Collection',
                name: 'Collection',
-                prefix: () => <VscFolder className="mr-2" size={16} />,
+                prefix: () => <FolderClosed className="mr-2" size={16} />,
                postfix: () => (
                  <VscChevronRight size={14} className={'ml-auto'} />
                ),
@@ -617,7 +616,7 @@ export const StatusBarExample = () => {
                    name: 'Workspace Management',
                    postfix: () => (
                      <div className={'ml-2 leading-3'}>
-                        <VscAdd size={14} strokeWidth={1.5} />
+                        <Plus size={14} strokeWidth={1.5} />
                      </div>
                    ),
                  },
@@ -626,7 +625,7 @@ export const StatusBarExample = () => {
                    name: 'Invite Members',
                    postfix: () => (
                      <div className={'ml-2 leading-3'}>
-                        <VscAdd size={14} strokeWidth={1.5} />
+                        <Plus size={14} strokeWidth={1.5} />
                      </div>
                    ),
                  },
--- a/platform/firecamp-ui/src/components/table/basic-table/BasicTable.tsx
+++ b/platform/firecamp-ui/src/components/table/basic-table/BasicTable.tsx
@@ -1,9 +1,8 @@
 import { useRef } from 'react';
 import cx from 'classnames';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Input, Button } from '@firecamp/ui';
 import Checkbox from '../../checkbox/Checkbox';
@@ -141,7 +140,7 @@ const BasicTable = ({
        if (!options.allowRowRemove) return <></>;
        return (
          <div className="px-2 flex">
-            <VscTrash
+            <Trash2
              size={14}
              className="text-error cursor-pointer"
              onClick={(e) => tableApi?.removeRow(row.id)}
@@ -186,7 +185,7 @@ const BasicTable = ({
          <Button
            onClick={() => apiRef.current.addRow()}
            text="Add Row"
-            leftIcon={<VscAdd size={16} />}
+            leftIcon={<Plus size={16} />}
            disabled={
              options.hasOwnProperty('allowRowAdd') && !options.allowRowAdd
            }
--- a/platform/firecamp-ui/src/components/table/environment-table/EnvironmentTable.tsx
+++ b/platform/firecamp-ui/src/components/table/environment-table/EnvironmentTable.tsx
@@ -1,10 +1,9 @@
 import { useRef, memo } from 'react';
 import isEqual from 'react-fast-compare';
 import cx from 'classnames';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Button } from '@firecamp/ui';

@@ -112,7 +111,7 @@ const EnvironmentTable = ({
        if (!options.allowRowRemove) return <></>;
        return (
          <div className="px-2 flex">
-            <VscTrash
+            <Trash2
              size={14}
              className="text-error cursor-pointer"
              onClick={(e) => tableApi?.removeRow(row.id)}
@@ -154,7 +153,7 @@ const EnvironmentTable = ({
        <Button
          text="Add Row"
          onClick={() => apiRef.current.addRow()}
-          leftIcon={<VscAdd size={16} />}
+          leftIcon={<Plus size={16} />}
          disabled={
            options.hasOwnProperty('allowRowAdd') && !options.allowRowAdd
          }
--- a/platform/firecamp-ui/src/components/table/multipart-table/MultipartTable.tsx
+++ b/platform/firecamp-ui/src/components/table/multipart-table/MultipartTable.tsx
@@ -1,11 +1,10 @@
 import React, { FC, memo, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
 import { VscTextSize } from '@react-icons/all-files/vsc/VscTextSize';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscFile } from '@react-icons/all-files/vsc/VscFile';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Input, Button } from '@firecamp/ui';

@@ -148,7 +147,7 @@ const MultipartTable = ({
        if (!options.allowRowRemove) return <></>;
        return (
          <div className="px-2 flex">
-            <VscTrash
+            <Trash2
              size={14}
              className="text-error cursor-pointer"
              onClick={(e) => tableApi?.removeRow(row.id)}
@@ -190,7 +189,7 @@ const MultipartTable = ({
        <Button
          onClick={() => apiRef.current.addRow()}
          text="Add Row"
-          leftIcon={<VscAdd size={16} />}
+          leftIcon={<Plus size={16} />}
          primary
          transparent
          xs
--- a/platform/firecamp-ui/src/components/table/test-result-table/TestResultTable.tsx
+++ b/platform/firecamp-ui/src/components/table/test-result-table/TestResultTable.tsx
@@ -1,7 +1,6 @@
 import { useRef, memo } from 'react';
 import isEqual from 'react-fast-compare';
 import { _array } from '@firecamp/utils';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import Table from '../primitive/Table';
 import {
  ITableRows,
--- a/platform/firecamp-ui/src/components/tabs/Tabs.tsx
+++ b/platform/firecamp-ui/src/components/tabs/Tabs.tsx
@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { ScrollBar } from '@firecamp/ui';
 import Tab from './Tab';
 import { ITabs } from './interfaces/Tabs.interfaces';
@@ -172,7 +172,7 @@ const Tabs: FC<ITabs> = ({
                  }
                }}
              >
-                <VscAdd className="flex" size={16} title="IconAdd" />
+                <Plus className="flex" size={16} />
              </div>
            )}
          </div>
--- a/platform/firecamp-ui/src/components/tabs/v3/Tabs.tsx
+++ b/platform/firecamp-ui/src/components/tabs/v3/Tabs.tsx
@@ -9,7 +9,7 @@ import {
  useEffect,
 } from 'react';
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { TId } from '@firecamp/types';
 import { ScrollBar } from '@firecamp/ui';

@@ -246,7 +246,7 @@ const Tabs: FC<ITabs> = forwardRef(
                    }
                  }}
                >
-                  <VscAdd className="flex" size={16} />
+                  <Plus className="flex" size={16} />
                </div>
              )}
            </div>
--- a/platform/firecamp-ui/src/components/url/components/UrlBar.tsx
+++ b/platform/firecamp-ui/src/components/url/components/UrlBar.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import cx from 'classnames';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import {
  CopyButton,
  Column,
@@ -29,7 +29,7 @@ const UrlBar: FC<IUrlBar> & {
            <span>{nodePath || ''}</span>
            <ToolBar className="ml-4 visible">
              {showEditIcon ? (
-                <VscEdit size={16} onClick={onEditClick} />
+                <Pencil size={16} onClick={onEditClick} />
              ) : (
                <></>
              )}
--- a/platform/firecamp-ui/src/components/url/primitives/UrlBar.tsx
+++ b/platform/firecamp-ui/src/components/url/primitives/UrlBar.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import cx from 'classnames';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import {
  CopyButton,
  Column,
@@ -29,7 +29,7 @@ const UrlBar: FC<IUrlBar> & {
            <span>{nodePath || ''}</span>
            <ToolBar className="ml-4 visible">
              {showEditIcon ? (
-                <VscEdit size={16} onClick={onEditClick} />
+                <Pencil size={16} onClick={onEditClick} />
              ) : (
                <></>
              )}
--- a/playgrounds/firecamp-graphql/src/components/playground-panel/PlaygroundPanel.tsx
+++ b/playgrounds/firecamp-graphql/src/components/playground-panel/PlaygroundPanel.tsx
@@ -1,5 +1,5 @@
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import shallow from 'zustand/shallow';
+import { Plus } from 'lucide-react';
 import { Button, Container, Tabs } from '@firecamp/ui';
 import Playground from './playground/Playground';
 import { useStore, IStore, useStoreApi } from '../../store';
@@ -54,7 +54,7 @@ const TabsSuffixComp = () => {
  return (
    <Button
      text="add playground"
-      leftIcon={<VscAdd size={12} />}
+      leftIcon={<Plus size={12} />}
      onClick={() => addPlayground()}
      transparent
      xs
--- a/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx
+++ b/playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import shallow from 'zustand/shallow';
 import { IStore, useStore } from '../../../../../store';

@@ -46,6 +46,6 @@ const EditPlaygroundName: FC<any> = ({}) => {
        // console.log(res)
      });
  };
-  return <VscEdit size={12} onClick={_rename} />;
+  return <Pencil size={12} onClick={_rename} />;
 };
 export default EditPlaygroundName;
--- a/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx
+++ b/playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx
@@ -1,9 +1,9 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
 import { Button, FcIconGraphQL, ToolBar } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';

 export default {
  renderItemArrow: ({ item, context }) => {
@@ -171,7 +171,7 @@ export default {
              xs
            />

-            <VscTrash
+            <Trash2
              className="ml-1 cursor-pointer"
              size={14}
              onClick={() => {
--- a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx
+++ b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
+import { FolderPlus } from 'lucide-react';
 import { VscRefresh } from '@react-icons/all-files/vsc/VscRefresh';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Pane, ToolBar, Empty } from '@firecamp/ui';
@@ -23,7 +23,7 @@ const CollectionPane = () => {
              {/* <VscRefresh size={14} className="mr-2 cursor-pointer" /> */}
            </div>
            <div>
-              <VscNewFolder
+              <FolderPlus
                size={14}
                className="cursor-pointer"
                onClick={() => promptCreateFolder()}
--- a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/treeItemRenderer.tsx
+++ b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/treeItemRenderer.tsx
@@ -1,10 +1,7 @@
 import cx from 'classnames';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { Button } from '@firecamp/ui';
 import { ISocketIOEmitter } from '@firecamp/types';

@@ -22,7 +19,7 @@ export default {
            size={12}
            opacity={'0.6'}
          />
-          <VscFolderOpened
+          <FolderOpen
            className="mr-1 flex-none"
            size={16}
            opacity={'0.8'}
@@ -35,7 +32,7 @@ export default {
            size={12}
            opacity={'0.6'}
          />
-          <VscFolder
+          <FolderClosed
            className="mr-1 opacity-80 flex-none"
            size={16}
            opacity={'0.8'}
@@ -206,7 +203,7 @@ export default {
              <></>
            )}
            {item.data.__ref.isFolder ? (
-              <VscAdd
+              <Plus
                className="ml-1 cursor-pointer"
                tabIndex={2}
                size={14}
@@ -218,7 +215,7 @@ export default {
              <></>
            )}

-            <VscTrash
+            <Trash2
              className="ml-1 cursor-pointer"
              size={14}
              onClick={() => {
--- a/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/PaneBody.tsx
+++ b/playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/PaneBody.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import shallow from 'zustand/shallow';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
+import { Trash2 } from 'lucide-react';
 import {
  Input,
  Container,
@@ -175,7 +175,7 @@ const Listener = ({ listener, isActive }) => {
        {name}
      </div>

-      <VscTrash
+      <Trash2
        className="h-0 ml-1 group-hover:h-auto cursor-pointer"
        onClick={() => {
          deleteListener(listener);
--- a/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx
+++ b/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
+import { FolderPlus } from 'lucide-react';
 import { VscRefresh } from '@react-icons/all-files/vsc/VscRefresh';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Pane, ToolBar, Empty } from '@firecamp/ui';
@@ -23,7 +23,7 @@ const CollectionTab = () => {
              {/* <VscRefresh size={14} className="cursor-pointer" /> */}
            </div>
            <div>
-              <VscNewFolder
+              <FolderPlus
                size={14}
                className="cursor-pointer"
                onClick={() => promptCreateFolder()}
--- a/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx
+++ b/playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx
@@ -1,10 +1,7 @@
 import cx from 'classnames';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { Button } from '@firecamp/ui';

 export default {
@@ -20,7 +17,7 @@ export default {
            size={12}
            opacity={'0.6'}
          />
-          <VscFolderOpened
+          <FolderOpen
            className="mr-1 flex-none"
            size={16}
            opacity={'0.8'}
@@ -33,7 +30,7 @@ export default {
            size={12}
            opacity={'0.6'}
          />
-          <VscFolder
+          <FolderClosed
            className="mr-1 opacity-80 flex-none"
            size={16}
            opacity={'0.8'}
@@ -229,7 +226,7 @@ export default {
            )}

            {item.data.__ref.isFolder ? (
-              <VscAdd
+              <Plus
                className="ml-1 cursor-pointer"
                tabIndex={2}
                size={14}
@@ -241,7 +238,7 @@ export default {
              <></>
            )}

-            <VscTrash
+            <Trash2
              className="ml-1 cursor-pointer"
              size={14}
              onClick={() => {