From 6c1c75a3e1fc5a869a56c595db4e2b5d68f25394 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 23 Jul 2026 23:37:51 +0530
Subject: [PATCH] feat(connector-icon): mask MCP icon to inherit currentColor

---
 surfsense_web/contracts/enums/connectorIcons.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index 81696729d..1e76d7e45 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -74,7 +74,17 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
 			return <Image src="/connectors/circleback.svg" alt="Circleback" {...imgProps} />;
 		case EnumConnectorName.MCP_CONNECTOR:
-			return <Image src="/connectors/modelcontextprotocol.svg" alt="MCP" {...imgProps} />;
+			// Masked so the black glyph inherits currentColor (white in dark mode).
+			return (
+				<span
+					aria-hidden="true"
+					className={`${className || "h-5 w-5"} bg-current select-none pointer-events-none`}
+					style={{
+						mask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+						WebkitMask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+					}}
+				/>
+			);
 		case EnumConnectorName.OBSIDIAN_CONNECTOR:
 			return <Image src="/connectors/obsidian.svg" alt="Obsidian" {...imgProps} />;
 		case EnumConnectorName.COMPOSIO_GOOGLE_DRIVE_CONNECTOR: