diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index e25f5e5a5..f5d7b8555 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -1,3 +1,4 @@
+import { ReactElement, SVGProps, createElement } from "react";
 import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
@@ -7,6 +8,9 @@ export default function IconComponent({
   iconColor,
 }: IconComponentProps): JSX.Element {
   // MAYBE PROBLEM HERE?
-  const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
-  return <TargetIcon className={className} style={{ color: iconColor }} />;
+  const TargetIcon = createElement(nodeIconsLucide[name] ?? nodeIconsLucide["unknown"], {
+    className,
+    style: { color: iconColor },
+  });  
+  return TargetIcon as JSX.Element
 }
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index bf9a93840..6fba0c7cc 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from "react";
+import { ForwardRefExoticComponent, ReactElement, ReactNode, RefAttributes, SVGProps } from "react";
 import { APIClassType } from "../api";
 import { FlowStyleType, NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
@@ -83,7 +83,7 @@ export type DisclosureComponentType = {
   openDisc: boolean;
   button: {
     title: string;
-    Icon: React.Component;
+    Icon: React.ElementType;
     buttons?: {
       Icon: ReactElement;
       title: string;
@@ -305,3 +305,7 @@ export type SanitizedHTMLWrapperType = {
   onClick: () => void;
   suppressWarning: boolean;
 };
+
+export type iconsType = {
+  [key: string]: React.ElementType;
+};
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index ad0b1c147..598e21ed5 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -89,6 +89,7 @@ import SvgWikipedia from "../icons/Wikipedia/Wikipedia";
 import SvgWolfram from "../icons/Wolfram/Wolfram";
 import { HackerNewsIcon } from "../icons/hackerNews";
 import { SupabaseIcon } from "../icons/supabase";
+import { iconsType } from "../types/components";
 
 export const gradients = [
   "bg-gradient-to-br from-gray-800 via-rose-700 to-violet-900",
@@ -168,7 +169,7 @@ export const nodeNames: { [char: string]: string } = {
   unknown: "Unknown",
 };
 
-export const nodeIconsLucide = {
+export const nodeIconsLucide: iconsType = {
   Chroma: ChromaIcon,
   AirbyteJSONLoader: AirbyteIcon,
   Anthropic: AnthropicIcon,