diff --git a/src/frontend/src/icons/GradientSparkles/index.tsx b/src/frontend/src/icons/GradientSparkles/index.tsx
index b8f3534d5..49502c6ba 100644
--- a/src/frontend/src/icons/GradientSparkles/index.tsx
+++ b/src/frontend/src/icons/GradientSparkles/index.tsx
@@ -1,7 +1,6 @@
-import { Infinity } from "lucide-react";
 import { forwardRef } from "react";
 
-const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
+export const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
   (props, ref) => {
     return (
       <>
@@ -13,10 +12,27 @@ const GradientSparkles = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
             </linearGradient>
           </defs>
         </svg>
-        <Infinity stroke="url(#grad1)" ref={ref} {...props} />
+        {/* this svg comes from the source code of lucide,
+         we do not use the import because it crashes the ui (why? no one knows...).
+         source code from the used svg:
+         https://github.com/lucide-icons/lucide/blob/a4076db69b52ff0debc383f76d4d671c3bad5345/icons/infinity.svg?short_path=f79de91
+         */}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke="url(#grad1)"
+          ref={ref} {...props}
+        >
+          <path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 0 0 0-8c-2 0-4 1.33-6 4Z" />
+        </svg>
       </>
     );
   }
 );
 
-export default GradientSparkles;