feat: Change hard coded lucide icons to generic icon component

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -27,6 +27,7 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
+import IconComponent from "../../../../components/genericIconComponent";
 
 export default function ParameterComponent({
   left,
@@ -164,7 +165,7 @@ export default function ParameterComponent({
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
-                <Info className="relative bottom-0.5 ml-2 h-3 w-3" />
+                <IconComponent name="Info" style="relative bottom-0.5 ml-2 h-3 w-3" method="LUCIDE" />
               </ShadTooltip>
             )}
           </div>

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -1,4 +1,3 @@
-import { Zap } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
@@ -17,6 +16,7 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function GenericNode({
   data,
@@ -119,9 +119,10 @@ export default function GenericNode({
                   ) : !validationStatus ? (
                     <span className="flex">
                       Build{" "}
-                      <Zap
+                      <IconComponent
-                        className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        name="Zap"
-                        strokeWidth={1.5}
+                        style="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
+                        method="LUCIDE"
                       />{" "}
                       flow to validate status.
                     </span>

src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx

@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircle2, Info, X, XCircle } from "lucide-react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { SingleAlertComponentType } from "../../../../types/alerts";
+import IconComponent from "../../../../components/genericIconComponent";
 
 export default function SingleAlert({
   dropItem,
@@ -29,7 +29,12 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
+            <IconComponent
+              method="LUCIDE"
+              name="XCircle"
+              style="h-5 w-5 text-status-red"
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3">
             <h3 className="break-words text-sm font-medium text-error-foreground">
@@ -62,8 +67,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-red"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
-                  className="h-4 w-4 text-error-foreground"
+                  name="X"
+                  method="LUCIDE"
+                  style="h-4 w-4 text-error-foreground"
                   aria-hidden="true"
                 />
               </button>
@@ -76,7 +83,12 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
+            <IconComponent
+              name="Info"
+              method="LUCIDE"
+              style="h-5 w-5 text-status-blue "
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm font-medium text-info-foreground">
@@ -108,8 +120,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-info-foreground"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
-                  className="h-4 w-4 text-info-foreground"
+                  method="LUCIDE"
+                  name="X"
+                  style="h-4 w-4 text-info-foreground"
                   aria-hidden="true"
                 />
               </button>
@@ -122,8 +136,10 @@ export default function SingleAlert({
           key={dropItem.id}
         >
           <div className="flex-shrink-0">
-            <CheckCircle2
+            <IconComponent
-              className="h-5 w-5 text-status-green"
+              name="CheckCircle2"
+              style="h-5 w-5 text-status-green"
+              method="LUCIDE"
               aria-hidden="true"
             />
           </div>
@@ -145,8 +161,10 @@ export default function SingleAlert({
                 className="inline-flex rounded-md p-1.5 text-status-green"
               >
                 <span className="sr-only">Dismiss</span>
-                <X
+                <IconComponent
-                  className="h-4 w-4 text-success-foreground"
+                  name="X"
+                  method="LUCIDE"
+                  style="h-4 w-4 text-success-foreground"
                   aria-hidden="true"
                 />
               </button>

src/frontend/src/alerts/alertDropDown/index.tsx

@@ -1,10 +1,10 @@
-import { Trash2, X } from "lucide-react";
 import { useContext, useRef } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { AlertDropdownType } from "../../types/alerts";
 import { useOnClickOutside } from "../hooks/useOnClickOutside";
 import SingleAlert from "./components/singleAlertComponent";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function AlertDropdown({}: AlertDropdownType) {
   const { closePopUp } = useContext(PopUpContext);
@@ -36,13 +36,21 @@ export default function AlertDropdown({}: AlertDropdownType) {
               setTimeout(clearNotificationList, 100);
             }}
           >
-            <Trash2 className="h-[1.1rem] w-[1.1rem]" />
+            <IconComponent
+              name="Trash2"
+              method="LUCIDE"
+              style="h-[1.1rem] w-[1.1rem]"
+            />
           </button>
           <button
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <X className="h-5 w-5" />
+            <IconComponent
+              method="LUCIDE"
+              name="X"
+              style="h-5 w-5"
+            />
           </button>
         </div>
       </div>

src/frontend/src/alerts/error/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { XCircle } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ErrorAlertType } from "../../types/alerts";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function ErrorAlert({
   title,
@@ -44,8 +44,10 @@ export default function ErrorAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle
+            <IconComponent
-              className="error-build-message-circle"
+              name="XCircle"
+              method="LUCIDE"
+              style="error-build-message-circle"
               aria-hidden="true"
             />
           </div>

src/frontend/src/alerts/notice/index.tsx

@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
-import { Info } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import { NoticeAlertType } from "../../types/alerts";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function NoticeAlert({
   title,
@@ -40,7 +40,12 @@ export default function NoticeAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <Info className="h-5 w-5 text-status-blue " aria-hidden="true" />
+            <IconComponent
+              name="Info"
+              style="h-5 w-5 text-status-blue "
+              aria-hidden="true"
+              method="LUCIDE"
+            />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
             <p className="text-sm text-info-foreground">{title}</p>

src/frontend/src/alerts/success/index.tsx

@@ -1,7 +1,7 @@
 import { Transition } from "@headlessui/react";
-import { CheckCircle2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { SuccessAlertType } from "../../types/alerts";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function SuccessAlert({
   title,
@@ -38,7 +38,12 @@ export default function SuccessAlert({
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <CheckCircle2 className="success-alert-icon" aria-hidden="true" />
+            <IconComponent
+              name="CheckCircle2"
+              style="success-alert-icon"
+              method="LUCIDE"
+              aria-hidden="true"
+            />
           </div>
           <div className="ml-3">
             <p className="success-alert-message">{title}</p>

src/frontend/src/components/cardComponent/index.tsx

@@ -1,4 +1,3 @@
-import { Trash2 } from "lucide-react";
 import { useContext } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
@@ -10,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
+import IconComponent from "../genericIconComponent";
 
 export const CardComponent = ({
   flow,
@@ -37,7 +37,11 @@ export const CardComponent = ({
           <span className="card-component-title-size">{flow.name}</span>
           {onDelete && (
             <button className="card-component-delete-button" onClick={onDelete}>
-              <Trash2 className="card-component-delete-icon" />
+              <IconComponent
+                name="Trash2"
+                style="card-component-delete-icon"
+                method="LUCIDE"
+              />
             </button>
           )}
         </CardTitle>

src/frontend/src/components/chatComponent/buildTrigger/index.tsx

@@ -1,5 +1,4 @@
 import { Transition } from "@headlessui/react";
-import { Zap } from "lucide-react";
 import { useContext, useState } from "react";
 import Loading from "../../../components/ui/loading";
 import { useSSE } from "../../../contexts/SSEContext";
@@ -11,6 +10,7 @@ import { validateNodes } from "../../../utils";
 
 import { TabsContext } from "../../../contexts/tabsContext";
 import RadialProgressComponent from "../../RadialProgress";
+import IconComponent from "../../genericIconComponent";
 
 export default function BuildTrigger({
   open,
@@ -190,9 +190,10 @@ export default function BuildTrigger({
                   className="build-trigger-loading-icon"
                 />
               ) : (
-                <Zap
+                <IconComponent
-                  strokeWidth={1.5}
+                  name="Zap"
-                  className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                  style="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                  method="LUCIDE"
                 />
               )}
             </div>

src/frontend/src/components/chatComponent/chatTrigger/index.tsx

@@ -1,5 +1,4 @@
 import { Transition } from "@headlessui/react";
-import { MessagesSquare } from "lucide-react";
 
 import { useContext } from "react";
 import {
@@ -9,6 +8,7 @@ import {
   FLOW_NOT_BUILT_TITLE,
 } from "../../../constants";
 import { alertContext } from "../../../contexts/alertContext";
+import IconComponent from "../../genericIconComponent";
 
 export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
   const { setErrorData } = useContext(alertContext);
@@ -50,15 +50,15 @@ export default function ChatTrigger({ open, setOpen, isBuilt, canOpen }) {
         }
       >
         <div className="flex gap-3">
-          <MessagesSquare
+          <IconComponent
-            className={
+            name="MessagesSquare"
+            style={
               "h-6 w-6 transition-all " +
               (isBuilt && canOpen
                 ? "message-button-icon"
                 : "disabled-message-button-icon")
             }
-            style={{ color: "white" }}
+            method="LUCIDE"
-            strokeWidth={1.5}
           />
         </div>
       </button>

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -3,7 +3,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
-import { ExternalLink } from "lucide-react";
+import IconComponent from "../genericIconComponent";
 
 export default function CodeAreaComponent({
   value,
@@ -70,9 +70,10 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink
+            <IconComponent
-              strokeWidth={1.5}
+              name="ExternalLink"
-              className={
+              method="LUCIDE"
+              style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }

src/frontend/src/components/dropdownComponent/index.tsx

@@ -1,9 +1,9 @@
 import { Listbox, Transition } from "@headlessui/react";
-import { Check, ChevronsUpDown } from "lucide-react";
 import { Fragment, useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
+import IconComponent from "../genericIconComponent";
 
 export default function Dropdown({
   value,
@@ -46,8 +46,10 @@ export default function Dropdown({
                   {internalValue}
                 </span>
                 <span className={"dropdown-component-arrow"}>
-                  <ChevronsUpDown
+                  <IconComponent
-                    className="dropdown-component-arrow-color"
+                    method="LUCIDE"
+                    name="ChevronsUpDown"
+                    style="dropdown-component-arrow-color"
                     aria-hidden="true"
                   />
                 </span>
@@ -99,8 +101,10 @@ export default function Dropdown({
                                 "dropdown-component-choosal"
                               )}
                             >
-                              <Check
+                              <IconComponent
-                                className={
+                                method="LUCIDE"
+                                name="Check"
+                                style={
                                   active
                                     ? "dropdown-component-check-icon"
                                     : "dropdown-component-check-icon"

src/frontend/src/components/genericIconComponent/index.tsx

@@ -1,28 +1,34 @@
 import { IconComponentProps, IconProps } from "../../types/components";
 import { nodeIconsLucide, svgIcons } from "../../utils";
 
-export function IconFromLucide({ name }: IconProps): JSX.Element {
+export function IconFromLucide({
+  name,
+  style,
+}: IconProps): JSX.Element {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon />;
+  return <TargetIcon className={ style } />;
 }
 
-export function IconFromSvg({ name }: IconProps): JSX.Element {
+export function IconFromSvg({
+  name,
+  style
+}: IconProps): JSX.Element {
   const TargetSvg = svgIcons[name] ?? nodeIconsLucide["unknown"];
-  return <TargetSvg />;
+  return <TargetSvg className={ style } />;
 }
 
 export default function IconComponent({
   method,
   name,
-  className,
+  style,
 }: IconComponentProps): JSX.Element {
   switch (method) {
     case "SVG":
-      return <IconFromSvg name={name} />;
+      return <IconFromSvg name={name} style={ style } />;
     case "LUCIDE":
-      return <IconFromLucide name={name} />;
+      return <IconFromLucide name={name} style={ style } />;
     default:
       console.error("IconComponent: invalid method");
-      return <IconFromLucide name={"unknown"} />;
+      return <IconFromLucide name={"unknown"} style={"unknown"} />;
   }
 }

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -1,11 +1,3 @@
-import {
-  ChevronDown,
-  ChevronLeft,
-  Plus,
-  Redo,
-  Settings2,
-  Undo,
-} from "lucide-react";
 import { useContext } from "react";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -22,6 +14,7 @@ import { alertContext } from "../../../../contexts/alertContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import { Button } from "../../../ui/button";
+import IconComponent from "../../../genericIconComponent";
 
 export const MenuBar = ({ flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -46,7 +39,11 @@ export const MenuBar = ({ flows, tabId }) => {
   return (
     <div className="round-button-div">
       <Link to="/">
-        <ChevronLeft className="w-4" />
+        <IconComponent
+          name="ChevronLeft"
+          style="w-4"
+          method="LUCIDE"
+        />
       </Link>
       <div className="header-menu-bar">
         <DropdownMenu>
@@ -54,7 +51,11 @@ export const MenuBar = ({ flows, tabId }) => {
             <Button asChild variant="primary" size="sm">
               <div className="header-menu-bar-display">
                 <div className="header-menu-flow-name">{current_flow.name}</div>
-                <ChevronDown className="h-4 w-4" />
+                <IconComponent
+                  name="ChevronDown"
+                  style="h-4 w-4"
+                  method="LUCIDE"
+                />
               </div>
             </Button>
           </DropdownMenuTrigger>
@@ -66,7 +67,11 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Plus className="header-menu-options" />
+              <IconComponent
+                name="Plus"
+                style="header-menu-options"
+                method="LUCIDE"
+              />
               New
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -75,7 +80,11 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Settings2 className="header-menu-options " />
+              <IconComponent
+                name="Settings2"
+                style="header-menu-options "
+                method="LUCIDE"
+              />
               Settings
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -84,7 +93,11 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Undo className="header-menu-options " />
+              <IconComponent
+                name="Undo"
+                style="header-menu-options "
+                method="LUCIDE"
+              />
               Undo
             </DropdownMenuItem>
             <DropdownMenuItem
@@ -93,7 +106,11 @@ export const MenuBar = ({ flows, tabId }) => {
               }}
               className="cursor-pointer"
             >
-              <Redo className="header-menu-options " />
+              <IconComponent
+                name="Redo"
+                style="header-menu-options "
+                method="LUCIDE"
+              />
               Redo
             </DropdownMenuItem>
             {/* <DropdownMenuSeparator /> */}

src/frontend/src/components/headerComponent/index.tsx

@@ -1,4 +1,3 @@
-import { Bell, Home, MoonIcon, SunIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
 import { Link, useLocation, useParams } from "react-router-dom";
@@ -13,6 +12,7 @@ import { getRepoStars } from "../../controllers/API";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
+import IconComponent from "../genericIconComponent";
 
 export default function Header() {
   const { flows, addFlow, tabId } = useContext(TabsContext);
@@ -51,7 +51,11 @@ export default function Header() {
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <Home className="h-4 w-4" />
+            <IconComponent
+              name="Home"
+              method="LUCIDE"
+              style="h-4 w-4"
+            />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -63,7 +67,11 @@ export default function Header() {
             }
             size="sm"
           >
-            <Users2 className="h-4 w-4" />
+            <IconComponent
+              method="LUCIDE"
+              name="Users2"
+              style="h-4 w-4"
+            />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
@@ -105,9 +113,17 @@ export default function Header() {
             }}
           >
             {dark ? (
-              <SunIcon className="side-bar-button-size" />
+              <IconComponent
+                name="SunIcon"
+                style="side-bar-button-size"
+                method="LUCIDE"
+              />
             ) : (
-              <MoonIcon className="side-bar-button-size" />
+              <IconComponent
+                name="MoonIcon"
+                style="side-bar-button-size"
+                method="LUCIDE"
+              />
             )}
           </button>
           <button
@@ -131,7 +147,12 @@ export default function Header() {
             }}
           >
             {notificationCenter && <div className="header-notifications"></div>}
-            <Bell className="side-bar-button-size" aria-hidden="true" />
+            <IconComponent
+              name="Bell"
+              method="LUCIDE"
+              style="side-bar-button-size"
+              aria-hidden="true"
+            />
           </button>
         </div>
       </div>

src/frontend/src/components/inputFileComponent/index.tsx

@@ -1,9 +1,9 @@
-import { FileSearch2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { uploadFile } from "../../controllers/API";
 import { FileComponentType } from "../../types/components";
+import IconComponent from "../genericIconComponent";
 
 export default function InputFileComponent({
   value,
@@ -108,9 +108,10 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && !loading && (
-            <FileSearch2
+            <IconComponent
-              strokeWidth={1.5}
+              name="FileSearch2"
-              className={
+              method="LUCIDE"
+              style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring " : " hover:text-accent-foreground")
               }

src/frontend/src/components/inputListComponent/index.tsx

@@ -2,8 +2,8 @@ import { useContext, useEffect, useState } from "react";
 import { InputListComponentType } from "../../types/components";
 
 import _ from "lodash";
-import { Plus, X } from "lucide-react";
 import { PopUpContext } from "../../contexts/popUpContext";
+import IconComponent from "../genericIconComponent";
 
 export default function InputListComponent({
   value,
@@ -65,7 +65,11 @@ export default function InputListComponent({
                   onChange(inputList);
                 }}
               >
-                <Plus className={"h-4 w-4 hover:text-accent-foreground"} />
+                <IconComponent
+                  name="Plus"
+                  style={"h-4 w-4 hover:text-accent-foreground"}
+                  method="LUCIDE"
+                />
               </button>
             ) : (
               <button
@@ -78,7 +82,11 @@ export default function InputListComponent({
                   onChange(inputList);
                 }}
               >
-                <X className="h-4 w-4 hover:text-status-red" />
+                <IconComponent
+                  name="X"
+                  style="h-4 w-4 hover:text-status-red"
+                  method="LUCIDE"
+                />
               </button>
             )}
           </div>

src/frontend/src/components/promptComponent/index.tsx

@@ -4,9 +4,9 @@ import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
-import { ExternalLink } from "lucide-react";
 import { typesContext } from "../../contexts/typesContext";
 import { postValidatePrompt } from "../../controllers/API";
+import IconComponent from "../genericIconComponent";
 
 export default function PromptAreaComponent({
   field_name,
@@ -106,9 +106,10 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink
+            <IconComponent
-              strokeWidth={1.5}
+              name="ExternalLink"
-              className={
+              method="LUCIDE"
+              style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }

src/frontend/src/components/textAreaComponent/index.tsx

@@ -4,8 +4,8 @@ import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import { TypeModal } from "../../utils";
 
-import { ExternalLink } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
+import IconComponent from "../genericIconComponent";
 
 export default function TextAreaComponent({
   value,
@@ -68,9 +68,10 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ExternalLink
+            <IconComponent
-              strokeWidth={1.5}
+              name="ExternalLink"
-              className={
+              method="LUCIDE"
+              style={
                 "icons-parameters-comp" +
                 (disabled ? " text-ring" : " hover:text-accent-foreground")
               }

src/frontend/src/components/ui/checkbox.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../utils";
+import IconComponent from "../genericIconComponent";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -20,7 +20,11 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <Check className="h-4 w-4" />
+      <IconComponent
+        name="Check"
+        method="LUCIDE"
+        style="h-4 w-4"
+      />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

src/frontend/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../utils";
+import IconComponent from "../genericIconComponent";
 
 const Dialog = DialogPrimitive.Root;
 
@@ -51,7 +51,11 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <IconComponent
+          name="X"
+          method="LUCIDE"
+          style="h-4 w-4"
+        />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

src/frontend/src/components/ui/dropdown-menu.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 import { cn } from "../../utils";
+import IconComponent from "../genericIconComponent";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
@@ -33,7 +33,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <IconComponent
+      name="ChevronRight"
+      style="ml-auto h-4 w-4"
+      method="LUCIDE"
+    />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -106,7 +110,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <IconComponent
+          name="Check"
+          style="h-4 w-4"
+          method="LUCIDE"
+        />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -129,7 +137,11 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <IconComponent
+          name="Circle"
+          style="h-2 w-2 fill-current"
+          method="LUCIDE"
+        />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}

src/frontend/src/components/ui/menubar.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Check, ChevronRight, Circle } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../utils";
+import IconComponent from "../genericIconComponent";
 
 const MenubarMenu = MenubarPrimitive.Menu;
 
@@ -62,7 +62,11 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <IconComponent
+      name="ChevronRight"
+      style="ml-auto h-4 w-4"
+      method="LUCIDE"
+    />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
@@ -140,7 +144,11 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <IconComponent
+          name="Check"
+          style="h-4 w-4"
+          method="LUCIDE"
+        />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
@@ -162,7 +170,11 @@ const MenubarRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <IconComponent
+          name="Circle"
+          style="h-2 w-2 fill-current"
+          method="LUCIDE"
+        />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}

src/frontend/src/modals/ApiModal/index.tsx

@@ -5,7 +5,7 @@ import "ace-builds/src-noconflict/theme-twilight";
 import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 // import "ace-builds/webpack-resolver";
-import { Check, Clipboard, Code2 } from "lucide-react";
+import { Check, Clipboard } from "lucide-react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import AccordionComponent from "../../components/AccordionComponent";
@@ -52,6 +52,7 @@ import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow/index";
 import { buildTweaks, classNames } from "../../utils";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function ApiModal({ flow }: { flow: FlowType }) {
   const [open, setOpen] = useState(true);
@@ -271,8 +272,10 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
-            <Code2
+            <IconComponent
-              className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+              method="LUCIDE"
+              name="Code2"
+              style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/EditNodeModal/index.tsx

@@ -1,4 +1,3 @@
-import { Variable } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
@@ -34,6 +33,7 @@ import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
 import { classNames, limitScrollFieldsModal } from "../../utils";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function EditNodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -109,7 +109,11 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
             <div>
               {data.node?.description}
               <div className="flex pt-3">
-                <Variable className="edit-node-modal-variable "></Variable>
+                <IconComponent
+                  name="Variable"
+                  style="edit-node-modal-variable "
+                  method="LUCIDE"
+                />
                 <span className="edit-node-modal-span">Parameters</span>
               </div>
             </div>

src/frontend/src/modals/NodeModal/index.tsx

@@ -1,5 +1,4 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { X } from "lucide-react";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
@@ -12,6 +11,7 @@ import {
   toTitleCase,
 } from "../../utils";
 import ModalField from "./components/ModalField";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function NodeModal({ data }: { data: NodeDataType }) {
   const [open, setOpen] = useState(true);
@@ -69,7 +69,12 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                     }}
                   >
                     <span className="sr-only">Close</span>
-                    <X className="h-6 w-6" aria-hidden="true" />
+                    <IconComponent
+                      name="X"
+                      style="h-6 w-6"
+                      aria-hidden="true"
+                      method="LUCIDE"
+                    />
                   </button>
                 </div>
                 <div className="node-modal-dialog-icon-div">

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -4,7 +4,6 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
-import { TerminalSquare } from "lucide-react";
 import { useContext, useState } from "react";
 import AceEditor from "react-ace";
 import { Button } from "../../components/ui/button";
@@ -15,6 +14,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
 import BaseModal from "../baseModal";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function CodeAreaModal({
   value,
@@ -83,9 +83,10 @@ export default function CodeAreaModal({
       <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Edit Code</span>
-          <TerminalSquare
+          <IconComponent
-            strokeWidth={1.5}
+            name="prompts"
-            className="h-6 w-6 pl-1 text-primary "
+            method="LUCIDE"
+            style="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>

src/frontend/src/modals/exportModal/index.tsx

@@ -1,4 +1,3 @@
-import { Download } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
@@ -17,6 +16,7 @@ import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { removeApiKeys } from "../../utils";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -46,9 +46,10 @@ export default function ExportModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
-            <Download
+            <IconComponent
-              strokeWidth={1.5}
+              name="Download"
-              className="h-6 w-6 pl-1 text-foreground"
+              method="LUCIDE"
+              style="h-6 w-6 pl-1 text-foreground"
               aria-hidden="true"
             />
           </DialogTitle>

src/frontend/src/modals/flowSettingsModal/index.tsx

@@ -1,4 +1,3 @@
-import { Settings2 } from "lucide-react";
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
 import { Button } from "../../components/ui/button";
@@ -15,6 +14,7 @@ import { SETTINGS_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function FlowSettingsModal() {
   const [open, setOpen] = useState(true);
@@ -51,7 +51,11 @@ export default function FlowSettingsModal() {
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Settings </span>
-            <Settings2 className="mr-2 h-4 w-4 " />
+            <IconComponent
+              name="Settings2"
+              style="mr-2 h-4 w-4 "
+              method="LUCIDE"
+            />
           </DialogTitle>
           <DialogDescription>{SETTINGS_DIALOG_SUBTITLE}</DialogDescription>
         </DialogHeader>

src/frontend/src/modals/formModal/chatInput/index.tsx

@@ -1,6 +1,6 @@
-import { Lock, LucideSend, Sparkles } from "lucide-react";
 import { useEffect } from "react";
 import { classNames } from "../../../utils";
+import IconComponent from "../../../components/genericIconComponent";
 
 export default function ChatInput({
   lockChat,
@@ -77,11 +77,26 @@ export default function ChatInput({
           onClick={() => sendMessage()}
         >
           {lockChat ? (
-            <Lock className="form-modal-lock-icon" aria-hidden="true" />
+            <IconComponent
+              name="Lock"
+              style="form-modal-lock-icon"
+              method="LUCIDE"
+              aria-hidden="true"
+            />
           ) : noInput ? (
-            <Sparkles className="form-modal-play-icon" aria-hidden="true" />
+            <IconComponent
+              name="Sparkles"
+              style="form-modal-play-icon"
+              method="LUCIDE"
+              aria-hidden="true"
+            />
           ) : (
-            <LucideSend className="form-modal-send-icon " aria-hidden="true" />
+            <IconComponent
+              name="LucideSend"
+              style="form-modal-send-icon "
+              method="LUCIDE"
+              aria-hidden="true"
+            />
           )}
         </button>
       </div>

src/frontend/src/modals/formModal/chatMessage/index.tsx

@@ -1,5 +1,4 @@
 import Convert from "ansi-to-html";
-import { ChevronDown } from "lucide-react";
 import { useMemo, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeMathjax from "rehype-mathjax";
@@ -13,6 +12,7 @@ import { ChatMessageType } from "../../../types/chat";
 import { classNames } from "../../../utils";
 import FileCard from "../fileComponent";
 import { CodeBlock } from "./codeBlock";
+import IconComponent from "../../../components/genericIconComponent";
 export default function ChatMessage({
   chat,
   lockChat,
@@ -160,10 +160,12 @@ export default function ChatMessage({
                 }}
               >
                 Display Prompt
-                <ChevronDown
+                <IconComponent
-                  className={
+                  name="ChevronDown"
+                  style={
                     "h-3 w-3 transition-all " + (promptOpen ? "rotate-180" : "")
                   }
+                  method="LUCIDE"
                 />
               </button>
               <span className="prose inline-block break-words text-primary dark:prose-invert">

src/frontend/src/modals/formModal/fileComponent/index.tsx

@@ -1,6 +1,6 @@
 import * as base64js from "base64-js";
-import { DownloadCloud, File } from "lucide-react";
 import { useState } from "react";
+import IconComponent from "../../../components/genericIconComponent";
 
 export default function FileCard({ fileName, content, fileType }) {
   const handleDownload = () => {
@@ -41,7 +41,11 @@ export default function FileCard({ fileName, content, fileType }) {
               className="file-card-modal-image-button "
               onClick={handleDownload}
             >
-              <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
+              <IconComponent
+                name="DownloadCloud"
+                style="h-5 w-5 text-current hover:scale-110"
+                method="LUCIDE"
+              />
             </button>
           </div>
         )}
@@ -60,14 +64,22 @@ export default function FileCard({ fileName, content, fileType }) {
             className="h-8 w-8"
           />
         ) : (
-          <File className="h-8 w-8" />
+          <IconComponent
+            name="File"
+            style="h-8 w-8"
+            method="LUCIDE"
+          />
         )}
         <div className="file-card-modal-footer">
           {" "}
           <div className="file-card-modal-name">{fileName}</div>
           <div className="file-card-modal-type">{fileType}</div>
         </div>
-        <DownloadCloud className="ml-auto h-6 w-6 text-current" />
+        <IconComponent
+          name="DownloadCloud"
+          style="ml-auto h-6 w-6 text-current"
+          method="LUCIDE"
+        />
       </div>
     </button>
   );

src/frontend/src/modals/formModal/index.tsx

@@ -1,4 +1,3 @@
-import { Eraser, TerminalSquare, Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { typesContext } from "../../contexts/typesContext";
@@ -29,6 +28,7 @@ import {
 import { Textarea } from "../../components/ui/textarea";
 import { CHAT_FORM_DIALOG_SUBTITLE, THOUGHTS_ICON } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function FormModal({
   flow,
@@ -396,8 +396,10 @@ export default function FormModal({
           <DialogHeader>
             <DialogTitle className="flex items-center">
               <span className="pr-2">Chat</span>
-              <TerminalSquare
+              <IconComponent
-                className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                name="prompts"
+                style="h-6 w-6 pl-1 text-gray-800 dark:text-white"
+                method="LUCIDE"
                 aria-hidden="true"
               />
             </DialogTitle>
@@ -407,7 +409,11 @@ export default function FormModal({
           <div className="form-modal-iv-box ">
             <div className="form-modal-iv-size">
               <div className="file-component-arrangement">
-                <Variable className=" file-component-variable"></Variable>
+                <IconComponent
+                  name="Variable"
+                  style=" file-component-variable"
+                  method="LUCIDE"
+                />
                 <span className="file-component-variables-span text-md">
                   Input Variables
                 </span>
@@ -501,14 +507,16 @@ export default function FormModal({
               <div className="eraser-size">
                 <div className="eraser-position">
                   <button disabled={lockChat} onClick={() => clearChat()}>
-                    <Eraser
+                    <IconComponent
-                      className={classNames(
+                      name="Eraser"
+                      style={classNames(
                         "h-5 w-5",
                         lockChat
                           ? "animate-pulse text-primary"
                           : "text-primary hover:text-gray-600"
                       )}
                       aria-hidden="true"
+                      method="LUCIDE"
                     />
                   </button>
                 </div>

src/frontend/src/modals/genericModal/index.tsx

@@ -1,4 +1,3 @@
-import { FileText, Variable } from "lucide-react";
 import { useContext, useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
@@ -21,6 +20,7 @@ import {
   varHighlightHTML,
 } from "../../utils";
 import BaseModal from "../baseModal";
+import IconComponent from "../../components/genericIconComponent";
 
 export default function GenericModal({
   field_name = "",
@@ -172,9 +172,10 @@ export default function GenericModal({
       >
         <DialogTitle className="flex items-center">
           <span className="pr-2">{myModalTitle}</span>
-          <FileText
+          <IconComponent
-            strokeWidth={1.5}
+            name="FileText"
-            className="h-6 w-6 pl-1 text-primary "
+            method="LUCIDE"
+            style="h-6 w-6 pl-1 text-primary "
             aria-hidden="true"
           />
         </DialogTitle>
@@ -225,7 +226,11 @@ export default function GenericModal({
                 <div className=" mr-2">
                   <div className="max-h-20 overflow-y-auto custom-scroll">
                     <div className="flex flex-wrap items-center">
-                      <Variable className=" -ml-px mr-1 flex h-4 w-4 text-primary"></Variable>
+                      <IconComponent
+                        method="LUCIDE"
+                        name="Variable"
+                        style=" -ml-px mr-1 flex h-4 w-4 text-primary"
+                      />
                       <span className="text-md font-semibold text-primary">
                         Prompt Variables:
                       </span>

src/frontend/src/pages/CommunityPage/index.tsx

@@ -1,4 +1,3 @@
-import { GitFork, GithubIcon, Users2 } from "lucide-react";
 import { useContext, useEffect, useState } from "react";
 import { Button } from "../../components/ui/button";
 import { alertContext } from "../../contexts/alertContext";
@@ -8,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
+import IconComponent from "../../components/genericIconComponent";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);
@@ -40,7 +40,11 @@ export default function CommunityPage() {
     <div className="community-page-arrangement">
       <div className="community-page-nav-arrangement">
         <span className="community-page-nav-title">
-          <Users2 className="w-6" />
+          <IconComponent
+            name="Users2"
+            style="w-6"
+            method="LUCIDE"
+          />
           Community Examples
         </span>
         <div className="community-page-nav-button">
@@ -50,7 +54,11 @@ export default function CommunityPage() {
             rel="noreferrer"
           >
             <Button variant="primary">
-              <GithubIcon className="main-page-nav-button" />
+              <IconComponent
+                method="LUCIDE"
+                name="GithubIcon"
+                style="main-page-nav-button"
+              />
               Add Your Example
             </Button>
           </a>
@@ -79,7 +87,11 @@ export default function CommunityPage() {
                     });
                   }}
                 >
-                  <GitFork className="main-page-nav-button" />
+                  <IconComponent
+                    name="GitFork"
+                    style="main-page-nav-button"
+                    method="LUCIDE"
+                  />
                   Fork Example
                 </Button>
               }

src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx

@@ -1,6 +1,6 @@
 import { Disclosure } from "@headlessui/react";
-import { ChevronRight } from "lucide-react";
 import { DisclosureComponentType } from "../../../../types/components";
+import IconComponent from "../../../../components/genericIconComponent";
 
 export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },
@@ -24,10 +24,12 @@ export default function DisclosureComponent({
                   </button>
                 ))}
                 <div>
-                  <ChevronRight
+                  <IconComponent
-                    className={`${
+                    name="ChevronRight"
+                    style={`${
                       open || openDisc ? "rotate-90 transform" : ""
                     } h-4 w-4 text-foreground`}
+                    method="LUCIDE"
                   />
                 </div>
               </div>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -1,4 +1,4 @@
-import { Code2, FileDown, FileUp, Menu, Save, Search } from "lucide-react";
+import { Search } from "lucide-react";
 import { useContext, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { Separator } from "../../../../components/ui/separator";
@@ -16,6 +16,7 @@ import {
   nodeNames,
 } from "../../../../utils";
 import DisclosureComponent from "../DisclosureComponent";
+import IconComponent from "../../../../components/genericIconComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -68,10 +69,11 @@ export default function ExtraSidebar() {
               uploadFlow();
             }}
           >
-            <FileUp
+            <IconComponent
-              strokeWidth={1.5}
+              name="FileUp"
-              className="side-bar-button-size "
+              method="LUCIDE"
-            ></FileUp>
+              style="side-bar-button-size "
+            />
           </button>
         </ShadTooltip>
 
@@ -82,10 +84,11 @@ export default function ExtraSidebar() {
               openPopUp(<ExportModal />);
             }}
           >
-            <FileDown
+            <IconComponent
-              strokeWidth={1.5}
+              name="FileDown"
-              className="side-bar-button-size"
+              method="LUCIDE"
-            ></FileDown>
+              style="side-bar-button-size"
+            />
           </button>
         </ShadTooltip>
         <ShadTooltip content="Code" side="top">
@@ -95,7 +98,11 @@ export default function ExtraSidebar() {
               openPopUp(<ApiModal flow={flows.find((f) => f.id === tabId)} />);
             }}
           >
-            <Code2 strokeWidth={1.5} className="side-bar-button-size"></Code2>
+            <IconComponent
+              name="Code2"
+              method="LUCIDE"
+              style="side-bar-button-size"
+            />
           </button>
         </ShadTooltip>
 
@@ -108,13 +115,14 @@ export default function ExtraSidebar() {
             }}
             disabled={!isPending}
           >
-            <Save
+            <IconComponent
-              strokeWidth={1.5}
+              name="Save"
-              className={
+              method="LUCIDE"
+              style={
                 "side-bar-button-size" +
                 (isPending ? " " : " extra-side-bar-save-disable")
               }
-            ></Save>
+            />
           </button>
         </ShadTooltip>
       </div>
@@ -187,7 +195,11 @@ export default function ExtraSidebar() {
                               <span className="side-bar-components-text">
                                 {data[d][t].display_name}
                               </span>
-                              <Menu className="side-bar-components-icon " />
+                              <IconComponent
+                                name="Menu"
+                                style="side-bar-components-icon "
+                                method="LUCIDE"
+                              />
                             </div>
                           </div>
                         </div>

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -1,10 +1,10 @@
-import { Copy, FileText, Settings2, Trash2 } from "lucide-react";
 import { useContext, useState } from "react";
 import { useReactFlow } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import EditNodeModal from "../../../../modals/EditNodeModal";
 import { classNames } from "../../../../utils";
+import IconComponent from "../../../../components/genericIconComponent";
 
 const NodeToolbarComponent = (props) => {
   const [nodeLength, setNodeLength] = useState(
@@ -36,7 +36,11 @@ const NodeToolbarComponent = (props) => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <Trash2 className="h-4 w-4"></Trash2>
+              <IconComponent
+                name="Trash2"
+                style="h-4 w-4"
+                method="LUCIDE"
+              />
             </button>
           </ShadTooltip>
 
@@ -61,7 +65,11 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <Copy className="h-4 w-4"></Copy>
+              <IconComponent
+                name="Copy"
+                style="h-4 w-4"
+                method="LUCIDE"
+              />
             </button>
           </ShadTooltip>
 
@@ -90,7 +98,11 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <FileText className="h-4 w-4 "></FileText>
+              <IconComponent
+                name="FileText"
+                style="h-4 w-4 "
+                method="LUCIDE"
+              />
             </a>
           </ShadTooltip>
 
@@ -110,7 +122,11 @@ const NodeToolbarComponent = (props) => {
                 props.openPopUp(<EditNodeModal data={props.data} />);
               }}
             >
-              <Settings2 className="h-4 w-4 "></Settings2>
+              <IconComponent
+                name="Settings2"
+                style="h-4 w-4 "
+                method="LUCIDE"
+              />
             </button>
           </ShadTooltip>
 

src/frontend/src/pages/MainPage/index.tsx

@@ -1,10 +1,10 @@
-import { Download, ExternalLink, Home, Plus, Upload } from "lucide-react";
 import { useContext, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import { Button } from "../../components/ui/button";
 import { USER_PROJECTS_HEADER } from "../../constants";
 import { TabsContext } from "../../contexts/tabsContext";
+import IconComponent from "../../components/genericIconComponent";
 export default function HomePage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
@@ -16,7 +16,11 @@ export default function HomePage() {
     <div className="main-page-panel">
       <div className="main-page-nav-arrangement">
         <span className="main-page-nav-title">
-          <Home className="w-6" />
+          <IconComponent
+            name="Home"
+            style="w-6"
+            method="LUCIDE"
+          />
           {USER_PROJECTS_HEADER}
         </span>
         <div className="button-div-style">
@@ -26,7 +30,11 @@ export default function HomePage() {
               downloadFlows();
             }}
           >
-            <Download className="main-page-nav-button" />
+            <IconComponent
+              name="Download"
+              style="main-page-nav-button"
+              method="LUCIDE"
+            />
             Download Collection
           </Button>
           <Button
@@ -35,7 +43,11 @@ export default function HomePage() {
               uploadFlows();
             }}
           >
-            <Upload className="main-page-nav-button" />
+            <IconComponent
+              name="Upload"
+              style="main-page-nav-button"
+              method="LUCIDE"
+            />
             Upload Collection
           </Button>
           <Button
@@ -46,7 +58,11 @@ export default function HomePage() {
               });
             }}
           >
-            <Plus className="main-page-nav-button" />
+            <IconComponent
+              name="Plus"
+              style="main-page-nav-button"
+              method="LUCIDE"
+            />
             New Project
           </Button>
         </div>
@@ -67,7 +83,11 @@ export default function HomePage() {
                   size="sm"
                   className="whitespace-nowrap "
                 >
-                  <ExternalLink className="main-page-nav-button" />
+                  <IconComponent
+                    name="ExternalLink"
+                    style="main-page-nav-button"
+                    method="LUCIDE"
+                  />
                   Edit Flow
                 </Button>
               </Link>

src/frontend/src/types/components/index.ts

@@ -164,10 +164,11 @@ export interface IVarHighlightType {
 
 export type IconProps = {
   name: string;
+  style: string;
 };
 
 export type IconComponentProps = {
   method: "SVG" | "LUCIDE";
   name: string;
-  className?: string;
+  style: string;
 };

src/frontend/src/utils.ts

@@ -40,7 +40,7 @@ import {
   LucideSend,
   Menu,
   MessageCircle,
-  MessageSquare,
+  MessagesSquare,
   MoonIcon,
   Paperclip,
   Plus,
@@ -317,7 +317,7 @@ export const nodeIconsLucide = {
   Info,
   CheckCircle2,
   Zap,
-  MessageSquare,
+  MessagesSquare,
   ExternalLink,
   ChevronsUpDown,
   Check,