Feat: Add new CustomComponent icon and gradient to Group icon

src/frontend/src/icons/GradientSparkles/index.tsx

@@ -1,4 +1,4 @@
-import { InfinityIcon } from "lucide-react";
+import { InfinityIcon, Terminal, Code } from "lucide-react";
 import { forwardRef } from "react";
 import ForwardedIconComponent from "../../components/genericIconComponent";
 
@@ -16,7 +16,7 @@ export const GradientInfinity = forwardRef<
           </linearGradient>
         </defs>
       </svg>
-      <InfinityIcon stroke="url(#grad1)" ref={ref} {...props} />
+      <Code stroke="url(#grad1)" ref={ref} {...props} />
     </>
   );
 });
@@ -45,3 +45,23 @@ export const GradientSave = forwardRef<
     </>
   );
 });
+
+export const GradientGroup = (props) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop className="gradient-start" offset="0%" />
+            <stop className="gradient-end" offset="100%" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <ForwardedIconComponent
+        name="Combine"
+        stroke="url(#grad3)"
+        {...props}
+      />
+    </>
+  );
+};

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import IconComponent from "../../../../components/genericIconComponent";
+import { GradientGroup } from "../../../../icons/GradientSparkles";
 export default function SelectionMenu({ onClick, nodes, isVisible }) {
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -45,7 +46,7 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
             className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500"
             onClick={onClick}
           >
-            <IconComponent name="Combine" className="w-6" />
+            <GradientGroup strokeWidth={1.5} size={22} className="text-primary" />
             Group
           </button>
         </div>

src/frontend/src/utils/styleUtils.ts

@@ -100,6 +100,7 @@ import {
   XCircle,
   Zap,
   Combine,
+  TerminalIcon
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -358,4 +359,5 @@ export const nodeIconsLucide: iconsType = {
   ToyBrick,
   RefreshCcw,
   Combine,
+  TerminalIcon,
 };