wordbricks · siisee11 · Jul 20, 2026 · Jul 20, 2026
diff --git a/apps/landing/src/shared/icons/brands.tsx b/apps/landing/src/shared/icons/brands.tsx
@@ -1,6 +1,8 @@
 import { CodexIcon } from "@onequery/ui/icons/codex-icon";
 import { GoogleSearchConsoleIcon } from "@onequery/ui/icons/google-search-console-icon";
+import { GranolaIcon } from "@onequery/ui/icons/granola-icon";
 import { HermesAgentIcon } from "@onequery/ui/icons/hermes-agent-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";
 import type { ComponentType } from "react";
@@ -106,20 +108,6 @@ function MotherDuckIcon({ size, ...props }: IconSvgProps) {
   );
 }
 
-function GranolaIcon({ size, ...props }: IconSvgProps) {
-  return (
-    <SvgIcon
-      {...props}
-      defaultLabel="Granola"
-      fill="currentColor"
-      size={size}
-      viewBox="0 0 24 24"
-    >
-      <path d="M6.75 3A2.75 2.75 0 0 0 4 5.75v12.5A2.75 2.75 0 0 0 6.75 21h10.5A2.75 2.75 0 0 0 20 18.25V5.75A2.75 2.75 0 0 0 17.25 3H6.75ZM6 5.75c0-.41.34-.75.75-.75H8v14H6.75a.75.75 0 0 1-.75-.75V5.75ZM10 19V5h7.25c.41 0 .75.34.75.75v12.5c0 .41-.34.75-.75.75H10Zm2-10a1 1 0 0 1 1-1h2.75a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h2.75a1 1 0 1 1 0 2H13a1 1 0 0 1-1-1Z" />
-    </SvgIcon>
-  );
-}
-
 function E2BIcon({ size, ...props }: IconSvgProps) {
   return (
     <SvgIcon
@@ -197,21 +185,6 @@ function LinkedInAdsIcon({ size, ...props }: IconSvgProps) {
   );
 }
 
-function SendGridIcon({ size, ...props }: IconSvgProps) {
-  return (
-    <SvgIcon
-      {...props}
-      defaultLabel="SendGrid"
-      fill="currentColor"
-      size={size}
-      viewBox="0 0 24 24"
-    >
-      <path d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75Zm.36 2h13.78L12 11.17 5.11 6ZM4 7.6l5.35 4.02L4 16.15V7.6Zm2.08 10.4 4.9-4.16.42.32a1 1 0 0 0 1.2 0l.42-.32 4.9 4.16H6.08ZM20 16.15l-5.35-4.53L20 7.6v8.55Z" />
-      <path d="M17.5 10.25a1 1 0 0 1 1 1v.5h.5a1 1 0 1 1 0 2h-.5v.5a1 1 0 1 1-2 0v-.5H16a1 1 0 1 1 0-2h.5v-.5a1 1 0 0 1 1-1Z" />
-    </SvgIcon>
-  );
-}
-
 function SlackIcon({ size, ...props }: IconSvgProps) {
   return (
     <SvgIcon {...props} defaultLabel="Slack" size={size} viewBox="0 0 128 128">

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -13,7 +13,9 @@
     "./components/*": "./src/components/ui/*.tsx",
     "./icons/codex-icon": "./src/icons/codex-icon.tsx",
     "./icons/google-search-console-icon": "./src/icons/google-search-console-icon.tsx",
+    "./icons/granola-icon": "./src/icons/granola-icon.tsx",
     "./icons/hermes-agent-icon": "./src/icons/hermes-agent-icon.tsx",
+    "./icons/sendgrid-icon": "./src/icons/sendgrid-icon.tsx",
     "./hooks/*": "./src/hooks/*.ts",
     "./icons/svg-icon": "./src/icons/svg-icon.tsx"
   },

diff --git a/packages/ui/src/data-sources/provider-icons.test.tsx b/packages/ui/src/data-sources/provider-icons.test.tsx
@@ -69,6 +69,29 @@ describe("shared provider icon accessibility", () => {
     expect(markup).toContain("<title>Google Search Console provider</title>");
   });
 
+  it("renders SendGrid with the current multicolor brand mark", () => {
+    const markup = renderProviderIcon("sendgrid", {
+      title: "SendGrid provider",
+    });
+
+    expect(markup).toContain('viewBox="0 0 512 512"');
+    expect(markup).toContain('fill="#9DD6E3"');
+    expect(markup).toContain('fill="#00A9D1"');
+    expect(markup).toContain('fill="#3F72AB"');
+    expect(markup).toContain("<title>SendGrid provider</title>");
+  });
+
+  it("renders Granola with the current app icon colors", () => {
+    const markup = renderProviderIcon("granola", {
+      title: "Granola provider",
+    });
+
+    expect(markup).toContain('viewBox="0 0 550 550"');
+    expect(markup).toContain('fill="#B2C248"');
+    expect(markup).toContain('stroke="#1E1E1E"');
+    expect(markup).toContain("<title>Granola provider</title>");
+  });
+
   it("renders AWS Athena Connector as a monochrome icon", () => {
     const markup = renderProviderIcon("aws_athena_connector");
 

diff --git a/packages/ui/src/data-sources/provider-icons.tsx b/packages/ui/src/data-sources/provider-icons.tsx
@@ -2,7 +2,6 @@ import type { SourceProviderId } from "@onequery/db/source-providers";
 import {
   IconDatabase,
   IconHelpCircle,
-  IconNotebook,
   IconTerminal2,
 } from "@tabler/icons-react";
 import type { ComponentType } from "react";
@@ -34,7 +33,9 @@ import {
 
 import { CodexIcon } from "../icons/codex-icon";
 import { GoogleSearchConsoleIcon } from "../icons/google-search-console-icon";
+import { GranolaIcon } from "../icons/granola-icon";
 import { HermesAgentIcon } from "../icons/hermes-agent-icon";
+import { SendGridIcon } from "../icons/sendgrid-icon";
 import {
   SimpleIconSvg,
   SvgIcon,
@@ -210,12 +211,6 @@ function TablerProviderIcon({
   );
 }
 
-function GranolaIcon(props: ProviderIconProps) {
-  return (
-    <TablerProviderIcon {...props} defaultLabel="Granola" Icon={IconNotebook} />
-  );
-}
-
 function HermesIcon(props: ProviderIconProps) {
   return <HermesAgentIcon {...props} defaultLabel="Hermes Agent" />;
 }
@@ -272,21 +267,6 @@ function LinkedInAdsIcon({ size = 24, ...props }: ProviderIconProps) {
   );
 }
 
-function SendGridIcon({ size = 24, ...props }: ProviderIconProps) {
-  return (
-    <SvgIcon
-      {...props}
-      defaultLabel="SendGrid"
-      fill="currentColor"
-      size={size}
-      viewBox="0 0 24 24"
-    >
-      <path d="M4.75 4A2.75 2.75 0 0 0 2 6.75v10.5A2.75 2.75 0 0 0 4.75 20h14.5A2.75 2.75 0 0 0 22 17.25V6.75A2.75 2.75 0 0 0 19.25 4H4.75Zm.36 2h13.78L12 11.17 5.11 6ZM4 7.6l5.35 4.02L4 16.15V7.6Zm2.08 10.4 4.9-4.16.42.32a1 1 0 0 0 1.2 0l.42-.32 4.9 4.16H6.08ZM20 16.15l-5.35-4.53L20 7.6v8.55Z" />
-      <path d="M17.5 10.25a1 1 0 0 1 1 1v.5h.5a1 1 0 1 1 0 2h-.5v.5a1 1 0 1 1-2 0v-.5H16a1 1 0 1 1 0-2h.5v-.5a1 1 0 0 1 1-1Z" />
-    </SvgIcon>
-  );
-}
-
 function SlackIcon({ size = 24, ...props }: ProviderIconProps) {
   return (
     <SvgIcon {...props} defaultLabel="Slack" size={size} viewBox="0 0 128 128">

diff --git a/packages/ui/src/icons/granola-icon.tsx b/packages/ui/src/icons/granola-icon.tsx
@@ -0,0 +1,24 @@
+import { SvgIcon } from "./svg-icon";
+import type { IconSvgProps } from "./svg-icon";
+
+export function GranolaIcon({ size = 24, ...props }: IconSvgProps) {
+  return (
+    <SvgIcon
+      {...props}
+      defaultLabel="Granola"
+      size={size}
+      viewBox="0 0 550 550"
+    >
+      <rect fill="#B2C248" height="550" rx="60" width="550" />
+      <path
+        d="M402 125c-70-31-160-19-226 27-75 52-101 134-74 211 25 72 92 113 178 112 83-1 150-43 177-110 29-72 0-151-69-191-65-37-151-27-198 24-43 47-46 113-7 154 43 45 120 48 167 7 40-35 45-93 11-128-32-33-90-36-124-6-29 25-34 69-10 94"
+        fill="none"
+        stroke="#1E1E1E"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="42"
+      />
+      <circle cx="291" cy="310" fill="#1E1E1E" r="42" />
+    </SvgIcon>
+  );
+}
diff --git a/packages/ui/src/icons/sendgrid-icon.tsx b/packages/ui/src/icons/sendgrid-icon.tsx
@@ -0,0 +1,22 @@
+import { SvgIcon } from "./svg-icon";
+import type { IconSvgProps } from "./svg-icon";
+
+export function SendGridIcon({ size = 24, ...props }: IconSvgProps) {
+  return (
+    <SvgIcon
+      {...props}
+      defaultLabel="SendGrid"
+      size={size}
+      viewBox="0 0 512 512"
+    >
+      <path d="M512 0v341.3H341.3V512H0V170.7h170.7V0z" fill="#9DD6E3" />
+      <path d="M0 512h170.7V341.3H0z" fill="#3F72AB" />
+      <path
+        d="M341.3 341.3H512V170.7H341.3zM170.7 170.7h170.6V0H170.7z"
+        fill="#00A9D1"
+      />
+      <path d="M170.7 341.3h170.6V170.7H170.7z" fill="#2191C4" />
+      <path d="M341.3 170.7H512V0H341.3z" fill="#3F72AB" />
+    </SvgIcon>
+  );
+}