diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 57cd78c47..058b33e4e 100644
--- 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 ShadTooltip from "../../../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
+import IconComponent from "../../../../components/genericIconComponent";
 import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
@@ -26,7 +27,6 @@ import {
   nodeIconsLucide,
   nodeNames,
 } from "../../../../utils";
-import IconComponent from "../../../../components/genericIconComponent";
 
 export default function ParameterComponent({
   left,
@@ -164,7 +164,11 @@ export default function ParameterComponent({
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
-                <IconComponent name="Info" style="relative bottom-0.5 ml-2 h-3 w-3" method="LUCIDE" />
+                <IconComponent
+                  name="Info"
+                  style="relative bottom-0.5 ml-2 h-3 w-3"
+                  method="LUCIDE"
+                />
               </ShadTooltip>
             )}
           </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 34479429b..5a3e1e8be 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
+import IconComponent from "../../components/genericIconComponent";
 import { useSSE } from "../../contexts/SSEContext";
 import { alertContext } from "../../contexts/alertContext";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -16,7 +17,6 @@ import {
   toTitleCase,
 } from "../../utils";
 import ParameterComponent from "./components/parameterComponent";
-import IconComponent from "../../components/genericIconComponent";
 
 export default function GenericNode({
   data,
@@ -28,12 +28,12 @@ export default function GenericNode({
   const { setErrorData } = useContext(alertContext);
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
-  
+
   const { closePopUp, openPopUp } = useContext(PopUpContext);
   // any to avoid type conflict
   const Icon: any =
     nodeIconsLucide[data.type] || nodeIconsLucide[types[data.type]];
-  const name = nodeIconsLucide[data.type] ? data.type : types[data.type]
+  const name = nodeIconsLucide[data.type] ? data.type : types[data.type];
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index 1b5c6384b..dcfdf5a39 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -1,8 +1,8 @@
 import { Transition } from "@headlessui/react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
-import { SingleAlertComponentType } from "../../../../types/alerts";
 import IconComponent from "../../../../components/genericIconComponent";
+import { SingleAlertComponentType } from "../../../../types/alerts";
 
 export default function SingleAlert({
   dropItem,
diff --git a/src/frontend/src/alerts/alertDropDown/index.tsx b/src/frontend/src/alerts/alertDropDown/index.tsx
index 7b140de6d..679ac9516 100644
--- a/src/frontend/src/alerts/alertDropDown/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/index.tsx
@@ -1,10 +1,10 @@
 import { useContext, useRef } from "react";
+import IconComponent from "../../components/genericIconComponent";
 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);
@@ -46,11 +46,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
             className="text-foreground hover:text-status-red"
             onClick={closePopUp}
           >
-            <IconComponent
-              method="LUCIDE"
-              name="X"
-              style="h-5 w-5"
-            />
+            <IconComponent method="LUCIDE" name="X" style="h-5 w-5" />
           </button>
         </div>
       </div>
diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index ae89d6269..3bb61da80 100644
--- 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 { useEffect, useState } from "react";
-import { ErrorAlertType } from "../../types/alerts";
 import IconComponent from "../../components/genericIconComponent";
+import { ErrorAlertType } from "../../types/alerts";
 
 export default function ErrorAlert({
   title,
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 62cb6c73c..6ffb11e5f 100644
--- 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 { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
-import { NoticeAlertType } from "../../types/alerts";
 import IconComponent from "../../components/genericIconComponent";
+import { NoticeAlertType } from "../../types/alerts";
 
 export default function NoticeAlert({
   title,
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 90b181a77..a15728596 100644
--- 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 { useEffect, useState } from "react";
-import { SuccessAlertType } from "../../types/alerts";
 import IconComponent from "../../components/genericIconComponent";
+import { SuccessAlertType } from "../../types/alerts";
 
 export default function SuccessAlert({
   title,
diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 04c8080e8..80e162a07 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -2,6 +2,7 @@ import { useContext } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { FlowType } from "../../types/flow";
 import { gradients } from "../../utils";
+import IconComponent from "../genericIconComponent";
 import {
   Card,
   CardDescription,
@@ -9,7 +10,6 @@ import {
   CardHeader,
   CardTitle,
 } from "../ui/card";
-import IconComponent from "../genericIconComponent";
 
 export const CardComponent = ({
   flow,
@@ -55,8 +55,7 @@ export const CardComponent = ({
 
       <CardFooter>
         <div className="card-component-footer-arrangement">
-          <div className="card-component-footer">
-          </div>
+          <div className="card-component-footer"></div>
           {button && button}
         </div>
       </CardFooter>
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index bbe8ee841..cfaf1e0cf 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -7,7 +7,7 @@ export function IconFromLucide({
   iconColor,
 }: IconProps): JSX.Element {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={ style } style={{ color: iconColor }} />;
+  return <TargetIcon className={style} style={{ color: iconColor }} />;
 }
 
 export default function IconComponent({
@@ -18,7 +18,7 @@ export default function IconComponent({
 }: IconComponentProps): JSX.Element {
   switch (method) {
     case "LUCIDE":
-      return <IconFromLucide name={name} style={ style } iconColor={ iconColor } />;
+      return <IconFromLucide name={name} style={style} iconColor={iconColor} />;
     default:
       console.error("IconComponent: invalid method");
       return <IconFromLucide name={"unknown"} style={"unknown"} />;
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 0a66b7970..2e2c163e8 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -13,8 +13,8 @@ import { Link, useNavigate } from "react-router-dom";
 import { alertContext } from "../../../../contexts/alertContext";
 import { undoRedoContext } from "../../../../contexts/undoRedoContext";
 import FlowSettingsModal from "../../../../modals/flowSettingsModal";
-import { Button } from "../../../ui/button";
 import IconComponent from "../../../genericIconComponent";
+import { Button } from "../../../ui/button";
 
 export const MenuBar = ({ flows, tabId }) => {
   const { updateFlow, setTabId, addFlow } = useContext(TabsContext);
@@ -39,11 +39,7 @@ export const MenuBar = ({ flows, tabId }) => {
   return (
     <div className="round-button-div">
       <Link to="/">
-        <IconComponent
-          name="ChevronLeft"
-          style="w-4"
-          method="LUCIDE"
-        />
+        <IconComponent name="ChevronLeft" style="w-4" method="LUCIDE" />
       </Link>
       <div className="header-menu-bar">
         <DropdownMenu>
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index c76e9ce16..6bbff0f4e 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -9,10 +9,10 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { typesContext } from "../../contexts/typesContext";
 import { getRepoStars } from "../../controllers/API";
+import IconComponent from "../genericIconComponent";
 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,11 +51,7 @@ export default function Header() {
             variant={location.pathname === "/" ? "primary" : "secondary"}
             size="sm"
           >
-            <IconComponent
-              name="Home"
-              method="LUCIDE"
-              style="h-4 w-4"
-            />
+            <IconComponent name="Home" method="LUCIDE" style="h-4 w-4" />
             <div className="flex-1">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
@@ -67,11 +63,7 @@ export default function Header() {
             }
             size="sm"
           >
-            <IconComponent
-              method="LUCIDE"
-              name="Users2"
-              style="h-4 w-4"
-            />
+            <IconComponent method="LUCIDE" name="Users2" style="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
         </Link>
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index eb7ecc5a0..55b3895b4 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -20,11 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent
-        name="Check"
-        method="LUCIDE"
-        style="h-4 w-4"
-      />
+      <IconComponent name="Check" method="LUCIDE" style="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/src/frontend/src/components/ui/dialog.tsx b/src/frontend/src/components/ui/dialog.tsx
index 7353502ca..243391d16 100644
--- a/src/frontend/src/components/ui/dialog.tsx
+++ b/src/frontend/src/components/ui/dialog.tsx
@@ -51,11 +51,7 @@ 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">
-        <IconComponent
-          name="X"
-          method="LUCIDE"
-          style="h-4 w-4"
-        />
+        <IconComponent name="X" method="LUCIDE" style="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/src/frontend/src/components/ui/dropdown-menu.tsx b/src/frontend/src/components/ui/dropdown-menu.tsx
index 34c53ca9b..487e13c27 100644
--- a/src/frontend/src/components/ui/dropdown-menu.tsx
+++ b/src/frontend/src/components/ui/dropdown-menu.tsx
@@ -110,11 +110,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <IconComponent
-          name="Check"
-          style="h-4 w-4"
-          method="LUCIDE"
-        />
+        <IconComponent name="Check" style="h-4 w-4" method="LUCIDE" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/frontend/src/components/ui/menubar.tsx b/src/frontend/src/components/ui/menubar.tsx
index 36672d68d..24bfd19a7 100644
--- a/src/frontend/src/components/ui/menubar.tsx
+++ b/src/frontend/src/components/ui/menubar.tsx
@@ -144,11 +144,7 @@ const MenubarCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <MenubarPrimitive.ItemIndicator>
-        <IconComponent
-          name="Check"
-          style="h-4 w-4"
-          method="LUCIDE"
-        />
+        <IconComponent name="Check" style="h-4 w-4" method="LUCIDE" />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d57b24d37..53829949e 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -2,9 +2,8 @@ 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 { useContext, useEffect, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
 import { Check, Clipboard } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
 import AccordionComponent from "../../components/AccordionComponent";
@@ -12,6 +11,7 @@ import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
+import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import InputFileComponent from "../../components/inputFileComponent";
 import InputListComponent from "../../components/inputListComponent";
@@ -48,10 +48,10 @@ import {
   getPythonCode,
 } from "../../constants";
 import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 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);
@@ -378,7 +378,6 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
                                               "int")
                                       )
                                       .map((n, i) => {
-
                                         return (
                                           <TableRow
                                             key={i}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 3e78e00c9..e0b278312 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useRef, useState } from "react";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import Dropdown from "../../components/dropdownComponent";
 import FloatComponent from "../../components/floatComponent";
+import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
 import InputFileComponent from "../../components/inputFileComponent";
 import InputListComponent from "../../components/inputListComponent";
@@ -33,7 +34,6 @@ 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);
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 25189cf23..54b9c0079 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -1,5 +1,6 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useContext, useRef, useState } from "react";
+import IconComponent from "../../components/genericIconComponent";
 import { PopUpContext } from "../../contexts/popUpContext";
 import { typesContext } from "../../contexts/typesContext";
 import { NodeDataType } from "../../types/flow";
@@ -11,7 +12,6 @@ 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);
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 588caf460..273e388ed 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -6,6 +6,7 @@ import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 import { useContext, useState } from "react";
 import AceEditor from "react-ace";
+import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
@@ -14,7 +15,6 @@ 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,
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 5be244ce0..cc0a7b586 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -1,5 +1,6 @@
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import { Checkbox } from "../../components/ui/checkbox";
 import {
@@ -16,7 +17,6 @@ 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);
diff --git a/src/frontend/src/modals/flowSettingsModal/index.tsx b/src/frontend/src/modals/flowSettingsModal/index.tsx
index e27a82cf9..bcfa4a4e6 100644
--- a/src/frontend/src/modals/flowSettingsModal/index.tsx
+++ b/src/frontend/src/modals/flowSettingsModal/index.tsx
@@ -1,5 +1,6 @@
 import { useContext, useRef, useState } from "react";
 import EditFlowSettings from "../../components/EditFlowSettingsComponent";
+import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
 import {
   Dialog,
@@ -14,7 +15,6 @@ 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);
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 3ceb2a1fd..4d5d8bbe2 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { classNames } from "../../../utils";
 import IconComponent from "../../../components/genericIconComponent";
+import { classNames } from "../../../utils";
 
 export default function ChatInput({
   lockChat,
diff --git a/src/frontend/src/modals/formModal/chatMessage/index.tsx b/src/frontend/src/modals/formModal/chatMessage/index.tsx
index 279ee8d72..a9d68f54e 100644
--- a/src/frontend/src/modals/formModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/formModal/chatMessage/index.tsx
@@ -7,12 +7,12 @@ import remarkMath from "remark-math";
 import MaleTechnology from "../../../assets/male-technologist.png";
 import Robot from "../../../assets/robot.png";
 import SanitizedHTMLWrapper from "../../../components/SanitizedHTMLWrapper";
+import IconComponent from "../../../components/genericIconComponent";
 import { THOUGHTS_ICON } from "../../../constants";
 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,
diff --git a/src/frontend/src/modals/formModal/fileComponent/index.tsx b/src/frontend/src/modals/formModal/fileComponent/index.tsx
index 610a56bca..1f6cfc1a7 100644
--- a/src/frontend/src/modals/formModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/formModal/fileComponent/index.tsx
@@ -64,11 +64,7 @@ export default function FileCard({ fileName, content, fileType }) {
             className="h-8 w-8"
           />
         ) : (
-          <IconComponent
-            name="File"
-            style="h-8 w-8"
-            method="LUCIDE"
-          />
+          <IconComponent name="File" style="h-8 w-8" method="LUCIDE" />
         )}
         <div className="file-card-modal-footer">
           {" "}
diff --git a/src/frontend/src/modals/formModal/index.tsx b/src/frontend/src/modals/formModal/index.tsx
index c18ce4753..a6c10850d 100644
--- a/src/frontend/src/modals/formModal/index.tsx
+++ b/src/frontend/src/modals/formModal/index.tsx
@@ -9,6 +9,7 @@ import ChatInput from "./chatInput";
 import ChatMessage from "./chatMessage";
 
 import _ from "lodash";
+import IconComponent from "../../components/genericIconComponent";
 import ToggleShadComponent from "../../components/toggleShadComponent";
 import {
   Accordion,
@@ -28,7 +29,6 @@ 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,
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index e40467806..780d5d74d 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import SanitizedHTMLWrapper from "../../components/SanitizedHTMLWrapper";
 import ShadTooltip from "../../components/ShadTooltipComponent";
+import IconComponent from "../../components/genericIconComponent";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { DialogTitle } from "../../components/ui/dialog";
@@ -20,7 +21,6 @@ import {
   varHighlightHTML,
 } from "../../utils";
 import BaseModal from "../baseModal";
-import IconComponent from "../../components/genericIconComponent";
 
 export default function GenericModal({
   field_name = "",
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 658ddcd18..c5abeb834 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -5,9 +5,9 @@ import { TabsContext } from "../../contexts/tabsContext";
 
 import { useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
+import IconComponent from "../../components/genericIconComponent";
 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,11 +40,7 @@ export default function CommunityPage() {
     <div className="community-page-arrangement">
       <div className="community-page-nav-arrangement">
         <span className="community-page-nav-title">
-          <IconComponent
-            name="Users2"
-            style="w-6"
-            method="LUCIDE"
-          />
+          <IconComponent name="Users2" style="w-6" method="LUCIDE" />
           Community Examples
         </span>
         <div className="community-page-nav-button">
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index d6aa0cc75..46c6145d5 100644
--- 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 { Disclosure } from "@headlessui/react";
-import { DisclosureComponentType } from "../../../../types/components";
 import IconComponent from "../../../../components/genericIconComponent";
+import { DisclosureComponentType } from "../../../../types/components";
 
 export default function DisclosureComponent({
   button: { title, Icon, buttons = [] },
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 26d9e4ddd..e7a56f74c 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,6 +1,7 @@
 import { Search } from "lucide-react";
 import { useContext, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import IconComponent from "../../../../components/genericIconComponent";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { PopUpContext } from "../../../../contexts/popUpContext";
@@ -16,7 +17,6 @@ import {
   nodeNames,
 } from "../../../../utils";
 import DisclosureComponent from "../DisclosureComponent";
-import IconComponent from "../../../../components/genericIconComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index bedabd06a..ece265ef3 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,10 +1,10 @@
 import { useContext, useState } from "react";
 import { useReactFlow } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import IconComponent from "../../../../components/genericIconComponent";
 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,11 +36,7 @@ const NodeToolbarComponent = (props) => {
                 props.deleteNode(props.data.id);
               }}
             >
-              <IconComponent
-                name="Trash2"
-                style="h-4 w-4"
-                method="LUCIDE"
-              />
+              <IconComponent name="Trash2" style="h-4 w-4" method="LUCIDE" />
             </button>
           </ShadTooltip>
 
@@ -65,11 +61,7 @@ const NodeToolbarComponent = (props) => {
                 );
               }}
             >
-              <IconComponent
-                name="Copy"
-                style="h-4 w-4"
-                method="LUCIDE"
-              />
+              <IconComponent name="Copy" style="h-4 w-4" method="LUCIDE" />
             </button>
           </ShadTooltip>
 
@@ -98,11 +90,7 @@ const NodeToolbarComponent = (props) => {
                 }
               }}
             >
-              <IconComponent
-                name="FileText"
-                style="h-4 w-4 "
-                method="LUCIDE"
-              />
+              <IconComponent name="FileText" style="h-4 w-4 " method="LUCIDE" />
             </a>
           </ShadTooltip>
 
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index abccea1b1..368e6997a 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,10 +1,10 @@
 import { useContext, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
+import IconComponent from "../../components/genericIconComponent";
 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,11 +16,7 @@ export default function HomePage() {
     <div className="main-page-panel">
       <div className="main-page-nav-arrangement">
         <span className="main-page-nav-title">
-          <IconComponent
-            name="Home"
-            style="w-6"
-            method="LUCIDE"
-          />
+          <IconComponent name="Home" style="w-6" method="LUCIDE" />
           {USER_PROJECTS_HEADER}
         </span>
         <div className="button-div-style">
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 2f212ad5c..ab620a368 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -247,7 +247,6 @@ export const nodeIconsLucide = {
   retrievers: FileSearch,
   unknown: HelpCircle,
 
-
   Trash2,
   X,
   XCircle,