From 327760e5ae312173ca0aa87929fbd23c0d716e14 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Tue, 30 Jun 2026 11:00:31 +0200
Subject: [PATCH] fix(ui): show Lighthouse provider logos in settings

---
 .../_components/config/provider-icon.test.tsx | 40 +++++++++++++++++++
 .../_components/config/provider-icon.tsx      | 21 ++++++----
 2 files changed, 53 insertions(+), 8 deletions(-)
 create mode 100644 ui/app/(prowler)/lighthouse/_components/config/provider-icon.test.tsx

diff --git a/ui/app/(prowler)/lighthouse/_components/config/provider-icon.test.tsx b/ui/app/(prowler)/lighthouse/_components/config/provider-icon.test.tsx
new file mode 100644
index 0000000000..625443d212
--- /dev/null
+++ b/ui/app/(prowler)/lighthouse/_components/config/provider-icon.test.tsx
@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ProviderIcon } from "./provider-icon";
+
+vi.mock("@iconify/react", () => ({
+  Icon: ({ icon, className }: { icon: string; className?: string }) => (
+    <span
+      aria-hidden="true"
+      className={className}
+      data-icon={icon}
+      data-testid="provider-logo"
+    />
+  ),
+}));
+
+describe("ProviderIcon", () => {
+  it("renders the provider logo for every Lighthouse v2 provider", () => {
+    const { rerender } = render(<ProviderIcon provider="openai" />);
+
+    expect(screen.getByTestId("provider-logo")).toHaveAttribute(
+      "data-icon",
+      "simple-icons:openai",
+    );
+
+    rerender(<ProviderIcon provider="bedrock" />);
+
+    expect(screen.getByTestId("provider-logo")).toHaveAttribute(
+      "data-icon",
+      "simple-icons:amazonwebservices",
+    );
+
+    rerender(<ProviderIcon provider="openai-compatible" />);
+
+    expect(screen.getByTestId("provider-logo")).toHaveAttribute(
+      "data-icon",
+      "simple-icons:openai",
+    );
+  });
+});
diff --git a/ui/app/(prowler)/lighthouse/_components/config/provider-icon.tsx b/ui/app/(prowler)/lighthouse/_components/config/provider-icon.tsx
index ea0e16d08e..0848bfc52c 100644
--- a/ui/app/(prowler)/lighthouse/_components/config/provider-icon.tsx
+++ b/ui/app/(prowler)/lighthouse/_components/config/provider-icon.tsx
@@ -1,15 +1,15 @@
-import { Bot, Cloud, Server } from "lucide-react";
+import { Icon } from "@iconify/react";
 
 import {
   LIGHTHOUSE_V2_PROVIDER_TYPE,
   type LighthouseV2ProviderType,
 } from "@/app/(prowler)/lighthouse/_types";
 
-function getProviderIcon(provider: LighthouseV2ProviderType) {
-  if (provider === LIGHTHOUSE_V2_PROVIDER_TYPE.BEDROCK) return Cloud;
-  if (provider === LIGHTHOUSE_V2_PROVIDER_TYPE.OPENAI_COMPATIBLE) return Server;
-  return Bot;
-}
+const LIGHTHOUSE_V2_PROVIDER_ICONS = {
+  [LIGHTHOUSE_V2_PROVIDER_TYPE.OPENAI]: "simple-icons:openai",
+  [LIGHTHOUSE_V2_PROVIDER_TYPE.BEDROCK]: "simple-icons:amazonwebservices",
+  [LIGHTHOUSE_V2_PROVIDER_TYPE.OPENAI_COMPATIBLE]: "simple-icons:openai",
+} as const satisfies Record<LighthouseV2ProviderType, string>;
 
 export function ProviderIcon({
   provider,
@@ -18,6 +18,11 @@ export function ProviderIcon({
   provider: LighthouseV2ProviderType;
   className?: string;
 }) {
-  const Icon = getProviderIcon(provider);
-  return <Icon className={className} />;
+  return (
+    <Icon
+      aria-hidden="true"
+      className={className}
+      icon={LIGHTHOUSE_V2_PROVIDER_ICONS[provider]}
+    />
+  );
 }