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
-                        className="mx-0.5 h-5 fill-build-trigger stroke-build-trigger stroke-1"
-                        strokeWidth={1.5}
+                      <IconComponent
+                        name="Zap"
+                        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
-                  className="h-4 w-4 text-error-foreground"
+                <IconComponent
+                  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
-                  className="h-4 w-4 text-info-foreground"
+                <IconComponent
+                  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
-              className="h-5 w-5 text-status-green"
+            <IconComponent
+              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
-                  className="h-4 w-4 text-success-foreground"
+                <IconComponent
+                  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
-              className="error-build-message-circle"
+            <IconComponent
+              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
-                  strokeWidth={1.5}
-                  className="sh-6 w-6 fill-build-trigger stroke-build-trigger stroke-1"
+                <IconComponent
+                  name="Zap"
+                  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
-            className={
+          <IconComponent
+            name="MessagesSquare"
+            style={
               "h-6 w-6 transition-all " +
               (isBuilt && canOpen
                 ? "message-button-icon"
                 : "disabled-message-button-icon")
             }
-            style={{ color: "white" }}
-            strokeWidth={1.5}
+            method="LUCIDE"
           />
         </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
-              strokeWidth={1.5}
-              className={
+            <IconComponent
+              name="ExternalLink"
+              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
-                    className="dropdown-component-arrow-color"
+                  <IconComponent
+                    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
-                                className={
+                              <IconComponent
+                                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
-              strokeWidth={1.5}
-              className={
+            <IconComponent
+              name="FileSearch2"
+              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
-              strokeWidth={1.5}
-              className={
+            <IconComponent
+              name="ExternalLink"
+              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
-              strokeWidth={1.5}
-              className={
+            <IconComponent
+              name="ExternalLink"
+              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>
 ));