Icons style - Lucide Icons (#529)

🎨 style(GenericNode): change nodeIcons import to nodeIconsLucide to match the new icon library 🎨 style(NodeModal): change Icon type to any to fix type error 🎨 style(chatInput): remove unnecessary array brackets 🎨 style(DisclosureComponent): change Icon size to 22 to match the new icon library 🎨 style(extraSidebarComponent): change nodeIcons import to nodeIconsLucide to match the new icon library and add Search icon 🎨 style(components/index): add SVGProps to import and change Icon type to any to fix type error ✨ feat(utils.ts): add support for Lucide icons to be used in the app to improve UI and UX.
2023-06-23 18:34:52 -03:00 · 2023-06-23 18:34:52 -03:00 · 27d7553fb6
commit 27d7553fb6
parent 1af05a2c97 f0476e20df
33 changed files with 275 additions and 104 deletions
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@ -4,6 +4,7 @@ import {
  getRandomKeyByssmm,
  groupByFamily,
  isValidConnection,
+  nodeIconsLucide,
 } from "../../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import InputComponent from "../../../../components/inputComponent";
@ -18,7 +19,7 @@ import InputFileComponent from "../../../../components/inputFileComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
-import { nodeNames, nodeIcons } from "../../../../utils";
+import { nodeNames } from "../../../../utils";
 import React from "react";
 import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
@ -89,12 +90,12 @@ export default function ParameterComponent({
        )}
      >
        <div
-          className="h-5 w-5"
+          className="h-6 w-6"
          style={{
            color: nodeColors[item.family],
          }}
        >
-          {React.createElement(nodeIcons[item.family])}
+          {React.createElement(nodeIconsLucide[item.family])}
        </div>
        <span className="ps-2 text-gray-950">
          {nodeNames[item.family] ?? ""}{" "}
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@ -1,7 +1,21 @@
-import { classNames, nodeColors, nodeIcons, toTitleCase } from "../../utils";
+import {
+  classNames,
+  nodeColors,
+  nodeIconsLucide,
+  toTitleCase,
+} from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
 import { typesContext } from "../../contexts/typesContext";
-import { useContext, useState, useEffect, useRef } from "react";
+import {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  ForwardRefExoticComponent,
+  ComponentType,
+  SVGProps,
+  ReactNode,
+} from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@ -12,6 +26,7 @@ import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarCom

 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
+import { ReactElement } from "react-markdown/lib/react-markdown";

 export default function GenericNode({
  data,
@ -25,8 +40,9 @@ export default function GenericNode({
  const { types, deleteNode } = useContext(typesContext);

  const { closePopUp, openPopUp } = useContext(PopUpContext);
-
-  const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
+  // any to avoid type conflict
+  const Icon: any =
+    nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
  const [validationStatus, setValidationStatus] = useState(null);
  // State for outline color
  const { sseData, isBuilding } = useSSE();
@ -88,8 +104,13 @@ export default function GenericNode({
              }}
            />
            <div className="ml-2 truncate">
-              <ShadTooltip delayDuration={1500} content={data.node.display_name}>
-                <div className="ml-2 truncate text-gray-800">{data.node.display_name}</div>
+              <ShadTooltip
+                delayDuration={1500}
+                content={data.node.display_name}
+              >
+                <div className="ml-2 truncate text-gray-800">
+                  {data.node.display_name}
+                </div>
              </ShadTooltip>
            </div>
          </div>
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@ -1,13 +1,8 @@
-import {
-  XCircleIcon,
-  XMarkIcon,
-  InformationCircleIcon,
-  CheckCircleIcon,
-} from "@heroicons/react/24/outline";
 import { Link } from "react-router-dom";
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
 import { SingleAlertComponentType } from "../../../../types/alerts";
+import { X, CheckCircle2, Info, XCircle } from "lucide-react";

 export default function SingleAlert({
  dropItem,
@ -34,7 +29,7 @@ export default function SingleAlert({
          key={dropItem.id}
        >
          <div className="flex-shrink-0">
-            <XCircleIcon
+            <XCircle
              className="h-5 w-5 text-red-400 dark:text-red-50"
              aria-hidden="true"
            />
@ -70,7 +65,7 @@ export default function SingleAlert({
                className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
              >
                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
              </button>
            </div>
          </div>
@ -81,7 +76,7 @@ export default function SingleAlert({
          key={dropItem.id}
        >
          <div className="flex-shrink-0">
-            <InformationCircleIcon
+            <Info
              className="h-5 w-5 text-blue-400 dark:text-blue-50"
              aria-hidden="true"
            />
@ -116,7 +111,7 @@ export default function SingleAlert({
                className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
              >
                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
              </button>
            </div>
          </div>
@ -127,7 +122,7 @@ export default function SingleAlert({
          key={dropItem.id}
        >
          <div className="flex-shrink-0">
-            <CheckCircleIcon
+            <CheckCircle2
              className="h-5 w-5 text-green-400 dark:text-green-50"
              aria-hidden="true"
            />
@ -150,7 +145,7 @@ export default function SingleAlert({
                className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
              >
                <span className="sr-only">Dismiss</span>
-                <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+                <X className="h-5 w-5" aria-hidden="true" />
              </button>
            </div>
          </div>
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@ -1,11 +1,11 @@
 import { useContext, useEffect, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
-import { XMarkIcon } from "@heroicons/react/24/solid";
-import { TrashIcon } from "@heroicons/react/24/outline";
 import SingleAlert from "./components/singleAlertComponent";
 import { AlertDropdownType } from "../../types/alerts";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
+import { X, Trash2 } from "lucide-react";
+
 export default function AlertDropdown({}: AlertDropdownType) {
  const { closePopUp } = useContext(PopUpContext);
  const componentRef = useRef<HTMLDivElement>(null);
@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
              setTimeout(clearNotificationList, 100);
            }}
          >
-            <TrashIcon className="w-[1.1rem] h-[1.1rem]" />
+            <Trash2 className="w-[1.1rem] h-[1.1rem]" />
          </button>
          <button
            className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
            onClick={closePopUp}
          >
-            <XMarkIcon className="h-5 w-5" />
+            <X className="h-5 w-5" />
          </button>
        </div>
      </div>
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
+import { XCircle } from "lucide-react";

 export default function ErrorAlert({
  title,
@ -43,7 +43,7 @@ export default function ErrorAlert({
      >
        <div className="flex">
          <div className="flex-shrink-0">
-            <XCircleIcon
+            <XCircle
              className="h-5 w-5 text-red-400 dark:text-red-50"
              aria-hidden="true"
            />
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
+import { Info } from "lucide-react";

 export default function NoticeAlert({
  title,
@ -40,7 +40,7 @@ export default function NoticeAlert({
      >
        <div className="flex">
          <div className="flex-shrink-0">
-            <InformationCircleIcon
+            <Info
              className="h-5 w-5 text-blue-400 dark:text-blue-50"
              aria-hidden="true"
            />
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
+import { CheckCircle2 } from "lucide-react";

 export default function SuccessAlert({
  title,
@ -38,7 +38,7 @@ export default function SuccessAlert({
      >
        <div className="flex">
          <div className="flex-shrink-0">
-            <CheckCircleIcon
+            <CheckCircle2
              className="h-5 w-5 text-green-400 dark:text-green-50"
              aria-hidden="true"
            />
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@ -1,5 +1,4 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronLeftIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
 import { Link } from "react-router-dom";
 import { classNames } from "../../utils";
--- a/src/frontend/src/components/chatComponent/chatMessage/index.tsx
+++ b/src/frontend/src/components/chatComponent/chatMessage/index.tsx
@ -1,13 +1,9 @@
-import {
-  ChatBubbleLeftEllipsisIcon,
-  ChatBubbleOvalLeftEllipsisIcon,
-  PlusSmallIcon,
-} from "@heroicons/react/24/outline";
 import { useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { nodeColors } from "../../../utils";
 import Convert from "ansi-to-html";
 const convert = new Convert({ newline: true });
+import { MessageCircle } from "lucide-react";

 export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
  const [hidden, setHidden] = useState(true);
@ -24,7 +20,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
                onClick={() => setHidden((prev) => !prev)}
                className="absolute top-2 right-2 cursor-pointer"
              >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
+                <MessageCircle className="w-5 h-5 animate-bounce" />
              </div>
            )}
            {chat.thought && chat.thought !== "" && !hidden && (
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@ -1,10 +1,10 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";

 export default function CodeAreaComponent({
  value,
@ -69,7 +69,7 @@ export default function CodeAreaComponent({
          }}
        >
          {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" />
          )}
        </button>
      </div>
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@ -1,9 +1,9 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { Fragment, useEffect, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ChevronsUpDown, Check } from "lucide-react";

 export default function Dropdown({
  value,
@ -15,9 +15,9 @@ export default function Dropdown({
  let [internalValue, setInternalValue] = useState(
    value === "" || !value ? "Choose an option" : value
  );
-  useEffect(()=>{
-    setInternalValue(value === "" || !value ? "Choose an option" : value)
-  },[value])
+  useEffect(() => {
+    setInternalValue(value === "" || !value ? "Choose an option" : value);
+  }, [value]);

  return (
    <>
@ -46,7 +46,7 @@ export default function Dropdown({
                    "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
                  }
                >
-                  <ChevronUpDownIcon
+                  <ChevronsUpDown
                    className="h-5 w-5 text-gray-400"
                    aria-hidden="true"
                  />
@ -100,7 +100,7 @@ export default function Dropdown({
                                "absolute inset-y-0 right-0 flex items-center pr-4"
                              )}
                            >
-                              <CheckIcon
+                              <Check
                                className={
                                  active
                                    ? "h-5 w-5 dark:text-black text-black"
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@ -69,6 +69,7 @@ export const MenuBar = ({ flows, tabId }) => {
              onClick={() => {
                handleAddFlow();
              }}
+              className="cursor-pointer"
            >
              <Plus className="w-4 h-4 mr-2" />
              New
@ -77,6 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
              onClick={() => {
                openPopUp(<FlowSettingsModal />);
              }}
+              className="cursor-pointer"
            >
              <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
              Settings
@ -85,6 +87,7 @@ export const MenuBar = ({ flows, tabId }) => {
              onClick={() => {
                undo();
              }}
+              className="cursor-pointer"
            >
              <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
              Undo
@ -93,6 +96,7 @@ export const MenuBar = ({ flows, tabId }) => {
              onClick={() => {
                redo();
              }}
+              className="cursor-pointer"
            >
              <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
              Redo
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@ -13,6 +13,7 @@ import { Link, useLocation, useParams } from "react-router-dom";
 import { USER_PROJECTS_HEADER } from "../../constants";
 import { getRepoStars } from "../../controllers/API";
 import { Separator } from "../ui/separator";
+import { Bell } from "lucide-react";

 export default function Header() {
  const { flows, addFlow, tabId } = useContext(TabsContext);
@ -134,7 +135,7 @@ export default function Header() {
            {notificationCenter && (
              <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
            )}
-            <BellIcon className="h-5 w-5" aria-hidden="true" />
+            <Bell className="h-5 w-5" aria-hidden="true" />
          </button>
        </div>
      </div>
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@ -1,9 +1,9 @@
-import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../constants";
+import { FileSearch2 } from "lucide-react";
 import { uploadFile } from "../../controllers/API";

 export default function InputFileComponent({
@ -114,7 +114,7 @@ export default function InputFileComponent({
        </span>
        <button onClick={handleButtonClick}>
          {!editNode && !loading && (
-            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
+            <FileSearch2 className="w-6 h-6 hover:text-ring" />
          )}
          {!editNode && loading && (
            <span className="loading loading-spinner loading-sm pl-3 h-8 pointer-events-none"></span>
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@ -1,10 +1,11 @@
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";

 import _ from "lodash";
 import { INPUT_STYLE } from "../../constants";
+import { X, Plus } from "lucide-react";
+
 export default function InputListComponent({
  value,
  onChange,
@ -59,7 +60,7 @@ export default function InputListComponent({
                onChange(inputList);
              }}
            >
-              <PlusIcon className={"w-4 h-4 hover:text-ring"} />
+              <Plus className={"w-4 h-4 hover:text-ring"} />
            </button>
          ) : (
            <button
@ -72,7 +73,7 @@ export default function InputListComponent({
                onChange(inputList);
              }}
            >
-              <XMarkIcon className="w-4 h-4 hover:text-red-600" />
+              <X className="w-4 h-4 hover:text-red-600" />
            </button>
          )}
        </div>
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@ -1,10 +1,10 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";

 export default function PromptAreaComponent({
  value,
@ -74,7 +74,7 @@ export default function PromptAreaComponent({
          }}
        >
          {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
          )}
        </button>
      </div>
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@ -1,10 +1,11 @@
-import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
+import { ExternalLink } from "lucide-react";
+
 export default function TextAreaComponent({
  value,
  onChange,
@ -76,7 +77,7 @@ export default function TextAreaComponent({
          }}
        >
          {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
+            <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
          )}
        </button>
      </div>
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@ -1,4 +1,3 @@
-import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import "ace-builds/src-noconflict/mode-python";
@ -26,7 +25,7 @@ import {
  TabsList,
  TabsTrigger,
 } from "../../components/ui/tabs";
-import { Check, Clipboard } from "lucide-react";
+import { Check, Clipboard, Code2 } from "lucide-react";

 export default function ApiModal({ flow }: { flow: FlowType }) {
  const [open, setOpen] = useState(true);
@ -88,7 +87,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <span className="pr-2">Code</span>
-            <CodeBracketSquareIcon
+            <Code2
              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
              aria-hidden="true"
            />
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@ -12,7 +12,6 @@ import {
  TableRow,
 } from "../../components/ui/table";
 import ToggleShadComponent from "../../components/toggleShadComponent";
-import { VariableIcon } from "@heroicons/react/24/outline";
 import InputListComponent from "../../components/inputListComponent";
 import TextAreaComponent from "../../components/textAreaComponent";
 import InputComponent from "../../components/inputComponent";
@ -33,6 +32,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { Badge } from "../../components/ui/badge";
+import { Variable } from "lucide-react";

 export default function EditNodeModal({ data }: { data: NodeDataType }) {
  const [open, setOpen] = useState(true);
@ -90,9 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
          <DialogDescription>
            {data.node?.description}
            <div className="flex pt-4">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
-                &nbsp;
-              </VariableIcon>
+              <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
              <span className="text-sm font-semibold text-gray-800 dark:text-white">
                Parameters
              </span>
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@ -1,5 +1,4 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { NodeDataType } from "../../types/flow";
@ -13,6 +12,7 @@ import {
 } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ModalField from "./components/ModalField";
+import { X } from "lucide-react";

 export default function NodeModal({ data }: { data: NodeDataType }) {
  const [open, setOpen] = useState(true);
@ -27,7 +27,8 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
      }, 300);
    }
  }
-  const Icon = nodeIcons[types[data.type]];
+  // any to avoid type conflict
+  const Icon: any = nodeIcons[types[data.type]];
  return (
    <Transition.Root show={open} appear={true} as={Fragment}>
      <Dialog
@ -69,7 +70,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                    }}
                  >
                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <X className="h-6 w-6" aria-hidden="true" />
                  </button>
                </div>
                <div className="h-full w-full flex flex-col justify-center items-center">
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@ -1,8 +1,9 @@
-import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
 import { INPUT_STYLE } from "../../../constants";
+import { Lock, Send } from "lucide-react";
+
 export default function ChatInput({
  lockChat,
  chatValue,
@ -60,12 +61,12 @@ export default function ChatInput({
      <div className="absolute bottom-0.5 right-3">
        <button disabled={lockChat} onClick={() => sendMessage()}>
          {lockChat ? (
-            <LockClosedIcon
+            <Lock
              className="h-5 w-5 text-gray-500  dark:hover:text-gray-300 animate-pulse"
              aria-hidden="true"
            />
          ) : (
-            <PaperAirplaneIcon
+            <Send
              className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
              aria-hidden="true"
            />
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@ -1,10 +1,8 @@
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef, useState } from "react";
 import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
 import AiIconStill from "../../../assets/froze-flow.png";
-import { UserIcon } from "@heroicons/react/24/solid";
 import FileCard from "../fileComponent";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
@ -12,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { CodeBlock } from "./codeBlock";
 import Convert from "ansi-to-html";
+import { User2, MessageCircle } from "lucide-react";

 export default function ChatMessage({
  chat,
@ -62,7 +61,7 @@ export default function ChatMessage({
          </div>
        )}
        {chat.isSend && (
-          <UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
+          <User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
        )}
      </div>
      {!chat.isSend ? (
@ -73,7 +72,7 @@ export default function ChatMessage({
                onClick={() => setHidden((prev) => !prev)}
                className="absolute -top-1 -left-2 cursor-pointer"
              >
-                <ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" />
+                <MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
              </div>
            )}
            {chat.thought && chat.thought !== "" && !hidden && (
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@ -1,6 +1,6 @@
-import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
 import * as base64js from "base64-js";
 import { useState } from "react";
+import { DownloadCloud, File } from "lucide-react";

 export default function FileCard({ fileName, content, fileType }) {
  const handleDownload = () => {
@ -43,7 +43,7 @@ export default function FileCard({ fileName, content, fileType }) {
              className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
              onClick={handleDownload}
            >
-              <CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon>
+              <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
            </button>
          </div>
        )}
@ -65,14 +65,14 @@ export default function FileCard({ fileName, content, fileType }) {
            className="w-8 h-8"
          />
        ) : (
-          <DocumentIcon className="w-8 h-8" />
+          <File className="w-8 h-8" />
        )}
        <div className="flex flex-col items-start">
          {" "}
          <div className="truncate text-sm text-current">{fileName}</div>
          <div className="truncate text-xs  text-gray-500">{fileType}</div>
        </div>
-        <CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" />
+        <DownloadCloud className="w-6 h-6 text-current ml-auto" />
      </div>
    </button>
  );
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@ -1,13 +1,11 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FlowType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { validateNodes } from "../../utils";
 import { typesContext } from "../../contexts/typesContext";
 import ChatMessage from "./chatMessage";
-import { Eraser } from "lucide-react";
-import { X } from "lucide-react";
+import { X, MessagesSquare, Eraser } from "lucide-react";
 import { sendAllProps } from "../../types/api";
 import { ChatMessageType } from "../../types/chat";
 import ChatInput from "./chatInput";
@ -387,7 +385,7 @@ export default function ChatModal({
                        <span className="text-base text-gray-500">
                          Start a conversation and click the agent’s thoughts{" "}
                          <span>
-                            <ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
+                            <MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 " />
                          </span>{" "}
                          to inspect the chaining process.
                        </span>
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@ -1,4 +1,3 @@
-import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import AceEditor from "react-ace";
@ -22,6 +21,7 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
+import { TerminalSquare } from "lucide-react";

 export default function CodeAreaModal({
  value,
@ -51,7 +51,7 @@ export default function CodeAreaModal({
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <span className="pr-2">Edit Code</span>
-            <CommandLineIcon
+            <TerminalSquare
              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
              aria-hidden="true"
            />
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@ -1,4 +1,3 @@
-import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
 import { useContext, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@ -1,4 +1,3 @@
-import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { darkContext } from "../../contexts/darkContext";
@ -17,6 +16,7 @@ import {
 import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
+import { FileText } from "lucide-react";

 export default function GenericModal({
  value,
@ -54,7 +54,7 @@ export default function GenericModal({
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <span className="pr-2">{myModalTitle}</span>
-            <DocumentTextIcon
+            <FileText
              className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
              aria-hidden="true"
            />
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/src/frontend/src/modals/importModal/buttonBox/index.tsx
@ -1,7 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from "react";
-import { DocumentDuplicateIcon } from "@heroicons/react/solid";
+import React, { ReactNode } from "react";
 import { classNames } from "../../../utils";
-import Tooltip from "../../../components/TooltipComponent";

 export default function ButtonBox({
  onClick,
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@ -1,6 +1,6 @@
-import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Disclosure } from "@headlessui/react";
 import { DisclosureComponentType } from "../../../../types/components";
+import { ChevronRight } from "lucide-react";

 export default function DisclosureComponent({
  button: { title, Icon, buttons = [] },
@ -14,7 +14,7 @@ export default function DisclosureComponent({
          <div>
            <Disclosure.Button className="select-none bg-muted dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
              <div className="flex gap-4">
-                <Icon className="w-6 text-gray-800 dark:text-white/80" />
+                <Icon size={22} className="text-gray-800 dark:text-white/80" />
                <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
                  {title}
                </span>
@ -26,7 +26,7 @@ export default function DisclosureComponent({
                  </button>
                ))}
                <div>
-                  <ChevronRightIcon
+                  <ChevronRight
                    className={`${
                      open || openDisc ? "rotate-90 transform" : ""
                    } h-4 w-4 text-gray-800 dark:text-white`}
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@ -1,25 +1,23 @@
-import { Bars2Icon } from "@heroicons/react/24/outline";
 import DisclosureComponent from "../DisclosureComponent";
 import {
  classNames,
  nodeColors,
-  nodeIcons,
+  nodeIconsLucide,
  nodeNames,
 } from "../../../../utils";
 import { useContext, useState } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
-import { Code2, FileDown, FileUp, Save } from "lucide-react";
+import { Code2, FileDown, FileUp, Save, Search } from "lucide-react";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import ExportModal from "../../../../modals/exportModal";
 import ApiModal from "../../../../modals/ApiModal";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import { alertContext } from "../../../../contexts/alertContext";
-import { updateFlowInDatabase } from "../../../../controllers/API";
 import { INPUT_STYLE } from "../../../../constants";
 import { Separator } from "../../../../components/ui/separator";
+import { Menu } from "lucide-react";

 export default function ExtraSidebar() {
  const { data } = useContext(typesContext);
@ -135,7 +133,7 @@ export default function ExtraSidebar() {
          }}
        />
        <div className="absolute inset-y-0 right-0 flex py-1.5 pr-3 items-center">
-          <MagnifyingGlassIcon className="h-5 w-5 dark:text-white"></MagnifyingGlassIcon>
+          <Search size={20} color="#000000" />
        </div>
      </div>

@ -149,7 +147,7 @@ export default function ExtraSidebar() {
                key={nodeNames[d]}
                button={{
                  title: nodeNames[d] ?? nodeNames.unknown,
-                  Icon: nodeIcons[d] ?? nodeIcons.unknown,
+                  Icon: nodeIconsLucide[d] ?? nodeIconsLucide.unknown,
                }}
              >
                <div className="p-2 flex flex-col gap-2">
@ -188,7 +186,7 @@ export default function ExtraSidebar() {
                              <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
                                {data[d][t].display_name}
                              </span>
-                              <Bars2Icon className="w-4 h-6  text-gray-400 dark:text-gray-600" />
+                              <Menu className="w-4 h-6  text-gray-400 dark:text-gray-600" />
                            </div>
                          </div>
                        </div>
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@ -1,4 +1,10 @@
-import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
+import {
+  ComponentType,
+  ForwardRefExoticComponent,
+  ReactElement,
+  ReactNode,
+  SVGProps,
+} from "react";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
 export type InputComponentType = {
@ -65,7 +71,7 @@ export type DisclosureComponentType = {
  openDisc: boolean;
  button: {
    title: string;
-    Icon: ForwardRefExoticComponent<React.SVGProps<SVGSVGElement>>;
+    Icon: any;
    buttons?: {
      Icon: ReactElement;
      title: string;
--- a/src/frontend/src/types/entities/index.ts
+++ b/src/frontend/src/types/entities/index.ts
@ -1,5 +1,3 @@
-import { HomeIcon } from "@heroicons/react/24/outline";
-
 export type sidebarNavigationItemType = {
  name: string;
  href: string;
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@ -43,6 +43,27 @@ import { PineconeIcon } from "./icons/Pinecone";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { ADJECTIVES, DESCRIPTIONS, NOUNS } from "./constants";
+import { ComponentType, SVGProps } from "react";
+import {
+  Boxes,
+  Cpu,
+  Fingerprint,
+  Gift,
+  Hammer,
+  HelpCircle,
+  Laptop2,
+  Layers,
+  LayoutDashboard,
+  Lightbulb,
+  Link,
+  MessageCircle,
+  Paperclip,
+  Rocket,
+  Scissors,
+  TerminalSquare,
+  Wand2,
+  Wrench,
+} from "lucide-react";
 import { SupabaseIcon } from "./icons/supabase";
 import { MongoDBIcon } from "./icons/MongoDB";

@ -204,6 +225,142 @@ export const nodeIcons: {
  unknown: QuestionMarkCircleIcon,
 };

+export const nodeIconsLucide: {
+  [char: string]: React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >;
+} = {
+  Chroma: ChromaIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  AirbyteJSONLoader: AirbyteIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Anthropic: AnthropicIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  ChatAnthropic: AnthropicIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  BingSearchAPIWrapper: BingIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  BingSearchRun: BingIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Cohere: CohereIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  CohereEmbeddings: CohereIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  EverNoteLoader: EvernoteIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  FacebookChatLoader: FBIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  GitbookLoader: GitBookIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  GoogleSearchAPIWrapper: GoogleIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  GoogleSearchResults: GoogleIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  GoogleSearchRun: GoogleIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  HNLoader: HackerNewsIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  HuggingFaceHub: HugginFaceIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  HuggingFaceEmbeddings: HugginFaceIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  IFixitLoader: IFixIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Meta: MetaIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Midjorney: MidjorneyIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  NotionDirectoryLoader: NotionIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  ChatOpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  OpenAI: OpenAiIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  OpenAIEmbeddings: OpenAiIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Qdrant: QDrantIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  Searx: SearxIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  SlackDirectoryLoader: SlackIcon as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  agents: Rocket as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  chains: Link as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  memories: Cpu as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  llms: Lightbulb as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  prompts: TerminalSquare as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  tools: Wrench as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  advanced: Laptop2 as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  chat: MessageCircle as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  embeddings: Fingerprint as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  documentloaders: Paperclip as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  vectorstores: Layers as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  toolkits: Hammer as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  textsplitters: Scissors as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  wrappers: Gift as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  utilities: Wand2 as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+  unknown: HelpCircle as React.ForwardRefExoticComponent<
+    ComponentType<SVGProps<SVGSVGElement>>
+  >,
+};
+
 export const gradients = [
  "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
  "bg-gradient-to-br from-green-200 via-green-300 to-blue-500",