fix(data-sources): use official Microsoft Clarity icon

apps/landing/src/shared/icons/brands.tsx

@@ -4,6 +4,7 @@ import { GoogleSearchConsoleIcon } from "@onequery/ui/icons/google-search-consol
 import { GranolaIcon } from "@onequery/ui/icons/granola-icon";
 import { HermesAgentIcon } from "@onequery/ui/icons/hermes-agent-icon";
 import { JamIcon } from "@onequery/ui/icons/jam-icon";
+import { MicrosoftClarityIcon } from "@onequery/ui/icons/microsoft-clarity-icon";
 import { SendGridIcon } from "@onequery/ui/icons/sendgrid-icon";
 import { SimpleIconSvg, SvgIcon } from "@onequery/ui/icons/svg-icon";
 import type { IconSvgProps, SimpleIconData } from "@onequery/ui/icons/svg-icon";
@@ -118,20 +119,6 @@ function CodexAppServerApiIcon(props: IconSvgProps) {
   return <CodexIcon {...props} defaultLabel="Codex App Server API" />;
 }
 
-function MicrosoftClarityIcon({ size, ...props }: IconSvgProps) {
-  return (
-    <SvgIcon
-      {...props}
-      defaultLabel="Microsoft Clarity"
-      fill="currentColor"
-      size={size}
-      viewBox="0 0 24 24"
-    >
-      <path d="M4.5 4A2.5 2.5 0 0 0 2 6.5v11A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4h-15Zm0 2h15a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5Zm3.25 3A1.25 1.25 0 0 0 6.5 10.25v4.5a1.25 1.25 0 1 0 2.5 0v-4.5A1.25 1.25 0 0 0 7.75 9Zm4.25-1a1.25 1.25 0 0 0-1.25 1.25v5.5a1.25 1.25 0 1 0 2.5 0v-5.5A1.25 1.25 0 0 0 12 8Zm4.25 3a1.25 1.25 0 0 0-1.25 1.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5A1.25 1.25 0 0 0 16.25 11Z" />
-    </SvgIcon>
-  );
-}
-
 function AmazonAdsIcon({ size, ...props }: IconSvgProps) {
   return (
     <SvgIcon

packages/ui/package.json

@@ -17,6 +17,7 @@
     "./icons/granola-icon": "./src/icons/granola-icon.tsx",
     "./icons/hermes-agent-icon": "./src/icons/hermes-agent-icon.tsx",
     "./icons/jam-icon": "./src/icons/jam-icon.tsx",
+    "./icons/microsoft-clarity-icon": "./src/icons/microsoft-clarity-icon.tsx",
     "./icons/sendgrid-icon": "./src/icons/sendgrid-icon.tsx",
     "./hooks/*": "./src/hooks/*.ts",
     "./icons/svg-icon": "./src/icons/svg-icon.tsx"

packages/ui/src/data-sources/provider-icons.test.tsx

@@ -116,6 +116,18 @@ describe("shared provider icon accessibility", () => {
     expect(markup).toContain("<title>E2B provider</title>");
   });
 
+  it("renders Microsoft Clarity with the official app icon", () => {
+    const markup = renderProviderIcon("microsoft_clarity", {
+      title: "Microsoft Clarity provider",
+    });
+
+    expect(markup).toContain('viewBox="0 0 256 256"');
+    expect(markup).toContain(
+      'href="https://clarity.microsoft.com/blog/wp-content/uploads/2025/02/siteIcon.png"'
+    );
+    expect(markup).toContain("<title>Microsoft Clarity provider</title>");
+  });
+
   it("renders AWS Athena Connector as a monochrome icon", () => {
     const markup = renderProviderIcon("aws_athena_connector");
 

packages/ui/src/data-sources/provider-icons.tsx

@@ -33,6 +33,7 @@ import { GoogleSearchConsoleIcon } from "../icons/google-search-console-icon";
 import { GranolaIcon } from "../icons/granola-icon";
 import { HermesAgentIcon } from "../icons/hermes-agent-icon";
 import { JamIcon } from "../icons/jam-icon";
+import { MicrosoftClarityIcon } from "../icons/microsoft-clarity-icon";
 import { SendGridIcon } from "../icons/sendgrid-icon";
 import {
   SimpleIconSvg,
@@ -182,20 +183,6 @@ function CodexAppServerApiIcon(props: ProviderIconProps) {
   return <CodexIcon {...props} defaultLabel="Codex App Server API" />;
 }
 
-function MicrosoftClarityIcon({ size = 24, ...props }: ProviderIconProps) {
-  return (
-    <SvgIcon
-      {...props}
-      defaultLabel="Microsoft Clarity"
-      fill="currentColor"
-      size={size}
-      viewBox="0 0 24 24"
-    >
-      <path d="M4.5 4A2.5 2.5 0 0 0 2 6.5v11A2.5 2.5 0 0 0 4.5 20h15a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 19.5 4h-15Zm0 2h15a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5Zm3.25 3A1.25 1.25 0 0 0 6.5 10.25v4.5a1.25 1.25 0 1 0 2.5 0v-4.5A1.25 1.25 0 0 0 7.75 9Zm4.25-1a1.25 1.25 0 0 0-1.25 1.25v5.5a1.25 1.25 0 1 0 2.5 0v-5.5A1.25 1.25 0 0 0 12 8Zm4.25 3a1.25 1.25 0 0 0-1.25 1.25v2.5a1.25 1.25 0 1 0 2.5 0v-2.5A1.25 1.25 0 0 0 16.25 11Z" />
-    </SvgIcon>
-  );
-}
-
 function AmazonAdsIcon({ size = 24, ...props }: ProviderIconProps) {
   return (
     <SvgIcon

packages/ui/src/icons/microsoft-clarity-icon.tsx

@@ -0,0 +1,23 @@
+import { SvgIcon } from "./svg-icon";
+import type { IconSvgProps } from "./svg-icon";
+
+export const MICROSOFT_CLARITY_ICON_URL =
+  "https://clarity.microsoft.com/blog/wp-content/uploads/2025/02/siteIcon.png";
+
+export function MicrosoftClarityIcon({ size = 24, ...props }: IconSvgProps) {
+  return (
+    <SvgIcon
+      {...props}
+      defaultLabel="Microsoft Clarity"
+      size={size}
+      viewBox="0 0 256 256"
+    >
+      <image
+        height="256"
+        href={MICROSOFT_CLARITY_ICON_URL}
+        preserveAspectRatio="xMidYMid meet"
+        width="256"
+      />
+    </SvgIcon>
+  );
+}