Fixed icon size and naming

src/frontend/src/components/sidebarComponent/index.tsx

@@ -6,7 +6,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
   items: {
     href: string;
     title: string;
-    Icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    icon: React.ReactNode;
   }[];
 }
 
@@ -38,7 +38,7 @@ export default function SidebarNav({
             "justify-start gap-2"
           )}
         >
-          <item.Icon className="w-5 stroke-[1.5]" />
+          {item.icon}
           {item.title}
         </Link>
       ))}

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -121,7 +121,7 @@ export default function ComponentsComponent({
                         }}
                         className="underline"
                       >
-                        Create a New Flow
+                        Start Here
                       </button>
                       .
                     </span>

src/frontend/src/pages/MainPage/index.tsx

@@ -45,12 +45,12 @@ export default function HomePage(): JSX.Element {
     {
       title: "Flows",
       href: "/flows",
-      Icon: Group,
+      icon: <Group className="w-5 stroke-[1.5]" />,
     },
     {
       title: "Components",
       href: "/components",
-      Icon: ToyBrick,
+      icon: <ToyBrick className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]" />,
     },
   ];